What you'll understand by the end of this lesson
- Why the eye follows a designed order on a page — or invents one
- The four properties that create visual hierarchy: size, colour, contrast, and position
- How hierarchy failures cost conversions before a visitor has read a single word
- How to audit your pages for hierarchy problems
The principle in plain English
When a visitor lands on your page, their eye doesn't start at the top left and read every element in order. It scans. Within fractions of a second, it picks out the elements with the highest visual weight and processes them first.
Visual hierarchy is the intentional design of that scanning order. The goal is to make the eye move through the page in the order that's most likely to produce understanding — and ultimately action.
If you don't design visual hierarchy deliberately, one still exists. It's just determined by accident — by whatever ended up with the most contrast, the largest size, or the boldest colour. And if those accidentally prominent elements are the wrong ones, visitors are absorbing the wrong message before they've read anything intentional.
A simple example
Imagine a landing page where the footer social media icons are large, brightly coloured, and placed prominently. The hero headline is in plain grey text, the same size as the body copy. The CTA button is outline-only and blends with the background.
Nobody designed this page to send visitors to social media. But visually, that's where the eye goes first. The hierarchy says: "the social icons matter most." Everything else is background.
This sounds extreme — but subtler versions of this are everywhere. Navigation links that are larger or bolder than the headline. Disclaimers in a colour that draws more attention than the CTA. Background patterns that compete with the copy for visual weight.
The four properties of visual hierarchy
Size
Larger elements are noticed first. This is the most direct lever. A headline set at 48px will be processed before body copy at 16px. A section heading at 24px will be processed before a paragraph at 16px.
Size is the primary tool for communicating "this is the main thing." If your headline and your subheadline are visually close in size, the visitor has to read both before they can determine which is the primary message. The hierarchy should do that work for them.
Colour and contrast
High-contrast elements attract attention before low-contrast ones. A blue button on a white page stands out. A blue button on a blue page doesn't. A bright red error message on a grey form is noticed immediately. The same message in grey text is missed.
Colour hierarchy matters not just for buttons but for the whole page. If the dominant colour on a landing page is your brand's dark navy, used in hero backgrounds, navigation, and footer, a CTA in that same dark navy doesn't stand out — even if it's styled as a button. Contrast is what signals importance, not just the element type.
Position
Elements at the top of a page are noticed first — both because users scroll top-to-bottom and because of the F-pattern and Z-pattern reading behaviours observed in eye-tracking research.
The F-pattern: users scan the top of a page horizontally, then move down the left edge, creating an F-shaped reading path. Elements on the left and top get the most attention. Elements on the right and bottom get less.
The Z-pattern: on pages with less text and more visual content, the eye traces a Z — starting top-left, moving across, cutting diagonally, then moving across the bottom. Landing pages often follow this layout intentionally: logo top-left, CTA top-right, headline centre-left, CTA again bottom-right.
Typography weight
Bold, heavy, or distinctive type commands attention before regular weight text. Using bold or a heavier typeface to differentiate the most important claim from surrounding copy is a simple hierarchy tool that's often underused.
One quick test for hierarchy: take a screenshot of your landing page and squint at it until it blurs. What do you still see? What are the dominant shapes and colours? If the answer is "the hero image and some icons but not the headline or CTA," your hierarchy is working against you. The squint test reveals what has the most visual weight — which is what visitors process first before they read anything.
When everything is equally important, nothing is
The most common hierarchy failure isn't a single element that's too prominent. It's a page where everything has been given equal visual weight.
A pricing page where every tier card has the same size heading, the same list styling, the same button style, and the same amount of padding. A service page where every service is listed in the same sized card, same font size, same colour. A hero section where the headline and the subheadline and the body paragraph are all similar in visual weight.
When everything is equally important, the visitor has to do the work of deciding what matters. They impose their own hierarchy — which may mean they start with the detail that concerns them most rather than the message you most want them to receive.
Adding visual emphasis to too many elements cancels the hierarchy out. If five things on a page are bold, large, and brightly coloured, they're all competing — and none of them win. Hierarchy requires contrast between the prominent and the subordinate. The primary element needs secondary elements to make it primary.
The CRO audit
Look at your primary landing pages and ask:
1. Apply the squint test to your hero section.
Blur your vision on the hero. What are the first three things you notice? Are they: headline, subheadline, CTA? Or are they: background image, navigation bar, footer icons? If the CTA isn't in your top three noticed elements at a glance, your hierarchy is working against conversion.
2. Are your headline and subheadline visually differentiated by size?
If the size ratio between headline and subheadline is less than 1.5×, they're likely competing. The headline should dominate clearly. The subheadline should be visibly subordinate. The body copy should be subordinate to both.
3. Does your CTA have the highest contrast-against-background ratio of any interactive element on the page?
Check your CTA button against the navigation links, the in-text links, and the footer links. Your CTA should be the highest-contrast interactive element on the page. If a navigation link has more contrast against the background than your CTA, the hierarchy is inverted.
A landing page hero section has: a full-width background video (high visual movement), a headline in white text at 28px, a subheadline in white text at 22px, and a ghost CTA button (white outline on the video). What is the hierarchy problem?
You've learned how hierarchy tells the eye which element is most important. But the eye doesn't just notice — it follows. What makes the eye travel from one place to another on a page, and how do you direct that movement toward the things that matter?