Sorry, but I might sound kind of biased…
I love hero images (and hero sections).
For me – and please bear with me – they’re the definition of what web design should be.
And I’m not even talking about their visual appearance. What I mean is their purpose. Or rather, their nearly perfect ability to convey a single idea really well.
You see, in web design, we’re constantly taught that a homepage should have preferably just one single goal.
If you want to achieve two things through your homepage, that’s too much.
And it’s not that we’re limited by the technology or the screen size. The real problem are our brains, or rather the brains of our visitors. Two ideas, two goals, two things that we want from a visitor … it’s twice as confusing as one idea/goal/thing.
That’s where hero images come into play.
Hero images or hero sections impose limitations. That’s their main power.
It’s simply impossible to convey more than one idea through a hero section. You can only ask the visitor to do one thing, or show them one thing. Trying to split your hero image in two would just look silly.
And this is that unique trait of the hero section that makes it the essence of what we should do on a homepage.
So yeah, I’m biased. But I didn’t want to let that bias overpower the article, so I reached out to a couple of designers and business owners, and asked what they thought of the hero section. Is it just a visual novelty that brings nothing to the table, or maybe there are some benefits that we can get from hero images after all?
Let’s find out.
Hero images vs. conversions
The first thing we need to solve is whether or not hero images convert better than other – more traditional – design choices.
At the end of the day, if the site owner can’t expect anything that’s measurable from a fancy hero section, then why even bother creating it for them in the first place?
To take a closer look at the topic of conversions, I reached out to the people running SendinBlue – a popular email marketing solution – and asked how their recent change from a classic header to a hero section has impacted conversions.
Here’s Amalia Bercot, CMO of SendinBlue:
Since our redesigned website launched in December 2015, we’ve experienced several key benefits from using a hero image on our homepage.
1. Objectively, we can see that our new homepage experienced a lift in homepage conversions – up to 10% in some countries (over our previous rate).
2. Since our software includes three unique apps (marketing campaigns, transactional messages, and marketing automation), the hero image slideshow enables us to more clearly communicate their benefits by supporting each with imagery.
This is the current header at SendinBlue.com:
If you ask me, a 10% increase in conversions isn’t bad at all.
The thing to keep in mind here is that those additional 10% are gained without any new funds spent on marketing. In other words, without the hero image, SendinBlue would have been leaving a lot of money on the table.
But conversions are only part of what makes hero images work…
Using hero images to tell a story
The one thing that we have to notice with SendinBlue’s case above is that their hero image is closely related to their main product.
This “product / topic of the site vs. hero image” connection is what makes the whole thing work and perform well. If you get this part wrong, it’ll be hard to expect any positive results, other than wowing! your visitors with your cool-looking hero image (which in some cases can be a goal of its own, granted).
This is what Andrei Baicus, web designer at ThemeIsle, said on the topic of “story vs. hero sections”:
In my opinion, what most people seem to miss when it comes to hero images is that they are a double-edged sword.
Definitely a great design tool, but only when done right. The hero image should be something meaningful, something that falls in line with your business’ style, practices, and with the experience you want your customers to have.
The best case scenario is when your hero image tells a story that makes the visitor a part of it. Make that story about your business, the products and services you offer.
The image shouldn’t ever be picked randomly just because “I like it.” Always make a connection with your business’ message. Even if the image is related to the business just a little, it’s still going to be way better than an image that’s not related at all.
Some tips to get the story element of heroes right:
1. If you want to go the stock photo way, invest your time
Telling a story through stock photos can be difficult, but it is possible. The thing to keep in mind is not to settle for an image just because it seems somewhat related and high quality. And whatever you do, don’t go for an “okay” image just because it is free.
What you really need is an image that looks like its whole destiny was to be used in your design. It has to be stunning, and really play perfectly into the site’s mission and content. It needs to look like someone took it for you.
… If you’re looking for a big enough library that will allow you to pick something like that then I’m sure you know where to go.
2. Show, not tell
One cool trick that a lot of companies use these days is showing themselves at work.
All sorts of office pictures, “drawing board” pictures, meeting pictures, team pictures and etc. can work great, as long as the photo itself is original and high-quality.
The important detail here, though, is to still make the picture related to the business and its mission. For instance, a picture of a bunch of people sitting by their computers won’t convey much of a message other than, “look, we’re working!”
Here’s an example by Bloodroot Blades:
Notice how the hero image is only loosely related to the topic of the site, yet it feels incredibly real and in tune with the hand-made nature of the product – in this case, custom-made knives.
3. Show the user/customer
So one way to go about the story element is to focus on you – the company. Another, is to focus on the customer – the user of your products.
This is something that a lot of eCommerce stores do successfully. After all, what you are selling isn’t as much the product, as it is the experience of owning that product … no matter what that might be.
Just to quote the classic, “people don’t buy a quarter-inch drill, they buy a quarter-inch hole.”
So why not show someone wearing that shirt you’re trying to sell, or someone enjoying a yoga class that you’re promoting, and so on.
Take a look at this example by Lunet Eyewear:
This time, it’s custom-made wooden eyewear. Notice how the glasses aren’t simply sitting on a table in a static setting, but someone is actually wearing them.
4. Use video
There really is nothing that comes close to video’s ability of telling a story.
The key here, however, is to make sure that the video checks off a handful of important boxes:
- it’s short (more than a minute is too much),
- it’s to the point (treat it like the elevator pitch for the website/product),
- it’s looped (you don’t want to end up with a blank screen),
- the loop break point is clear (so people don’t get confused when the video ends),
- it’s set to autoplay,
- it’s full screen.
That last trait is likely the most important one. The hero video should appear just the same as the hero image. That’s also the main difficulty with videos. It’s not only that you need to produce the video, make sure it’s of quality, but you also need to compress it well enough so it can be loaded with relatively little delay.
Here’s an example by Toggl. It strikes perhaps the perfect balance when it comes to telling a story, and at the same time demonstrating what the product is about:
5. Use computer generated images
If you’re short on any of the above, you might want to go for various computer generated images in your hero section.
(What I mean by computer generated images is stuff like: icons, simple animations, product doodles, and etc.)
This approach works well for apps and software tools of all kinds. The idea is to use an image of the device that the app is meant for, and then present the screen of the app in the middle with a catchy headline alongside.
Here’s how Duolingo does this:
One added benefit is that this type of hero images play well into the principles of flat or material design.
… this actually brings me to another case study:
Use hero images to convince people to stay!
Bounce rates are one of those things that keep webmasters awake at night.
Okay … I may be exaggerating a bit, but you get the point.
Nevertheless, if the majority of your visitors leave immediately after seeing your homepage (within a second or so), then you know you’re in trouble.
Hero images can help a lot with that. Here’s what Abhijeet Kaldate, co-founder of ConvertPlug had to say on the topic:
Visitors spend less than 10 seconds deciding if they want to stick around on your website. The first impression is formed very quickly, and your site’s header can make or break your site’s conversion rate. It is important to have a clear and unique message in the header that instantly grabs their attention.
For example, our hero header on ConvertPlug.com tells the user exactly what they’ll be getting. If you respect the visitor’s time and get right to the point, they are more likely to stick around.
This is ConvertPlug’s current hero section (please notice the use of a solid color background, and the neat computer generated mascot – something we talked about just a minute ago):
To really make sure that your hero image is doing its job – increasing conversions and decreasing bounce rates – you need to come back to it after a while and test it against other alternatives.
Abhijeet Kaldate points this out as a crucial element of success:
We are continuously testing our hero section at ConvertPlug. Sometimes the results are quite stunning. One variation we tested – reducing the length of the heading and adding a mascot image – resulted in a 13% decline in the visitor bounce rate.
Hero images, the un-sexy technical specs
With all the cool, creative stuff behind us, let’s now talk about something that might not be as sexy at first sight … the technical specs of your hero images.
1. Make them large
Just a couple of years ago, making your image 1920px wide basically made it fully in tune with all types of devices and displays. These days, however, things are a bit more complicated.
First of all, we have 4K displays becoming more popular, so 1920px is no longer the top-of-the-line resolution. Secondly, there’s a load of mobile devices that display websites in slightly different ways.
To battle this, try preparing a couple of hand-made versions of your hero image to fit the most popular devices on the market hand-in-glove. In other words, don’t rely on the device’s own ability to rescale your big image.
2. Compress them well
So, going with large images is one thing, but you also need to make sure that the resulting file isn’t too big disk-space-wise.
Feel free to experiment with Dreamweaver’s image-editing features. For most projects, it’s the perfect tool to make your images web-friendly.
(The exclamation mark isn’t an accident.)
You really really don’t want to end up with a result that’s hard to read.
“White font on grey background? No, thanks.” – is what your visitors think.
A good method here is to double or even triple-check where your headline is going to appear in the image on a range of devices. Make sure that it’s always perfectly readable and in good contrast to the image.
To make this easier on yourself, take advantage of Photoshop’s darken or lighten effects, and various blending modes (put one color underneath your image and then set it to show through).
Here’s an example by Piotr Adam Kwiatkowski, through Behance:
Notice how the color scheme of the foreground (the mountain) has been altered to fit the color of the sky (… or maybe it was the other way around).
What’s your take on hero images and hero sections in general? Do you see them as something more than a cool eye candy?
To be honest, considering the numbers (10% increase in conversions, 13% decrease in bounce rates), I’m becoming more and more convinced to hero images’ value when it comes to achieving web design goals. But that’s just me.