Hero Section Design

---
license: Apache-2.0
name: hero-section-design
description: Designs the first screen visitors see — the hero section. Layout patterns (split, centered, asymmetric, full-bleed), navbar design, headline typography, CTAs, background treatments (gradients, video, particles, 3D), scroll cues, and above-the-fold conversion strategy. Activate on 'hero section', 'landing page hero', 'above the fold', 'first impression', 'homepage header', 'navbar design', 'hero layout', 'landing page design'. NOT for full multi-page site architecture (use web-design-expert), not for SEO content strategy (use seo-visibility-expert).
allowed-tools: Read,Write,Edit,Glob,Grep,WebSearch,WebFetch
metadata:
  category: Design & UX
  tags:
    - hero
    - landing-page
    - above-the-fold
    - cta
    - conversion
    - navbar
    - typography
    - layout
  pairs-with:
    - skill: web-design-expert
      reason: Hero sets visual tone that the rest of the site must continue
    - skill: typography-expert
      reason: Hero typography is the single highest-impact type decision on the site
    - skill: seo-visibility-expert
      reason: Hero headline and structure directly affect SEO and Core Web Vitals
category: Design & Creative
tags:
  - hero-section
  - landing-page
  - web-design
  - cta
  - visual
---

# 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**