Hero Section Examples: How the Best Sites Open

The hero section is the first screen of a page: usually a headline, a line of supporting text, a button and an image. It is the most redesigned part of any website, and for good reason. In a study reported by Nature in 2006, Gitte Lindgaard and colleagues found that people formed a judgment of a web page’s visual appeal after seeing it for just 50 milliseconds, and that those snap judgments matched the ones they made after looking for longer.

Attention also concentrates at the top. Nielsen Norman Group’s 2018 eyetracking study found that people spent about 57 percent of their viewing time above the fold and about 74 percent within the first two screens. The first screen is not the only thing people see, but it is the part everyone sees.

This article looks at how the sites in the gallery open, grouped into five patterns. It is part of the guide to web design elements.

What every hero has to do

Whatever it looks like, a hero section has to answer three questions quickly:

1. What is this? A product, a person, a publication, an offer.
2. Is it for me? The audience or the problem, stated or implied.
3. What do I do next? One clear action, or an obvious way into the content.

If someone who has never heard of you can answer all three after five seconds, the hero works, however plain it looks. If they cannot, no amount of art direction will save it.

Pattern 1: the product view

Software companies increasingly lead with their actual product. Linear opens on a near-black canvas with a single line of large type and, right below it, a real slice of the product rather than an illustration of it. Figma sets its headline beside a stack of overlapping design files that show the product at work. Notion crops its product screenshot so tightly that it reads like a document rather than a dashboard.

When it works: when the product looks good and is understandable at a glance. What it needs: a clean, real screenshot, cropped to the part that matters, and a headline short enough to leave room for it.

Pattern 2: typography alone

Some of the most memorable heroes in the gallery have almost no imagery. Vercel uses a two-word headline, the brand triangle and a row of customer logos. Clément Grellier runs his name across the full width as one word. Mat Voyce, a type designer, fills the screen with his name in a huge condensed face.

When it works: when the message is short and the brand has a confident typeface, or when the type is the work, as it is for a type designer. What it needs: very few words, a typeface with character and plenty of space. A long headline set huge just becomes a wall.

Pattern 3: the photograph

Stores, travel brands and publications often lead with a single strong image. Patagonia uses a candid outdoor photo with one product category, “Fleece,” and three pill buttons for Women’s, Men’s and Kids’. Away uses a macro photograph of a suitcase detail with a five-word line. Exhibition Magazine runs its masthead over a full-bleed fashion photograph.

When it works: when the image itself carries the message: the product in use, the place, the mood of the brand. What it needs: a real photograph rather than stock, text placed where it stays readable on top of it, and an image file small enough to load quickly.

Pattern 4: interaction

A growing number of pages let the visitor do something in the first screen. Airbnb’s host page is the best example in the gallery: a big estimated earnings figure, a slider for nights per month and a map of the local market. The visitor gets a personal answer before being asked to commit. Miro and Semrush place an input field in the hero, so the first thing you do is start using the product.

When it works: when the product can show its value in one simple interaction. What it needs: an interaction that works instantly, without sign-up, and gives a real result.

Pattern 5: the form

Landing pages built for one action often put the form itself in the hero. Zoho Mail uses two columns: the promise on the left and the full sign-up form on the right, above the fold. DoorDash’s merchant page places its sign-up form inside the hero next to a photo of a busy kitchen, under a headline that leads with the offer. Shopify’s free trial page reduces the form to a single email field.

When it works: when visitors arrive already knowing what they want, usually from an ad or a search. What it needs: a short form, a headline that matches what brought them there and a reason to act now.

Writing the headline

Across all five patterns, the headline does most of the work. Strong examples in the gallery tend to do one of three things:

• Name the thing plainly. “Free Mac Screen Recorder” on Loom’s landing page repeats the search term almost word for word.
• State the outcome. “Go from 0 to $1” on Gumroad tells creators exactly what the product does for them.
• Make a promise with personality. “Crafting Websites that Feel Good” on Eduard Bodak’s portfolio is short and specific enough to be believable.

What to avoid: slogans that only make sense after reading the rest of the page, and headlines that describe the company (“We are a leading provider of…”) instead of what the visitor gets.

Common hero mistakes

• Carousels. Rotating slides split attention between several messages and usually show visitors only the first one. Pick the message that matters.
• Two equal buttons. “Get started” and “Book a demo” in the same style force a decision before the visitor knows enough. Make one primary and one quiet.
• Text over busy photos. If the headline sits on a detailed image, it needs a solid background, a shade or a calmer crop.
• Heroes that fill a phone screen with an image. On mobile, check that the headline and the main button appear without scrolling.

A quick test for your own hero

Show the first screen to someone for five seconds, then hide it and ask three questions: what is this, who is it for, and what would you click? If they can answer, keep it. If they hesitate on any of the three, change the headline before you change anything else.