Design, UI, UX
How To Design The Perfect Hero Image: Guide, Practical Tips and Examples
The role of the hero image is to welcome visitors to your website and introduce its main purpose, the brand behind it, and the services it offers. These are only part of the reasons why you should consider using a hero image. With this in mind, today we’re going to discuss the benefits of using hero images, as well as some practical tips and inspirational examples.
What is a Hero Image?
The hero image refers to the large visual piece on the top of the website. Being on the top of the visual hierarchy, it’s the very first visual element the visitor sees and this is why it contents the website’s most important content. This visual piece could be a very high-quality photograph of the product, a large image slider, an illustration, or even an animated image or an engaging video. In some cases, the hero image can take the entire screen upon landing, often with a scroll-to-section indicator.
Here are the main types of graphics a hero image could take in web design:
- Background layer behind the header text or headline.
- A large and high-quality product photograph or an image related to the topic of the website above the content block it corresponds to.
- Media carousel or an image slider that consists of multiple high-quality images related to the topic of the website.
- An illustration related to the brand and style of the website.
- Short animation.
- Short video.
The hero image typically has both an image and text and often features a CTA to encourage excitement in visitors to dig deeper into the website. If done right, it plays a great role in elevating traffic and conversion.
Hero Image Dimensions
There isn’t a blueprint for ideal hero image dimensions, especially when there are many variables to consider. For example, banner hero images won’t have the same dimensions as full-screen ones. Another thing to keep in mind is user browsing preferences: some users will browse with a zoomed-in/-out screen, which might result in cropping parts of your hero image. Either way, it’s a good practice to consider the following dimensions for your hero images.
- Full-screen hero images: 1200 px, 16:9 ratio
- Banner hero images: 1600 x 500 px
- Mobile hero image: 800 x 1200 px (vertical orientation for phones, horizontal orientation for tablets)
Types of Hero Images
Aside from the different formats for the hero image, there are also various types that suit specific purposes. This is valuable when you’re deciding what type of hero image you need for your website.
- Product and Services: These are usually high-quality contrasting background images representing the brand’s product. For example, they can be a photograph of a product or a screenshot of a digital interface.
- Founder: These hero images add a face to the product. It’s common to see the business owner in the hero image section on websites run by freelancers or small family businesses.
- Customers: Another popular type of hero image is one that shows a customer using the product or service. These images seek to convey customer experience and relate to the audience on a deeper level.
- Association: These hero images are not exactly related to the topic at first glance, however, they give a powerful impression through association. Think of Durex commercial images, for example. A toy with a price tag of $120 is a clever association image.
Why Are Hero Images Important to Your Website?
Hero images serve the purpose of introducing your business or campaign to first-time visitors and giving them a sense of what to expect from the rest of your website. One of its main advantages is that it helps you build user trust and your brand’s credibility. In addition, it is also a powerful and direct conversion tool that could not only present your unique selling point but trigger certain user behaviors. Similar to splash screens in mobile design, hero images have the huge responsibility to earn a great first impression in users and affect their aesthetic perception.
We can sum up their role as heroes in a few categories:
- First Impression: It activates the visual perception for users to obtain information and process it. According to psychology, it takes 1/10 of a second for a visitor to get the general idea of a visual sense. A good hero image will grab the attention instantly.
- Quick Visual Message: Since the brain processes images much faster than text, using visuals in your hero section will convey information much faster and more efficiently.
- Set the Tone: Colors, shapes, hierarchy, and images have the power to convey emotions and certain behaviors. You can set the right atmosphere right from the very start in your hero image.
- Aesthetics: Aside from setting the mood, the hero image can introduce your visitors to your eye-pleasing website’s aesthetics.
- Attention to the CTA: With the right composition, your hero image can bring the visitor’s attention to your CTA or navigation elements of your interest.
Now, with the What-s and Why-s out of the way, let’s get to the How. We’ll look at the best practices and some valuable practical tips on how to design a perfect hero image for your website.
Practical Tips for Designing a Hero Image
There are five practical design strategies proven to be effective for hero images.
1. Use a short powerful tagline
When using a high-quality hero image, you can make it more powerful with a short line of text that communicates a clear message to your visitors. This is a very creative process, as you have a very limited space to convey values, explain a benefit or an issue that your business solves, or ask a related question that would pique the visitor’s interest.
Great Start Your Morning is a catchy slogan for a tea company. It relates and strengthens the powerful conceptual visuals that instantly set the morning atmosphere and makes you want to have some tea. Concept and illustration by Zahidul.
LePortal‘s hero image concept by Zahidul offers a simple message that resonates with the name of the website and plays along with the illustration.
This is another example of a simple yet effective tagline. Enjoy Your Dream Holiday sits just right over an illustration of an exotic location with dreamy pastel colors.
2. Combine with Navigation
You might have the most amazing hero image with conversion potential, however, it would lose its value without a CTA element. Your beautiful design will instantly grab the visitor’s attention, however, don’t forget its main goal. By making the CTA a part of the hero, you’re getting two birds with one stone.
In this example, the platform offers instant access to new users as well as ones who already use the Cloud.
This hero section of an eCommerce mobile app shows a great harmony between headline, slider with animated images, and CTA.
A hero image for MazeTo with elegant color combination and isometric design to illustrate the process of Figma to Sketch conversion. The CTA is the uploading step itself.
3. Consider Animating
Animation is a powerful visual that you can take advantage of. It will enhance your message, storytelling and grab the attention faster than a static image would.
Distance Learning by Suasana Studio offers a simple smooth animation that enhances the core message: to read more books in the comfort of your home. A little bit of motion to a couple of elements goes a long way.
Webshocker uses 3D animation as a hero image that is way more convincing for the topic of the website than a non-animated visual element.
4. Evoke emotions through colors
Color is a powerful tool for evoking emotions, so you can use it to your advantage to build a certain feeling and atmosphere. While bring and vivid colors can easily grab the attention, they might confuse the visitor if they find them on a website dedicated to medical care. Your colors should communicate the purpose of your website and build the right aesthetic.
A color scheme of deep blue hues evokes the feeling of dreaming, depth, knowledge, and reflection. In this case, the dreamy feeling fits the VR concept perfectly.
The next example chooses to use a black-and-white color scheme to replicate the feel of old Noir movies. This is suitable for the concept of solving mysteries for an Escape Room website.
This NFT Marketplace Hero Image by Indra Yoga bets on a suitable white color scheme to communicate purity, security, futurism, and high technology.
Here we have a hero image concept by Paresh Khatri who uses colors to give us a sweet tooth. Soft delicious candy colors could do magic for your hero image if you’re business is related to sweet food and drinks.
5. Custom Illustrations
Your services might not be related to a single type of product that you can show off with a high-quality photo. It might be something much broader that requires visuals for the whole concept, In this case, you can always count on custom illustrations for effective hero image design. Explore different art styles until you find the one that suits your brand and makes it unique.
The hero image for a platform that helps artists and their clients easily find each other with a fun custom illustration. Design by Tubik.
Another concept by Tubik, for a speech recognition technology website. It instantly gives visitors the idea of the technology benefits.
Hero for CarAid, a mobile app of the service to solve car problems. It has a hero illustration in an original visual style.
In Conclusion
The hero image is the first thing your users will see when they land on your page. It brings a great opportunity to make a great first impression and instantly communicate your message. By knowing the best practices and unleashing your creativity you can use it as a powerful tool for conversion.
In the meantime, why not check for more related insights on web development and web design?