Spacing Over Cards | Hacker News Reader

Spacing Over Cards

smagin.fyi

43 pointssmagin10 comments

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.

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.

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.

hm, I sort of agree with the train of thoughts but not with the conclusion. Maybe it's "is my blue your blue" situation. I talked to people while working on this post and some said e.g. grid with cards is way easier to them to scan through than grid without cards; other people feel the opposite and complain about too many things on the page that are not content. I'm in the latter category, but wondering if I could make an experiment, or if anyone made it already.

Thanks for getting me thinking this way.

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.

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?

author here (not super educated either). That's part of the idea — when cards are removed it becomes obvious that tags become the most noticeable part while not being the most (or any) important one. When you look at the cards you see cards and _something_ inside them.

So maybe if this post was in less flame-provoking tone I'd suggest trying to add cards back and see if it makes it better. It might, on landings there is a good chance it will.

I think modern websites tend to be especially overloaded with cards. Maybe tools like Claude Code just really love cards. That said, I don’t believe card-free design is always better either. For example, subscription pricing pages often use cards effectively — they make the options much clearer.

yup, that's a good part of the page to stand out, when I've seen all the landing page can show and now it nudges me to try the app out

Took me quite a while into the article to understand what they meant by "card". A quick screenshot or something at the start would help.

Reply on news.ycombinator.com