Lesson 1 of 4
Hierarchy – Where the eye lands first
Your eye doesn't read a screen, it gets steered. Hierarchy is choosing where it lands and where it goes next – and the most common way screens fail is refusing to choose.
Look at any screen and your eye lands somewhere first. That isn’t chance – something on the page won the opening bid for your attention, whether or not anyone designed it to. Visual hierarchy is doing it on purpose: ranking what matters, then making the ranking visible, so scanning the page in order of importance takes no conscious effort.
Done well, nobody notices. A user’s eyes flow price → primary action → details as if the page whispered directions. Done badly, everything shouts at once – and when everything shouts, nothing does.
The five levers
Designers steer attention with a small, learnable toolkit – five levers, roughly strongest first:
- Size
Bigger reads as more important. The crudest lever and the strongest.
- Weight
A bold small label can outrank a light large one; weight and size trade off.
- Colour & contrast
A saturated element pulls the eye ahead of a muted one, independent of size.
- Spacing
More room around it, more importance – at identical size and colour. The forgotten lever.
- Position
Top-left and dead-centre get first attention in Western reading; corners get last.
Hover (or focus) each card – it pulls its own lever.
Levers, not rules – they trade off against each other, and the trade-offs are easier felt than described:
Pull the levers
Which element wins the first glance?
The failure mode worth memorising
You’ve already diagnosed this one in the wild: shown two pricing cards in your placement quiz, you picked the right one because “the main action – start free trial – is the primary CTA, while see all features is the secondary”. That’s the whole discipline in one sentence: one screen, one obvious primary.
The most common failure in real products – including a great deal of AI-generated UI – is competing hierarchy: three buttons styled equally loud, five panels all claiming to be the point. It isn’t ugly, which is why it survives review. It’s undecided. The design has quietly outsourced its most important decision to the user.
The “everything shouts” preset above is that failure, reproduced. Notice what the squint test does to it.
Where eyes go when nobody steers them
Eye-tracking research (Nielsen Norman Group is the standard source) finds two recurring shapes when pages don’t take control: F-pattern and Z-pattern. Dense text pulls an F – first lines read fully, then a skim down the left edge, picking up less as it goes. Sparse marketing layouts pull a Z – corner to corner, ending bottom-right, which is why that’s where the action button lives.
Two layouts, two scan paths
Where do eyes actually go?
Text-dense → F-pattern
Sparse marketing → Z-pattern
Treat these as weather, not instructions: they describe where attention drifts by default, so you can either place things along the path or spend hierarchy levers to pull the eye off it. What you front-load – first line, left edge – is what a skimmer actually receives.
Try it on this page
This lesson has been running its own levers on you: one dominant heading, a small accent-coloured kicker that identifies without competing, secondary text genuinely muted, and the demos isolated by space – that isolation is the spacing lever at work (much more on that in the grouping lesson).
Claims like that should be checkable:
This page practises it:This page's own header runs the levers it names – small muted kicker, one dominant heading, quiet lede – and the squint test at the end blurs the whole page to prove the hierarchy survives.