Resource
Website Homepage Design Guide
Anatomy of a Homepage. The common sections, what they do, and when to use them.
Note: Not every homepage needs every section. Think of this as a menu of common patterns, not a rigid checklist.
Homepage layout
Hero
What it does
The hero is the single most important section of your homepage. It answers the visitor's first question in under 5 seconds: what is this, who is it for, and should I keep reading? Everything else on the page exists to support this moment.
Best for
Every site. If you only optimize one section, optimize this one.
What goes here
- Headline: your clearest, most direct value statement
- Subheadline: one sentence that adds context to the headline
- Primary CTA button (the single most important action on the page)
- Optional: secondary CTA for a softer next step
- Optional: hero image, video, or product screenshot
- Optional: a trust signal (star rating, customer count, or press logo)
Common mistakes
- Vague headlines like 'We help businesses grow' — be specific
- Two equal-weight CTAs that compete with each other
- Hero images that are decorative but don't reinforce the message
- Too much copy. The hero sets up the page, it doesn't replace it
- No mobile optimization. The hero is often the only thing mobile users see
Hero
What it does
The hero is the single most important section of your homepage. It answers the visitor's first question in under 5 seconds: what is this, who is it for, and should I keep reading? Everything else on the page exists to support this moment.
Best for
Every site. If you only optimize one section, optimize this one.
What goes here
- Headline: your clearest, most direct value statement
- Subheadline: one sentence that adds context to the headline
- Primary CTA button (the single most important action on the page)
- Optional: secondary CTA for a softer next step
- Optional: hero image, video, or product screenshot
- Optional: a trust signal (star rating, customer count, or press logo)
Common mistakes
- Vague headlines like 'We help businesses grow' — be specific
- Two equal-weight CTAs that compete with each other
- Hero images that are decorative but don't reinforce the message
- Too much copy. The hero sets up the page, it doesn't replace it
- No mobile optimization. The hero is often the only thing mobile users see