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 care about you over the competition
- And what they should do next – At least one clear call to action
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. Below, we have included 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 biographical text or tagline
- A Call To Action (or CTA) button with a 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 for a 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 the most common form of hero banner on a website and often the most effective if done correctly. The reason is because is clean and easy to quickly digest. Below is a great example of a hero which instantly communicates that this website is related to fitness. The 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 their credibility is portrayed above the fold using the logos from the companies that have recently featured them.
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. It is a good idea to choose a very simple image if you elect to go this route due to the abundance of white space. The written content should be short and to the point in order to get your message across quickly.
4. White, Bright, and To the Point
This is 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 and 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 is efficient from a design and communication standpoint.
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 as visibly as possible. Often this hero style works very well for photographers or shops that have really beautiful product images.
5. The Video Hero
Using a video as your hero can be a dynamic way to grab your viewers’ attention. Videos are a very quick way to send a message about what you do, but they are also susceptible to malfunctioning. An example of this is videos that load unreliably, sometimes taking longer to load than your viewers’ attention span will allow. Also, 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 even 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.
These are our most commonly used and liked hero options but they aren’t the only ones. If you are stuck or unsure of 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.
0 Comments