layout-and-composition
Layout & Composition
Composition is the deliberate arrangement of elements so the eye lands where you want, groups what belongs together, and never has to guess what matters. Hierarchy is the what; layout is the where. This skill is the bible for both. Apply it to any screen — marketing page, dense dashboard, settings form, mobile flow.
1. Visual hierarchy — ranking the eye's path
The eye does not read a screen top-to-bottom; it ranks elements by salience and jumps to the loudest. You control the ranking with these levers, roughly in order of power:
| Lever | How it raises rank | Watch out for |
|---|---|---|
| Size / scale | Bigger = more important. The strongest, fastest signal. | One hero only. Two "biggest" things = no hero. |
| Weight | Bolder text/heavier shapes advance. | Don't bold everything — bold loses meaning if overused. |
| Color & saturation | Saturated/warm advances; muted/cool recedes. One accent = one action. | Color alone fails for ~8% (colorblind) + low-vision. Pair with shape/text. |
| Contrast | High contrast vs background pulls focus. | Body text needs ≥4.5:1; large/UI ≥3:1 (WCAG AA). |
| Position | Top-left (LTR) reads first; center = focal; corners = utility. | Don't bury the primary action below the fold. |
| Whitespace / isolation | Space around an element isolates it → it reads as important. | The single most underused lever. |
Establish three tiers explicitly. Primary (the one thing — hero, the CTA), secondary (supporting — subhead, secondary buttons), tertiary (metadata, captions, legal). If you can't point at the one primary element, the screen has no hierarchy. A focal point is created by contrast against context: a saturated button on a calm page, a large number on a card of small labels. Isolation beats decoration — give the focal point room before you give it a glow.
Don't stack levers redundantly. Size and weight and color and a box on the same element is shouting — the eye can't rank four equally-loud things. One or two levers per tier is enough: a heading earns rank from size alone; a CTA from color + isolation. Reserve the loudest combination for the single primary element so it has nothing to compete with.