What is a Hero Banner?
A Hero Banner is the term used to describe a large, mostly full-width image at the top of a website and is often the first thing users see when arriving on a website.
Using a hero banner on your site can help to establish trust among new visitors and even convert them into customers, by helping them understand your offering and the website’s direction.
In today’s world, we need two hero banner options. One for mobile, which is usually square or portrait to fit the layout of a mobile device, and of course the desktop version, traditionally a full-width landscape banner.
Ultimately, a Hero Banners job is to grab the user’s attention as soon as they land on a page and to help users identify the brand’s unique selling point (USP) and form an opinion about the brand as soon as the page loads.
What are the 3 main elements of a Hero Banner?
A Hero Banner should consist of at least these 3 things:
- Image
- Heading
- Call-to-Action
1. High quality Imagery to showcase your product
- Your hero banner should consist of high quality imagery to showcase your product/s. Its best is the image shows the product in use, or with a face or hand in shot.
- Does the image you’ve selected actually add value?
- he perfect hero image is supposed to complement your product images and core offering - that’s very hard to achieve with stock images.
2. A heading which contains a keyword and explains your offering.
- A hero banner works best if you add a heading, the heading can contain your company’s unique selling point (USP)
- Research shows that headings with old amounts of words (ie 7 or 9 words) engage & convert best.
- Try and incorporate your main keyword for that page in your heading. As majority of hero banner headings are coded as H1 (Heading 1) a term google uses to understand the content of the page.
3. A strong call-to-action that tell user how to respond
- Use strong contrasting brand colours to make your Call-To-Actions to stand out
- Stop using boring phrases such as LEARN MORE and BUY NOW. Your Call-to-Action needs to relate to your benefit. Get creative...
- Try using Time Sensitive Words eg: Quick! Start Shopping, Get your ........ today!
- Use icons to create direction; eg arrows on buttons
- Place your CTA in the Right Place
Conclusion
To create an effective hero banner remember these things:
- Use only the highest quality images. But run them through TinyPNG to compress the file size.
- Make sure your loading time is quick, just a few seconds too long to load will cost you your viewers.
- Get the message and visuals aligned with your brand and add a clear value proposition.
- Add a call to action that speaks to your users. Speak in your brands voice.
- And lastly, make sure that your hero banner is in keeping inline with your brand identity.