A hero section has one job: make the right visitor keep scrolling. It has about as long as it takes to read one sentence. Most heroes fail not because they look bad but because they answer the wrong question — they describe the product when the visitor wants to know what it will do for them.
This guide walks through the seven decisions behind every SaaS hero, in the order we make them when we design one. Each comes with the trade-offs, an example, and what we’ve seen work across the heroes in our library.
What a hero section has to do in five seconds#
Before layout or colour, be clear about the three questions a first-time visitor is silently asking:
- What is this? — the category, in words they already use.
- Is it for me? — the audience or problem, stated or shown.
- What should I do next? — one obvious action.
Every decision below serves one of those three questions. If an element doesn’t, it probably belongs further down the page.
Decision 1 — The headline#
Write the outcome, then cut it until it fits in ten words. “The analytics platform for modern teams” describes a category. “See why customers churn — before they do” describes a result the reader wants. The second one earns the scroll.
| Headline length | Typical effect on a laptop screen | Our advice |
|---|---|---|
| Up to 6 words | Plenty of room for the visual and both buttons | Ideal when the outcome is simple |
| 7–10 words | Fits on two lines at desktop sizes | The sweet spot for most SaaS products |
| 11–16 words | Often wraps to three lines and pushes the CTA down | Move detail into the subheadline |
| 17+ words | The hero becomes a paragraph | Rewrite — this is a sentence, not a headline |
Decision 2 — The subheadline#
The subheadline carries what the headline had to leave out: who it’s for and how it works, in one or two sentences. Aim for 15–25 words. If you find yourself writing a third sentence, you’re writing the features section.
Decision 3 — The visual#
Show the product. A real screenshot — cropped to the one screen that shows the outcome — tells visitors more than an abstract illustration or a stock photo of people pointing at laptops. Illustrations work best for products that don’t have a screen worth showing yet, or for brands where tone matters more than function.
- Product screenshot: best default for SaaS. Crop tight; annotate one thing at most.
- Product in context: a screenshot inside a device frame or next to the output it creates.
- Illustration: for early products or strongly branded consumer apps.
- Video: only when motion explains something a still can’t (see decision 6).
Decision 4 — The layout#
Most SaaS heroes are one of three layouts. The choice follows from the visual: if the product is the strongest argument, give it half the screen.
| Split — text left, product right | 64% |
|---|---|
| Centred statement with screenshot below | 58% |
| Centred text only | 41% |
| Full-bleed background image | 44% |
Source and method: Placeholder figures for illustration. Replace with your own analytics or published research before publishing.
Centred layouts still win when the message is the product — a bold claim, a manifesto, a launch. Pair them with a large screenshot directly below so the proof arrives on the next scroll.
Decision 5 — The call to action#
One primary button, one quiet secondary. The primary is the action you want most — “Start free”, “Get a demo” — in your strongest colour. The secondary is a lower-commitment path — “See how it works” — styled as a link or outline. Two equally loud buttons make the visitor choose, and choosing is where people leave.
Two equally loud buttons make the visitor choose — and choosing is where people leave.
Write the button as the result of clicking it. “Start free” beats “Submit”; “See pricing” beats “Learn more”. Put a line of reassurance under it if you can — “No card required”, “Set up in 2 minutes”.
Decision 6 — Proof#
Proof answers the question visitors don’t ask out loud: “Can I trust this?” Put one piece of it inside the first screen. The strongest options, roughly in order:
- A row of recognisable customer logos (six is plenty).
- One concrete number — “Trusted by 4,000 teams”, “Saves 6 hours a week”.
- A one-line quote with a name, role and photo.
- Ratings from a review site your audience recognises.
People decide in the hero whether the rest of the page is for them. A real screenshot and one line of proof answer that faster than any paragraph of copy.
Decision 7 — Motion and speed#
Motion can help — a short loop that shows the product doing its job — but it has a cost. A heavy video or animation can make the hero slow to appear, and a slow hero loses visitors before they read a word. The hero is usually the largest thing on the page, which makes it the element that decides your loading score.
Should a SaaS hero be dark or light?
Match the rest of your product and brand rather than following a trend. Dark heroes suit developer tools and products used at night; light heroes read as open and friendly. What matters more is contrast — text over any background needs to stay readable, which rules out busy photos behind small type.
A ten-minute hero audit#
Open your current landing page on a laptop and a phone and go through this list. Each “no” is a change worth testing.
- Can a stranger say what the product does after reading only the headline?
- Is the headline ten words or fewer?
- Does the visual show the real product or its result?
- Is there exactly one primary button, and does its label say what happens next?
- Is there at least one piece of proof above the fold?
- On a phone, is the primary button visible without scrolling?
- Does the hero appear in under two seconds on a mobile connection?
If you’re rebuilding rather than tweaking, start from a proven section and adapt it: browse the hero sections in the library, or read how to build the whole page with Claude and the MCP server.