Designing hero sections that earn their space

The hero section is the first thing most visitors see: the large area at the top of a page, usually with a headline, a short line of supporting text, a button and an image. It occupies the most valuable space on your website, and it is often filled with the least useful content. A vague slogan over a stock photo of people shaking hands tells a visitor almost nothing about whether they are in the right place.

A good hero answers a few simple questions quickly and invites the visitor to take the next step. Here is how to design one that justifies the room it takes up.

The questions a hero should answer

Someone arriving on your home page is quietly asking:

1. What is this?
2. Is it for me?
3. What should I do next?

If your hero answers all three within a few seconds, it is doing its job. If it answers none of them, no amount of visual polish will help.

The headline: say what you do

The headline is the most important element in the hero. Clever, abstract headlines are tempting. "Elevate your everyday" or "Where passion meets purpose" could belong to almost any business. They feel stylish and say very little.

A clear headline usually names what you offer, and often who it is for or where. Compare:

• "Crafting moments that matter" with "Wedding and event cakes, baked to order in Bristol".
• "Your journey starts here" with "Driving lessons for nervous beginners".
• "Innovation for tomorrow" with "Bookkeeping for freelancers and small studios".

The clear versions are less poetic, but a visitor knows instantly whether they are in the right place. You can still add personality through word choice and tone, as long as clarity comes first.

Keep it short enough to read at a glance: often around four to ten words. If you need more, the supporting line is there for that.

The supporting line: add the detail that persuades

Beneath the headline, a single sentence or two can add the most persuasive detail: what makes you different, what the visitor gets, or how simple it is to start. "Small classes, flexible evening times, and an instructor who has seen every kind of nerves" does more work than a list of adjectives.

Resist the urge to turn this into a paragraph. One or two lines is plenty. Everything else can live further down the page.

The call to action: one main button

Decide what the single most useful next step is for a typical visitor, and make that your primary button. For a restaurant it might be booking a table. For a tradesperson it might be requesting a quote. For a shop it might be browsing a collection.

Write the button label as the action, in plain words: "Book a table", "Get a quote", "See the menu". Generic labels like "Learn more" or "Submit" give the visitor no sense of what will happen.

You can include a secondary action, styled more quietly as an outline button or a text link, for visitors who are not ready to commit. "View our work" beside "Get a quote" is a sensible pairing. More than two choices in a hero tends to dilute both.

The image: show, do not decorate

The image should support the message, not merely fill space. The most useful hero images show something real and specific: the actual product, the actual space, the actual result.

• A furniture maker might show a finished table in a real room, close enough to see the grain.
• A dog walker might show a happy dog mid-stride on a local path.
• A software tool might show a clear, cropped view of its interface doing the thing the headline promises.

Generic stock imagery tends to make a business look like every other business. If you do not have good photography yet, a strong typographic hero with no image, or a simple illustration, is often better than a photograph that feels borrowed.

Placing text and image together

There are two common layouts, and each has trade-offs.

Split layout: text on one side, image on the other. This keeps text readable on a plain background and lets the image be seen in full. On phones, the two stack, usually with text first so the message appears before scrolling.

Text over image: a full-width photograph with the headline on top. This can be dramatic, but it needs care. You will usually need an overlay or gradient to keep the text readable, and the image must have a calm area where the text sits. Test it at mobile width too, where the crop changes and a face or product can end up hidden behind the headline.

Size: big enough to lead, not so big it hides everything

A common belief is that heroes should fill the entire screen. Sometimes that works, especially for portfolio or event sites with a single strong image. But a full-screen hero on a business site can hide all the useful content below, with nothing to suggest there is more.

A hero that takes up most of the first screen, but lets the top edge of the next section peek through, gives visitors a hint that the page continues. On phones, be especially careful: a hero image that fills the entire screen before the headline even appears is a common way to lose visitors.

Hierarchy within the hero

The eye should move naturally from headline to supporting line to button. You can achieve this with:

• Size: the headline clearly the largest text on the page.
• Weight: the headline bold, the supporting line regular.
• Colour: the button in your accent colour, the only element in the hero with that colour.
• Space: a little more room above the button than between the headline and supporting line, separating message from action.

Avoid adding extra badges, rotating slides, video controls, review stars and announcement bars all to the same area. Each one competes with the headline.

A note on carousels

Rotating hero carousels were once very common. They are generally a weak choice: visitors rarely wait for the slides to change, the motion can be distracting, and you are forced to divide attention between several messages instead of committing to one. If you have several things to say, say the most important one in the hero and put the others in sections below.

Hero checklist

• The headline says plainly what you offer, and ideally who it is for.
• A supporting line adds one persuasive detail.
• There is one primary button with a specific action label.
• Any secondary action is clearly quieter.
• The image shows something real and relevant, or is left out.
• Text is readable over the image, including at mobile width.
• Part of the next section is visible, suggesting there is more.
• Nothing else in the hero competes with the headline and button.

When you generate a site with Katzero, the hero is a good place to start editing: rewrite the headline until a stranger could tell what you do in one read. The hero earns its space by being the clearest part of your website, and everything else on the page benefits from that clarity.