What is a hero banner?
A hero banner (or hero image) is an oversized picture at the top of a website. It’s the first thing a visitor sees when your homepage loads.
Hero banners usually feature splashy, colorful, or otherwise eye-catching images and a short headline that introduces crucial information.
Why use a hero banner?
People are highly visual, so having a high-quality hero image at the top of your page can help create a positive first impression. When your website looks great, it helps build credibility and trust in your brand.
A hero banner is also a great way to direct visitors toward your call-to-action, promote current discounts and new arrivals, or display your unique selling proposition.
How to create the perfect hero image
Great hero image design is attention-grabbing and dramatic, giving visitors an impression of what your brand is all about and showcasing the most important content on your website.
There are two major things to be aware of when creating your hero banner:
- Optimize your hero images: Large images can take a long time to load if they aren’t properly optimized. Hero images lose their effectiveness if they take too long to load.
- Make a point: Make sure that the image actually adds value to your website rather than simply looking good. This means it should either convey (or support) your value proposition or show off your core offering(s). Try not to use stock photos.
Hero image examples
1. Allbirds
Allbirds’ hero image features two related images that represent both their products and their brand identity. The message is reinforced through the headline: “Keep It Light.”
2. Warby Parker
Warby Parker’s hero image is dedicated to explaining their unique selling proposition: the chance to try on five different frames without committing to making a purchase.
3. Glossier
Glossier’s hero image isn’t the most flashy, but does a good job of highlighting their top products, which goes perfectly with their “Shop Bestsellers” call-to-action.
4. ASOS
The banner image on asos.com is a beautiful hero image that customers can’t help but notice. It presents their clothes in a great light.
5. Gymshark
This hero image from Gymshark features new arrivals to a popular product line (the “Adapt Family”). Returning visitors will appreciate the information.
