A hero section that merely looks good is a missed opportunity. The best ones do a specific job — they answer the visitor’s silent question (“Is this for me, and should I keep reading?”) within three seconds of landing. Most fall short because the designer optimized for aesthetics rather than structure.
The 5 Elements of a Hero Section
Every high-converting hero section contains exactly five structural elements. Remove any one of them and the section’s ability to convert degrades.
1. Headline — Primary Value Proposition in ≤10 Words
The headline carries the entire weight of the first impression. It must state what you do and — ideally — for whom, in a single, scannable line. Ten words is a firm ceiling. Beyond that, eyes stop completing the sentence.
What goes wrong: Clever wordplay that obscures the offer. “We Elevate Digital Experiences” tells the visitor nothing. “Custom Websites That Rank on Google and Convert Visitors” tells them everything.
The test: cover your logo and ask a stranger if they can tell what the company sells after reading only the headline. If they can’t, rewrite it.
2. Subheadline — The “How” or “Who For”
The subheadline does not restate the headline. It extends it — adding the mechanism, the audience, or the differentiator that earns credibility. Keep it to 1–2 sentences, 20–30 words maximum.
Example: Headline — “Custom Websites Built to Win Local Search.” Subheadline — “We design and build Astro-based sites for clinics, restaurants, and service businesses that want to stop losing customers to competitors with better websites.”
3. Primary CTA — One Button, Verb-First Label
One button. Not two. Not three. The CTA label must start with a verb and make the outcome obvious. “Get Started” is vague. “Book a Free Strategy Call” is specific. “Request Your Free Website Audit” tells the visitor exactly what will happen when they click.
The button must be visually dominant — high-contrast fill color, not an outline or text link. It should be immediately visible without scrolling on any device.
4. Visual Anchor — Supports, Never Competes
The hero visual’s job is to reinforce the headline’s claim — not to create its own visual story that the visitor has to interpret. A product screenshot, a photo of the result the client gets, or a relevant illustration all work. A generic stock photo of a handshake or a “diverse team meeting” adds no information.
Signal-to-noise rule: if you covered the headline and the visitor’s eye went only to the image, and the image told them nothing about what you do — it’s decorative, not functional. Replace it or make it functional.
5. Trust Signal — Social Proof, Logos, or a Credential
The trust signal is the element most commonly removed “to keep things clean.” That’s a mistake. It sits at the bottom of the hero’s visual hierarchy, requires minimal space, and does significant work — it confirms to the visitor that others have trusted you before them.
What works: client logo strips (6–8 recognizable logos), a specific number (“Used by 2,400+ small businesses”), a short testimonial quote with a real name and photo, or a recognizable certification badge.
Visual Hierarchy Inside the Hero
Eyes don’t drift randomly — they follow size, weight, contrast, and position. The scan path inside a high-converting hero should follow this sequence:
Visual anchor → Headline → Subheadline → CTA → Trust signal
How to enforce it:
- Headline: 48–72px on desktop. 32–48px on mobile. Bold or black weight (700–900). High contrast against the background — minimum 4.5:1 contrast ratio (WCAG AA).
- Subheadline: 18–22px on desktop. 16–18px on mobile. Regular or medium weight (400–500). A step down in visual presence from the headline.
- CTA button: Minimum 44×44px touch target (Apple and Google’s minimum recommendation). Padding: at least 14px top/bottom, 28px left/right. The button color should not appear elsewhere on the page in the same weight — it must stand out.
- Trust signal: 14–16px for text, 32–48px height for logos. Placed below the CTA. Light treatment — it should be noticed, not read first.
If your headline and CTA are the same visual weight, visitors don’t know where to look first. Choose one, give it dominance, and everything else becomes subordinate.
The Most Common Hero Section Failures
Failure 1 — Everything Centered, Everything Equal
What goes wrong: Center-aligned layout with centered headline, centered subheadline, and centered CTA. When everything is centered and the same visual weight, the eye has no direction. It scans left-right with no clear path, which usually means it just reads the headline and leaves.
Fix: Left-align the text block on desktop (the eye naturally starts at the left edge and moves right). Reserve centered layouts for minimal, bold hero sections where the headline alone is doing the work — and only if everything else is subordinate to it.
Failure 2 — Decorative Hero Image Consuming 80% of Space
What goes wrong: A beautiful full-bleed photo that has nothing to do with the service being sold. The image takes most of the visual real estate and delivers no information. The visitor’s eye goes to the image, finds nothing relevant, and reads the headline with lower attention.
Fix: Either replace the image with one that shows the result the visitor wants, or reduce its scale and let the text block have more weight. If you’re keeping a full-bleed photo, apply a text-safe overlay (semi-transparent dark or light gradient) and make the image’s focal point meaningful — a person, a product, a place that is directly relevant.
Failure 3 — Primary CTA Below the Fold on Mobile
What goes wrong: Desktop hero design gets scaled down for mobile and the CTA ends up below 650px — meaning most mobile users never see it without scrolling.
Fix: Design the mobile hero separately. On mobile: text-first layout, single column, headline at 32–40px, subheadline at 16–18px, and the CTA button must appear at or above 550px (well within the visible area of most phones). Never auto-scale a desktop hero — redesign it for mobile context.
Failure 4 — Autoplay Video that Delays LCP
What goes wrong: A large autoplay background video that begins loading on page arrival. If the video file is not aggressively compressed (target: under 3MB), the browser is preoccupied with loading the video while Google’s LCP clock is ticking. LCP over 2.5s is a ranking penalty and a user experience failure.
Fix: Use a static WebP image as the hero background and trigger the video (if truly necessary) only after the load event fires. Or use CSS animation / a looping SVG illustration instead. Or compress the video to under 2MB using FFMPEG and serve it via a CDN.
Desktop Hero vs. Mobile Hero
These are not the same layout. Treating them as the same — just scaled down — is one of the most consistent failures in responsive web design.
Desktop: Side-by-side layout works well. Left: text block (headline + subheadline + CTA + trust signal). Right: visual (product screenshot, illustration, or photo). The horizontal split gives both text and visual appropriate weight.
Mobile: Single column only. Text first, image below (or used as a reduced-opacity background). The hierarchy must work without the visual anchor being prominent — the headline must carry the weight on its own. Minimum tap target for the CTA: 44×44px.
Never export a 1440px desktop design, scale it to 390px, and call it mobile-responsive. That is not responsive design — it is responsive shrinking.
Background Approaches — Decision Tree
Choose your hero background based on what you’re optimizing for:
Full-bleed photography: Use when: you have a photo with a clear, relevant focal point and the image directly supports the headline’s claim. Avoid when: the image is generic, decorative, or makes text readability hard to control. Always test text contrast with the actual image — don’t guess.
Solid or gradient background: Safest for readability and page speed. Works best for SaaS products, agencies, and any offer where the concept (not a physical result) is being sold. Allows full control over text contrast. No LCP risk from heavy image files.
Illustrated / custom graphic: Strongest brand differentiation. Higher production cost and time. Works well for brands with a defined visual identity. Can slow load time if illustrations are SVG-heavy — optimize rigorously.
Quick decision tree:
- Do you have a relevant, high-quality photo? → Full-bleed
- Is your offer abstract / conceptual? → Solid or gradient
- Do you have a strong brand identity and design budget? → Illustrated
- Is speed your top constraint? → Solid or gradient, always
Hero Section Checklist
Use this before publishing any hero section:
- Headline is ≤10 words and states a clear value proposition
- Subheadline adds context without restating the headline (≤25 words)
- One primary CTA with a verb-first, outcome-specific label
- CTA button has minimum 44×44px touch target on mobile
- Hero visual directly supports the headline — not decorative
- At least one trust signal is present (logos, number, quote)
- Primary CTA is visible without scrolling on mobile (above 550px)
- Text contrast ratio is ≥4.5:1 against the background
- No autoplay video that delays LCP beyond 2.5s
- Mobile layout is designed separately — not just a scaled desktop version
Ready to rebuild your hero section? We design web experiences that convert visitors into customers. Free consultation →
References
- Nielsen Norman Group — F-Pattern Reading on the Web
- Baymard Institute — Homepage Usability: Frequently Violated Best Practices (reference only)
- Web.dev — Largest Contentful Paint (LCP)
- Smashing Magazine — A Closer Look At Hero Image Design Patterns (reference only)
- WCAG 2.1 — Contrast (Minimum): Success Criterion 1.4.3
Hero Section Design — Common Questions
How long should a hero section headline be?
Keep it to 10 words or fewer. A hero headline is not a paragraph — it is a claim. If you need more than 10 words to state your value, you haven't decided what your core value is yet. Use the subheadline to add the 'how' or 'who for' context.
Should I use a video or an image in my hero section?
Default to a static image. Autoplay video is a common LCP killer — if the video file is not optimized, it will delay your Largest Contentful Paint past 2.5 seconds, which hurts both user experience and Google rankings. If you want video, use a poster image that loads immediately and trigger the video only after page load.
How many CTAs should a hero section have?
One primary CTA, and optionally one low-commitment secondary CTA (e.g., 'See how it works'). Two equal-weight CTAs force the visitor to make a choice before they've decided anything — which usually means they choose nothing. Make the primary CTA visually dominant and the secondary clearly subordinate.
What makes a trust signal effective in a hero section?
Specificity. '500+ clients' beats 'Trusted by many'. Recognizable logos beat generic star ratings. A real client photo with a short quote beats a floating badge that says 'Award Winning'. The trust signal's job is to reduce the risk the visitor perceives in clicking your CTA — make it concrete enough to actually reduce that risk.