Visual hierarchy

Visual hierarchy is the order in which the eye moves through a page, set by size, contrast, colour, position and space. Good hierarchy leads the visitor from the headline to the call to action.

Why it matters

Visitors scan before they read. If the most eye-catching element is a decorative image or a secondary link, the message and the main action get missed, however good the copy is.

How to get it right

  • Decide the reading order: headline, subline, call to action, proof.
  • Make the headline and the primary CTA the strongest elements on the first screen.
  • Use space to separate sections, not just lines and boxes.
  • Squint at the page: what stands out should be what matters.

Common mistakes

  • Several elements competing at the same visual weight.
  • A product screenshot so dominant the headline is skipped.
  • Low-contrast text that looks elegant and can't be read.
Design review: where the eye lands first

Related terms