What is a Hero Banner?

Posted by Corey Smith on Aug 29, 2015 8:17:33 PM

super hero

Over the last decade, a new term has arrived in website design. That term is "hero banner," or "hero image". 

I have noticed a few different ways that a hero banner has been defined. Some have defined it as a home page or a main call-to-action, but that's really not what it is. It is part of a home page (or other important landing pages) and should usually contain a phenomenal call-to-action. So, why should you be concerned with this aspect of design?

Creating a phenomenal Home Page

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

  • Logo/company branding (appropriately sized to not be overwhelming, but obviously be noticeable)
  • Contact information or link to the contact page where you have a contact form
  • A strong, clear message that indicates what next step you want your site visitor to do
  • A primary call-to-action (CTA) that matches your key messaging
  • Secondary calls-to-action for those that don’t want to perform the main call-to-action
  • Important links to important pages throughout the site (pricing, blog, about, etc)
  • Social links and share buttons
  • All this needs to be done with simplicity. You don’t want to overwhelm your site visitors

So, how does the hero banner fit into all this?

By definition, the hero banner usually means that it’s a large, bold, in-your-face image.

There is one thing that is very important to note. A hero banner or hero image should reflect the goals of the website.

Some examples to consider:

  • Bing’s home page has a new hero banner image daily. Notice they also have some secondary calls-to-action on the home page but the main call-to-action is the search box.
  • Apple has used the hero banner effectively for a few years. It’s only been in the last year or two that they have added the rotating image to the display. Apple has a luxury that most do not. They do not need as obvious a call-to-action as we all need. But, each hero image in the slideshow has a call-to-action.
  • AirBNB is the largest rental-by-owner site out there. You’ll see on their site that they have included video for the background. It adds for intrigue, but if you were to take this approach, you would need to be careful that it doesn’t detract from your primary call-to-action.

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.

David A Levy & Associates

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 yet.

Ultimately, you’ll have to decide what you want your website to do. If your goal is to drive people to buy, give you a lead or go to another place on the website, a hero banner could be the way to go. If you don't want to be behind the times, it's time to include these large, bold elements on your website.

New call-to-action

Corey Smith

Written by Corey Smith

Corey Smith is the founder of Tribute Media and serves as the Digital Marketing Strategist. He is also the author of "Do It Right: A CEO's Guide to Web Strategy" and "Tweet It Right: A CEO's Guide to Twitter."

Please Leave a Comment: