Hero section examples: the first screen, broken down

Why the hero carries so much weight

On a launch day, most visitors arrive from a post, an ad or a link someone shared. They give the page a few seconds. In that window they read the headline, glance at the visual, and either find a reason to scroll or click, or leave.

Our scanner treats the hero as the heart of the product clarity dimension, and the numbers show how often it goes wrong. 38% of the 237 launch pages we checked had no clear headline (H1). 55% had no clear primary call to action. 52% showed no product screenshot or creative anywhere on the page.

The gap between strong and weak pages is widest exactly here. A clear headline was missing on 5% of pages that scored 70 or more and on 68% of pages under 50. Pages with a clear H1 averaged 60.3 points; pages without one averaged 34.4.

Part 1: the headline

A good hero headline does one of three things: names the job ("Email for developers"), names the outcome ("Clarity, finally."), or names the tension the product resolves ("Build in a weekend. Scale to millions."). It does it in the visitor's words, in roughly four to ten words.

Patterns that work:

• Job plus audience: "[What it does] for [who]". The most reliable pattern for a new product.
• Outcome: a short statement of the result. Works when the outcome is vivid and believable.
• Tension pair: two short phrases that resolve a trade-off (fast now, solid later).
• Comparison: "[Incumbent] alternative that [difference]". Works when buyers already know the incumbent.

Patterns that rarely work for new products:

• Brand-only taglines ("Build for what's next"): fine for a company everyone knows, empty for one nobody knows yet.
• Questions with no answer ("Tired of busywork?"): the visitor has to guess the product.
• Feature soup: five capabilities in one line, separated by commas.

Make sure the headline is real text in an H1 tag, not text baked into an image. Search engines, screen readers and our scanner can only read the text version. It should also match the page's title tag closely, so the search result, the browser tab and the hero tell the same story. Title and meta description were missing on 12% of pages.

Part 2: the supporting line

The subhead does the work the headline cannot fit: who it is for, how it works, or what makes it different. One sentence, under about 25 words. If your headline is an outcome, the subhead should name the mechanism. If your headline names the mechanism, the subhead should name the outcome.

Part 3: the visual

The best hero visual is the product. A screenshot of the main screen with realistic data, a short muted loop of the key interaction, or a slice of the interface embedded in the layout. Abstract illustrations and stock photos signal "marketing page"; real UI signals "real product".

The data backs this up. Product screenshots were missing on only 7% of top-scoring pages and on 83% of low-scoring ones, and pages with screenshots averaged 62.6 points against 39.7 without. A video in the hero is rarer still: 90% of pages had no demo video anywhere. See product demo video examples for how to make one.

Part 4: the call to action

One primary button, with a label that says what happens: "Start free", "Download for Mac", "Join the waitlist", "Book a 20-minute demo". A quieter secondary link is fine. Three buttons of equal weight is not.

The primary CTA was missing or unclear on 28% of top pages and 76% of low ones. Often the button exists but competes with a nav full of links, a newsletter box and a cookie banner, so the scanner (and the visitor) cannot tell which action matters.

A useful test: cover everything in the hero except the button. Can you tell what the product does from the button label alone? "Get started" fails that test; "Start your free invoice" passes it.

Hero section layout

The common layouts, and when to use them:

Whatever the layout, check it at 390 pixels wide. On a phone, the headline, subhead and button should all be visible without scrolling, and the visual should follow straight after.

Rewrite your hero in 20 minutes

1. Write your headline three ways: job plus audience, outcome, tension pair.
2. Read each one to someone who has never seen the product. Keep the one they can repeat back.
3. Write a one-sentence subhead that adds what the headline left out.
4. Replace any illustration with your best real screenshot.
5. Cut the hero to one primary button and one secondary link.
6. Check the result on your phone.

For the rest of the page, see the landing page best practices guide. To score your hero (and everything below it) the same way as the pages in this data, use the landing page analyzer.