← All terms
Labeled interface graphic showing what "Hero" looks like

Fig. 20 / Hero

Web UI Patterns

Hero

EXPLAINED SIMPLY:The hero is the big section at the top of a page that carries the headline, the main image, and the one button the page most wants you to press.

The hero is the big section at the top of a page that carries the headline, the main image, and the one button the page most wants you to press. It's the first thing every visitor sees and the section teams argue about longest.

The name comes from advertising, where the glamour photo of the product is the hero shot. On the web, the hero is that shot plus a headline plus a button, assembled into one zone. The dashed outline in the picture is the whole hero: headline and button on the left, image on the right.

A hero has about three seconds to answer what this is and why anyone should care. That is the entire brief. If the headline could sit on any company's site ("Work smarter, together"), the hero isn't doing its job.

The button inside it is usually the page's primary call to action, the one button that matters. A hero with two equally loud buttons is asking every visitor to flip a coin. And because the hero owns most of the space above the fold, it's the one section you can be sure everyone actually saw.

You'll also hear "hero section," "hero banner," and "hero image," which strictly means the picture part alone. Some people say masthead, an older word borrowed from newspapers.

When you want to change what the top of the page says or sells, ask about the hero.