What a good hero section does

A good hero section has one job

A hero section gets the right person to keep scrolling. Someone lands, gives you a few seconds, and decides whether the page is about their problem. Everything above the fold works towards that one decision. Four things carry it: what the product is, who it is for, what changes for them, and one clear action. Slogans, award badges and animated backgrounds take room from those four.

Say what the thing is

Headlines fail when they describe a feeling instead of a product. “Rethink how your team builds” could be a CRM, a hiring tool or a yoga app. “Project management for construction crews, built around site photos” tells a reader in one line whether to stay. Use the category word your buyer would use on a call. If the headline needs the subhead to make sense, the headline is doing too little.

Name the person you want

A qualifier line does more work than most designers expect. “For Shopify brands doing $50k a month and up” sends the wrong visitors away and tells the right ones they are in the correct place. Founders worry this narrows the market. In practice a named audience raises reply quality, because the people who do book are already halfway sold. Put the qualifier in the subhead, or in the eyebrow above the headline.

One promise and one action

Two buttons of equal weight split attention and lower clicks on both. Pick the action you want most, give it the solid button, and make the second option a quiet text link. Button copy should name what happens next. “Get my page plan” beats “Submit”, and “See pricing” beats “Learn more”, because the reader knows what waits on the other side of the click. Use the same button wording everywhere on the page.

Show the product doing its work

Cover the headline with your hand and look at the hero image on its own. If you cannot tell what is being sold, the image is decoration. A screenshot of the actual interface, a photo of the product in a real setting, or a short clip of the result all beat a smiling stock model at a laptop. If you sell a service, show the deliverable: the page you designed, the dashboard, the finished report.

Put proof next to the button

One line of evidence near the call to action removes the first doubt before it forms. A logo row of five clients people recognise, a rating with the review count, or a single result with a real number. Any of these work. Keep it to one piece of proof in the hero and save the case studies for later sections. Vague trust badges with no source attached tend to read as filler.

A five minute test for your hero section

Show the hero to someone outside your company for five seconds. Hide it, then ask three questions. What does this sell? Who is it for? What happens when you click the button? Two wrong answers out of three means the hero needs a rewrite before anything below it matters. Run this on a phone screen too, since that is where most of your traffic reads it and the fold sits much higher.