In this article · 7 sections
When someone opens a web page, they don't start reading from the top-left. Their eyes jump to whatever stands out most, then move to the next most prominent thing. Visual hierarchy is the arrangement of elements so that the most important things are noticed first. Get it right, and visitors understand your page in seconds.
The questions hierarchy should answer
On any page, a visitor wants to know, in order: 1. What is this? (headline) 2. Is it for me? (supporting line, image) 3. What should I do? (main button) 4. Why should I trust it? (proof, details)
Your design should make these answers stand out in that order.
The tools of hierarchy
1. Size
Bigger elements are noticed first. Your main headline should be clearly the largest text. A common mistake is making everything big, which makes nothing stand out.
2. Colour and contrast
A bright or contrasting colour draws the eye. Reserve your strongest accent colour for the main action (Call, Book, Buy). If every button and heading uses it, it stops working.
3. Weight
Bold text stands out from regular text. Use bold for key words, not entire paragraphs.
4. Position
People generally scan from top to bottom and, on desktop, often left to right. The top of the page and the start of lines get the most attention. See above the fold.
5. Spacing
Space around an element isolates it and makes it more noticeable. A button with generous space around it gets more attention than one squeezed between other links. See white space in web design.
6. Imagery and faces
Photos, especially of people, attract attention. Faces looking toward your headline or button can subtly lead the eye there.
Common scanning patterns
- F-pattern: on text-heavy pages, people read the first lines, then scan down the left edge. Put key words at the start of headings and paragraphs.
- Z-pattern: on simple pages with little text, the eye moves top-left → top-right → diagonally → bottom-left → bottom-right. Place logo, headline and button along that path.
A quick hierarchy test
The squint test: step back from your screen and squint (or blur a screenshot). What still stands out? It should be your headline and main button. If it's a decorative image or a random banner, your hierarchy needs work.
The 5-second test: show the page to someone for five seconds, then ask what the business does and what they could do next. If they can't answer, simplify.
Applying it to a service page
- H1 headline: the service and location, large and bold
- One-line benefit under it, medium size
- Primary button in your accent colour; secondary option as an outline button
- Trust row: ratings, years, clients, in smaller text
- Sections with clear H2 headings, each with a short intro and bullets
See how to write service page content.
Typography hierarchy
Use a consistent type scale, for example: - H1: 40–48 px desktop, 28–32 px mobile - H2: 28–32 px desktop, 22–24 px mobile - H3: 20–22 px - Body: 16–18 px
Keep a clear jump between levels so headings are obviously different from body text.
Mistakes to avoid
- Competing CTAs (five equally bright buttons)
- Long centred paragraphs (hard to scan)
- Low contrast grey text on white
- Banners and pop-ups that interrupt the main message
- Decorative elements more prominent than content
Good hierarchy feels invisible: visitors simply find what they need. If your site feels cluttered, a hierarchy cleanup can make a big difference. Ask for a free review.