Your hero section loads in under a second. Visitors still bounce. You've rewritten the headline three times, swapped the background image twice, and added a second CTA "just in case." Nothing moves.
Here's the thing most founders miss about website hero section design: the problem usually isn't what you're saying. It's how the section is structured. Layout, element priority, and visual hierarchy determine whether visitors read your headline or hit the back button. And if you've built your site with an AI tool, there's a good chance your hero section looks like every other AI-generated startup page.
This guide covers the 5 hero section layout patterns that consistently convert for startups, the 4 elements every hero section needs, and the 3 mistakes that kill conversions before visitors scroll.
What a Hero Section Actually Does
A hero section is the first full viewport of your website: the content visible before any scrolling. Its job is to answer three questions in under 5 seconds: What is this? Who is it for? What should I do next?
That time constraint isn't arbitrary. Research from the Nielsen Norman Group shows that visitors spend 57% of their viewing time on above-the-fold content, with attention dropping sharply as they scroll. If your hero section doesn't communicate clearly in that window, the rest of your page barely matters.
This is why good messaging alone isn't enough. You can have a sharp value proposition and still lose visitors because the layout buries it. The headline competes with a navigation bar. The CTA sits below a stock photo. The trust signal is pushed to the second viewport. Structure determines whether your message gets read.
A quick terminology note: your hero section is not the same as your header (the navigation bar at the top) or "above the fold" (which includes the header). The hero section is the primary content area within the first viewport, below navigation and above the scroll line.
The 4 Elements Every Hero Section Needs
Before choosing a layout pattern, nail the ingredients. Every high-converting hero section includes exactly four elements, all visible without scrolling.
1. A clear headline (under 10 words, outcome-focused). This is the single most-read element on your entire site. It should state the outcome your product delivers, not describe what the product is. Size it between 40px and 64px. If your headline needs more than 10 words, it's doing too much. For guidance on writing the headline itself, see how to write a value proposition that converts.
2. A supporting subheadline (one sentence). This expands the headline with specifics: who the product is for, how it works, or what makes it different. Keep it between 18px and 24px. One sentence. Two at most.
3. One primary CTA. Not two. Not three. One visually dominant button with action-specific text ("Start free audit" beats "Get started"). Minimum tap target: 44×44 points. Surround it with enough whitespace that it's the obvious next step.
4. A trust signal. Logos of recognizable customers, a testimonial snippet, a user count, or a rating badge. This element answers the unspoken question every first-time visitor has: "Should I trust this?" Stanford's Web Credibility Research found that 75% of users judge a website's credibility based on its visual design, and trust signals within the hero section are the fastest way to establish it.
These four elements are the pass/fail criteria. If any one of them is missing from your first viewport, your hero section is incomplete.
5 Hero Section Layout Patterns That Convert
Now that you know the ingredients, here are the five structural patterns that arrange them effectively. Each pattern works better for certain product types. Pick the one that matches your situation.
Pattern 1: Split Layout (Headline-Left, Visual-Right)
The split layout places your headline, subheadline, and CTA on the left side, with a product screenshot or illustration on the right. It's a two-column structure, roughly 50/50 or 60/40.
Why it works: It follows the F-shaped reading pattern that NNGroup documented in eye-tracking studies. Visitors naturally start at the top-left, read the headline, scan down to the CTA, then look right at the visual for confirmation. The layout puts your message in the exact path attention already follows.
When to use it: Products with a visual UI worth showing. If you have a dashboard, editor, or interface that communicates value at a glance, this is your strongest option. Companies like Linear and Notion use this pattern because their product is the proof.
Watch out for: The right-side visual needs to be a real product screenshot or a meaningful illustration, not generic stock art. If the image doesn't reinforce the headline, it dilutes it. See the real-world results of optimizing this pattern in how polis.sh doubled its landing page CTR.
Pattern 2: Centered Headline with Demo or Input
A full-width centered headline and subheadline, with a CTA or interactive input field directly below. No side-by-side columns. Everything stacks vertically on a single axis.
Why it works: It eliminates layout decisions by focusing all attention on one vertical flow: read, understand, act. For single-action products, this removes every distraction between the headline and the conversion.
When to use it: Products where the primary action is simple and immediate. "Paste your URL," "Enter your email," "Try it free." If your product can deliver value from a single input, this layout lets you embed the action directly in the hero. SiteCritic uses this pattern because the core action is entering a URL to get a critique.
Watch out for: Without a visual element, the section can feel empty. Compensate with a strong trust signal row (logo bar, user count, or rating) directly below the CTA.
Pattern 3: Social-Proof-Led Hero
This pattern leads with a trust bar, rating badge, or customer count above the headline. The proof comes first, the pitch second.
Why it works: In crowded markets, credibility is the main barrier. When visitors have seen five similar products today, leading with "Trusted by 10,000 teams" or a row of recognizable logos answers their skepticism before they even read your headline.
When to use it: Products in competitive categories where the visitor's default reaction is "I've seen this before." Also effective when you have genuinely impressive social proof (recognizable brands, strong numbers, press mentions). If your proof is weak (three unknown logos), this pattern will backfire.
Watch out for: The trust bar must be visually distinct from the headline but not compete with it. Use smaller type (14-16px), muted colors, and clear spatial separation. The trust element opens the door; the headline still does the selling.
Pattern 4: Product Screenshot Hero
The hero section is dominated by a large product screenshot, browser mockup, or animated product demo. Text is minimal: a short headline and CTA overlaid on or adjacent to the image.
Why it works: For visually distinctive products, the screenshot is the value proposition. A beautifully designed interface communicates quality, functionality, and differentiation faster than any headline can. Figma and Stripe use this pattern because their visual design is itself a competitive advantage.
When to use it: Products with a distinctive, polished UI that communicates value visually. Your interface needs to look good at hero-section scale (1200px+ wide). If your product is a backend tool, an API, or an early-stage MVP with rough UI, skip this pattern.
Watch out for: The screenshot must be current and high-resolution. A blurry, outdated product image signals neglect. Also ensure the headline remains readable against the image. Use a semi-transparent overlay or position text in a clean area.
Pattern 5: Video Background Hero
An ambient, looping video plays behind the headline and CTA. The video shows the product in use, a customer environment, or an abstract motion background.
Why it works: Motion captures attention. For experiential products (events, physical products, immersive tools), video conveys what static images can't: energy, context, and emotion.
When to use it: Products where the experience matters more than the interface. Travel, events, physical goods, creative tools. Also works for brand-heavy companies where atmosphere is part of the value proposition.
Watch out for: Video is the highest-risk pattern. It increases page load time significantly, which can hurt both conversions and SEO. Research from Google's Web Vitals initiative shows that pages loading in over 2.5 seconds see measurably higher bounce rates. Auto-playing video also creates accessibility issues for visitors with motion sensitivity. If you use this pattern, compress aggressively, provide a pause control, and ensure the video doesn't distract from the headline. For most startups, one of the first four patterns is a safer choice.
Hero Section Pattern Comparison
| Pattern | Messaging Clarity | Visual Impact | Mobile Friendliness | Load Speed | Best For |
|---|---|---|---|---|---|
| Split Layout | High | High | Good (stacks vertically) | Fast | Products with a visual UI |
| Centered + Demo | Very High | Medium | Excellent | Fast | Single-action products |
| Social-Proof-Led | High | Medium | Good | Fast | Competitive markets |
| Product Screenshot | Medium | Very High | Fair (image shrinks) | Medium | Visually distinctive products |
| Video Background | Low-Medium | Very High | Poor | Slow | Experiential brands |
The 3 Hero Section Mistakes That Kill Conversions
Knowing the right patterns isn't enough. You also need to avoid the structural errors that undermine them.
Mistake 1: Competing CTAs
Two equally weighted buttons in the hero section ("Start Free Trial" and "Book a Demo") split visitor attention and create decision paralysis. Conversion research from Unbounce's benchmark data consistently shows that pages with a single focused CTA outperform those with multiple competing actions.
The fix: Choose one primary CTA. If you must include a secondary option, de-emphasize it visually: use a text link or ghost button (outline only) next to a solid, colored primary button. The hierarchy should be obvious at a glance. For more on this, read CTA button design fixes that lift conversions.
Mistake 2: No Trust Signal in the First Viewport
Your hero section has a great headline and a clear CTA, but zero evidence that anyone else has used or endorsed the product. First-time visitors, especially those arriving from ads or search, have no context. Without a trust signal, you're asking them to act on faith.
The fix: Add at least one trust element visible without scrolling. A logo bar is the lowest-effort, highest-impact option. Even three to five logos of real customers shift perception.
Mistake 3: Generic Stock Imagery
A smiling person in a headset. A team around a whiteboard. An abstract gradient. These images communicate nothing about your specific product. They actively signal "template site" and erode the credibility your headline is trying to build. If your hero image could belong to any company in your category, it's hurting you. Review our guide to making your website look professional for alternatives.
The fix: Use a real product screenshot, a custom illustration that represents your specific use case, or no image at all (Pattern 2). A centered headline with no image outperforms a split layout with a meaningless stock photo.
How to Test Your Hero Section in 60 Seconds
Pull up your homepage on a laptop. Answer these four questions honestly.
- Can you read the full headline in under 3 seconds? If the headline is buried, too long, or competing with other elements for attention, it fails.
- Is there exactly one obvious next step? Look at your CTAs. If you hesitate about which button is primary, so will your visitors.
- Is there at least one trust signal visible without scrolling? Logos, testimonials, user counts, ratings. Something.
- Does the visual (if any) show your actual product or a relevant illustration? If it's stock photography, it's costing you credibility.
Score yourself: 4 out of 4 means your hero section structure is solid. Focus on optimizing copy and conversion rate. 2 to 3 means you have structural gaps to fix first. 0 to 1 means your hero section is working against you.
If you want a more detailed assessment, tools like SiteCritic score your above-the-fold section across multiple design dimensions automatically, giving you specific, scored feedback on what to fix.
Frequently Asked Questions
What is a hero section on a website?
A hero section is the primary content area in the first viewport of a website, visible before any scrolling. It sits below the navigation header and typically contains a headline, subheadline, call-to-action button, and a visual element or trust signal. The hero section's job is to communicate what the site offers, who it's for, and what action to take next.
How many CTAs should a hero section have?
One primary CTA. Hero sections with a single, visually dominant call-to-action convert at higher rates than those with two or more competing buttons. If you need a secondary action (like "Watch demo"), make it visually subordinate: a text link or outline button, never another solid-colored button at the same size.
Does hero section design affect SEO?
Indirectly, yes. Hero section design affects bounce rate, time on page, and Core Web Vitals (particularly Largest Contentful Paint if your hero includes large images or video). These are engagement and performance signals that search engines factor into rankings. A hero section that fails to engage visitors increases bounce rate, which signals low page quality.
What size should a hero section be?
A hero section should fill the first viewport without requiring any scrolling to see its core elements. On desktop, this typically means a height of 500px to 700px (or 70vh to 90vh). The exact size depends on your content, but the rule is simple: headline, subheadline, CTA, and trust signal must all be visible before the scroll line.
Your hero section is the highest-stakes real estate on your entire website. Pick the layout pattern that matches your product type, include all four required elements, and avoid the three structural mistakes. Then test it. If you want a scored critique of your hero section from a design perspective, paste your URL into SiteCritic and get specific, actionable feedback in under a minute.