A landing page hero that shows the product
The strongest hero sections show the real product, not an illustration. How to frame a screenshot, what the headline should say, and what to cut from it.
A visitor landing on your page wants to know three things before they scroll: what this is, whether it is for them, and what it looks like. The headline answers the first two. The third is answered by showing the product, and most heroes answer it with a gradient blob instead.
The headline says what it does
Say what the product does, for whom, in words the buyer would use. A clever line that needs the subheading to explain it wastes the most read line on the page. The subheading then adds the one detail that makes it believable: a number you measured, a platform, a price.
The screenshot is the proof
- Use the real product, with realistic data. Lorem ipsum in a screenshot reads as not built yet.
- Frame it: a browser window, a Mac window or a phone. The frame tells the visitor where the product runs.
- Crop to the part that sells. A full dashboard at hero size is too small to read; one panel at a legible size says more.
- Serve it sharp: 2x resolution, WebP or AVIF, with width and height set so the page does not jump when it loads.
One action
One primary button in the accent colour, one quiet secondary if you need it. We explain why in the one accent colour rule. Under the buttons, a line of fine print that removes a worry: the price, the platform, whether a card is needed.
What to cut
- Logo walls of companies that are not customers.
- Animated text that types itself out.
- Three feature cards squeezed in above the fold.
- A background that moves more than the product does.
On a phone
The headline and button come first; the screenshot follows. Check it at 375px wide, where a two-line headline often becomes four. Designing at 375px has the checklist.
Warm Storefront UI builds heroes this way: a soft-blue hero under a contour texture, a two-line poster headline, one amber button, and the product framed below. It is the hero at the top of this site.
Questions
Should a hero use a screenshot or an illustration?
A real screenshot when the product has an interface worth seeing. It answers what is this faster than any illustration, and it cannot be mistaken for someone else's product.
How many buttons should a hero have?
One primary action, and at most one secondary. Two primary buttons ask the visitor to choose before they know what the product is.
Should the screenshot be above the fold?
At least the top of it should be visible on a laptop screen without scrolling, so the visitor sees there is a product before they decide to read.