Visual hierarchy

Every page has a hierarchy whether anyone designed it or not. The eye goes to the biggest, boldest, most contrasting thing first, then follows whatever order the layout suggests. Visual hierarchy is the discipline of making that order match your priorities: the headline, then the key proof, then the action you want taken.

It is often confused with making things big. If everything is large, bold and colourful, nothing stands out and the page reads as noise. Hierarchy works through contrast between levels, which means some things must be deliberately quieter.

How it works

Designers use a small set of tools. Size and weight separate headings from body text through clear steps in typography. Colour and contrast pull attention, which is why the main button is often the only strongly coloured element in its area. Position matters because readers of left-to-right languages tend to start scanning at the top left, and white space groups related items while separating sections.

A useful check is the squint test: blur your eyes or the screenshot until the text is unreadable and see which shapes still stand out. Those are what visitors notice first.

Hierarchy also changes with screen size. On a desktop, a headline, an image and a button can sit side by side; on a phone they stack, and whatever comes first in the stack is seen first. So designers check the order on narrow screens separately, and make sure the visual order matches the order of headings in the code. A page whose visual order and code order differ can confuse keyboard and screen reader users, who follow the code.

Example

A cleaning company's home page shows the logo, a large photo, four equally sized service boxes, a phone number in small text and a Get a quote button in the same grey as the boxes. Visitors scroll past without acting. The redesign makes the headline the largest text, places the starting price and review rating directly below it, and turns the quote button into the single bright element on the screen. The content barely changes; the order in which it is noticed does.

On phones, the old layout put the large photo first, so visitors saw a picture of a sofa and a menu icon before any words. The new mobile order is headline, starting price and rating, button, then photo. The company checks it with a five-second test: a few people see the new page briefly and are asked what the business does and what they would tap. If most can answer both, the hierarchy is working; if not, the order changes again.

Why it matters for your business

Visitors decide quickly whether a page is relevant, and they act on whatever the page makes obvious. Clear hierarchy puts your value proposition and next step where they will be seen, which supports enquiries without extra traffic. It costs nothing to get right while designing and little to fix later. The trade-off is that you must choose priorities: a page that promotes six offers equally will promote none of them well.

Common mistakes

• Giving every section the same visual weight, so nothing signals what matters most.
• Using several bright colours for decoration, which competes with the main call to action.
• Making secondary links and buttons look identical to the primary one.
• Burying the phone number or booking button below long introductions.

Questions people ask

What are the main principles of visual hierarchy?

The main levers are size, colour, contrast, alignment, proximity, white space and position on the page. Larger, darker or more saturated elements draw attention first; items placed close together are read as related; and generous space around something makes it stand out. Used together and sparingly, they set a clear reading order.

How do I test the visual hierarchy of my website?

Try the squint test on a screenshot, or show the page to someone for five seconds and ask what they remember and what they would click. If their answers do not match the message and action you care about, the hierarchy needs work. Heatmaps and click data on the live site give a larger sample.

Does visual hierarchy affect accessibility?

Yes. The visual order should match the order of headings and content in the code, because screen reader users move through headings rather than seeing size and colour. Proper heading levels, meaningful link text and enough contrast make the hierarchy work for people who cannot see the visual version.