Whitespace & Alignment: Most Ugliness Is Spacing
"I can't say what's ugly—it just is." That review is about spacing eight times out of ten. Leave color and type alone; straighten spacing, and the UI jumps a tier. This lesson gives you two rules and a ready-made number table.
Spacing has two rules. Proximity: related elements sit close; unrelated ones sit apart—readers use distance to judge "what's a group." Consistency: same level, same spacing. If cards are 16 apart, they're 16 everywhere. What's left is "which number?"—answer: an 8pt grid. Pick spacing only from 8, 16, 24, 32. Stop agonizing over 13 vs 15; fewer options make consistency automatic. The grid is also great AI vocabulary: saying "all spacing on an 8pt grid" beats "make it nicer" by a mile.
Same signup form—not one word of content changes, only spacing. Drag the slider from 4px to 32px and feel the trip from "cramped lump" to "breathing room."
About Face 4 puts proximity on a clear pixel ledger: icons in a toolbar group sit 4px apart; groups sit 8px apart—and grouping holds without a single border. Cooper also calls out the anti-move: many UIs are wall-to-wall boxes, sometimes fencing even one or two elements. Clumsy grouping, plus visual noise. Same toolbar, two grouping methods—switch and feel it.
"8pt grid" sounds like industry jargon; the origin is plain. About Face 4 on grid systems names an atomic grid unit—the smallest spacing on a UI. In a careful grid, distances between elements and groups are integer multiples of that atom. Set the atom to 8 and page spacing only hits 8, 16, 24, 32. Multiples of each other let the eye read order—that's the skeleton of the breathing room in the last slider.
| What the grid buys | How it buys it |
|---|---|
| Usability | Element positions become predictable—readers don't re-hunt title and button on every screen |
| Beauty | Multiples create order—you can't name why it looks good, but you can tell someone cared |
| Efficiency | "How much gap here?" stops being a per-spot argument—dozens of spacing decisions collapse into one |
Those three gains are About Face 4's summary of grid systems. Same when you prompt AI: lock the atom first (all spacing multiples of 8) and you cut dozens of free-style chances.
The settings page below looks fine at first; look closer and three spots are misaligned. Tap wherever feels off—hits light up with an explanation.
What ratio for cards and columns? About Face 4 first offers two proven candidates: the golden ratio (~1.61) and √2 (~1.41, A4's ratio). But it stresses another line harder: ratios must be crisp. Almost a square—no. Nearly a golden rectangle—also no. Either land exactly or pull clearly apart. A ratio stuck in the middle leaves readers vaguely uneasy, with no words for why.
Eyes read screens with inertia: top-left to bottom-right. About Face 4 calls layouts that ride that inertia a logical path: eye from title to content to button, no U-turns. It adds a principle that's easy to misread: perfect symmetry often lacks depth; balanced asymmetry gives the screen a visual entry. Below: one signup page, two layouts.
Can't name the ugliness? Check spacing first. Proximity handles grouping (related things close); consistency handles order (same level, same spacing).
Group with spacing first: 4px inside a group, 8px between groups is enough—no borders. Save borders for when you truly must fence.
Under the 8pt grid is an atomic unit: pick a minimum spacing, take multiples everywhere, consistency arrives on its own. You can drop that word straight into an AI prompt.
Ratios must be crisp: 1:1, √2, golden ratio all fine—"almost square" hurts most. Either erase the difference or pull it clearly apart.
Alignment is the cheapest premium feel. Before shipping, spend two minutes: straighten left edges, icon baselines, button gaps—then walk the eye path from top-left to bottom-right.
Source: Original to Xiaoshan Academy's Taste Engineering series; some principles adapted from About Face 4: The Essentials of Interaction Design, chapter 17 (Alan Cooper et al.).