Hero Section Design: How to Write and Build the First Screen That Converts

The hero section is the first screen of a page, and for most visitors it's the only part they read closely before deciding whether to stay. Teams often treat it as a design problem: pick a striking layout, add a gradient, drop in a product shot. In our work the order is reversed. We write the hero first, test whether people understand it, and only then design and build it. This hub covers every part of that process and links to the deeper guides on each piece.

What makes good hero section design?

A good hero section makes a stranger understand what you sell, who it's for and what to do next, within a few seconds. Everything else is secondary. A beautiful hero that leaves a visitor guessing is a failed hero, and a plain one that's instantly clear usually outperforms it.

Clarity comes from words. The headline names the outcome, the subheadline explains the mechanism, and the button says what happens when you click. Design's job is to make those words easy to read in the right order and to show proof that the claim is real. When we review a struggling page, the problem is almost always in the copy, which is why our hero work starts in a document, not in Figma.

There's also a practical test: if you covered your logo, could a visitor tell your hero apart from three competitors'? Many SaaS heroes use the same phrases ("the all-in-one platform", "work smarter") and the same abstract visuals. Specific words and a real product view are what make a hero yours. Our guide to clear vs clever headlines covers why clarity wins when you have to choose.

What are the five parts of a hero section?

Every effective hero section has five parts: headline, subheadline, primary CTA, visual and proof cue. Each part has one job. When a hero underperforms, you can usually trace the failure to one part doing the wrong job or two parts doing the same one.

Not every hero needs every part at equal weight. A developer tool might lead with a code snippet as its visual and put proof in a GitHub star count. A services business might make the proof cue a short client quote. But if a part is missing entirely, ask what's doing its job instead.

How do you write the hero headline?

Write the hero headline as a specific outcome for a specific reader, in words they'd use themselves. Start from what changes for the customer, not from what your product is. "Close your books in two days, not ten" says more than "Modern accounting software", even though the second is technically accurate.

Draft at least ten versions before choosing. Most first drafts are either too broad ("The future of finance") or too feature-led ("AI-powered reconciliation engine"). Our guide on how to write a landing page headline gives nine formulas with weak and strong versions of each, and the 50 SaaS headline examples group real and illustrative lines by strategy: outcome, category, enemy and specificity.

1. 1

   Write down the one outcome

   Finish the sentence "After using this, the customer can…" in plain words. That's the raw material for the headline.

2. 2

   Name the reader if it matters

   If your buyer is a specific role or industry, putting them in the headline filters the right visitors in and the wrong ones out.

3. 3

   Draft ten versions in different styles

   Outcome, before-and-after, category plus difference, enemy, number. Volume finds the good one.

4. 4

   Cut every word that a competitor could also use

   "Powerful", "all-in-one", "next-generation". If it fits any product, it tells the reader nothing.

5. 5

   Read it aloud to someone outside the company

   If they can't repeat back what you do, the headline isn't finished.

Length matters less than people think. A ten-word headline that's clear beats a four-word one that needs a subheadline to decode it. The constraint is readability at display size on a phone, which usually caps you at two or three lines.

What should the subheadline and CTA say?

The subheadline should explain how the promise is delivered, and the CTA should describe exactly what happens next. Together they turn a claim into a decision. If the headline is the promise, the subheadline is the mechanism, and the button is the commitment the visitor is being asked to make.

For complex products, the subheadline does the heaviest lifting on the page. It names the mechanism ("connects to your bank feeds and matches every transaction automatically"), the replacement ("no more month-end spreadsheets") or the audience ("for finance teams at growing SaaS companies"). Our guide to writing a landing page subheadline shows the promise-and-mechanism split in detail.

For the CTA, specific beats generic. Practitioner CTA guides from sources such as Unbounce and CXL consistently name "Submit" and "Request a demo" among the weakest labels. In one Optimizely test, "Watch a Demo" converted at 1.59% against 0.91% for "Get Started". One test doesn't make a rule, but it shows that telling people what they'll get can matter.

Conversion for "Watch a Demo" in an Optimizely CTA test

1.59%

Conversion for "Get Started" in the same test

0.91%

Primary CTA per hero; a secondary link at most

1

Keep one primary button. A secondary action, such as "See how it works" or "View pricing", can sit beside it as a text link, but two equal buttons split attention. If you collect details in the hero, keep the form short; our guide to landing page form design covers which fields to ask for.

What should the hero visual show?

The hero visual should show your product doing the job the headline promises. For most SaaS products that's a real, readable product view: a cropped screenshot, a short loop or a simplified interface that highlights the key moment. Abstract shapes and stock photos make the page look finished without proving anything.

The right format depends on the product. Dashboards benefit from a cropped, annotated screenshot. Developer tools often show code or a terminal. AI products need to show input and output, because buyers are skeptical of claims they can't see. Services businesses can use work samples or people. Our comparison of hero image vs product screenshot vs video gives a verdict per product type, including the performance cost of each.

AI products deserve a special note. Our research flagged a recurring pattern commentators call "magic promise, no proof": a big claim about intelligence with no visible output. The fix is to put a real example in the hero, such as a prompt and the result it produced. Our roundup of AI product hero sections shows heroes that demo the output instead of describing it.

Does the hero have to fit above the fold?

The essentials of the hero need to be visible on load, but the whole page doesn't need to fit above the fold. People scroll when the first screen gives them a reason to. What must appear immediately is the headline, enough of the subheadline to explain it, the primary action and a hint of the visual.

Our guide to above the fold explains which four things must load first and why the old "fold" rule is often misapplied. The short version: don't cram secondary content into the first screen, and don't push the headline down with a giant navigation or an announcement bar.

Speed belongs in this conversation. The original SOASTA data cited in our research found roughly a 7% conversion drop for a 100-millisecond delay and about 20% for one second, although a SiteSpect controlled test found a smaller effect of -4.4% on mobile. The exact figure varies, but a hero that loads a heavy video before the headline renders is paying a cost. Load the text first, keep the visual light, and lazy-load anything below the first screen.

What are hero section best practices for SaaS?

SaaS hero section best practices come down to specificity: a specific reader, a specific outcome and a specific view of the product. Generic SaaS heroes look alike because they're written to offend no one. The ones that work make choices about who they're for.

• Lead with the outcome, not the category. "Stop chasing invoices" beats "Accounts receivable software".
• Put the reader's vocabulary on the page. Use the words from sales calls, not the words from the pitch deck.
• Show the real interface. Readers want to see what they'd be using.
• Match the CTA to the buying motion. Self-serve products say "Start free"; sales-led ones offer a demo or a call.
• Keep the navigation light. A crowded menu competes with the hero. Our guide to website navigation best practices covers what to keep.
• Add one proof cue. A recognizable logo strip, a review score or a short quote, placed close to the CTA.

If you want to see these choices applied, our teardown of the best SaaS landing page examples walks through forty pages section by section, starting with the hero. Industry pages follow the same rules with different proof; our guide to fitness app landing pages is one worked example.

What do hero rewrites look like in practice?

A hero rewrite usually changes the headline from a category to an outcome, moves the mechanism into the subheadline and makes the CTA specific. The before-and-after pairs below are composites of patterns we see often on SaaS sites, not real companies' pages. They show the edit, which is what you can copy.

For a live, step-by-step version of this process on a full hero, see our landing page teardown, where we rewrite a SaaS hero section and explain each decision.

How do you test whether your hero section works?

Test your hero for clarity with real people first, and only test variants with traffic once the message is clear. Most early-stage pages don't get enough visitors for a valid A/B test. Sample-size guides such as Spotler's put the requirement at roughly 15,000 to 20,000 visitors per variant to detect a 15% lift at a 2% baseline conversion rate.

The cheapest clarity check is the 5-second test: show the hero to someone for five seconds, hide it, and ask what the product does, who it's for and what they'd do next. If three or four people out of five can't answer, the hero needs another draft. Run it on a phone as well as a desktop, since the layout changes what people see first.

Once traffic allows, test the parts with the biggest likely effect first: the headline, then the visual, then the CTA label. Test one change at a time so you know what caused the difference. Session recordings and on-page surveys add context the numbers can't give you.

Which hero section guides should you read next?

Each part of the hero has its own guide in this series, so you can go deep on the part that's weakest on your page. Start with the headline if visitors don't understand you, the visual if they understand but don't believe you, and the CTA if they believe you but don't act.

If the hero is fine but the rest of the page isn't, our guide to what a landing page is covers the full structure, and our piece on a homepage-only redesign explains when fixing one page is enough. Adding an FAQ section lower down handles the objections the hero can't.