What is a Hero Banner?

When building a new website, one of the most important aspects to consider is the hero banner. A hero banner is a large, prominently placed image or video that appears at the top of a website's homepage. It is the first thing that visitors see when they arrive at your site, and it plays a crucial role in setting the tone and establishing your brand identity.

The design and elements contained in a hero banner should always depend on the goal you are trying to accomplish.

So, why should you be concerned with this aspect of design? We'll cover that here, but first, let's take a look at how the hero banner became an important part of web design and marketing in the first place. 

The Evolution of the Hero Banner

Hero banners really started appearing about 15 years ago. Because they evolved from pages that lacked a singularly focused message, it's hard to say when the very first hero banner actually appeared. What started as a Flash presentation (a slideshow or other moving presentation) evolved into a video background. The video background approach then evolved into a bold, single image with a focused message to target an ideal audience.

Between about 2013 and 2016, websites were replete with video banners. Some were done very well, but most were done very poorly. The reality is that slideshows, rotating presentations, and video backgrounds never really performed as well as marketers hoped. The proof? Well, how many major websites use those features now compared to how many used them five to eight years ago?

I don't know either, but not many. (I could give you the stat if you need but the reality is that my stats don't matter... yours do.)

4 Tips for Strategizing and Designing a Successful Hero Banner

1. Make it visually appealing

The hero banner is often the first thing visitors see when they land on your website, so it's essential to make a great first impression. Use high-quality images or videos that are visually appealing and capture the essence of your brand. Consider using bold colors, interesting typography, or eye-catching graphics to make your hero banner stand out (while making sure it's in line with your brand standards!).

2. Keep The Messaging simple

While it's tempting to cram as much information as possible into your hero banner, it's important to remember that less is often more. Keep the messaging simple and concise, and focus on the most important aspects of your brand or products. A cluttered or confusing hero banner can turn off visitors and make it difficult to navigate your site.

3. Use a call-to-action

A call-to-action (CTA) is a button or link that encourages visitors to take a specific action, such as signing up for a newsletter or making a purchase. Including a CTA in your hero banner can be a powerful way to drive conversions and increase engagement. Be sure to make the CTA prominent and easy to find, and use language that is clear and compelling.

4. Optimize for different devices

With so many people accessing websites on mobile devices, it's essential to ensure that your hero banner looks great on all screen sizes. Consider using responsive design techniques to optimize your hero banner for different devices, and test it thoroughly to make sure it looks great and functions properly.

But, most importantly, your hero banner should reflect the goals of the website.

Some examples to consider:

• Surfrider Foundation has a very compelling yet simple homepage hero banner. I pick this as the first on my list because as of six months ago, they had a carousel on their home page. They never perform as well as simple, bold, calls-to-action.
• Apple has used the hero banner effectively for a few years. About the time of the rotating presentation and video background phase of the internet, they did it too. In recent years, they have opted more commonly for the single, bold banner with one, singular message and call-to-action.
• AirBNB is the largest rental-by-owner site out there. In 2015, AirBNB, like most major websites, had a video background. Now, it does not. They are focused on helping you define your experience and the videos they used to have showing places to rent didn't do that very well.

Take a look at this website built by our team:

David A Levy & Associates website was built by our team for one of our clients. You’ll likely have seen their work if you’ve ever entered an Anthropology, Urban Outfitters, and Tesla (among others). They are a great retail space architect.

What do you notice about their hero banner? Do you notice something missing?

If you said that there is not a primary call to action, then you’d be right. If you didn’t say that, then you can pretend you did.

In their case, their goal was not to drive site visitors to a specific call to action, such as generating a lead. Their sole purpose was to create a website that showcased their brand. This hero banner on the home page has a perfect spot for a call to action should they want that, but it’s not present because their goals don't define that as a need.

Bonus Tip: Creating a Successful Home Page

A great website home page should include a few key elements:

• Logo/company branding (appropriately sized not to be overwhelming, but enough for brand recognition)
• Contact information or a link to the contact page where you have a contact form in order to convert leads or support existing customers
• A strong, clear message that indicates what next step you want your site visitor to do based on their needs
• A primary call-to-action (CTA) that matches your key messaging
• Secondary calls-to-action for those who aren't quite ready to perform the main call-to-action or speak to a salesperson
• Important links to your most important pages throughout the site (pricing, blog, about, etc)
• Social links and share buttons

How Does This Information help your company?

In summary, a hero banner is a crucial element of any website, and it's essential for business owners to understand its importance. By following these tips and best practices, you can create a hero banner that captures the essence of your brand, engages visitors, and drives conversions.

Recommended next steps to defining your hero banner

When defining a hero banner and hero messaging strategy, we always start with buyer persona development. We've even been known to employ the brilliance of some Story Brand. Also, compare your website goals from when you initially built your website to your website goals today. Do you want to drive more sales? Do you have a unique service offering you want to push visitors to learn more about? These are the types of questions you should be asking yourself and your sales & marketing teams. 

There are countless ways to create your messaging strategy but it will take time to do it right. You can't simply leave your messaging to chance because it's what you THINK sounds good. Take the time to develop your first buyer persona (built based on your existing ideal customers) and remember to speak to your audience, not to yourself.

Now, if you already have a hero banner on your site, then it's probably time to evaluate how well your hero banner is performing and make adjustments as necessary. We love tools like Hotjar to evaluate how people interact with the page. You might also consider some A/B testing to create the best-performing page possible.

Learn more about how Tribute Media can help your company re-evaluate your hero banner and homepage design to turn more leads into customers.