A hero image should grab the attention of site visitors instantly. However, it’s easy to get so caught up in using beautiful images and grabbing attention you forget to make sure the photos are user-focused. Each hero shot should serve a specific purpose and meet customers’ needs.
According to Netcraft, the number of websites is constantly in flux. The billions of domain names don’t truly reflect how many live websites there are at any given moment. For example, the internet gained 6.28 million sites in May 2021, but also lost 4.87 million domains.
If you want to be certain your hero image hits on all the points needed for a potential customer landing on your website, follow the tips below to ensure you’re selecting the right layout and options for your users.
1. Show the Product
One of the top ways to focus on users is by using your hero image to highlight the product site visitors want to see. If you’re an e-commerce store, you’ll need to choose a category or share new arrivals.
On the other hand, if you sell a service, you can show the product in action or offer a before and after side-by-side. Think about what you’d most want to see if you were the customer. Put yourself in the user’s shoes.
Ditto Residential is a real estate firm with a focus on revamping and creating healthy, beautiful spaces. To show some of what they offer, they use a hero shot of one of their luxury living spaces. The photo helps people see their overall design concept and get a feel for the light airy look to their style.
Another advantage to the placement of their hero image is they can swap out the look for one of their other properties. If they notice a sudden uptick in consumers looking for larger homes, they might highlight an airy space, for example.
2. Choose Stellar Typography
Your hero image should capture the user’s imagination, but you also need to think through the headlines and other details on your page. To enhance the user experience (UX), choose a color and font size that stands out from the background.
Choose the hero image that allows your text to show up. You may want to overlay a solid transparent color over the entire photograph or choose a different picture with some darker or lighter areas where text will pop.
3. Gain User Trust
Your hero image can go a long way toward showing you’re knowledgeable and trustworthy. Choose an image if your technicians in the field or some other expert insight no one else provides. When people think about your product or service, you want to be seen as the go-to authority.
D.E. Gemmill chose an image of their traffic control marking experts hard at work. The employees look capable and the photo also highlights the brand’s equipment. The truck moves off to the left of the screen, creating a sense of motion and work ethic.
4. Choose High Quality Images
You may know the exact photograph you’d like to use, but when you blow it up to full screen width, it’s a bit fuzzy. Always choose sharp, high-quality photos over anything else. You may need to reshoot the photo in a higher resolution, or go with a completely different selection.
At the same time, you must optimize pictures so your site loads as quickly as possible. Use a high resolution, but compress the image. Test your pages load times to ensure your speed is up to par.
5. Add a Video
A still shot grabs interest, but a video hero image tells an entire story. You can share moments of action, inspire users with what they might gain from a product and set a unique tone for your site.
As with any image you choose, make sure the footage is relevant to your industry and your business in particular. Ideally, you’ll hire a videographer to shoot and edit a clip to use in the background of your website’s header.
Ag America offers lending to farmers. They take a moment to highlight some of the hard work farmers do in a day, showing tractors, a farmer walking the field and a close look at crops. Their target audience will see they understand the business at hand and be much more likely to trust the company with their business.
6. Remember the CTA
Your call to action button (CTA) must stand out against the hero image. You can choose the most interesting photograph in the world but if you don’t ask users to take the next step, you risk losing them to the competition.
First, your CTA button should be a color varying from the rest of your color palette. Many companies use a vivid orange, red, blue or green for their CTAs. Second, you should tweak the size, position and language on your button to see what performs best with your target audience.
Test and Retest
Try different images, headlines and CTAs on your website. Conduct split testing to see what performs best with your audience. Even a change of the wording on your CTA can make a difference in your conversion rates.
Try different options and test after each change. Over time, you’ll find the perfect selection for your users. If you want your site visitors to respond with action, you must tweak every tiny aspect of your page, starting with your hero image and moving on to what sits atop it.
Eleanor Hecks is editor-in-chief at Designerly Magazine. Eleanor was the creative director and occasional blog writer at a prominent digital marketing agency before becoming her own boss in 2018. She lives in Philadelphia with her husband and dog, Bear.
