What is a “Hero” Anyway?

by | May 17, 2019

Did you know you have less than 5 seconds to communicate to your website visitors if they are in the right place and what they should do next?

It’s no secret that in today’s online world the best way to communicate effectively is visually.  Choosing a hero image for your website really is one of those scenarios where a picture is worth a thousand words.  The goal with the hero area of your website (which is everything above the fold) is to answer:

  • What your business does
  • Who your business is for
  • Where you service
  • Why they should work with you over the competition
  • And how they can move forward from here

There are quite a number of ways we can configure the hero area on your website to efficiently communicate your brand message quickly and clearly.  We have included below samples of a few very effective hero banners for your ease of reference!  The most important things to be included in the hero area of your website are:


  • Your written bio text or tagline
  • A Call To Action (or CTA) button with detailed name (not the generic “learn more”)
  • High Quality Professional image(s) that communicate your brand story, product, or services

 1. The Blog or Product Carousel Layout

This layout is especially effective if you have a blogging website or shop and the first thing you would like to communicate to  your visitors is the most recent blog content or featured products.  It makes it quick and easy for your audience to see what kind of blogs they can expect from your website and exactly where they will find those blogs.

2. The Classic Hero Image with Tagline

This is likely the most common form of hero banner on a website and often the most effective if done correctly.  The reason is it is clean and easy to digest quickly.  From the image selected you can instantly see that this is a website related to fitness.  Their tagline tells you exactly what you will find on this website, and the call to action tells you that there is a membership you can join.  As an added bonus you can see their credibility above the fold with logos from places the business has been featured recently.

3. The 50/50 Split

This is a very effective hero style if you have quite a fair amount to communicate quickly.  If done correctly it can look very clean and easy to read, and often include all of the important information you need to tell your website visitor.  Be careful to choose a very simple image if you choose to go this route with lots of white space.  The written content should be short and sweet to get the message accross quickly.

4. White, Bright, and To the Point

This is likely one of my favourite hero styles.  The full width image with lots of white space and a very small amount of text that gets the message across quickly.  A nice bright call to action to tell the customer where to get started, paired with a beautiful image that clearly tells you what this business does.

5. The Slideshow Carousel

This is a fantastic option if you have several beautiful images that clearly demonstrate your product or service quickly for people.  We still suggest ensuring you have a call to action and bio line above the fold to communicate your message whenever possible.  Often this hero style works really well for photographers or shops that have really beautiful product images.

5. The Video Hero

There are a lot of ways to integrate a video into the hero of your website.  This can often be a very quick way to send a message about what you do.  The one down side to video is it can sometimes load unreliably.  Depending on the size of the video and whether it is playing from your website’s hosting environment or somewhere external like YouTube or Vimeo, it may actually slow down your website’s load time.  In some cases the video may not load at all and instead leave a large blank space.  Different browsers handle video differently, so this also contributes to the unreliability of video as a hero.

There are even more options than these, but we thought we would at least give you some options to get you started!  If you are stuck or unsure what style is the best fit for your business feel free to contact us to schedule a free consultation!  We are happy to discuss your online strategy in detail to see which user experience design suits your needs best.

Ask us Anything!

14 + 9 =



Ask us Anything!

2 + 13 =




Professional Web Design Service from Durham Region based web developer Alicia Jones

© 2019 Alicia Jones Creative Inc.  |  Privacy Policy