Hero Layout

When you open a webpage, you first only see the upper part of the screen. Only when you scroll down with your finger or mouse does the rest appear. Many sites design this first visible area to be especially large and eye-catching. It’s called a hero layout, meaning roughly the “hero area” of the page. Typical elements include a screen-filling photo, a short sentence in very large type, and a button like “Try it now”. The name comes from the advertising industry and refers to the one motif that plays the leading role.

The first seconds decide

Studies on user behavior repeatedly show the same pattern. People decide within a few seconds whether they’ll stay on a page. During this time, they don’t read paragraphs but merely skim the biggest and most colorful elements. The hero layout is therefore the only message that practically every visitor perceives.

For companies, this area has concrete monetary value. An online shop places the offer it wants to sell there. A software provider explains in one sentence what its product is good for. If the text is worded unclearly, more visitors immediately bounce away. This bounce rate can be measured, which is why hero areas are often tested in variants.

However, there is also criticism of this pattern. A huge image pushes all useful information further down. Anyone looking for a phone number or a price has to scroll first. Some sites therefore deliberately forgo a hero layout and start directly with content.

What such an area is composed of

Technically, a hero layout is a box whose height is based on the screen. Webpages are described with HTML, which defines the content, and with CSS, which determines the appearance. In CSS, the box is often given a height of one hundred percent of the screen height. This way it fills the visible area on a phone just as it does on a large monitor.

Inside, there are usually four elements stacked on top of one another. At the very back, the background image or a silently playing video. Above that, a semi-transparent dark layer to keep the text readable. Then the main headline, an explanatory subheading, and finally the button. This button is called a call to action, meaning the prompt for the visitor to take action.

The biggest challenge is loading time. A high-resolution photo can be several megabytes in size and blocks the page from rendering. Developers therefore deliver differently sized image versions depending on the device. A phone gets a smaller file than a desktop computer. Search engines now measure how quickly this first large element appears, and rate slow pages worse.

From startup pages to AI chatbots

You’ll encounter this pattern most clearly on the pages of technology companies. Almost every homepage of an AI provider follows the same structure: a short claim in giant type, with a field to try it out underneath. Streaming services, car manufacturers, and travel portals work this way too. If many sites seem oddly similar to you, it’s because of this widely used template.

The term regularly appears in trade texts and design discussions. There, for example, people debate whether a hero area with changing images makes sense. Such automatically advancing image sequences are called sliders and are now considered rather disadvantageous. Users overlook them or don’t have enough time to read them.

A common misconception is equating hero layout with banner. A banner is a narrow advertising strip, often paid for by an outside company. The hero layout, by contrast, is a fixed part of the page and carries its own core message. Website builder tool kits also offer it as a ready-made building block, usually under exactly this name.