Every page makes an argument about what matters most, whether anyone planned it or not. The biggest headline, the brightest button and the photo with a face in it all compete for the first second of a visitor’s attention. Visual hierarchy in web design is the craft of deciding who wins.
When it works, nobody notices. When it fails, the page feels either cluttered or flat, and people leave without saying why. This guide is for people who review designs rather than make them: the words to explain what feels wrong, two quick tests and the usual fixes.
What is visual hierarchy in web design?
Visual hierarchy is the order in which people notice, read and act on the parts of a page, set deliberately through size, weight, colour, spacing, position, alignment and imagery.
Most well-designed pages work on three levels:
- Primary: the one thing on each screen that matters most, usually the main headline or the main action.
- Secondary: a few things that support it, such as section headings, key proof and a quieter second option.
- Tertiary: everything people use once they’ve decided to stay, from body text to the footer.
The hard part isn’t styling but agreeing what the primary thing is. If nobody can name it, no design can show it, so hierarchy starts with strategy and content rather than fonts. It’s also where UX and UI design meet: deciding what matters is a UX question, and making it look like it matters is a UI one.
How people actually look at a web page
People rarely read web pages top to bottom. They scan for signs they’re in the right place, then read closely. Nielsen Norman Group (NN/g) has studied this with eye-tracking for years, and a few of its findings are worth knowing.
The F-pattern is a warning sign, not a goal
NN/g first reported the F-pattern in 2006: a sweep across the top of the content, a shorter sweep lower down, then a scan down the left edge. Its 2017 follow-up found the pattern still turns up, on phones as well as desktops.
It isn’t a layout to design towards. It’s what people fall back on when they want the gist quickly and the page offers nothing better to follow, such as long text without headings, bold phrases or lists. The lesson: the first words of headings, paragraphs and list items carry most of the weight, and anything at the end of a long line is easily missed.
The layer-cake pattern is what good headings earn
Here the eyes jump from heading to heading and drop into the text only when a heading promises something relevant. Short of reading every word, NN/g calls it by far the most effective way to scan a page, but it only happens when headings stand out and actually say something. “Our approach” gives a scanner nothing; “Fixed prices, agreed in writing” does.
The spotted pattern: hunting for specifics
Looking for a price, a phone number or an address, people skip whole chunks of the page. Make those things look like what they are.
Left-leaning attention and banner blindness
In left-to-right languages, attention leans towards the left of the page; NN/g sees the pattern mirrored on sites in right-to-left languages. If your site runs in several languages, check the hierarchy in each one. People also learn to ignore anything that looks like an advert (NN/g calls it banner blindness), so a loud, boxed promotion can be the one thing nobody sees.
Visual hierarchy principles: the seven levers
Designers set the order of a page with seven main levers. Each works through contrast with its surroundings: a large heading only looks large next to smaller text.
1. Size
The largest element is usually seen first, but the difference between levels is what counts. A heading barely larger than body text leads nothing. A consistent type scale, covered in our guide to web typography for business websites, keeps every level distinct.
2. Weight
Bold works because it’s rare. Bold one key phrase and the scanner finds it. Bold every other sentence and you’ve just made the paragraph darker.
3. Colour and contrast
Contrast in web design depends on restraint. Keep one accent colour for actions and links; if the brand colour also covers headings, icons and backgrounds, the button stops standing out.
There’s also an accessibility floor. At Level AA, WCAG 2.2 asks for a contrast ratio of at least 4.5:1 for normal text, 3:1 for large text, and 3:1 for the visual parts people need to identify controls, such as the border that shows where a form field is. It also says colour mustn’t be the only way to convey meaning. The guide to colour contrast and readable text has the detail.
4. Spacing and white space
White space in web design groups and isolates. Things placed close together read as related, so a heading should sit closer to its own section than to the one above. An element with generous space around it looks more important than the same element squeezed into a row.
Check it yourself. Compare the gap above and below each heading. If they’re equal, the heading floats between sections and the grouping is lost.
5. Position and order
What sits near the top (and, in left-to-right languages, the left) tends to be seen first. On a phone, columns collapse into one, so the order becomes the hierarchy. A side panel that sat quietly on desktop can land above your main message on mobile, one reason to design for phones first.
6. Alignment and grouping
A strong left edge gives the eye a line to follow. Breaking alignment on purpose, with a pulled-out quote or a full-width band, draws attention; breaking it by accident adds noise.
7. Imagery and motion
Photos, especially of faces, pull attention hard, so a big hero image can overpower the headline beside it. NN/g’s eye-tracking found people ignore purely decorative images and look closely at ones that carry information, such as real products and real staff. Movement is harder still to ignore, so keep it away from anything you need people to read.
| Lever | Raises importance when | Common misuse |
|---|---|---|
| Size | The step between levels is clear | Headings nearly the same size as text |
| Weight | Bold is rare | Whole paragraphs in bold |
| Colour and contrast | The accent is kept for actions | Brand colour on everything |
| Spacing | Space groups and isolates | Equal gaps everywhere |
| Position | The key message comes first on every screen | Side content stacking above it on phones |
| Alignment | There is one strong edge to follow | Near-misses and random centring |
| Imagery and motion | Images carry information | Busy photos behind text, rotating slides |
One primary action per view
The most useful hierarchy rule for business websites: each screen-sized view should have one clear primary action, and everything else should look quieter.
That isn’t one call to action per page: the same action can, and usually should, return after the proof that makes it convincing. Two identical buttons side by side, “Get a quote” and “Download brochure”, make visitors decide about the page before they’ve decided about you. Psychologists call the underlying effect Hick’s law: the more options people weigh, the longer they take to choose.
In practice:
- Make the primary action a solid button in the accent colour.
- Style the secondary option as an outline button or a text link.
- Move any third option to the navigation or further down the page.
If you serve two different audiences, lead with the one that matters most to the business and give the other a clear route lower down or in the menu. Our guide to call to action best practices covers wording and placement.
Make the code agree with the design
Visual hierarchy is also document structure. What looks like the main heading should be the page’s H1, section headings H2s, sub-points H3s. Heading levels shouldn’t be chosen for their size; that’s what styling is for.
Many screen reader users move through a page by jumping between headings, and WCAG (success criterion 1.3.1, Info and Relationships) requires structure shown visually to be available in the code too. Search engines and AI search tools can also use headings to understand how a page is organised and which passage answers which question. When look and markup agree, the page is easier to scan, navigate and quote, one reason design and development work best as one job.
Two quick tests for your own pages
The squint test
Squint until you can’t read the text, or blur a screenshot in any image editor. With the words gone, only shape, size and contrast remain, roughly what a scanner takes in at first glance. Then check:
Try it on desktop and phone screenshots; they often disagree.
The five-second test
Show the page for five seconds to someone who hasn’t seen it before. Hide it, then ask:
- What does this company do?
- Who is it for?
- What would you do next?
- What do you remember?
If the answers don’t match what the page should say, the hierarchy, the headline or both need work. A few people from your target audience beat a room of colleagues. For a deeper look at how visitors complete real tasks, see what a website UX audit checks.
Turning the results into useful feedback
“Make it pop” describes a feeling. “When I squint, the testimonial slider is the first thing I see, and I expected the quote button” describes a problem a designer can solve. Give feedback about priorities, not pixels: say what should be seen first, second and third, and let the designer choose the levers.
Common visual hierarchy failures, and how to fix them
Everything is emphasised
Bold in every paragraph, three accent colours, capitals on every heading. When everything is emphasised, nothing is.
The fix. Choose the one thing per section that deserves emphasis and strip it from the rest. It will feel too plain at first; that’s the hierarchy starting to work.
Buttons that compete
Two or three solid buttons in the hero, plus a chat bubble, a cookie notice and a sticky offer bar, all asking for the same moment.
The fix. One primary action per view, quieter secondary options, and nothing floating or sticky that covers the main action.
Rotating carousels
Carousels give every department a spot at the top of the homepage, which is the problem. Movement pulls the eye from the headline, text changes before it can be read, and quick scrollers may never see the slide that mattered. Auto-playing carousels also fall under WCAG’s Pause, Stop, Hide rule: moving content that starts on its own, lasts more than five seconds and sits alongside other content needs a way to pause, stop or hide it.
The fix. Pick one message for the top of the page and give the others their own sections. The guide to homepage design covers what belongs there.
The photo wins, the headline loses
A striking image behind thin, low-contrast text. Visitors remember the picture, not the message.
The fix. Put the headline on a solid or shaded background, move it off the busiest part of the image or choose a calmer photo, then measure the contrast rather than trusting your eye.
What to do next
Visual hierarchy isn’t decoration added at the end. It’s strategy made visible: what the business needs to say, in an order people take in at a glance. It works best when content, design and code share the same priorities, as our guide to what makes a good website explains.
Start small: run both tests on your homepage and your main service page, and note what people saw first.
If nothing stands out, or the wrong thing does, our website design and development work starts with that question: what each page must say first, and how to make sure visitors see it. For an outside view of your current site first, ask for a free website audit.