You see that catchy ad and instantly connect with it. The design, the copy, and the overall concept kindle your interest. You want to know what comes next and click on that CTA. What comes after makes or breaks your whole experience with the ad doesn’t it? We are talking about the landing page. The one indispensable aide every ad needs.
And on a page filled with information or one that tries to extract information for you, what do you think your eyes are drawn to first? The visuals on the page. And most importantly, the hero image. It is the image that appears as the most prominent section in the landing page design. Either at the center of the page or on the right or left. But in most cases, the hero image and the hero text on the page often have the same priority. They also have the same purpose:
To convey the goal of the page. In other words, to sell a product or a service.
We often judge people based on the first thing we notice about them don’t we? So knowing that your landing page hero image influences the first impression the page creates, it’s time to take this visual more seriously. Yes, every single image that goes on your landing page matters. But the hero image is the most important detail in your landing page design.
That’s why we are going to talk about this visual in detail. How to select one, and how to make sure that it perfectly tunes in with the rest of the design.
Visuals, in general, are important on all types of landing pages. They make the landing page design more engaging. And, in particular, the hero image is something you cannot ignore. Let’s look at some reasons why:
Have you noticed the recent emphasis on the need for good visuals in marketing? That’s because with the attention span of the tech-savvy folks reducing as we speak you need some strong visual cues to keep them interested. And if your hero image offers the necessary visual stimulation it can create a strong first impression for your landing page.
After all, “a picture is worth a thousand words”. So using a powerful hero image ensures that the message you want to convey is clear to your visitors. This can also be the prime source of information for those who are impatient in reading the whole content.
Words have the power to move your audience. But when you also have a catchy hero image to back up the landing page copy, the effects are even better. When your message evokes an emotional response, there are better chances of your visitors heading to the next stage in the purchase funnel.
If you think any random stock image will be enough to interact with your customers and convey your message, think again. The authenticity of your landing page hero image might be seen as an indicator of the authenticity of your brand. And that has a strong influence on how easily your customers trust your brand. So, you need original images, ones relevant to the message on your landing page. And how do you achieve this? Identify and stick with a single focused idea for your landing page design. This idea will be what convinces customers and leads them to the CTA. With this idea in mind ensure that the landing page hero image and copy are perfectly in sync.
In most cases, customers who are intrigued by your ad click on it to know more about your brand, and not just about the product or service being advertised. So, your landing page has to be a convincing visual representation of your brand. Having a hero image that sets the mood or captures the personality of your brand helps customers better understand and connect with your brand identity.
Alright, so your landing page hero image makes the page more interactive and delivers the message easily. But what kind of images do you need to achieve these results?
Images that showcase your products are the easiest options for a landing page hero image. This concept is simple and on point. You show customers exactly what they are there for.
But when you do adopt this idea in a landing page design, ensure that you do not use generic product shots, typical ones that you will find on a listing page. Instead, focus on painting a glamorous picture. Show your product in its best angle. Or use this space to emphasize its brilliant features.
Sometimes showing the product itself is not impactful. For example, if it is a landing page for a software purchase. Showing a quick demo and giving the users a virtual experience of the product will be a good way to convince them that the product is worth their time.
This is also applicable to service-based businesses. If you want users to book your services, show them actual images of people benefiting from your services. Familiarizing them with the experience is one way to influence their purchase decisions. In fact, this will give them a fresh perspective on your products or services.
So, you have some great products and services to offer. That’s great. But what’s in it for the customers? Use your hero image to effectively convey to them how your product will create value for them. Will highlight their pain points. Or use images that capture the emotional state of customers before and after using your products. You can never go wrong when you try to focus on the sentimental value of your product. In fact, this can be pretty good for your brand.
With all these tips in mind, once you choose your landing page hero image, the next big thing will be how you align this image with the rest of the design elements on your landing page. From the placement to the size of the image and orientation every little detail matters. We’ll give you some landing page design examples to explain these design details.
Consider this. You are visiting a website for the first time. You notice that the hero image has a different vibe, and the text looks like something else. The overall design on one page looks quite different from that on another page. Would such a website make an impact on you? Not likely.
In the same way, if the individual design elements on your landing page have their own distinct personalities, then the page, on the whole, will not be as effective as you want it to be. That’s why what’s even more important than choosing a good hero image is to ensure that it fits perfectly on the landing page. And that there is a single straightforward goal for the landing page with every design element working towards achieving this goal.
Let’s look at some tips that help you accomplish this.
On some landing pages, there is an equal priority for both the hero text and the hero image. As in, just by looking at these two sections, a visitor would get the intended message. If that’s the case, having the hero text and image side by side with nearly the same-sized columns for both will make the purpose of the design clear.
Making an emotional connection with your visitors is important. In a landing page design, a strong hero image helps you achieve this. In such cases, you let the design of the hero image dominate. And to achieve this you need a strong design with colors that convey the purpose. Or even illustrations that tell a story, like the image on Slack’s landing page design below.
The illustrated image here shows the brand’s authenticity. And the colors go perfectly well with Slack’s brand colors too. Finally, since the theme is “busy workspaces” the illustration captures it in a slightly less serious tone.
In some cases, you need a hero image to add a visual hook but there is a lot of information to convey. And all this cannot be captured in one single image. If that’s the case, you can use something that feels closely relevant to the idea. And then use this image in the background allowing the text to take the driver’s seat.
Sometimes visitors land on a landing page knowing nothing about the brand but leave with a visual memory of it. This happens when the landing page design does the job of depicting the brand identity and brand’s tone of messaging accurately. Lyft’s landing page in the image below is the perfect example.
The image of the happy driver in the above landing page design says it all. Perfect emotional representation to begin with. And then the color palette in the above image is on-brand. So, even if you leave the page without taking any action, the color pink is likely to remind you of the brand in the future. This is by choosing consistent colors for your hero image and the text on the landing page. And also maintaining consistency in the tone of messaging.
You sometimes have an image or illustration that is commonly used. But still, it can add value to the page by directing the viewer’s attention to a focal point on the page. When all the design elements in your landing page are aligned in a particular way, a viewer’s eyes naturally follow the direction.
When the whole focus is directed to one section of the page, there should be a strong copy to then take over. The copy should also be convincing for the landing page design to actually work.
Hostgator uses static animation on some of its landing pages. This is a simple animated version of the alligator mascot of the brand.
Though the visual here does not directly convey a concrete meaning it does achieve one thing – it grabs your attention. When you have a mascot that people instantly recognize, you can use it to have people’s attention on your landing page and then direct them to information that matters. Animations and even videos can do this job well.
One final design aspect to consider when you place your hero image will be the framing of the image. This determines how smoothly a visitor’s eyes flow from the hero image to the rest of the content below it.
Instead of going with rigid rectangular blocks, you can let the hero image naturally blend into the background. Get creative and let the hero image seamlessly fit into the landing page design without looking forced.
So, have you been ignoring this little detail in your landing page designs until now? Then now is a good time to rethink your landing page design strategy. When there is a page full of text to welcome your target audience, you should consider giving them an instant visual connection with your landing page. And remember, it takes a great amount of effort to design an ad that stands out amidst all the noise on social media. Having created that ad, you often only get one shot at convincing your audience to take the next step. You do not want to miss out on this opportunity simply because of a mundane-looking landing page. So, bring your landing page to life by adding a meaningful hero image that instantly evokes the desired response from your audience.
