What does a landing page start with? Today — with a hero image.
And the name’s fitting. This part of your website can be a hero for real. It makes the first impression, creates emotion, and can make prospects leave right away, or continue reading. What strategies should you use when choosing pictures for a landing page? Find out in this article.
The Hero image is the first picture a visitor sees on your webpage. For this main visual you can choose photography, graphics, a video or simply a patterned template. This choice is all about your image strategy.
Our brain processes visual information 60 000 times faster than any other types of content. Perhaps thatis why marketers and designers pay so much attention to websites
visuals. In terms of conversion rates, even slight changes to the hero image can have drastic effects.
That means we should never use a picture just to fill void space. Hero images are powerful tools to deliver the company`s value proposition, stand out from the crowd, and reach the client. So, before taking another stock photo for your landing page, ask yourself: does it fit your image strategy?
What kind of strategy, you may ask. Ok, let`s go through some general points.
First, you have to think whether you want your image to be product-focused or bring additional value. Each of these tactics has its benefits.
A product-focused image is (obviously) a picture which shows your product to the customer. This is the right place to demonstrate your brilliant design, shade visible disadvantages and indulge in a little bit of narcissism.
Plus: if you have a good camera, at least some light equipment and basic Photoshop skills, you can make your product look even sexier than it does in real life.
Minus: some brands might fall into narcissism without considering the customer. If you think working with clients` pain and desire is more promising than with the product in a vacuum, you might want another visual strategy.
Emotional marketing strategy. This imagery won’t show your razor blade looking like a Samurai Sword, but probably highlight the psychological value for your potential customer. Such a hero image might show your client’s current emotional state — of course, full of pain, puzzlement, and problems. No matter what you sell — bicycles, bearings or massage — you sell the cure for pain.
Or you can use the picture to express the desired emotional state — to demonstrate how it might feel after choosing your service, feature or product.
Plus: you have the space for creativity and don’t necessarily need to order expensive professional shooting. The interminable universe of stock photography is up here.
Minus: people don’t see what exactly you are suggesting. Somebody might not understand the emotional message or not match it with your service.
Anyway, once you’ve chosen your overall visual strategy, you should arm yourself with best general practices for creating or choosing a hero image.
This piece of advice is for those who like emotional marketing. Because it`s the territory of hideous stock photography from the 90s. Each vague concept covering a certain emotion has millions of avatars in the universe of bad stock imagery. Don’t get seduced. Stop for a minute. Take a breath. And continue looking for better stock visuals.
To find authentic, natural and related photos use Advanced Google Search, navigate Unsplash and Behance, search in Flickr and choose from wide range of high-quality photography on Icons8 Photos.
As a rule, hero images serve as a background for a heading, some copy and a CTA button. And the three can work together very well. There can be different ways to arrange these elements, but in the en, they should make a customer click or proceed reading. Here are some tips for composition.
This photo could become a good support for a copy and a CTA, encouraging a person to buy a juicer, become a volunteer at Greenpeace or stop eating red meat.
When it comes to using busy pictures you have to make sure there is a strong contrast between the copy and the background. Use transparency tools to overlay the visual, or different color filters to provide visibility.
Hint #1: put your text on a plain background without touching the overall picture.
Hint #2: put it in the part of the picture where it will be visible.
Visual consistency is in the avant-garde of today`s marketing strategies. Look at the most popular Instagram channels. They are all about a common style of pictures, usually based on precisely verified color schemes and well-defined types of visual content. Think of your landing page as one general visual platform to provide your value proposition, emotion and style.
How to be style-consistent when choosing imagery for your webpage?
Hint #1: don’t use pictures and sleep tight. Only typography. Only patterned backgrounds.
Hint #2: look for good series in stock photography galleries. For instance, go to Icons8 Photos where all the pictures compose consistent collections.
The biggest advantage of this source is that it’s a picture constructor. Choose a considerable colour pallet in two clicks without opening photo editors.
Hint #3: choose a photo on Unsplash and search for related pictures. Sometimes it`s possible to find nice pairs or trios.
Though animated content may look interactive and more eye-catchy, it can also be distracting for an unprepared customer. Include animation carefully and make sure your prospect will find a button to pause it.
For instance, from Icons8 Photos. It is almost art.
Though high-resolution pictures can be a good idea, if you overdo it you’re in trouble. Good picture choice for a landing page is not only about your taste, but also about page performance. Want to make your design work? Don’t neglect the technical rules. Resize, compress and optimize your pictures.
If your website is 900 pixels wide on a desktop there is no need to download 2000x2000px pictures. This will reduce your page performance (it will download longer) and in the end — decrease conversion. Consider your blog sizes and make the pictures fit them.
Hint: for example, use one of these tools to check webpage loading speed:
GTmetrix
Google Page Speed Analytics
WebPageTest
After resizing your pictures compress them to make them load even faster.
Hint: you can try:
Compressor;
Tinypng;
Imagesmaller
and many others.
If you want your landing page to be visited, optimize its pictures for search engines. That is:
Otherwise, it will distort the website’s appearance when being opened on mobile devices or, in the worst case, turn your webpage into a senseless mess.
Test product-focused and emotional-based pictures. Flat-lays and pictures with too much space. Still life photos and pictures with models. Graphics, photography and simple patterns. Each time change only an image letting other website features stay the same. Measure the conversion rates. Choose the best one.
Read how to use icons on landing pages and how to amplify UI design with illustrations.
Why is my printed logo not as vibrant as the digital one? Why do I…
Get an all-in-one UI kit to build a professional fintech landing page. It includes everything…
Meet Lunacy 10.0! Here is a brief intro to the new features with their demonstration:
Learn from 13 outstanding portfolio websites that creatively blend design, functionality, and personal branding to…
We asked users what they wanted to create with AI generators. Then we generated their…
Explore stunning UI concepts created by Icons8 users featuring animated illustrations, sleek sign-up pages, bold…
This website uses cookies.