I start all my UI projects with this principle, but it's extremely difficult to maintain as screens evolve. I want typography-driven interfaces with structure communicated through headings and spatial grouping, but I usually end up with far more borders and nested padding than I think is "right" as I run into the limits of whitespace as an organizing structure, particularly when the audience has a limited attention span or time to engage.
From experience, borders/cards help communicate conceptual boundaries, while whitespace helps communicate information hierarchy - Gestalt principles don't really address that distinction. For product or data-driven UI where a lot of loosely-related information/topics are shown in discrete parts of the page, cards are effective at high-level grouping. For content-driven UI, whitespace can be sufficient, and I think the article makes this clear.
Other than 'The Ultimate Developer Toolkit' (where type size is more of an issue than the card layout), I actually think the card-based version of each example layout is more compelling - easier to scan, and easier to 'chunk' - despite wanting the typography-and-whitespace alternative to be sufficient.
interstice · 2h ago
I may have built too many websites to be able to have a casual opinion, buut I find the card versions in the example much quicker to scan. The changed versions would need a lot more padding than the card example to give the same effect of the information being unrelated to each other, and in the process lose the density argument.
Conceptually to me it's a bit like framed art in a gallery, the frame is a "consider this on it's own" signal, inviting me to not try to hold everything else in the room in my head simultaneously just in case it's relevant.
My personal preference for power user interfaces wrt to the issues in the article is to still have hierarchical design with cards etc for scanning, but with less padding, smaller fonts etc. Non interface web design is a different creature entirely, and arguably information density tends to be a lot less relevant on those vs other aspects like typographic choices and copywriting.
NikxDa · 48m ago
I personally find the revised designs the author proposes worse than the originals. Sure, the extra space allows larger text and icons, but the overall design quality starts lacking in my opinion.
Maybe I am conditioned to like cards by their excessive use in existing designs, but it might also just be that cards look better, and therefore make the product appear more polished and the site more inviting to use and read. It might not be the most minimal possible design, but a site being pretty is great if functionality doesn't suffer.
c54 · 2h ago
I like a lot of the redesign suggestions but how much of that is a result of cards vs no-cards. For example removing the tags and using colored words ("privacy") could still be a good move while keeping cards.
I'm not super educated as a UI designer though can someone help me better understand the distinction?
From experience, borders/cards help communicate conceptual boundaries, while whitespace helps communicate information hierarchy - Gestalt principles don't really address that distinction. For product or data-driven UI where a lot of loosely-related information/topics are shown in discrete parts of the page, cards are effective at high-level grouping. For content-driven UI, whitespace can be sufficient, and I think the article makes this clear.
Other than 'The Ultimate Developer Toolkit' (where type size is more of an issue than the card layout), I actually think the card-based version of each example layout is more compelling - easier to scan, and easier to 'chunk' - despite wanting the typography-and-whitespace alternative to be sufficient.
Conceptually to me it's a bit like framed art in a gallery, the frame is a "consider this on it's own" signal, inviting me to not try to hold everything else in the room in my head simultaneously just in case it's relevant.
My personal preference for power user interfaces wrt to the issues in the article is to still have hierarchical design with cards etc for scanning, but with less padding, smaller fonts etc. Non interface web design is a different creature entirely, and arguably information density tends to be a lot less relevant on those vs other aspects like typographic choices and copywriting.
Maybe I am conditioned to like cards by their excessive use in existing designs, but it might also just be that cards look better, and therefore make the product appear more polished and the site more inviting to use and read. It might not be the most minimal possible design, but a site being pretty is great if functionality doesn't suffer.
I'm not super educated as a UI designer though can someone help me better understand the distinction?