Visual Hierarchy: Guiding the Eye Through a Layout
Learn how size, contrast, colour and space guide the eye, with a simple squint test you can use on any layout or painting.
Open any well-designed poster, page or painting and your eye knows where to go first, where to go next and where to rest. That order is called visual hierarchy, and it is one of the most useful ideas in design. You do not need software or a degree to use it. A few simple tools and a bit of squinting will take you a long way.
What visual hierarchy means
Hierarchy is the arrangement of elements so that some read as more important than others. A headline outranks a caption; a focal figure outranks the background. Without it, everything competes at the same volume and the viewer has to work out what matters. With it, the message arrives almost without effort.
The main tools
Designers rely on a handful of levers:
- Size: larger elements draw attention first.
- Contrast: a dark shape on a light ground, or a bright accent among muted tones, stands out.
- Colour: saturated or warm colours tend to advance, while soft, cool ones recede.
- Position: in Western reading cultures, elements near the top left of a page are typically noticed early, and the centre of a layout holds natural weight.
- Spacing: isolating an element with generous space around it gives it emphasis.
You rarely need all of these at once. Often a single strong contrast is enough.
A step-by-step way to build hierarchy
- List every element in your layout and rank them from most to least important.
- Give the top-ranked element the strongest treatment, whether that is size, colour or placement.
- Group related items close together, and separate unrelated ones with space.
- Reduce the emphasis of everything else until it supports rather than competes.
- Step back and squint, or view the layout at thumbnail size, to see what survives.
The squint test
Squinting blurs detail and leaves only large shapes and tonal contrasts. If the thing you want people to see first is still visible, the hierarchy is working. If two competing blobs fight for attention, one needs to be quieter. The same test works on paintings, where it helps you check that the focal point is clearly the focal point.
Common mistakes
Beginners often emphasise everything: bold, large, coloured and underlined all at once. This has the opposite effect to the one intended, because when everything shouts, nothing is heard. Another frequent slip is inconsistency. If one subheading is large and red while the next, equally important one is small and black, readers cannot tell how the information is organised. Choose a system and stick to it.
Try it on something familiar
Take a flyer or a page from a magazine and sketch it as three levels: primary, secondary and tertiary. Then redraw the layout with a different element as primary. Notice how the meaning of the page shifts. This exercise takes ten minutes and teaches more than a long chapter of theory.
Frequently asked questions
Does hierarchy apply to paintings as well as graphic design? Yes. Painters use value, colour and edge sharpness to guide the eye to a focal point, which is hierarchy by another name.
How many levels of hierarchy do I need? Most layouts work well with three: a primary, a secondary and supporting detail. More than that can feel cluttered.
Do I need to use big type to create emphasis? No. Contrast, colour and space can do the job just as well, and sometimes a quiet element surrounded by blank space is the most noticeable thing on the page.
Steps
- Rank your elements: List every element in the layout and rank them from most to least important.
- Emphasise the top item: Give the most important element the strongest treatment through size, colour or placement, and quieten everything else.
- Squint to check: Step back and squint, or view the layout at thumbnail size, to see whether the key element still stands out.