--- name: "ui-hero-sections" description: "Provides design engineering patterns for high-converting hero sections and above-the-fold interface architectures. Covers canonical layout typologies (split-screen, product-led, live interactive sandbox, metric-driven B2B, 3D canvas backdrop), the 50ms visual judgment rule, F/Z-pattern attention choreography, outcome-driven typography formulas, dual-CTA friction reduction, social proof anchors, and responsive viewport budgeting. Use when designing web application landing pages, SaaS dashboards, or above-the-fold brand moments." tags: - hero-sections - ui-design - conversion-rate-optimization - above-the-fold - information-architecture --- # UI Hero Sections: High-Converting Above-The-Fold Architecture The hero section is the cognitive handshake of any web application or digital product. Grounded in empirical Human-Computer Interaction (HCI) research, users form an aesthetic and credibility impression within **50 milliseconds** (Lindgaard et al., 2006). A high-converting hero section is not decorative art; it is a structured decision matrix that answers three questions instantly: 1. **What is this?** (Clear category and utility) 2. **Why should I care?** (Differentiated outcome and value proposition) 3. **What do I do next?** (Low-friction path forward) --- ## 🧭 When to Activate - Designing the initial viewport / above-the-fold experience for a marketing page, web app, or SaaS landing page. - Optimizing conversion rates, bounce rates, or initial activation on product homepages. - Structuring typographic hierarchy, CTA buttons, and social proof anchors above the fold. - Designing responsive layout adaptations for desktop, tablet, and mobile hero sections. --- ## πŸ›οΈ Canonical Hero Layout Typologies ### 1. Split-Screen (Dual-Pane) Layout - **Visual Structure:** A two-column grid (`1fr 1fr` or `5fr 7fr`). The left pane hosts the value proposition narrative (eyebrow, H1, subcopy, CTA group, social proof); the right pane presents the tangible product interface or interactive preview. - **Cognitive Flow:** Supports horizontal F-pattern and Z-pattern scanning. The user reads the primary claim on the left and immediately anchors it against visual proof on the right. - **Best For:** B2B SaaS, developer tools, workflow automation, and productivity suites. ### 2. Centered Minimal (Product-Led) Layout - **Visual Structure:** A centered text stack may sit above a product mockup or interactive app frame; include an eyebrow, subcopy or a second action only when useful. - **Cognitive Flow:** Vertical downward momentum. Encourages immediate scrolling toward feature demonstrations while keeping the primary CTA centered within the initial visual cone. - **Best For:** Consumer tech, modern AI applications, design software, and mobile-first products. ### 3. Interactive Live Sandbox / Canvas Hero - **Visual Structure:** A live, functional playground inside the hero section (e.g., an editable code runner, real-time prompt test box, or interactive workflow node). - **Cognitive Flow:** Eliminates sign-up friction through immediate *Time-to-Value* (TTV). Users experience the "Aha!" moment before entering a registration funnel. - **Best For:** Developer platforms, APIs, AI playground interfaces, and design component tools. ### 4. Metric-Driven B2B Hero - **Visual Structure:** Headline coupled directly with quantifiable proof statements (e.g., "Reduce cloud costs by 38% without modifying code"). Complemented by a live calculator, ROI slider, or dynamic benchmark chart. - **Cognitive Flow:** Targets analytical decision-makers; replaces marketing jargon with verifiable business outcomes. - **Best For:** Enterprise infrastructure, FinTech, cybersecurity, and compliance platforms. ### 5. Ambient 3D / WebGPU Canvas Backdrop Hero - **Visual Structure:** Typographic copy and actionable CTAs layered directly over an interactive, performant GPU-rendered canvas (particle field, physics mesh, or reactive 3D product model). - **Technical Imperative:** Canvas must be decoupled from the critical rendering path (`aria-hidden="true"`, loaded asynchronously, yielding LCP to HTML text/image). - **Best For:** Brand flagships, gaming engines, creative studios, and cutting-edge tech hardware. --- ## πŸ“ Anatomy and Visual Budgeting The following anatomy is a menu, not a required six-part template. Choose elements and composition for the product, audience and available evidence. When adapting a reference, inventory what is present, absent and unknown using [reference evidence and adoption](../../../engineering/practices/ui-design-craftsmanship/references/reference-evidence-and-adoption.md); do not invent social proof or force a badge, visual or second CTA. ``` +-------------------------------------------------------------------------+ | [ Eyebrow Pill / Badge: "v2.0 Released β€’ Read the Announcement β†’" ] | | | | H1 Headline: Radical Outcome-Driven Value Proposition | | | | Subcopy: 1–2 precise sentences explaining how the outcome is achieved. | | No buzzwords or hollow marketing claims. | | | | [ Primary CTA: "Start Building Free" ] [ Secondary: "Live Demo β–Ά" ] | | | | Social Proof: "Trusted by 10,000+ engineers at [Logo] [Logo] [Logo]" | +-------------------------------------------------------------------------+ | [ Right / Bottom Visual: High-Fidelity UI / Interactive Canvas ] | +-------------------------------------------------------------------------+ ``` ### 1. Optional Eyebrow or Badge - When a category or timely announcement helps, use a legible kicker or badge; a pill is one option, not a requirement. - Support any release, compliance or benchmark claim with evidence. ### 2. Outcome-Driven H1 Typography - **Word Budget:** 6 to 12 words maximum. - **The Formula:** `[Action Verb] + [Core Capability] + [Differentiating Outcome]` (e.g., *"Deploy serverless databases with instant global replication"*). - **Typography Scale:** Fluid typography using `clamp(2.5rem, 5vw + 1rem, 4.5rem)`. High font weight (700–900) paired with tight tracking (`tracking-tight` or `-0.02em to -0.04em`). ### 3. Supportive Subcopy - **Word Budget:** 20 to 35 words (1 to 2 sentences). - Font size: `1.125rem` to `1.25rem` (18px–20px) with generous line-height (`1.5` to `1.6`). - Explains the mechanism: who it is for, how it works, and what friction is eliminated. ### 4. Actions (When Relevant) - **Primary CTA:** High-contrast solid container (e.g., bright accent or crisp monochrome). Benefit-oriented action verb: *"Start Free Trial"*, *"Build Now"*, *"Get Instant Access"*. Avoid passive verbs like *"Submit"* or *"Continue"*. - **Optional secondary CTA:** When a distinct exploratory path is useful, consider: *"Interactive Demo"*, *"View Documentation"*, *"Watch 2-min Tour"*. Ghost or outline styling. - **Optional friction reducers:** Evidence-backed microcopy adjacent to CTAs (e.g., *"No credit card required"*, *"Open source β€’ Apache 2.0"*, *"Setup in 3 minutes"*). ### 5. Optional Trust & Social Proof - When relevant and substantiated, consider client logos, verified ratings or usage numbers; placement depends on the composition. - Omit unsupported claims and unnecessary proof. ### 6. Optional Backdrops and Light Effects Use a backdrop only when it serves the composition; a static treatment is often sufficient. If using effects, measure their performance impact: - **Directional beams:** If motion serves the experience, render sweeping light cones or atmospheric beams using hardware-accelerated CSS pseudo-elements (`conic-gradient`, `linear-gradient`) and 3D transforms (`rotate3d`, `translateZ(0)`). Never rely on heavy unoptimized video textures or non-culled WebGL loops for simple ambient illumination. - **Pure-CSS Grid Scaffolding:** Layer radial gradients with CSS grid masks (`radial-gradient(circle at center, transparent 0%, var(--bg) 80%)`) to create depth without layout reflows. - **Performance:** Profile effects and apply containment or `will-change` only where beneficial; avoid blocking interaction with decorative layers. --- ## πŸ“± Responsive Adaptation & Viewport Constraints - **Viewport Budget:** On desktop (`1440px`), the hero content must reside completely within `800px–900px` height to prevent the primary CTA from falling below the fold on standard laptop displays. - **Mobile Reflow (`< 768px`):** - Reflow the elements actually present into a coherent single column; preserve reading order. - H1 font size scales down gracefully to `2rem–2.5rem`. - CTAs stretch to full-width (`w-full`) with touch targets $\ge 48\text{px}$ height and $\ge 8\text{px}$ vertical separation. - Heavy interactive canvases degrade into lightweight static images or CSS gradients. --- ## β™Ώ Accessibility and Performance Guardrails 1. **LCP Optimization (Largest Contentful Paint):** Never allow heavy 3D canvases, video backgrounds, or client-side JavaScript hydration to delay LCP. Render the H1 text and primary background using static server-rendered HTML and CSS. 2. **Contrast Ratios (WCAG 2.2 AA/AAA):** Text over gradient backgrounds or video must maintain a contrast ratio of at least $4.5:1$ for normal body text and $3:1$ for display headers. Use darkened overlays (`rgba(0, 0, 0, 0.6)`) or CSS backdrop filters when placing text over graphics. 3. **Semantic Hierarchy:** Exactly one `

` per page. Subcopy is a `

` element; CTAs are either semantic `