←back to thread

Spacing Over Cards

(smagin.fyi)
43 points smagin | 1 comments | 31 Aug 25 13:49 UTC | HN request time: 0s | source
Show context
CognitiveLens ◴[31 Aug 25 21:49 UTC] No.45087415[source]▶
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.

replies(1): >>45091382 #
1. smagin ◴[01 Sep 25 10:21 UTC] No.45091382[source]▶
Thanks for the information hierarchy / conceptual boundaries distinction, makes sense. I didn't know the latter term but tried to describe it in the last section of the post, nice to have a name now.

There are apps and sites that manage to keep the number of cards at min, one is selfridges (not an ad, was just open in another tab), another is firefox settings. MacOS Finder does a good job at grouping things with spacing, and macos generally. iOS seems to put everything on cards, at least nowadays.