Appearance
Visual Hierarchy and Layout
Visual hierarchy is the invisible hand that guides your visitor's eye from headline to CTA — get it right and the page sells itself.
Why This Matters
- 💻 Dev: You need to translate design intent into CSS that preserves the intended reading order across screen sizes, using proper heading levels, z-index, and spacing utilities.
- 📋 PM: Understanding hierarchy lets you prioritize what content appears where — so you stop cramming everything "above the fold" and start making strategic placement decisions backed by eye-tracking data.
- 🎨 Designer: Hierarchy is your primary conversion tool. Every pixel of whitespace, every font-size choice, every color contrast decision either guides the visitor toward the CTA or distracts them from it.
The Concept (Simple)
Think of a newspaper front page.
The most important story of the day gets the biggest headline, sits above the fold, and often has a photograph. The second story gets a smaller headline, maybe a subhead. Below-the-fold stories get even less visual prominence. Classified ads are buried in the back.
Nobody taught you to read a newspaper this way. The hierarchy did the teaching for you.
Your landing page works the same way. The headline is your front-page story. The CTA is the action you want the reader to take. Everything else — features, testimonials, social proof — exists to support that one action. Visual hierarchy is how you make the important things look important and the supporting things look secondary, without the visitor ever having to think about it.
When hierarchy is broken, every element screams for attention at the same volume. The page feels chaotic. The visitor's eye bounces around with no direction. They leave.
When hierarchy works, the visitor's eye flows naturally from headline to supporting copy to CTA, like water flowing downhill. They convert without friction.
How It Works (Detailed)
Eye-Tracking Patterns
Research from the Nielsen Norman Group and others has identified three primary scanning patterns visitors use on web pages. Your layout should align with one of them.
The F-Pattern — for text-heavy pages:
╔══════════════════════════════════════╗
║ ████████████████████████████████ ║ ◀── Strong first horizontal scan
║ ████████████████████████████████ ║
║ ║
║ ██████████████████████ ║ ◀── Shorter second scan
║ ██████████████████████ ║
║ ║
║ █████ ║ ◀── Vertical scan down left side
║ █████ ║
║ █████ ║
║ █████ ║
╚══════════════════════════════════════╝Use when: Your page has long-form copy, blog-style layouts, or detailed feature descriptions.
The Z-Pattern — for minimal, CTA-focused pages:
╔══════════════════════════════════════╗
║ LOGO ─────────────────────▶ NAV ║ 1. Top-left to top-right
║ ╲ ║
║ ╲ ║
║ ╲ HERO HEADLINE ║ 2. Diagonal sweep
║ ╲ ║
║ ╲ ║
║ SOCIAL PROOF ──────────▶ [ CTA ] ║ 3. Bottom-left to CTA
╚══════════════════════════════════════╝Use when: Your page is clean with minimal text — a hero, a value prop, and a CTA.
The Gutenberg Diagram — for balanced layouts:
╔══════════════════════════════════════╗
║ PRIMARY OPTICAL │ STRONG ║
║ AREA (high) │ FALLOW ║
║ │ AREA (low) ║
║──────────────────────┼───────────────║
║ WEAK FALLOW │ TERMINAL ║
║ AREA (low) │ AREA (high) ║
║ │ [ CTA ] ║
╚══════════════════════════════════════╝
Reading gravity flows ╲
from top-left to ╲
bottom-right ─────────────▶Use when: Your layout is evenly distributed, like a pricing page or comparison grid.
The Six Tools of Visual Hierarchy
Every hierarchy decision you make uses one or more of these levers:
┌─────────────────┬───────────────────────────────────────────────┬────────────────────┐
│ Tool │ How It Works │ Conversion Impact │
├─────────────────┼───────────────────────────────────────────────┼────────────────────┤
│ Size │ Larger elements draw attention first. │ High — headlines │
│ │ Hero text at 48-72px vs body at 16-18px. │ set expectations │
├─────────────────┼───────────────────────────────────────────────┼────────────────────┤
│ Color/Contrast │ High-contrast elements pop against the │ Very High — CTAs │
│ │ background. A blue button on a white page │ must contrast │
│ │ demands attention. │ │
├─────────────────┼───────────────────────────────────────────────┼────────────────────┤
│ Whitespace │ Space around an element isolates it and │ High — breathing │
│ │ increases its perceived importance. │ room increases │
│ │ │ click-through │
├─────────────────┼───────────────────────────────────────────────┼────────────────────┤
│ Position │ Top-left and center draw first attention. │ Medium — placement │
│ │ Above-the-fold content is seen 80% more │ sets priority │
│ │ than below. │ │
├─────────────────┼───────────────────────────────────────────────┼────────────────────┤
│ Typography Wt. │ Bold (700+) text pulls the eye before │ Medium — guides │
│ │ regular (400) text. Use sparingly. │ scanning behavior │
├─────────────────┼───────────────────────────────────────────────┼────────────────────┤
│ Visual Density │ Grouped elements (cards, lists) create │ Medium — reduces │
│ │ scannable patterns. Isolation creates focus. │ cognitive load │
└─────────────────┴───────────────────────────────────────────────┴────────────────────┘Visual Weight — Making the CTA the Heaviest Element
"Visual weight" is the amount of attention an element commands. Your CTA button must be the heaviest element on the page. Here is how to ensure that:
╔══════════════════════════════════════════════════════════════╗
║ ║
║ Payments infrastructure [Login] ║
║ for the internet ║
║ ║
║ Millions of companies use our platform ║
║ to accept payments, send payouts, and ║
║ manage their businesses online. ║
║ ║
║ ┌─────────────────────┐ ┌──────────────────┐ ║
║ │ ██ Start now ██████ │ │ Contact sales │ ║
║ └─────────────────────┘ └──────────────────┘ ║
║ ▲ PRIMARY CTA ▲ SECONDARY CTA ║
║ │ High contrast │ Lower contrast ║
║ │ Filled background │ Outlined / ghost ║
║ │ Larger padding │ Smaller padding ║
║ │ Strongest visual weight │ Clearly subordinate ║
║ ║
╚══════════════════════════════════════════════════════════════╝Rules for CTA visual weight:
- The primary CTA gets the highest-contrast color on the page.
- No other element shares that color. If your CTA is blue, nothing else is blue.
- Surround the CTA with whitespace — at least 24px of padding on all sides.
- The CTA should be large enough to be the most tappable element (minimum 48px height on desktop, 56px on mobile).
- If you have two CTAs, the secondary one must be visually subordinate — outlined, ghost, or text-only.
Above-the-Fold Priority
"The fold" still matters. Content visible without scrolling gets roughly 80% more engagement than content below the fold (Nielsen Norman Group, 2018). Your above-the-fold section should contain exactly these elements, in this priority:
╔══════════════════════════════════════════════════════════════╗
║ 1. HEADLINE — what you do and for whom (largest text) ║
║ 2. SUB-HEADLINE — supporting detail (medium text) ║
║ 3. PRIMARY CTA — the one action you want (highest weight) ║
║ 4. HERO VISUAL — screenshot, illustration, or video ║
║ 5. TRUST SIGNAL — logos, rating, or short social proof ║
╚══════════════════════════════════════════════════════════════╝Do not try to fit everything above the fold. If you cram features, testimonials, pricing, and a FAQ into the first viewport, nothing has hierarchy and everything competes.
In Practice
Stripe — Whitespace and Contrast as Hierarchy Tools
Stripe's landing page is a masterclass in visual hierarchy. The page uses a dark gradient background with a single high-contrast headline in white. The "Start now" CTA button is the only element in Stripe's signature purple-blue, making it the heaviest element on the page. The supporting copy is in a lighter, lower-contrast shade. Massive whitespace separates sections — often 120px or more — giving each section room to breathe and ensuring the visitor processes one message at a time.
Key technique: Stripe uses color exclusivity. The CTA color appears nowhere else on the page. Your eye cannot help but land on it.
Notion — Clean Z-Pattern Layout
Notion's homepage follows a textbook Z-pattern. The logo sits top-left, navigation top-right. The eye sweeps diagonally across a large hero headline ("Write, plan, organize, play") to a bottom-left trust bar (company logos) and then to the CTA. The page strips away every unnecessary element. No sidebar, no competing navigation, no visual noise. The Z-pattern works because there are only four elements the eye needs to process.
Key technique: Notion limits the number of elements in the viewport to 4-5. Fewer elements make the pattern stronger.
Airbnb — Hero-First Visual Hierarchy
Airbnb inverts the typical SaaS layout by leading with a full-bleed hero image — an aspirational travel photo that fills the viewport. The search bar overlays the image with high contrast (white card on a dark photo). This works because the hero image is not decoration; it is the product. The search bar is the CTA. By making the search bar the only interactive element in the viewport, Airbnb achieves extreme focus despite a visually rich page.
Key technique: If your hero image IS the product, let it dominate. But make the CTA the only interactive element within that visual field.
Key Takeaways
- Visual hierarchy is the single most important factor in whether a landing page converts or confuses.
- Choose a scanning pattern (F, Z, or Gutenberg) based on your content density and stick to it.
- Use the six tools — size, color, whitespace, position, typography weight, and visual density — deliberately, not by accident.
- Your CTA must be the highest visual weight element on the page. Give it exclusive use of a high-contrast color.
- Above the fold: headline, sub-headline, CTA, hero visual, trust signal. Nothing else.
- Whitespace is not wasted space. It is a hierarchy tool that increases perceived importance of adjacent elements.
- Test hierarchy with the "squint test" — squint at your page and see what stands out first. If it is not the headline and CTA, your hierarchy is broken.
Action Items
┌──────────┬──────────────────────────────────────────────────────────────┐
│ 💻 Dev │ ☐ Implement a typographic scale using CSS custom properties │
│ │ (e.g., --text-hero: 3rem, --text-h1: 2.25rem, etc.) │
│ │ ☐ Ensure heading elements (h1-h4) map to visual hierarchy │
│ │ and are used in semantic order for accessibility │
│ │ ☐ Build a spacing utility system (4px base) to enforce │
│ │ consistent whitespace across sections │
├──────────┼──────────────────────────────────────────────────────────────┤
│ 📋 PM │ ☐ Run the squint test on your current landing page — what │
│ │ element draws attention first? Is it the right one? │
│ │ ☐ Audit above-the-fold content: does it contain only the │
│ │ five priority elements listed above? │
│ │ ☐ Map your page content to a scanning pattern (F/Z/Gutenberg)│
│ │ and verify your layout matches │
├──────────┼──────────────────────────────────────────────────────────────┤
│ 🎨 Design│ ☐ Verify your CTA color is exclusive — not used by any │
│ │ other element on the page │
│ │ ☐ Check whitespace around CTA (minimum 24px padding) │
│ │ ☐ Create a visual weight map: rank every element by size, │
│ │ color, contrast, and position, then verify the CTA wins │
│ │ ☐ Test with a 5-second test tool — can strangers identify │
│ │ your page's purpose and CTA in under 5 seconds? │
└──────────┴──────────────────────────────────────────────────────────────┘