Hero Section Design: How to Make the First Screen Work
Practice4 minInnovialabs editorial team
In short
A good hero answers three questions in seconds — what this is, why it matters to me and what to do next — which takes a clear headline, one primary button, an explanatory visual and a fast load.
What the first screen has to do
The hero section is the first thing people see without scrolling. Its job is not to impress but to orient. Within a couple of seconds a visitor should understand:
- what you offer;
- who it is for and why it matters;
- what the next step is.
If any of these questions goes unanswered, people either leave or scroll looking for meaning. Everything else — animation, backgrounds, illustrations — is secondary and only works on top of these three answers.
Five elements of an effective hero
| Element | Job | How to check |
|---|---|---|
| Headline | Name the value | Clear without context or subhead |
| Subhead | Clarify who and how | One or two sentences, no vague words |
| CTA | Offer one primary step | Verb + outcome: "Get a quote" |
| Visual | Show the product or result | Explains rather than decorates |
| Trust signal | Remove doubt | Real facts: clients, reviews, guarantees |
Write the headline around a benefit or outcome, not a category. "Automation platform" says little; "Website leads land in your CRM instantly" is concrete.
Keep one primary CTA. Style the secondary action ("See examples") as a link or outline button so it does not compete with the main one.
A trust signal only works when it is true and verifiable. Invented numbers and logos used without permission hurt trust more than having none.
Layout patterns
- Text left, visual right. The classic for SaaS and products: the eye reads the headline, then sees the interface.
- Centered text. Works when the message is the main thing and the visual is abstract. Good for services and events.
- Full-bleed background with text. Striking, but needs strong contrast and careful attention to load speed.
- Product in the center. A large screenshot or demo with short text above. Fits when the interface explains itself.
For services, the visual often shows the result or the work process, and trust comes from reviews and project examples. For products, the real interface works best: people see right away what they will be dealing with.
Mobile adaptation
On a phone the first screen is narrow and short, so order matters more than composition:
- Headline first, large, but not wrapping onto five lines.
- Subhead short — it can be trimmed compared to desktop.
- CTA full width or close to it, within thumb reach.
- Visual below the button or simplified; a huge image above the headline pushes the message off screen.
Test on real small-screen devices, not just an emulator on a wide monitor.
Speed and performance
The hero almost always holds the largest element on the page, so it directly affects LCP (Largest Contentful Paint).
- Use modern image formats (WebP, AVIF) and serve screen-appropriate sizes via
srcset. - Do not lazy-load the main hero image — instead, hint its priority to the browser.
- Set image dimensions to avoid layout shift (CLS).
- Replace heavy background video with a poster or a short loop; on mobile a static image is often better.
- Load web fonts with
font-display: swapso the headline is never invisible.
<img src="hero-1200.webp"
srcset="hero-600.webp 600w, hero-1200.webp 1200w"
sizes="(max-width: 768px) 100vw, 50vw"
width="1200" height="800"
fetchpriority="high"
alt="App screen showing a list of orders">
Common mistakes
- Abstract headline like "Innovation for your business" — it says nothing.
- Several equal buttons — people do not know which to pick, so they pick none.
- Carousel in the hero — most people only see the first slide, and the other messages are lost.
- Decorative visual unrelated to the product.
- Low contrast text over a photo or gradient.
- Heavy load animation that delays the content.
- Full-height hero with no scroll cue — visitors think the page ends there.