SaaS homepage hero section: what to put above the fold

A SaaS homepage hero needs four things: a headline that names what the product does and for whom, one supporting line with the outcome, one primary call to action, and a visual that shows the actual product. If a stranger cannot say what you sell after five seconds, the hero has failed, whatever else is on the page.

What the hero is actually for

The hero has one job: get a visitor to keep scrolling or click. It does not need to explain the whole product. It needs to answer three questions fast. What is this? Is it for someone like me? What do I do next?

Most founders try to answer a fourth question, "why are we special?", before the first three. That is how heroes end up with lines like "The future of work, reimagined." It sounds like a company. It does not sound like a product.

We see this pattern often when a team has been staring at its own product for a year. You know what it does, so the headline drifts toward the feeling you want people to have. Visitors have no context. They need the plain version first.

Write the headline last, and write it for a stranger

Start with a sentence a new visitor could repeat to a coworker: "It's a [category] that helps [who] do [outcome]." Then tighten it.

Name the category

Visitors compare you to tools they already know. If you hide the category, they guess, and they often guess wrong. "AI workspace" tells them less than "customer support agent for SaaS teams." The second one can be wrong for them, and that is fine. A visitor who is not your buyer leaving in three seconds costs you nothing.

Lead with the outcome, not the mechanism

"Machine learning pipeline for invoice data" describes how. "Close the books in two days" describes what changes. Put the outcome in the headline or the line directly under it, and keep the mechanism for the product section.

Cut the adjectives

Words like "smart," "powerful," and "all-in-one" carry no information. Replace each with a fact: a number, a named workflow, a named customer type. If you cannot replace it with a fact, delete it.

If you have rewritten the headline five times and it still feels off, that is usually a positioning question, not a wording one. Send us the page and we will tell you what we would change first.

The supporting line and the call to action

The supporting line is one sentence, maybe two short ones. It adds the thing the headline had no room for: who it is for, what it connects to, or how fast it works. Keep it under 25 words.

For the call to action, pick one primary action and make it obvious. A second, quieter action is fine, such as "Watch the demo" next to "Book a demo." Three equal buttons split attention and lower clicks on all of them.

Match the label to the commitment. "Start free" is a small ask. "Book a demo" is a bigger one. If your product sells to teams with a sales process, do not hide the demo button behind a trial flow your buyers will never use. And if you are not sure which fits, look at where your best customers actually came from before you decide.

Show the product, not a stock scene

The visual does more work than the headline in the first second. Visitors scan the image before they read the words.

Real product UI beats abstract illustrations, gradients, and floating 3D shapes almost every time. A cropped, well-composed screen of the core workflow tells a buyer what they would be using. An abstract graphic tells them you had a designer.

A few rules that hold up:

• Show the one screen that earns the product its place, not the dashboard with every widget.
• Crop tight enough that text is readable on a laptop screen.
• Use real-looking data, not "Lorem ipsum" or "User 1, User 2."
• For motion, loop a short product moment rather than a long autoplay video.

If the product is early and the UI is not ready to show, a clean prototype screen is better than a mockup of features that do not exist. AI-coded prototypes make this easier than it used to be: you can have a working screen to photograph before the real build ships. Just do not promise a feature the product cannot do yet.

Proof belongs close to the hero

Trust is the second thing a visitor checks. Put a row of client logos or a single short testimonial directly below the hero, not three scrolls down.

Pick proof a buyer in your market recognizes. Five logos your buyers know beat fifteen they do not. If you have no logos yet, use a specific number: users, teams, documents processed, hours saved. If you have none of those either, a named quote from a real early user is still better than a claim about yourself.

This is where design earns trust on sight. We redesigned the site for Entangle, and it went on to help them win clients like FixBIOME, KX Pilates, Dr Siegal's Cookie Diet, and EO. The product stayed the same. What changed was how fast a buyer could see that a serious team stood behind it.

Common hero mistakes

Two jobs in one headline

"The all-in-one platform for teams, creators, and enterprises" is three audiences and no one in particular. Pick the buyer who pays first and write to them. You can add segment pages later.

Burying the call to action

A button that sits below a long paragraph, or one that blends into the background, gets missed. It should be the highest-contrast element in the hero after the headline.

Slow, heavy motion

A hero that takes three seconds to load a video has lost people before the headline renders. Animate something small and purposeful. Keep the page fast on a mid-range phone.

A hero that ignores mobile

Check the hero on a phone before you check anything else. Long headlines wrap into five lines, buttons drop below the fold, and the product image shrinks until it is unreadable. Design the small screen first, then expand.

A quick test before you ship

Show the hero to someone outside your team for five seconds, then hide it. Ask three things: what does it do, who is it for, and what would you click? If they get two out of three, you are in good shape. If they get none, the problem is the headline, not the layout.

For a deeper look at why traffic may not be turning into calls, read why your SaaS website isn't converting. If you are still deciding what comes first, website copy or design first covers the order. Once the hero works, the next place visitors stall is often pricing, and SaaS pricing page design mistakes walks through that. And if your site is a year or more old, how often a startup should redesign its website helps you decide whether a hero rewrite is enough.

Where to go from here

A good hero is a clear sentence, one obvious next step, and a real look at the product. Start with the plain description, test it on a stranger, and add polish only after the message holds. If you want a second set of eyes from a team that designs and builds these pages, get in touch.