Visual hierarchy basics

01What hierarchy does

Visual hierarchy is the order in which the eye notices things on a screen. When it works, people see the main message first, then supporting details, without effort. When everything shouts, nothing stands out. Aim for one primary focus per screen.

02Five levers

• Size

  Larger elements attract attention first.

• Weight

  Bold text reads as more important than regular text.

• Contrast and colour

  Strong contrast and a single accent colour draw the eye.

• Spacing and grouping

  White space isolates an element; proximity groups related ones.

A fifth lever is position and alignment: elements near the top or aligned to a strong edge tend to be noticed earlier. Reading patterns such as the F-shape or Z-shape describe tendencies, not laws, so content and layout always matter more.

Levers combine. A heading can be larger and bolder and have more space above it, but each extra lever should have a reason. Start with size and spacing, which are the quietest, then add weight or colour only if the hierarchy is still unclear.

03The squint test

Squint at a design, or blur it, until text becomes unreadable. What still stands out is the real hierarchy. If the wrong element wins, adjust the levers until the intended focus is the first thing visible.

Remove before you add. Taking emphasis away from competing elements often works better than making the main one louder.

04A before and after, and common mistakes

Before: a pricing card has a bold title, a bold price, three bold feature names and a bright button, all in similar sizes. After: the price is the largest element, the title is regular weight, feature names are plain text in a muted colour, and only the button uses the accent colour. The eye now moves from price to button.

1. Name the one thing that matters most on the screen.
2. Give it the strongest lever, usually size or contrast.
3. Mute competing elements.
4. Run the squint test.

Hierarchy usually breaks in the same few ways. Knowing them makes the fix quicker.

• Too many bold elements: when everything is emphasised, nothing is.
• Two competing primary actions of the same size and colour.
• Equal spacing everywhere, so related and unrelated items look the same.
• Relying on colour alone to mark importance, which fails for people with colour vision deficiency.

Check hierarchy again after content changes. A long title or a translated label can shift the balance of a layout that looked perfect with sample text.

05Sources

• Nielsen Norman Group. Visual Hierarchy in Web Design (article). https://www.nngroup.com/articles/visual-hierarchy-ux-definition/