Design
Hero section
The hero section is the first screen of a web page: the headline, supporting line, primary action and usually an image, seen before any scrolling. It is where most visitors decide whether the page is for them.
The name comes from print advertising, where the hero was the dominant image. On the web the hero is the whole first viewport, and its job is narrower than people assume: it has to say who the page is for, what is on offer and what to do next, in the few seconds before a visitor scrolls or leaves.
Most heroes fail on the first of those. They open with a slogan that could sit on any company's site, and the visitor has to read further to work out what the business actually does. A hero that names the audience and the outcome plainly loses nothing in style and gains the only thing that matters at that moment, which is recognition.
In practice I treat the hero as a claim that the rest of the page has to prove. If the headline promises clarity, the sections below have to deliver it, or the hero becomes the most polished part of a page nobody trusts.
Get your hero reviewed in a free auditDesign