| 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
Scale headline 2-3x larger than body text; use color/weight to guide eye
