The hero section is the most consequential piece of real estate on your website. It is the first thing every visitor sees, it is seen by visitors who never scroll, and it sets the expectation for everything that follows. Research consistently shows that visitors form their first impression of a website within 50–100 milliseconds — before they have read a word. The visual impression of the hero determines whether they read the headline. The headline determines whether they read the sub-copy. The sub-copy and CTA together determine whether they take action. This guide covers the design decisions that make a hero section work commercially.
What Is the Purpose of a Website Hero Section?
The hero section has a single job: convince visitors that they are in the right place and that taking the next step is worth their time. It does not need to explain everything the business does — it needs to communicate enough to make the visitor scroll or click.
A hero section must answer three questions in under 8 seconds:
- What does this business do? — The headline communicates the primary offering in direct, specific language
- Who is it for? — The sub-copy or supporting context confirms the visitor is the right audience
- What should I do next? — The call to action is clear, specific, and low-friction
A hero section that fails to answer these questions — because the headline is too abstract, the visual is decorative but uncommunicative, or the CTA is missing — loses visitors who would otherwise convert.
What Are the Essential Elements of a Hero Section?
Headline: The single most important copy element on the website. It must be specific (not "We help businesses grow"), benefit-led (what does the visitor get, not what the business does), and direct. The best headlines communicate the core value proposition in under 10 words. See call to action design guide for the copywriting principles that apply here.
Sub-headline or supporting copy: 1–3 sentences that elaborate on the headline — adding specificity (who it is for, how it works, or what the outcome is). Not a list of features. Not a company description. A continuation of the headline's promise.
Primary CTA button: One primary action. The button label must be specific: "Start Your Free Trial", "Get a Quote", "Book a Discovery Call" — not "Learn More", "Click Here", or "Submit". The CTA button must be visually prominent — contrasting colour against the background, large enough to tap on mobile (minimum 44px height), and immediately visible without scrolling.
Secondary CTA (optional): A lower-commitment alternative: "See Our Work", "View Case Studies", "Watch a Demo". Best used when the primary CTA requires significant commitment (high-value purchase, sign-up), and a secondary path to evidence keeps visitors who are not ready to commit.
Hero visual: Photograph, illustration, video, or product screenshot that reinforces the headline and communicates what the business is. The visual must be relevant to the value proposition — not a generic stock photo. For service businesses, a photograph of real work, a happy client, or the team at work communicates authenticity more effectively than abstract visuals.
Supporting trust signals (optional): Social proof in the hero — star rating, client logos, a short testimonial — reduces scepticism at the moment of maximum uncertainty. For most businesses, one trust signal in or adjacent to the hero is enough.
What Layout Patterns Work Best for Hero Sections?
Left-aligned text, right-aligned visual (most common): Headline, sub-copy, and CTA on the left; photograph or product screenshot on the right. Works for SaaS, professional services, agencies, and most B2B businesses. Reading direction (left to right) means visitors encounter the headline before the visual.
Centred text, full-width background (best for brand-led businesses): Headline and CTA centred on a full-width photograph or video background. Works for hospitality, lifestyle brands, luxury services, and businesses where atmosphere is a primary selling point. The visual must have sufficient contrast for text legibility.
Split screen (for businesses serving two audiences): 50/50 split showing two options or two audiences side by side. Best used when there are genuinely two distinct entry points (e.g., "I'm a buyer" vs. "I'm a seller"; "Individual" vs. "Business").
Product-forward (best for SaaS and apps): Headline and CTA followed by a product screenshot or interface demo. Communicates what the product is immediately without requiring the visitor to click through.
What Are the Most Common Hero Section Design Mistakes?
Abstract or meaningless headlines. "We help businesses succeed." "Your growth partner." "Building better futures." These communicate nothing. A visitor landing on a professional services website with an abstract headline has no idea what the business does. Specificity beats abstraction every time: "Website Design and Development for UK Professional Services Firms" tells you exactly who this is for and what they do.
CTA buttons labelled "Learn More". "Learn More" is the lowest-commitment, lowest-intent label you can put on a button. It communicates that clicking will give you more information — not that it will move you toward a result. Replace with the specific outcome: "See Pricing", "Start a Project", "Book a Free Consultation".
Auto-playing video backgrounds without a fallback. Full-screen video backgrounds that auto-play on mobile reduce performance significantly and consume users' data allowances. Either disable video on mobile and use a static image, or use a very short, compressed loop (under 5MB). See website speed optimization guide for performance standards.
No visible CTA above the fold on mobile. Many desktop hero designs have the CTA button below the fold on mobile devices — meaning mobile visitors (often 60%+ of traffic) must scroll before they see any action opportunity. Test every hero design on actual mobile devices to confirm the CTA is visible without scrolling.
Stock photography that could belong to any business. A generic stock photo of a person shaking hands, a laptop on a desk, or a group of smiling business people communicates nothing specific about your business. Use real photography of your work, your team, or your clients — or commissioned illustration that is visually distinctive.
How Should Mobile Hero Design Differ from Desktop?
Mobile hero sections require specific design decisions — not just scaling down the desktop version:
- The headline must be legible at 32–40px on mobile — if your desktop headline is 64px or larger, it will either overflow the screen or shrink to an unreadable size on mobile
- The hero image must work as a cropped version — a landscape image may lose its subject on mobile portrait view. Design the visual as a square or portrait crop first.
- The CTA button must be full-width on mobile (or nearly full-width) — small buttons are difficult to tap accurately on touchscreens
- Remove secondary CTAs on mobile if they push the primary CTA below the fold
- Keep sub-copy to a maximum of 2 sentences on mobile — mobile users scan, they do not read
See mobile first web design guide for the complete mobile design standards.
Your Hero Section Should Convert More Visitors Immediately
We design business websites with hero sections that communicate value instantly, build trust, and drive conversions — for businesses in the US, UK, Canada, and Australia.
A website hero section must include: a specific, benefit-led headline that communicates what the business does in under 10 words, a supporting sub-headline of 1–3 sentences elaborating on the headline, one prominent primary CTA button with a specific label (not 'Learn More'), and a relevant hero visual — a photograph, product screenshot, or illustration that reinforces the headline. Optional but high-value: a secondary CTA for visitors not ready to take the primary action, and a trust signal (star rating, client count, or recognisable client logos) to reduce initial scepticism. The headline is the most important element — it determines whether visitors read anything else.
A good hero section headline is specific (names who it is for or what it does), benefit-led (communicates what the visitor gets, not what the company does), and direct (under 10 words, no jargon). Compare: 'We help businesses succeed online' (abstract, meaningless) vs. 'Next.js websites for UK professional services firms' (specific, clear). The test for a good headline: can a visitor who has never heard of your business understand what you do and whether they are the right audience within 3 seconds? If yes, it works. If not, rewrite it.
The best CTA button text names the specific outcome of clicking: 'Start Your Free Trial', 'Get a Custom Quote', 'Book a Discovery Call', 'See Our Portfolio', 'Download the Guide'. Avoid 'Learn More', 'Click Here', 'Submit', 'Go', or 'Find Out More' — these are generic labels that communicate no specific value. The button label should complete the sentence 'I want to…' from the visitor's perspective. First-person labels ('Start My Free Trial', 'Get My Quote') typically outperform second-person labels in A/B tests.
With caution. A video background can communicate atmosphere and brand quality effectively — particularly for hospitality, lifestyle, and experience businesses. However: autoplay video backgrounds significantly affect performance (LCP scores), consume mobile data, and often fail to load on slow connections. If using a video background: compress it aggressively (under 5MB), disable autoplay on mobile and use a static poster image instead, ensure text contrast is sufficient across all frames of the video, and test Core Web Vitals before and after adding the video. A well-chosen static photograph consistently outperforms a video background for most business websites.
A hero section should be entirely visible without scrolling on the most common screen sizes for your audience — typically a laptop screen at 1280x800px desktop and a phone screen at 390x844px mobile. On desktop, this means the hero content (headline, sub-copy, CTA, and visual) should fit within approximately 600–700px of vertical height. On mobile, the minimum requirement is that the headline and primary CTA button are visible without scrolling — sub-copy and visuals below the fold are acceptable if the primary action opportunity is visible immediately.