lemuriaOS
creativeconversiongrowth

Hero Section Blueprint

Design the above-the-fold hero section that communicates the value proposition, establishes visual hierarchy, and drives the primary conversion action within 5 seconds of page load.

Context

The hero section gets more attention than any other part of the website. Studies show visitors form a judgment in 50ms and decide to stay or leave within 5 seconds. This skill designs the above-fold experience that earns the scroll.

Procedure

  1. Choose the hero layout pattern based on the product type:
    • Split hero: headline left, visual right — best for product screenshots and SaaS.
    • Centered hero: stacked headline + CTA, full-width background — best for brand statements.
    • Hero with media: large video/image background with overlay text — best for visual products.
  2. Write the headline structure: [Outcome] + [for Whom] in 6-12 words. Avoid cleverness — clarity converts.
  3. Write the subhead: expand on the headline with specifics (how, proof, timeframe) in 15-25 words.
  4. Define the CTA cluster: primary button (action verb + outcome, e.g., "Start building free") and secondary link (lower commitment, e.g., "See how it works").
  5. Specify the visual element: product screenshot, illustration, abstract graphic, or video thumbnail. Define exact dimensions and aspect ratio.
  6. Define the trust strip below the hero: logo bar, metric badges, or a one-line social proof statement.
  7. Specify responsive behavior: how the layout adapts at tablet (768px) and mobile (375px) breakpoints.

Output Format

# Hero Section Blueprint

## Layout
- Pattern: [split | centered | media-bg]
- Grid: [e.g., "60/40 split, headline left, visual right"]
- Max height: 100vh desktop, auto mobile
- Background: [color token | gradient | image]

## Copy
- Headline: "[text]"
  - Size: var(--text-display-xl) desktop, var(--text-display) mobile
  - Weight: 700
  - Max width: 640px
- Subhead: "[text]"
  - Size: var(--text-body-lg)
  - Color: var(--color-text-secondary)
  - Max width: 480px

## CTA Cluster
- Primary: "[label]" → [destination]
  - Style: filled button, var(--color-primary), min 48px height
- Secondary: "[label]" → [destination]
  - Style: text link or ghost button

## Visual Element
- Type: [screenshot | illustration | abstract | video-thumb]
- Dimensions: [width × height]
- Position: [right | center | background]
- Loading: priority (LCP candidate)

## Trust Strip
- Type: [logo-bar | metrics | quote]
- Content: [items]
- Position: below CTA cluster, above fold

## Responsive Breakpoints
- Desktop (1280px+): [layout description]
- Tablet (768px): [layout description]
- Mobile (375px): [layout description — stack vertical, reduce headline size]

QA Rubric (scored)

  • Clarity speed (0-5): a stranger understands the offering within 3 seconds of reading the headline.
  • Visual hierarchy (0-5): eye flow follows headline → subhead → CTA → visual → trust strip.
  • CTA prominence (0-5): primary CTA is the most visually dominant interactive element.
  • Mobile parity (0-5): mobile hero is complete, not a cramped version of desktop.
  • Performance (0-5): no layout shift, LCP element identified, no render-blocking assets.

Examples (good/bad)

  • Good: "Deploy to production in 30 seconds" — split hero with terminal screenshot, green "Start deploying" button, logo bar showing Stripe/Vercel/Linear underneath. Clean, specific, trustworthy.
  • Bad: "Welcome to our platform — the best solution for your needs" — centered text on stock photo, generic "Learn More" button, no social proof. Says nothing specific.

Variants

  • Product-led hero: interactive demo or live preview embedded directly in the hero — visitors try before they read.
  • Storytelling hero: animated sequence that reveals the value prop step by step as the visitor watches (keep under 8 seconds).