Web Design Hero: Fix LCP, Meet WCAG, Test for Designers & Marketers

Designer reviewing a web hero layout

A web design hero is the primary visual block a visitor sees first, typically spanning most of the browser window above the fold. Its one job is to answer four questions fast: what is this, why should I trust you, what do I get, and what should I do next. Everything else on the page exists to support that first decision.

TL;DR:

Use a clear headline of under ten words that states the core benefit or problem solved, avoiding vague or ambiguous language.

Select a hero visual that directly reinforces the headline’s promise, matching the format to what is actually being sold, such as photos for visual products or illustrations for abstract concepts.

Maintain a single primary CTA that clearly directs visitors to the next step, styled distinctly from any secondary options to minimize hesitation.

Optimize images for speed by serving multiple responsive sizes with modern formats, preloading the hero image, and avoiding lazy-loading the hero itself.

Ensure accessibility through sufficient contrast, large, readable text, descriptive alt text, and respecting reduced-motion preferences.

The Essential Components of an Effective Hero Section
Choosing the Right Hero Visual: Photos, Illustration, Video, and More
Writing Hero Copy That Gets a Click, Not Just a Read
Making Your Hero Section Accessible by Default
Why Your Hero Image Is Probably Hurting Your Page Speed
Structuring Layout and Hierarchy So Visitors Keep Scrolling
Testing Your Hero Section: What to Measure and How to Iterate
Hero Patterns Worth Copying (Or Testing Against)
What Designers Get Wrong About Hero Sections
Sources
FAQ

The Essential Components of an Effective Hero Section

A hero section is not one image with a headline slapped on top. It's a small system of parts, and each one fails the page if it's missing or misused.

The headline carries the heaviest load. It has about three seconds to state what you offer or what problem you solve, in specific language rather than vague ambition. "Software for growing teams" says nothing. "Cut your onboarding time in half" says something a visitor can evaluate instantly. Keep it to one sentence, ideally under ten words, and skip the cleverness for clarity.

The subheading exists to add the one piece of context the headline couldn't fit. If the headline states the benefit, the subheading names who it's for or how it works. Two lines maximum. This is not the place to restate the headline in different words.

The primary CTA is a single, unmistakable action, not a wall of options. The page's core structure needs one dominant button, styled and worded so there's no ambiguity about what happens next.

The hero visual does emotional work the copy can't. It should reinforce the promise in the headline, not just fill empty space. A screenshot of a dashboard says "software"; a photo of a relieved customer says "relief." Pick based on what you're actually selling.

Finally, the hero doesn't exist in isolation from your navigation. A cluttered nav bar competing for attention above a hero undercuts the whole point of a focused first impression.

A quick checklist before you ship a hero:

One headline, one clear benefit, under ten words
One subheading adding context, not repetition
One primary CTA, styled distinctly from any secondary link
One visual that reinforces the headline's promise
A nav bar that doesn't compete for the same attention

Choosing the Right Hero Visual: Photos, Illustration, Video, and More

The visual you choose shapes how fast visitors trust you, and each format carries real trade-offs.

Full-bleed photography works best when the product or outcome is inherently visual: travel, real estate, food, fitness, hospitality. It reads as credible because it looks like reality, but stock photography that looks staged tends to erode trust rather than build it. Illustration solves the opposite problem: it's ideal for abstract SaaS concepts that have no natural photo, and it's cheaper to update than reshooting talent. The trade-off is that illustration can feel generic when it's clearly a licensed template rather than custom work.

Product shots earn their place when the product itself is the selling point, think hardware, apps with a distinctive interface, or physical goods. Video adds motion and story in seconds a photo can't, but it costs more to produce and can hurt load times if not compressed and optimized carefully. Abstract textures and gradients are the safest fallback when you have no strong visual asset yet, though they communicate the least.

Practical guidance for choosing and deploying hero visuals:

Match the format to what you're actually selling, not to what looks trendy
Use responsive art direction: serve a tighter crop on mobile instead of shrinking the same wide image
Reserve autoplay video for cases where sound is off by default and it doesn't block interaction
Test whether a human face or handmade illustration outperforms a polished stock photo for your specific audience

That last point matters more than most designers assume. Handmade, human-centered visuals are increasingly registering as trust signals, particularly for brands competing against slicker, more corporate-feeling competitors. A slightly imperfect illustration can read as more honest than a flawless render, depending on your audience.

Writing Hero Copy That Gets a Click, Not Just a Read

Good hero copy states a benefit before it states a feature. "Track every experiment in one dashboard" beats "Powerful analytics platform" because the first sentence tells a visitor what changes for them.

A few formulas that hold up across industries:

Outcome first: "Ship better landing pages, faster" (states the result, implies the method)
Problem, then relief: "Stop guessing which headline converts" (names the pain before the fix)
Specific number or timeframe: "Launch your first test in under 10 minutes" (concrete beats abstract)

CTA wording deserves more scrutiny than most teams give it. "Get started" is one of the most common hero CTAs, and also one of the weakest, because it asks for commitment without telling the visitor what they're committing to. Replace it with a phrase tied to the actual next step: "See a live demo," "Start your free trial," "Check pricing." The more specific the label, the less friction the click carries.

Keeping the hero to a single primary action isn't a stylistic preference. Competing calls to action inside a hero can measurably reduce engagement, because every extra choice adds hesitation. If you need a secondary action, like "Watch a demo" next to "Start free," style it visually as clearly subordinate: outline button, smaller text, lower contrast, so there's no confusion about which one matters.

Microcopy under the CTA, short reassurance like "No credit card required," reduces the last bit of friction without adding visual weight. For deeper technique on this, copywriting principles for landing pages and tactics for CTA button design both go further into wording tests worth running. Partner resources on CTA-writing fundamentals cover similar ground from a broader marketing angle.

Making Your Hero Section Accessible by Default

Accessibility in a hero section isn't an add-on for a later sprint. It determines whether a meaningful share of your visitors can read your value proposition at all.

Contrast is the most commonly violated rule and the easiest to fix. Text over a busy photo often fails minimum contrast ratios the moment you check it with a tool, so add a scrim or solid overlay behind the copy rather than trusting the raw image. Typography should stay large enough to read without zooming, generally 18px or larger for hero headlines, with enough line height that text doesn't feel cramped against the visual.

WCAG 2.2 asks designers to avoid images of text whenever real text will do the job, because text baked into an image can't be resized, translated, or read by a screen reader. If your headline lives inside a hero graphic, that's a fix worth prioritizing this quarter. Every informative image also needs real alt text describing what it conveys, not just its filename.

Motion is where hero design most often crosses into harm. Parallax scrolling, auto-panning backgrounds, and looping video can trigger real physical reactions in people with vestibular disorders. Non-essential animation should respect a user's reduced-motion preference and offer a way to pause or disable it.

Quick accessibility checklist for any hero:

Run text-over-image combinations through a contrast checker before shipping
Use real HTML text for headlines, never text baked into the image file
Write descriptive alt text for every informative visual
Detect prefers-reduced-motion and cut animation or autoplay accordingly

Pro Tip: Test your hero with your monitor brightness turned down and from three feet away. If the headline gets hard to read, so will it for a meaningful share of your actual visitors.

Why Your Hero Image Is Probably Hurting Your Page Speed

Hero images are the single most common cause of a slow Largest Contentful Paint (LCP), because they're usually the largest visual element rendered above the fold, and browsers can't paint them until the file finishes downloading.

The fix starts with responsive images. Instead of shipping one enormous file to every device, serve three to five sizes through srcset and sizes, so a phone downloads a phone-sized file instead of the same asset a 4K monitor gets. Pair that with modern formats: AVIF or WebP compress dramatically better than JPEG at equivalent visual quality, with a JPEG fallback for older browsers.

Responsive image sizes flowing through format optimization

Preloading matters just as much as compression. If your hero image is the LCP element, and it usually is, adding a preload hint tells the browser to fetch it immediately instead of discovering it late in the render process. Skipping this step is a well-documented cause of avoidably slow hero-driven LCP scores.

Practical performance checklist:

Serve 3 to 5 responsive image sizes via srcset, not one fixed file
Use AVIF or WebP with a JPEG fallback
Add a preload hint for the hero image specifically
Lazy-load everything below the fold, but never lazy-load the hero itself

Preloading the LCP image is one of the higher-leverage single changes a team can make to perceived speed, because it directly targets the metric Google uses to judge how fast a page feels, not just how fast it technically loads. For a deeper walkthrough on balancing visual ambition against speed, see this guide to fast-loading hero sections.

Structuring Layout and Hierarchy So Visitors Keep Scrolling

Visual hierarchy in a hero should guide the eye in a specific order: image or motion first, headline second, CTA third. Whitespace does more work here than most designers give it credit for. Cramming a headline, subheading, CTA, badges, and a background image into one dense block usually backfires, because nothing stands out when everything competes.

The "fold" isn't dead, whatever the design blogs have claimed for a decade. What's visible without scrolling still needs to carry the core value proposition on every device size, because a meaningful share of visitors never scroll past what loads first. That doesn't mean cramming everything above the fold. It means making sure the hero alone can justify a scroll.

A few layout habits worth adopting:

Leave visible whitespace around the headline and CTA rather than filling every pixel
Add a subtle scroll cue, like a chevron or partial content peeking from below, so visitors don't mistake the hero for the whole page
Keep the nav bar minimal in the hero so it doesn't visually compete with the CTA
Avoid a hard visual break between the hero and the next section that could read as "the page ends here"

Testing Your Hero Section: What to Measure and How to Iterate

Guessing which headline or visual works best wastes time a structured test wouldn't. Start small and sequential rather than redesigning the whole hero at once.

Test CTA wording first. It's the cheapest change to make and often the fastest to move a metric. Swap a generic label for a specific one and run the test until you have enough conversions per variant to trust the result, not just a few days of traffic.
Test the headline second. Try a benefit-first version against a problem-first version and watch both click-through rate on the CTA and scroll depth past the hero.
Test the visual third. Swap a stock photo for an illustration, or a static image for a short looping clip, and measure whether engagement moves in either direction.
Test layout last. Reordering headline, subheading, and CTA, or changing whitespace, tends to produce smaller gains than the first three tests, so save it for once the copy and visual are settled.

Track click-through rate on the primary CTA, overall conversion rate downstream, scroll depth past the hero, and LCP itself, since a "winning" variant that quietly slows the page can cost you more than it gains. Running sequential tests with early-stopping rules, starting with CTA and headline before touching layout, keeps the process realistic for teams without huge traffic volumes. Tools built for fast, no-code experimentation, Gostellar among them, make it possible to launch this kind of test without waiting on a developer.

Pro Tip: Don't judge a test on click-through rate alone. A CTA that gets more clicks but sends unqualified visitors into your funnel can hurt total conversions even while the hero metric looks like a win. A quick way to validate demand for a new hero angle without a full campaign is a lightweight tool like Gostellar's FOMO popup generator, which lets you test social proof messaging on live traffic.

For a ready-made experiment plan, this CTA button test outline covers sample variants and what to track from day one.

Hero Patterns Worth Copying (Or Testing Against)

A handful of hero patterns show up across successful sites because they solve specific problems well.

Product demo hero: a screenshot or short clip of the interface, best for SaaS where the product itself is the pitch
Emotional image plus tagline: a strong photo paired with a short line, common in hospitality, wellness, and consumer brands
Feature spotlight: headline plus a single standout feature callout, useful when one differentiator matters more than the rest
Minimalist signup: just a headline, one input field, and a button, effective for newsletters or waitlists where friction must stay near zero
Split layout with copy and visual side by side: common for agencies and B2B tools balancing narrative with proof
Editorial hero with a large image and small headline: works for publishers and content brands where the story matters more than a CTA

Ecommerce heroes lean toward the product-shot or feature-spotlight pattern; agencies often favor the split layout to balance credibility with personality.

What Designers Get Wrong About Hero Sections

The biggest trade-off in hero design isn't between good and bad visuals. It's between visual ambition and measurable performance, and most teams pick ambition by default because it's more fun to design a beautiful hero than to test a boring one that converts better.

A cinematic video hero looks impressive in a portfolio review. It also tends to tank LCP scores if nobody compresses it properly, and most teams never circle back to fix that once launch pressure passes. Small, sequential tests, CTA wording this week, headline next month, beat a full redesign almost every time, because a redesign changes five variables at once and tells you nothing about which one mattered. Handmade or slightly imperfect visuals are worth taking seriously too. Polish can read as generic; a little visible humanity in the design often reads as trust.

— Juan

Sources

FAQ

Why Do They Call It a Hero Image?

The term borrowed from film and advertising, where the "hero shot" is the single dominant image meant to carry the whole message. On a website, the hero image plays the same role: it's the visual asked to do the most work in the least time.

What Is the Difference Between a Website Banner and a Hero Section?

A banner is typically a smaller, often secondary graphic, sometimes promotional or rotating, placed within a page. A hero section is the full, primary above-the-fold area combining headline, visual, and CTA as one coordinated unit meant to define the whole page's first impression.

What Is a Hero Shot on a Website?

A hero shot is the specific image or video used inside the hero section, chosen to reinforce the headline's promise rather than just decorate the space. A strong hero shot for a fitness app might show a person mid-workout rather than an abstract gradient.

What Is the Hero Section in UX Design?

In UX design, the hero section is the structural component that answers what the site offers, why to trust it, and what to do next, all before a visitor scrolls. Its layout, copy, and visual choices are treated as one system rather than separate design decisions.

Try Stellar A/B Testing for Free!