Visual Hierarchy
Visual hierarchy decides what gets noticed first, second, and never.
Build an Attention Ladder
Every screen should have a deliberate order of attention.
| Level | Typical Elements |
|---|---|
| Level 1 | Page purpose, critical status, primary CTA |
| Level 2 | Supporting proof, secondary actions, key fields |
| Level 3 | Helpful detail, tertiary actions, metadata |
| Level 4 | Rarely used utilities |
If two elements are equally loud, users hesitate.
The Main Levers of Hierarchy
| Lever | Strong Use | Weak Use |
|---|---|---|
| Size | Bigger for the most important headline or metric | Random size changes without meaning |
| Weight | Heavier weight for crucial labels and data | Bold everywhere |
| Contrast | High contrast for important information and actions | Low contrast on critical text |
| Position | Important items placed first or in natural focal zones | Key actions buried in corners |
| Isolation | Give the main action breathing room | Crowding the CTA with competing buttons |
| Repetition | Reuse patterns so users learn quickly | Redesigning each section differently |
Make CTAs Obvious, Not Loud Everywhere
A high-converting UI does not make all buttons bright. It makes the best next action unmistakable.
CTA hierarchy pattern
| Priority | Style Guidance | Example |
|---|---|---|
| Primary | Solid fill, highest contrast, strongest label | Start free trial |
| Secondary | Outline or neutral button | See demo |
| Tertiary | Text link or subtle affordance | Learn more |
Headlines Must Earn Their Size
Use large text for information with real decision value:
- the page purpose
- the strongest promise or benefit
- a key metric or total price
- a warning or blocking error
Do not use oversized text for filler statements like “Welcome back.”
Hierarchy Patterns by Screen Type
Marketing page
- headline with a clear outcome
- short supporting copy
- primary CTA
- proof: logos, testimonials, metrics
- deeper detail lower on the page
Product page
- product name and hero image
- price and availability
- dominant purchase action
- risk reducers: shipping, returns, reviews
- details and specs afterward
SaaS dashboard
- state of the business or project
- anomalies or tasks requiring attention
- filters and timeframe
- deeper analysis and history
Use Contrast Strategically
Contrast is not only about accessibility. It is also about emphasis.
| Element | Recommended Contrast Behavior |
|---|---|
| Critical data | High contrast |
| Body text | Strong enough for comfortable reading |
| Helper text | Reduced contrast, but still readable |
| Disabled controls | Lower emphasis without becoming ambiguous |
| Background layers | Low contrast so content remains dominant |
Before and After Example
| Weak Screen | Strong Screen |
|---|---|
| Four bright buttons in one header | One primary button, one secondary, utilities moved into overflow |
| Large hero plus long paragraph and two carousels | One clear promise, short proof, one CTA |
| Dense settings panel with no grouping | Sections with headings, spacing, and default recommendations |
Common Mistakes
- making destructive buttons visually equivalent to primary buttons
- placing the save action far from the edited content
- hiding the primary action below dense explanatory text
- using color alone to indicate hierarchy instead of combining it with size, weight, and spacing
Quick Test
Blur or squint at the screen.
If you cannot instantly identify the page purpose, dominant action, and major groupings, the hierarchy is weak.