Visual hierarchy

Every screen makes a claim about what matters most. Visual hierarchy is how you make that claim deliberately instead of by accident.

The tools, in order of strength

When two elements compete, the one that wins is usually decided in this order:

1. Size — the bluntest instrument. Bigger reads first.
2. Weight — bold text outranks regular at the same size.
3. Colour and contrast — high contrast pulls the eye; low contrast recedes.
4. Space — isolation creates importance. An element with room around it reads as separate and significant.
5. Position — top-left first in left-to-right reading cultures, but this is weaker than people assume.

Space is the one students skip

Size and colour are obvious, so beginners over-use them and end up with a screen where six things all shout. Space costs nothing visually and is usually the fix.

One primary action

A screen should have exactly one element that is clearly the most important. If you cannot point at it in half a second, neither can your user.

Flat — everything competesHierarchy applied

⇄

Drag to compare. Same content, same colours — only size, weight and spacing changed.

The squint test

Step back from your screen and squint until the text becomes unreadable shapes. What still stands out is your actual hierarchy. If the wrong thing survives — or if everything survives equally — you have work to do.

This is faster and more honest than asking a friend, because it removes your ability to read the content and be reassured by it.

Grouping

Related things should look related. Two labels that belong to the same field should be closer to each other than to anything else. This sounds trivial and is responsible for a large share of “this form feels confusing” reactions.

The rule of thumb: the space between groups must be visibly larger than the space within a group. If they are equal, the grouping does not exist.

Check your understanding

3 questions · self-check, not graded

1A form has 16px between every element — between a label and its input, and between separate fields. What is the likely effect?

AIt looks clean and consistent, which is idealBUsers cannot tell which label belongs to which inputCThe form will fail contrast requirementsDNothing — spacing does not affect comprehension

2You squint at your design and three elements remain equally prominent. What does this tell you?

AThe hierarchy is working well — three levels is idealBThere is no clear primary element, so users must decide for themselvesCThe contrast is too highDYou need to add more colour

3Which change would most reliably make a primary button stand out, assuming the layout is otherwise unchanged?

AAdding a drop shadow to every buttonBMaking all buttons slightly largerCGiving the primary button a filled accent colour and the others a plain outlineDMoving all buttons to the top of the screen