Hero Section Design: Best Practices That Convert

The hero section is the large block at the top of your homepage. It has about a moment to tell visitors what you do, who it is for, and what to do next. Getting it right is one of the highest-value design tasks on the whole site.

The essentials

A strong hero usually has:

1. A clear headline that states the main benefit
2. A supporting line that adds detail or proof
3. One primary action, such as a button to request a quote
4. Supporting imagery or visuals that reinforce the message

Everything else is optional. See what to put above the fold.

Write the headline first

Visitors should understand your offer within seconds. Say what you do and for whom, in plain words. Avoid clever puns and vague claims like "Excellence in everything." Use your value proposition as the starting point. For more help, read how to write a headline that works.

Pick one main action

Several equal-weight buttons create hesitation. Choose the single step most visitors should take and make it visually dominant. A quieter secondary link, such as "See our work," is fine. See calls to action.

Choose imagery carefully

• Show your actual product, team, or work when you can
• Avoid generic stock photos with no connection to your business
• Make sure faces or key details are not hidden by overlaid text
• Optimize the image. A heavy hero is a common cause of slow loading. See compressing images

On pages where the hero image is the largest element, remember it often determines your Largest Contentful Paint. See how to improve LCP.

Keep text readable

If text sits over an image, check contrast carefully and add an overlay if necessary. Normal text needs a contrast ratio of at least 4.5:1. See color contrast.

Think about mobile

On phones, the hero should still show the headline and button without scrolling. Test on real devices. Avoid fixed heights that push the button off-screen. See mobile-first design.

Be careful with sliders and auto-playing video

Rotating carousels hide content and often go unread. Auto-playing video can be distracting and heavy. If you use video, keep it short, muted, and optional. See using video on your website.

Add quick proof

A short line such as a star rating, a client logo row, or "Trusted by local families since 2012" builds confidence early. Make sure it is true. See social proof.

Test and refine

Try different headlines and images over time. See A/B testing.

The bottom line

A great hero is clear, focused, and fast: one message, one action, and honest imagery. If a visitor can say what you do after five seconds, it is working.