Skip to main content

TheGenieLab Blog

Hero Images: How to Use Yours & Give Your Site Superpowers

12 May 2015 by Genie Lab


If you like the article, please share it!



Does your site have a hero image? These large, above-the-fold displays are the big trend in web design.

A quick look at the Shopify store shows that this technique is used by the majority of the most popular themes.


Why are hero images popular? How do they work? What sets the best apart from the rest?

Why hero images are popular: valuable real estate

A website’s home page is, 99% of the time, its most popular page. That’s why it makes sense to optimise the page with an all-singing, all-dancing image (or series of images) above the fold that catches visitors’ attention.

A strong hero image results in

  • Lower bounce rates
  • Lower exit rates 
  • Increased site duration times
  • Better user engagement 

The best heroes are direct, clear and uncluttered, with any messaging displayed in a readable font and with a concise message. What’s more, truly effective banners are aware of their customers and their specific needs.

How to use your hero image

Hero images can be utilised in a number of ways: 

To build a brand 

This is usually an option taken by websites with lower brand visibility or those seeking to establish themselves as a premium product. 

If yours is a high-end brand that needs to explain its USPs to its audience, this is the right option. Eat Welsh Lamb uses this technique to tell its story and demonstrate to its visitors that its meat is finer than the average.




Likewise, if you’re adopting a brand-building content strategy on your blog, it could make sense to feature your content from your hero image.

This is the ultimate ‘soft sell’; taking users to a relevant part of the site that minimises the chances of a quick sell, but immerses them in the brand and is more likely to lead to long-term engagement.

To publicise a special event

As it’s seen by the most people, it makes sense to use your hero image to shout about a special event. If you’re in the middle of a sale, let everyone know.

You’ll see this frequently across the internet; recently by Debenhams in its Blue Cross Sale.

To feature specific products

Away from sale time, heroes are used by websites purely to push specific products. This could be to tap into seasonal trends, showcase products with high profit margins, introduce new lines or establish the brand as a thought leader.

For instance, Peacocks introduces a new collection of printed trousers as a means of selling stock while also conveying knowledge and expertise.

To combine a number of different features

It can make sense to create rolling banners that showcase a number of different messages. After all, your website will be visited by a variety of different customers at different stages of the purchasing process.

However, some experts have expressed doubt that rotating banners have the desired effect.

One study by Notre Dame University showed that the first hero image on a manually rotating banner received 84% of all clicks, while the rest received just 4% each.


Another graph shows that automatically rotating banners do seem to engage visitors across a range of slides slightly more.

As you can see, banners with fewer hero images enjoy a more efficient disparity of click-through rates.

If you are to include multiple heroes, think carefully about their intention, ensure they rotate automatically and keep them to a minimum.

What every hero image needs 

Regardless of what you’re saying on it or promoting, every successful hero image needs a combination of three things. 

The holy trinity of hero images is:

1. A striking image

Of course, your hero is pretty powerless without an engaging, arresting and eye-catching image. Insist upon high-resolution imagery that’s bright and bold with discernible colour schemes. Avoid stock imagery and invest in an image that really works.

While there may be specific examples to the contrary, you really can’t beat a photograph. Personable, relatable imagery of real-life people interacting in a way that’s similar to your brand will convey trust and catch a user’s attention.

2. Concise copy

Every banner needs a message. Convey the quality in your brand in as few words as possible. Make every last syllable sing.

3. A compelling call to action

The success of your hero image will boil down to its call to action. This, after all, is your end goal.

Like your copy it should be snappy and direct. It should tell the reader exactly what you want them to do, whether that’s “shop now”, “find out more” or “read on”.

An example of a killer hero image

If we’re allowed to toot our own horn, check out our hero image for the high-end fashion brand Geysir.


It utilises a high-quality, personable image that draws the user in and conveys trust (1); some engaging yet succinct copy (2) and a highly visible, direct call to action (3).

The Do's and Don’t's of hero images 

Do

  • Be direct – bold typography, clear colour schemes 
  • Include your brand – your logo will convey trust and quality, and usually sits in the top left hand corner of the page 
  • Ensure it’s responsive – a large hero image may look great but if it doesn’t change to suit smaller screens then mobile and tablet users will suffer. Ensure that key messages aren’t displaced when the image reduces in size
  • Use tints and fades – your copy needs to be as readable as possible. Consider using tints and fades to ensure copy and calls to action stand out
  • Change them – make the most of seasonal trends and behaviours to keep your site looking fresh and keep customers coming back

Don’t

  • Confuse with colours – no one wants a garish colour scheme that’s hard to understand. Ensure the overall colour scheme doesn’t clash with your brand or confuse users
  • Impede the image – ensure the image is framed for maximum impact. Don’t place copy or calls to action in a place that negates the image. Many designers choose to use unassuming ghost buttons as a way to give the image subtlety 
  • Use stock photos – they look cheap and won’t accurately reflect your brand
  • Talk too much – users will skim over any superfluous words, and they’ll just make your hero look messy

What do you think?

A strong hero image can really give a site added gravitas. What are your favourite hero images? Are there any must-know tips that you’d advise fellow designers? Let us know below – we’d love to hear from you.


Enjoyed our article? Share it!

Get some advice about your project - leave a message and we'll be in touch!

Find out more about our ecommerce stores

Read about our API development services


Leave a Reply

All fields are required. We won't spam you!


Showing 1 - 0 of 0 comments

© TheGenieLab LLC

A Limited Liability Company

Incorporated in the State of Florida No. L1000082688

Head Office: 400 NW 26th Street • Miami, FL • 33127 • +1 305-762-0130

UK: +44 (0)3333 445 809

Privacy Policy | Terms