A little bit of trivia for guys out there who are wondering why Hero images are called as such. The term “hero” was first used in the world of theater and it was the prop (it’s usually called the hero prop) that is more detailed than usual because it’s meant to be seen or viewed in close range. One good example of a hero prop is the DeLorean Time Machine from the film franchise “Back to the Future”.

So if you were thinking that Hero Images had something to do with comic book characters in capes and gadgets then you are a tad bit far off. But still, their modern day purpose in web design can be almost like that of a superhero in that they can save the day.

But how did the hero image came to be? Where did it start? How did it become the hottest trend in web design since popups and splash pages?

Origins in Traditional Media

When the idea of hero images first came out, people were a bit worried about it. A lot of people say that having a very large image on the front page might not be the best thing to do. Others think that it was just a very tacky way to say “I’m creative, get over it.”

People forget that hero images, or at least the idea of hero images, have always been in use even in traditional media. When was the last time you visited a newspaper stand? They may not be that common these days but I am pretty sure you can recognize one when you see one. Ever noticed how most newspapers are always using large images on the top-half fold of their publications? According to some newspapers I know, this is to attract buyers who will be intrigued by the images. Some well-known and respectable newspapers use images of people of interest, recent happenings, or emotion provoking pictures. Other, less popular newspapers usually go for racy pictures or controversial images to pique the interest of passers-by.

Hero Images in Modern Web Design

If it worked in traditional mediums like newspapers, it should probably work with modern web design as well, right? With where modern web design is going these days, that’s a big yes. Gone are the days when the page-by-page design appeals to your audience. Most websites nowadays are following a more storytelling approach in their design. The idea is that your visitors should be able to understand what you do, what you can offer, and why they should choose you over the others on the home page alone. A hero image (which is basically just a very large attractive image header) serves not only as eye candy but also as a medium for websites to “tell a short story” with an image. In a time when people have very short attention span, you can easily cram an idea into one image instead of a 200-word blurb.

Why Use Hero Images?

I can’t count the number of times friends, clients, and other people have asked me this question. According to most of them, this questions stems from what seems like a sudden popularity of the element. Here are some of the reasons why using hero images is always a good thing if done properly.

1. It builds your brand – A lot of people who are hesitant in using Hero Images believe that committing the largest and most prime real estate on your website to an image is not logical. While this may be partly true, a Hero Image can easily tell a story and build your brand just by being there. This is really effective for websites and brands that have services or products that have a great story to tell.
2. It gives answers to customer questions – Oftentimes, websites use hero images as a means to provide an answer to a probable question. For example, some e-commerce sites use their hero images to include information such as “100% organic, Free Shipping to USA, or Made from the wool of 100% Highlander Yak. This is to address possible questions or time-sensitive information that customers might make or need.
3. It can highlight your value proposition – As a business, it will always be your goal to differentiate yourself from the competition. This is what we call value proposition. It’s basically telling your customers that value your service or product brings to them. Where better to put it than on your hero image. You can put it in the form of a call-to-action in your hero image.
4. To make an announcement – They say that whenever you have something exciting to announce on your site then your hero image is your best bet. Pop-ups and floating elements don’t work anymore so you might as well put it in a place where you are sure people will see it. Announcements posted on hero images get the most visibility and thus more exposure. Announcements include sales, the arrival of new products, and product giveaways.

How to Properly Use Hero Images

With the one-page approach becoming very popular, more and more websites are gearing towards the use of Hero Images. The question is…is there a right and wrong way to use Hero Images? Well, of course. You can’t just plaster a large image on your site and expect it to work perfectly. The secret is in the telling. Let me explain that to you in detail below.

1. Make your visitors feel welcome – Now this may sound like an advice from the 80’s but bear with me here. Remember when I told you that the Hero Image is the first thing that your visitor will see when they visit your site? To a certain extent, it works like that funny doormat your neighbor always had. For anybody visiting their home, they would see the doormat, smile, and come in knowing the people inside have a good sense of humor. This is the same with your Hero Image. Make sure it exudes the same aura you are exuding as a brand. With a simple play in color and saturation, you can turn any photo into a powerful, warm, and inviting Hero Image just says “Come in, we’re open.
2. Don’t be afraid to add some action – A lot of websites who use hero images oftentimes just use generic and “static” images for their headers. Now, this can work for some but oftentimes adding a bit of “action” into the hero image can really do you some good. By adding a bit of momentum and movement into your Hero Image, you can create a very powerful yet playful image. Add a simple yet incisive message and you have yourself a keeper. Just don’t overdo it and use an image that is too “busy” as it distracts your visitors and may make your layout seem messy.
3. Get it going with grids – Aside from the whole hero image trend, grids are also one web design element that is getting popular these days. Don’t be afraid to use both elements in your web design. By using grids properly, you can help guide the visitor’s eyes to what is important in your page. You can split your Hero Image into two blocks to accommodate a graphic and the other typographic.
4. Don’t limit yourself – As boring as it sounds, most websites I know settle with a rectangular or box-shaped hero image for their website. This severely limits the storytelling value of your site. Don’t hesitate to play around with your hero image. Set it askew, experiment with lines, forget about symmetry, or you can even get a little bit creative with patterns and borders. Remember that if your hero image successfully captures the attention of your visitor, you already won half the battle.

Final Tips for A Good Hero Image

To wrap everything up, here are the three essential elements that should be present in your hero image

1. An eye-catching image – Humans are visual creatures. We love seeing images that appeal to us. You’ll agree with me when I say that you’d rather look at an infographic than read a wall of text. Make sure you use an image with high resolution and can really catch the attention of visitors.
2. A compelling copy – Depending on your choice of design, you might have very little room for a copy on your hero image. Either way, you should ensure that you have a catchy and compelling copy ready. This is to ensure that your visitors get your message.
3. An effective call-to-action – A simple button or link telling your customers what they should do next should be present in your hero image. Do you want them to check your inventory? Maybe direct them to your testimonial page to see stories from your other customers? It’s all up to you but always find a way to direct them to the next logical step towards your conversion funnel.

Don’t be afraid to play around with your website design. Be bold. Be free. In case you need help with your website design, don’t hesitate to contact the experts for help.

Posted: December 3, 2015

Updated: July 16, 2019