What is a Hero Banner?

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

hiro.jpg

Over the last couple of years, a new term has arrived in website design. That is "hero banner" or "hero image". Although the term has gained popularity this year, it has been around for a couple of years.

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 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 (not too big).
  • Contact information or contact link.
  • A strong, bold message that indicates what 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.

New Call-to-action

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 with bold elements.

Some examples to consider:

  • Bing’s home page has a new hero 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 you have to be careful that it doesn’t detract from your primary call-to-action.

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

Take a look at this recent website from TributeMedia.com.

David A Levy & Associates is 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.

The old adage of go big or go home is aptly applied to a hero banner. That’s the trend. That’s what all the cool kids are doing. If you don’t include these large, bold elements on your website, you are probably living in the past (like 2013).

What are you waiting for?

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: