VOL. III · CH. 3.5 · COMPONENT
Hero Sections
The first three seconds of a page's argument, compressed into one screen.
1 min read · 118 words
3.5.1Definition & Anatomy
The hero is the top-of-page section stating what the product/page is and what to do next — typically a headline, supporting line, primary call-to-action, and often a supporting visual.
3.5.2Common Mistakes
- Vague headlines that describe a feeling ("Empower your future") rather than what the product actually does.
- No clear single call-to-action, or multiple competing ones of equal visual weight.
3.5.3Best Practices
- State what the product does in plain language before anything clever or abstract.
- Keep one dominant call-to-action; secondary actions should be visually subordinate.
ExampleEffective SaaS heroes state the specific outcome (e.g., "Send invoices in 30 seconds") rather than an abstract value statement, so a visitor understands the offer without scrolling.