Last updated on January 13th, 2023
Big chances are that you know the concept behind hero images at websites. Yes, it’s that very first eye-catching picture we see right below the header when visiting a web page. And yes, it serves not merely to grab attention but also motivate users to take some action.
In this article, we are going to discuss the role of hero images in web design and marketing, and share the best practices and well-established strategies on how to design a hero image for your website so it would bring maximum results.
What is a Hero Image?
Before getting deep into design strategies, let’s drive home the definition behind a hero image.
In plain English, a hero image is a large photo or graphic displayed on the homepage of a website. Located at the top half of a web page, it serves to grab attention and communicate a message.
Here’s What It Looks Like:
[Source:Designhill]
Let’s Make It Clear From The Start
Hero images are not merely a large picture or a series of beautifully designed shots on a homepage. It provides context, value proposition, and emotion to website visitors. In other words, it’s a picture to support, educate, and persuade a user.
For web designers, it’s not that difficult to implement a hero image within a page and optimize it so it would look great on different screen sizes across different platforms.
The challenge here is to understand the role a hero image will play and choose the right type of hero image for a particular website, therefore deciding on design practices to use for this image creation.
Why Your Website Needs One?
Visitors love websites that are clear, understandable, and easy to read. And given that you have only 0.05 seconds to hook a user and form their opinion about your webpage, a hero image is what helps to hold them. (Ninety percent of people are visuals, so they won’t read long texts at a homepage to decide whether they like your site or not.)
So, you need a hero image to clarify your offer and build a better first impression for visitors that come to your site.
Also, hero images serve the purpose as follows:
- They introduce a brand and tell a brand story.
- They highlight a brand’s value proposition.
- They feature a product and answer customer questions.
That is why we call such images heroes. They work to impress users as fast as possible, activating the power of perceptions from the first milliseconds, and provide them with a quick message about what they’ll find at a website.
If you design a hero image right, it may also serve as additional navigation for users to find an offer or a call to action faster. So, it’s also about positive user experience. More than that, hero images are a proven way to evoke the desired emotions in visitors via colors and shapes.
How to Choose and Design Your Hero Image?
Choosing a hero image is not only about design but also branding and conversion. So, before you start designing a picture, answer these questions:
- Does it complement your target keywords?
- Does this image clarify the message you want to communicate with a website?
- Does it contrast with the overall design of your website?
- Is it authentic enough to represent your website as a credible resource?
- Does this image provide visitors with an added value, demonstrating your relevance and benefits?
- Does it evoke desired emotions that will trigger users to take action?
- Does this image make it clear for visitors that they’ll become heroes once they’ve taken your targeted action?
(Based on a 7-step framework for judging hero images, by Angie Schottmuller. Please use it when choosing a type of hero image to design for a website.)
Here Goes The Example:
[Source:Bid4Papers]
This hero image looks authentic, contrasts with the overall design, and demonstrates it to visitors that they will look like heroes here. So, the type of hero image you choose for a website matters too.
Types Of Hero Images To Consider
While web design trends often change, specialists separate four core types of hero images you can use at a website.
01. The Image Of A Product
An eye-catching picture of high quality, it explains to visitors what they will get at the website, complementing a product description. It can be static or demonstrate a product in action, but its goal is to visualize the value proposition. For such hero images to convert, they need to match the overall webpage design and contract with the text in it.
[Source:Hammock Town]
02. The Image Of A Brand Father
As a rule, designers use such hero images when working with persona brands. They use a shot of the website founder on the homepage, and it often comes with a contact form and a call to action, inviting visitors to join an email list.
[Source:Backlinko]
Some also use videos instead of pictures here, demonstrating a founder or a mentor speaking to the audience.
The biggest mistake would be to use pictures of unrelated people. Some websites still use stock photos of unknown people smiling to the audience, but these pics are hard to call heroes, agree Please feature real people behind websites for better results.
03. The Image Of A Brand Context
This type of hero image is an option when a brand is more about lifestyle than products. It provides the audience with the context for a website’s offer, demonstrating the environment in which to use the product or showcasing a brand’s value to build trust.
[Source:Decathlon]
04. The Image With No Context
This one is a general image with no product or people in it. It doesn’t complement the offer, and it doesn’t add any authenticity or personalization to a brand.
Some designers use such hero images because they are trendy or look great within the overall website design, or they communicate some hidden clues through colors. But there’s a catch with this type of hero image.
[Source:Crazy Egg]
It’s too general, so it may distract visitors from a brand message They will have to spend some time on the website, trying to understand what’s in there for them.
Types Of Graphics To Use For Hero Images
As you’ve noticed, types of graphics designers use for hero images are different too Some use photos, others prefer illustrations, and others add short videos demonstrating a product or a team at work. The choice of graphic types depends on the type of website and the goal for its homepage in general.
What do you want from a hero image?
- Should it hook users once they see it?
- Does it need to reflect the nature of the information on a website?
- Will it demonstrate the benefits of an offer?
- Or, maybe you want it to demonstrate authenticity and coziness, evoking corresponding emotions in visitors to boost loyalty and trust.
Also, the type of hero image graphic may depend on website capacities HD photos, 3D graphics, or videos may influence a loading speed by far.
So, Feel Free To Choose The Following Graphic Types When Designing A Hero Image
01. Photos
They connect the stuff in the picture with real-world, physical things in user imagination. In other words, we see and feel such visuals as something close and clear. Photos have become an integral part of our life; so, when placing the right photo on a website, you can set strong associations reflecting the needed atmosphere for the audience.
[Source:Onnit]
This type of graphic is the #1 tool of visual presentation for the e-commerce sector. They place goods on a homepage to turn the you get what you see trick.
02. Illustrations
Custom graphics are in trends of web design now, and that is why we see them every here and there. When made in different styles, such hero images provide visual originality and add authenticity to websites.
However, when deciding to design a beautiful and authentic illustration for a hero image, make sure you understand the fine line between what looks original and what is trendy. Trends come and go, but the bunch of same-looking pages doesn’t add any personality to the brands behind them.
Trendy Yes. Original It’s up to you to decide.
03. 3D Graphics
This type of graphic may help if you don’t have relevant photo content in a pocket. 3D models have photorealistic effects, are highly attractive, and may impact a webpage conversion They create the effect of being there, therefore making users to stay at the page for a longer time.
[Source:Campo Alle Comete]
Moreover, you should understand that you need to be an expert to create high-quality 3D assets. Luckily, we are living in a digital era where you can find anything online, including licensed stock and custom 3D models.
Best Design Practices For Hero Images
A hero image design is often about team management: Usually, it’s a few specialists who work on it, so all they need to agree on design practices to implement for a website to look seamlessly.
Let’s Look At The Best Design Practices And Approaches Experts Use To craft Top-Notch Hero Images For Websites Today
i. Evoke Emotions
Why do you think people better respond to visual storytelling and photos of other people That’s because of emotions involved If a picture evokes emotions, no matter if they are positive or negative, it makes users remember and react to what they see.
Thus, if we see a photo with smiling people or those demonstrating funny faces, it makes us react with a smile (even if subconsciously). And vice versa, pictures with negative contexts such as crying people, blood, war, disasters, and so on make us close them asap to avoid negative feelings.
So do your best to design hero images that evoke the desired emotions from users.
Example: Pampers, using the photo of John Legend with the facial expression you might have when changing a dirty diaper. It’s emotional, appealing, and it helps to build brand trust.
ii. Make It High-quality and With Noticeable CTA
It stands to reason that a hero image, as well as all other design elements at a website, should be of high-quality. Avoid pixelated images, and consider resolutions of different devices a visitor might use to open your webpage.
As they say, you won’t have the second chance to build the first impression. A hero image is the first thing a user sees; and, if they see a low-quality picture, they will lose trust in a brand and the quality of its offer right away.
Also, if you plan to add a call to action to a hero image, make sure it stands out but, at the same time, doesn’t steal the show. You need to find a balance here. Consider a CTA color and location on the image Don’t place it near other buttons on a page, such as a menu or drop-downs, and don’t make it of a color that would be defeated by the surrounding image.
iii. Stay Relevant
While general images with no context may be beautiful and well-designed, try to come up with a hero image that would be relevant to a website’s mission. Consider a message this brand wants to communicate, its tone of voice, its product, and even its representatives.
A hero image is an opportunity to introduce users to what a website and people behind it do. So even if your design decision will be to use a no-context background image, make it as relevant as possible. Warm it up with saturation and contrast, add some effects with filters or photo editing tools, grab attention with colors, etc.
Just look at the hero image of L’Avenir Dental Clinic: A designer has created a jarring effect by transforming color objects into white. Not only it’s relevant to the brand message (dentists, white teeth, and all this stuff), but it also makes the hero image look stylish and unusual.
iv. Remember About Texts
More often than not, hero images go with some texts in them. As a rule, it’s a short but meaningful message, communicating the very essence of a website to users. That is why your task is to design a hero image background that would allow visitors to read the text with ease.
There are many ways to do that. One is to utilize backgrounds with the bokeh effect, blurring a picture and making it out-of-focus. Or, you can choose a straightforward image with a minimum of details in it, and then place a text within a transparent black box for users to see it better. Or, try darkening a photo but lightening a type in it.
v. American Fangs
[Source:American Fangs]
And also remember about a font style: Make sure it’s easy to read too.
Over To You
Hero images are all about a first impression. When designed right, they grab attention, complement a value proposition of a website, and increase the clarity of a homepage. They help users understand what’s in there for them on a website.
With so many ways to design a hero image, you need to try and test several approaches to get the idea of what looks and works best for the audience. Take some best practices, craft your design skills, but remember
Great design is not only about beauty but also about integrity and functionality.
Is there anything we’ve missed. Maybe you have some own techniques on how to design hero images like a boss. Feel free to share in the comments.
