You’ll find the term “hero image” used in various professions. For designers, it typically means the large image across the top of a website. No matter where you use your hero image, it is the focal point of your design.
There are approximately 1.847 billion websites, but 75% of the names aren’t active. They include parked domains and addresses pointing to other sites. Nevertheless, you’re competing for attention with a massive number of other websites. A hero image can make your page stand out.
Just slapping a photo up that you like isn’t nearly enough to attract attention and engage your users. What is the secret formula that makes a good hero image? Here are some tips you should incorporate into your use of primary photos on your site along with a few examples of hero images used wisely.
1. Use High-Quality Images
Make sure you invest in photos with a high enough resolution to fill the screen. Smartphones now have high-definition capabilities. Your images must look crisp, sharp and grab the attention of users. Instead of fuzzy or grainy photos, seek out details and real-life appearance in your visuals.
People expect higher quality images and videos than ever before. Make sure you fill their needs by providing top-quality selections.
Kindeo uses three photos to create an engaging hero image. In each visual, the person looks happy. It showcases women and men of different ages to represent their different buyer personas. You can also use a single photo for your hero image, a graphic or any combination of items.
2. Pay Attention to Colors
Hero images should have hues that mesh well with the rest of your site’s design. Pay attention to the shades within your hero image.
If you find the perfect visual, but it is muted, you can always overlay a transparent layer on top. This will give the photo the hues you’d like and help it blend with the rest of your color palette.
3. Embrace Video
With faster streaming and better connectivity, more people appreciate the ability to view videos to get a feel for a business. The use of video footage works particularly well for travel destinations or when you need to highlight how to use a product.
Video says much more with images than you can get across in the same space with words alone. It’s highly interactive and engages users. Place it where you would any other hero image.
Lewa House uses an image to show what you’ll see when you stay with them in Africa. You see a video running in the shot highlighting elephants, giraffes and zebras. Those visiting the page for the first time are likely to hang around and see what the video displays. It’s used as the hero shot and creates a powerful user experience (UX).
4. Fill the Screen
The best hero images fill the screen and take over the look of the site. They stretch from side to side, even if there is a sidebar under the hero shot or incorporated on top.
Some themes are better suited to hero shots than others, so you should seek a design that allows you to showcase the full image and not crop it down.
5. Choose the Right Font
If you plan to fill the screen with an image, you’ll likely have text on top of the photo. Make sure there are spaces that are darker where you can make a headline or CTA pop. Alternatively, you can choose a large, three-dimensional type that stands out.
Another option is to put a box with a slightly transparent background color. The box allows the text to show up while still letting that portion of the hero image show through.
Poco People does a good job choosing engaging photography. They then place their logo in the sky, which allows it to pop. The text is placed on either side. Their social media links are icons placed near the bottom of the image and in stark white to make them pop for the user.
6. Demonstrate Your Product
Ideally, your focal point should be highly relevant to what you’re selling. You can choose to demonstrate your product with a photograph or video, place your items in an unusual location or highlight a benefit.
Your hero shot must do more than just be relevant. It should also show your personality as a brand and mesh with the rest of your style guidelines. Take your time and choose the best image to represent your business possible.
7. Tap Into Emotions
Your UX ties to the emotions of your audience. What is the reason they come to your site initially? The average consumer deals with some type of pain point they need a solution for.
Your job is to dig deeper and figure out what the emotions are behind the pain point. For example, if you sell home security systems, the pain point driving the consumer to your page might be a lot of recent break-ins in the area.
The solution is better security. But, what is the emotion driving them to you? Typically fear. They might worry about the things they’ve worked hard for getting stolen or be scared of harm coming to their families. Dig deeper and figure out the underlying emotion so you can address it with your hero image.
Design, Test and Design Again
Try different images until you hit on the ones working best for your typical buyer. Place a shot up and do some split testing to see how it compares to another. Go with whatever your users respond best to.
Split testing is your best friend for everything from layout of your homepage to which hero image you choose. You can even test how well different colors of headline text work and whether users prefer a call to action layered on top of the photograph. Take the time to see what people like and adjust your design accordingly.
About The Author
Eleanor Hecks is the Editor-in-Chief of Designerly Magazine, an online publication dedicated to providing in-depth content from the design and marketing industries. When she's not designing or writing code, you can find her exploring the outdoors with her husband and dog in their RV, burning calories at a local Zumba class, or curled up with a good book with her cats Gem and Cali.
You can find more of Eleanor's work at www.eleanorhecks.com.
