curiositech/hero-section-design

Hero Section Design

Designs the first screen users see on a website — the hero section. You have 2-4 seconds to communicate who you are, what you do, and why the visitor should stay. Every pixel above the fold is a conversion decision.

Decision Points

Layout Pattern Decision Tree

What's the primary goal?
├── Brand awareness/memorability → Full-bleed visual hero
├── Product clarity/demonstration → Split hero (copy left, visual right)
├── Feature showcase/comparison → Centered hero with feature grid below
└── Authority/credibility building → Editorial/asymmetric hero

Is there a strong product visual?
├── Yes (app screenshots, dashboard, demo) → Split hero
└── No (API, service, abstract concept) → Centered hero

What's the target audience?
├── Developers/technical → Centered, minimal (Linear/Vercel style)
├── Business/enterprise → Split with professional visuals
├── Consumer/lifestyle → Full-bleed with lifestyle imagery
└── Creative/design → Editorial/asymmetric layout

Content complexity?
├── Simple value prop (1 line) → Full-bleed or centered
├── Medium (headline + subtitle) → Split or centered
└── Complex (multiple benefits) → Split with structured copy

CTA Strategy Decision Tree

What's the business model?
├── Freemium/trial → "Start Free" + "See Demo"
├── Sales-led → "Talk to Sales" + "View Pricing"
├── Direct purchase → "Buy Now" + "Learn More"
└── Lead generation → "Get Quote" + "Case Studies"

User intent level?
├── High intent (searched brand name) → Direct CTA only
├── Medium intent (problem-aware) → Primary + secondary CTA
└── Low intent (discovery) → Soft CTA + value-focused copy

Failure Modes

1. Carousel Confusion

Symptom: Hero content rotates automatically, bounce rate >70% Diagnosis: Users cannot process rotating messages; decision paralysis occurs Fix: Replace with single strongest message; use static hero with one clear value prop

2. CTA Below the Fold

Symptom: Low conversion rate despite high traffic; mobile CTA requires scrolling Diagnosis: Primary action not visible on initial page load Fix: Reduce hero height or move CTA up; ensure visibility at 375px mobile width

3. Unclear Value Proposition

Symptom: High bounce rate, low engagement time, confused user feedback Diagnosis: Headline describes what you are, not what you do for users Fix: Lead with outcome/benefit; "Ship 10x faster" not "DevOps platform"

4. Poor Visual Hierarchy

Symptom: Users miss key information, low CTA click-through (<2%) Diagnosis: All text elements same visual weight; no clear reading order Fix: Scale headline 2-3x larger than body text; use color/weight to guide eye

5. Performance Bottleneck

Symptom: High bounce rate on mobile; slow LCP scores >3 seconds Diagnosis: Oversized hero assets block critical rendering path Fix: Optimize images (WebP/AVIF), lazy-load non-critical assets, preload hero image

Worked Examples

Example: SaaS Product Hero (Split Layout)

Scenario: Building hero for a code review tool targeting developer teams

Step 1: Layout Decision

• Goal: Product demonstration ✓
• Strong visual: Yes (code diff screenshots) ✓
• Audience: Developers ✓
• Decision: Split hero with product visual

Step 2: Copy Strategy

Headline: "Ship code faster with confidence" (outcome-focused)
Subtitle: "Automated code review that catches bugs before your users do" (specific benefit)
Primary CTA: "Start Free Trial" (freemium model)
Secondary CTA: "See How It Works" (demo for hesitant users)

Step 3: Visual Treatment

• Left: Copy + CTAs (40% width)
• Right: Animated code diff demo (60% width)
• Background: Subtle dot pattern for developer aesthetic

Step 4: Mobile Adaptation

• Stack: Copy on top, visual below
• Headline scales from 3rem to 2.25rem
• CTA buttons stack vertically with 1rem gap

Expert vs Novice:

• Novice: Uses generic "Learn More" CTA
• Expert: Uses "See How It Works" (implies visual demonstration)
• Novice: Headline "Code Review Tool for Teams"
• Expert: Headline "Ship code faster with confidence" (user outcome)

Quality Gates

• [ ] Primary CTA visible without scrolling on 375px mobile width
• [ ] Headline communicates value proposition in ≤10 words
• [ ] Hero loads with LCP ≤2.5 seconds (test with throttling)
• [ ] Text contrast ratio ≥4.5:1 against any background
• [ ] Mobile layout stacks cleanly without horizontal scroll
• [ ] Social proof element present (logos, metrics, or testimonial)
• [ ] Single clear message (no rotating content or multiple value props)
• [ ] CTA click-through rate ≥2% (measure after 1 week)
• [ ] prefers-reduced-motion respected for animations
• [ ] Hero image uses appropriate loading priority (eager/high)

NOT-FOR Boundaries

Do NOT use this skill for:

• Full website architecture → use web-design-expert
• SEO content strategy → use seo-visibility-expert
• Blog post layouts → use web-design-expert
• E-commerce product pages → use ecommerce-conversion-expert
• Multi-step onboarding flows → use user-experience-expert
• Brand identity/logo design → use brand-design-expert

Delegate instead when:

• Client needs entire site redesign → web-design-expert
• Focus is on search ranking optimization → seo-visibility-expert
• Hero is part of complex user journey → user-experience-expert