The hero section is the most expensive part of your website. Not because of what it costs to design — because of what it costs you when it fails. It's the space where your visitor decides, in under five seconds, whether you deserve their time or they close the tab.

The good news: there's an anatomy that works. The bad news: 80% of websites ignore it. Let's go through each component and how to put them together.

1. Eyebrow (optional but useful)

A small line above the headline that gives instant context. Three to five words. It works as mental categorization: "ah, this is that kind of company."

Example: Digital studio · Global 2026

When to use it: when your brand is new or your niche isn't obvious. When to skip it: when you're already known and the headline speaks for itself.

2. Headline (the king)

The single most critical element on the entire page. In one sentence it must answer: what do you do, for whom, and why should they stick around?

Formulas that work:

  • Tangible outcome: "Triple your online sales in 90 days"
  • Emotional promise: "Magnetic digital identity for brands with soul"
  • Before/after: "Go from a templated Instagram page to a brand with personality"
  • Unique differentiator: "The only agency that pairs design with applied neuromarketing"

What does NOT work: "Welcome to our website," "Creative solutions for your business," "We transform the future of marketing." Zero information, zero differentiation, zero reason to stay.

"If your competitor could use your headline without changing a single word — it's not your headline."

3. Subheadline (the proof)

Here you expand on the headline with the "how" or the "why you should believe it." One to two sentences max. Its job is to lower the cognitive friction between the promise and the action.

Example:

  • Headline: "Magnetic digital identity for brands with soul"
  • Subheadline: "Web design, branding and marketing driven by neuromarketing — every pixel built to convert."

4. Primary CTA

One single primary action. I repeat: one. The human brain freezes with more than three options and hesitates with two. A CTA should be clear, strong and specific.

What works:

  • Action verbs: "Book," "Download," "Start," "Get a quote"
  • Specific: "Book your free audit" beats "Contact"
  • Low friction: "No commitment · 15 minutes"

What doesn't: "Learn more," "Click here," "Submit." Generic, weak, no promise attached.

5. Secondary CTA (subtle)

For visitors who aren't ready for the primary action yet. It should clearly look less important: ghost or outline style, no shadows, no bold colors. "View portfolio" or "View services" are typical choices.

6. Instant social proof

Client logos, metrics, short testimonials, project count. A small element that says "others already trusted us, and it worked out." It activates social validation bias and lowers perceived risk.

7. Visual (the last decision)

Yes, the last one. Your hero's visual should only be chosen once everything above is clear. Product photo? Mockup? Illustration? Video? Just an abstract gradient? It depends on your industry and message.

Basic rules:

  • If your product is physical, show it.
  • If you sell professional services, use a team photo or a mockup of the deliverable.
  • If you sell something intangible (software, an agency), lean toward abstractions your brain can fill in.
  • Avoid generic stock photos. The brain recognizes them instantly and discounts your credibility.

Quick test

Ask someone to look at your hero for 5 seconds. Close the laptop. Ask them three things:

  1. What does this company do?
  2. Who is it for?
  3. What did they want you to do?

If they answer all three correctly, your hero works. If they miss one, fix that piece. If they miss all three, go back to the drawing board.

Closing thought

A good hero section isn't magic — it's discipline. It's saying the important thing in as few words as possible, in the right order, with clear visual hierarchy. If you'd like us to audit yours, let's talk for 30 minutes. No commitment.