ScoreMySiteDesign
Weak visual hierarchy
By Caleb Gross · Updated · Based on Jev AI scores of 116 pages
Short answer
Make the headline clearly the biggest thing, the main button the boldest, and use space rather than boxes to separate ideas.
Visual hierarchy is what tells the eye where to look first, second and third. When the headline, sub-points, buttons and images are all similar in size and weight, visitors don't know where to start.
19%
of the 116 landing pages Jev scored have this issue
7.4/10
average visual hierarchy score across the leaderboard
Why it matters
Good hierarchy guides people from the promise to the proof to the button. Without it, even good copy gets lost.
Signs your page has this problem
- The headline isn't clearly the biggest text on the screen.
- Two or more buttons look equally important.
- Busy backgrounds or images compete with the text.
How to fix it
- 1
Make one thing biggest
The headline should be clearly larger and bolder than anything else in the first screen.
- 2
One bold button
The primary button gets the solid brand color; everything else is outline or text.
- 3
Use space, not boxes
Generous spacing around the key elements makes them stand out more than borders or extra color.
- 4
Squint test
Blur your eyes at the page. The headline and main button should still be the first things you notice.
Checklist
- Headline is the largest text
- Only one solid primary button per screen
- Plenty of space around the hero
- Passes the squint test
Pages that get this right
The highest visual hierarchy scores on the ScoreMySite leaderboard.
smoothrecorder.com
Smooth Recorder: Record Beautiful Demos on Mac, Without Editing
loom.com
Free screen recorder for Mac and PC | Loom
nagbar.app
Nagbar: Voice Assistant for Mac, Dictation & Reminders
Questions
What is visual hierarchy in web design?
The arrangement of size, color, contrast and spacing that tells visitors what to look at first. On a landing page, that's usually the headline, then the main button, then proof.
Does your page make this mistake? Find out in seconds.
Get your free conversion, design and trust scores from Jev AI in seconds. No signup.
More landing page mistakes
Design
AI design slop: why your page looks like every other AI-built site
Purple gradients, glowing blobs and generic sections that all look the same.
Design
Inconsistent fonts, colors and spacing
Mismatched styles make a page feel unfinished.
Design
A landing page that breaks on mobile
Cramped text, tiny buttons and sideways scrolling on phones.
Design
Unpolished details that cheapen the page
Blurry images, misaligned elements, typos and placeholder text.
Design
Low-contrast, hard-to-read text
Light gray text on white, or text over busy images.
Design
Generic stock photos and illustrations
Smiling people at laptops that could be on any website.