Home/Visual Hierarchy

Visual Hierarchy:
Guide the Eye to the Buy Button

Typography, colour, contrast, and spacing are the invisible architecture of your product page. Learn how to arrange every element so the shopper's eye travels naturally toward conversion.

👁️ Design Module
⏱ 11 min read
📈 Avg. +29% scroll depth
Typography

The Conversion Typography Scale

Every text element on your product page has a visual weight. The right scale creates a clear reading hierarchy that guides attention from the headline to the CTA.

H1 — TitleDisplay / 38–48px
Premium Chair
Product name. Highest visual weight. Benefit-led. Max 8 words.
PriceDisplay / 32px
$329.00
Most-scanned element. Large, bold, visible colour. Never hidden.
H2 — SectionHeading / 26px
Key Benefits
Section dividers. Clear hierarchy break. Scannable at speed.
H3 — FeatureSub-head / 20px
Ergonomic Support
Feature titles, review headers. Readable within feature lists.
BodyRegular / 16px
Designed for all-day comfort with lumbar support and adjustable armrests. Built to last with premium materials.
Descriptions, review text. Min 16px. Line-height 1.6–1.8.
CaptionSmall / 13px
✓ In stock · Free shipping · Ships in 2–3 days
Shipping info, secondary details. Muted colour. Never critical info.
LabelMicro / 11px
🔒 Secure Checkout
Badge labels, category tags. All-caps + letter-spacing for legibility.
Colour Psychology

Choosing Colours That Convert

Colour is your most powerful visual hierarchy tool. The wrong palette confuses the eye — the right one guides it directly to the conversion point.

Primary Text#1a2e1a
Headlines, prices, key info
CTA Green#4a7c59
Buy button, links, accents
Star Rating#f5a623
Stars only. Psychologically warm.
Background Alt#eef5ee
Section breaks, cards, badges
Muted Text#5a6e5a
Descriptions, secondary info

CTA Contrast — Good vs. Bad

✓ High Contrast — Correct

White CTA on a deep green background creates maximum contrast ratio (7:1). The button is unmissable.

✗ Low Contrast — Avoid

Light green button on a light green background creates almost no visual differentiation. The CTA disappears.

Visual Flow

The Shopper's Eye Journey

Eye-tracking studies reveal a predictable visual path on well-designed product pages. Your layout should match this natural scanning pattern — don't fight it.

1
Hero image (top-left)The eye lands on the product image first. It must be large, high-quality, and immediately answer "what is this?"
2
Product title (top-right)From image, the eye moves to the largest text element — the headline. Benefit-led title must be immediately scannable.
3
Star rating + priceTwo of the most-scanned elements on any product page. Social validation immediately followed by price anchoring.
4
CTA buttonHigh contrast pulls the eye here. The buy button must visually stand out from everything else on the page — it competes with nothing.
5
Trust signals below CTAAfter the CTA, the eye drops to the micro-trust elements. These validate the decision for buyers who didn't click immediately.
Typography Hierarchy Example Conversion Color Scheme
Spacing System

White Space Is Not Wasted Space

White space is a conversion tool. Properly spaced elements are easier to scan, more trustworthy, and put less cognitive load on the buyer. Use a consistent spacing scale.

8px Inner elements — icon-to-text gap, badge padding
16px Component padding — card inner, list item gap
32px Section elements — card margins, grid gaps
80px Section breaks — creates visual breathing room between content blocks

Key Spacing Rules for Product Pages

→ Double space between sections. A clear visual break tells the brain "new section" and resets attention.
→ Isolate the CTA. Add 24–32px of space above and below the buy button. Nothing should visually compete with it.
→ Use consistent column gutters. 24px gap on desktop, 16px on mobile. Inconsistent spacing signals low-quality design.
→ Don't crowd the buy box. The product name, price, variant selector, CTA, and trust signals should breathe — not be stacked tightly.

Next: Optimise for Mobile Shoppers

You've mastered visual hierarchy — now apply these principles to the 70% of your traffic arriving on mobile devices.

Mobile Optimisation →
✅Saved!