The hero is the most expensive section of your website. Not because of what it costs to design — because of what it costs to lose it. It's the space where your visitor decides, in under five seconds, whether you deserve their time or whether 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 the components one by one and how to put them together.

1. Eyebrow (optional but useful)

A short 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 · Panama 2026

When to use it: when your brand is new or your niche isn't obvious. When to skip it: when you're already well known and the headline stands on its own.

2. Headline (the king)

The most critical element on the entire website. In a single sentence it has to answer: what do you do, who is it for, and why should they stay?

Formulas that work:

  • Tangible result: "Triple your online sales in 90 days"
  • Emotional promise: "Web design and social media that turn visits into customers"
  • Before/after: "Go from template-based Instagram to a brand with personality"
  • Unique differentiator: "The only Panamanian agency with applied neuromarketing"

What DOESN'T work: "Welcome to our website," "Creative solutions for your business," "We're transforming the future of marketing." Zero information, zero differentiation, zero reason to stay.

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

3. Subheadline (the proof)

This is where you expand on the headline with the "how" or the "why they should believe you." One or two sentences, max. Its job is to reduce the cognitive friction between the promise and the action.

Example:

  • Headline: "Web design and social media that turn visits into customers"
  • Subheadline: "Web design, branding and marketing powered by neuromarketing — every pixel built to convert."

4. Primary CTA

One single primary action. I'll say it again: one. The human brain freezes with more than three options, and hesitates with two. One clear, bold, specific CTA.

What works:

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

What DOESN'T: "Learn more," "Click here," "Submit." Generic, weak, no promise.

5. Secondary CTA (subtle)

For people who aren't ready for the primary one yet. It should look clearly less important: ghost/outline style, no shadows, no strong colors. "See portfolio" or "See services" are typical.

6. Immediate social proof

Client logos, metrics, short testimonials, number of projects. A small element that says "others already trusted them and it went well." It triggers the social validation bias and lowers the sense of risk.

7. Visual (last)

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

Basic rules:

  • If your product is physical, show it.
  • If you sell professional services, a team photo or a mockup of the deliverable.
  • If you sell something intangible (software, an agency), go for abstractions your brain can fill in.
  • Avoid generic stock. The brain recognizes it and discounts 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 get all three right, your hero works. If they miss one, revisit that piece. If they miss all three, back to the drawing board.

Wrapping up

A good hero isn't magic — it's discipline. It's saying what matters 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.