You’re probably feeling 100% informed and fully prepared to create the best damn landing page this side of the net. We’re glad, honestly, because we aim to be nothing if not useful.
However, we’re not quite done on enlightening you on the powers of a red-hot Landing Page.
That’s right, there’s more.
Prepare to learn the 3 ways to optimise your landing page so that you have more conversions than hot dinners.
To Help You Navigate:
Unique Value Propositions (UVPs)
So, if you don’t know, a UVP is essentially another name for a USP (Unique Selling Proposition). It’s the unique thing you offer which sets you apart and it’s something your landing page should flaunt without any room for misunderstanding.
Take our landing page, it’s pretty clear that we do PPC Advertising. You’d be hard pushed to ignore that because our stark colour palette combined with a big typeface means we figuratively clout you over the head with it. Not only do we tell you what we do though, oh no, we also tell you what makes our PPC Advertising unique: ‘That Pays For Itself’.
Which is exactly what your UVP needs to do. If your business concept isn’t at the heart of your landing page then you’re not giving your visitors a clear reason to sign up/buy/invest in your business.Consumers have a wealth of choice out there and if you don’t make it clear as to why you’re their best option, they won’t do the work and dig out the reason for you.
What Makes a Good UVP?
- Easy to read, non-technical vernacular.
- Language that is customer specific eg. If you’re target market is 18-year-old boys the tone will be quite different to middle aged women.
- Sells what you do, urges a customer to choose your company over another.
- Main focus of the page-not an afterthought.
- Easy to read typeface, ornate and unreadable is always worse than plain but clear.
What Makes an Awful UVP?
- Mistaking a tagline for a UVP. For example, McDonalds ‘I’m Lovin it’ is not a UVP. Granted, few people need informing what McDonalds is all about but nevertheless, to someone entirely new this phrase means nothing, it doesn’t tell you what the company does, nor what makes it unique.
- Making the UVP the last noticeable element of your landing page.
- Not Including a UVP and assuming your audience will bother clicking on your ‘about’ or ‘more’ CTA’s to discover what you do.
UVP Examples: The Near-Misses
Innocent Smoothies are a huge brand with a clear UVP: Tasty smoothies that are healthy and sustainably sourced. Now, I know that, but if I were a new customer it might not be that apparent. True enough, Innocent Smoothie’s UVP is dead centre on their homepage in a red box. Sadly, this is utterly overpowered by a very busy page.
Rather than the UVP being the star of the page, it’s the ‘Big Knit’ event. Now, I totally agree that should be on there, but should it be the main event? If you’re a new customer you might be forgiven for thinking that knitting was at the core of the company (hiding behind a hugely quirky name).
At first glance, this doesn’t seem so bad, but once you’ve adjusted your specs you begin to see that the marks been missed a little. On the one side Improve Position don’t overcomplicate their page and it looks nice and simple. Their UVP however is lacking.
‘Twitter Management’. Ok, so what does that mean? Are you an automation tool that allows me to manage my own Twitter account or are you an agency who will monitor my account for me? I don’t know. Rather than explain, the paragraph below goes on to give details about Twitter and how powerful a platform it is.
Now, with the greatest respect, Twitter isn’t the thing that needs to be sold here, it’s what Improve Position do and what makes them the best choice for it,. Simply assuming I’ll click the small ‘What We Do’ CTA is a very optimistic outlook to have.
Examples: The Glorious
Ok, so it is Ad Espresso and it would be a poor show if they didn’t have a good UVP but it was so good I felt it deserved to be shown off.
Ad Espresso do many things well and this is no exception. The colour scheme again means your focus is very easily manipulated to the excellent CTA and then the only other thing that the page really flaunts; the UVP.
It’s a full sentence rather than something short and punchy and that’s fine when you have such a minimalist page
Alright yes, this is a bit of a cheat I suppose as Unbounce are all about Landing Pages, still, they do what they do well. Once again, the reason this Landing Page works so beautifully is because the UVP is the biggest thing on the page, the typography of it is easy on the eye and your gaze isn’t dragged all over the site by other colours and images. Better still, it gives you a clear and concise message as to what they do and why they’re the best option.
Nice one Unbounce.
The ‘Big Enough to Break Rules’
You’ll find that some Landing Pages break rules in all sorts of ways but especially with their UVPs and this only works if you’ve become a household name. Until you’re spoken of in the same breath as Amazon and Coca Cola then you can wave goodbye to rule breaking you would-be rebel you.
No doubt, this is a rather beautiful website, the hero image is eye catching and the page is clean. But if it wasn’t Bentley, a household name, then this Landing Page would also be a disaster.
For one thing, the hero image may be lovely but at first glance I would assume this was some sort of travel company. Most especially with a tagline like “Explore the Extraordinary”. And as for a UVP, there isn’t one.
When you are such a big name you can 100% get away with breaking the rules, but until you are then sticking to the script of what’s considered ‘good practice’ is highly recommended.
Colour Theory: Colour Combinations
Picking the best colours for your Landing Page (and indeed your entire website) is a tricky business that you should pay some considerable thought to, because the wrong choices can be off-putting and reduce your potential for creating conversions.
Oh, you don’t believe us? Think colour is a wishy-washy concept that has no real foundation on how well your Landing Page converts?
Prepare to be amazed.
A recent Kissmetrics study revealed that it takes a consumer a mere ninety seconds to make a judgment on a product and 90% of that judgment is down to colour alone.
Not only that but there has been plenty of research that suggests colour preferences can be gender-specific.
If, like myself, you happen to delve into this little rabbit hole, you’ll find the name Joe Hallock thrown around alot. Joe Hallock did extensive research into colour perception and discovered that as a general rule men disliked brown, yellow and purple whilst women disliked grey, brown and yellow. All participants appeared to dislike orange whereas blues, greens and reds were favoured by both genders, ostensibly meaning you can’t go wrong in adopting them in your colour scheme.
Even more compelling is the results of a 2015 YouGov study which discovered that blue was the overriding favourite colour across ten countries.
Which isn’t so surprising. Blue is one of the easiest colours for the human eyes to perceive (along with green) and also has connotations of trust, calm and professionalism associated with it (Facebook, LinkedIn, Twitter anyone?)
A 2017 piece of research which collected the data of 30,000 people across 100 countries actually discovered the most favoured colour was between a blue and green.
So what does all this mean in terms of picking colours that will ensure your Landing Page is a conversion machine?
It means colours are important and a key factor on whether someone takes action or simply leaves your site.It also means that some colours are ‘safer’ than others but it would be unwise to go so far as to say you must limit your Landing Page to blue.
As you’ll see from our recent CTA blog, the most popular background colours are white, grey and black.
Surprised? No, nor are we.
All three colours are very clean and easy on the eye and they are also a wonderful balance to colour-pops of reds, yellows and greens.
Our advice then, is to always use white (especially) grey or black as your foundation before using other colours for the highlights, such as your CTA, UVP, Logo etc.
The real question then is what other colours?
As we’ve seen there tends to be some preferences on colour based on demographic (not to mention cultural connotations) but as the 2017 study we mentioned earlier suggests, colour perception is somewhat subjective and what’s blue to one is green to another. Similarly casting orange as the overall bad guy of the rainbow is a little blinkered (consider its popularity as a CTA colour). It certainly seems to be the less endearing one to go for, (as the dominant background colour at least) but depending on what shade you go for, as well as what other colours you team it with will likely as not reap mixed results.
By now you probably know what’s coming but we’re going to say it anyway: Split testing. In particular you need to test colour combinations and always keep in mind the colour wheel is in reality like this:
Not simply like this:
So you know to split test, you know there are some overarching feelings on specific colours, but that can still leave you in a state of ‘where do I start?’
Remember that colour wheel up there? Good, it’s going to be hanging around a lot for this next part.
Choosing a colour palette (and this goes for anything from Landing Pages to redesigning your kitchen) is predicated upon certain rules, all of which we’ll go through in a moment.
The point is once you know these rules you’ll spot brands using them everywhere.
Our colour associations strongly affect how we perceive a product or company and you may inadvertently send people scampering away if you get the balance wrong.
Square Colour Scheme
A Square Colour scheme is created by using four equally spaced colours from the colour wheel, hence the name square. It’s closely related to the Rectangle colour scheme in terms of busyness and I wouldn’t recommend it as your dominant page scheme necessarily (please everyone, with great power comes great responsibility, remember, eyes are at stake) but combined with white or grey you can get some snazzy effects.
Blue, green, yellow and red. Four colours used by Google that makes them instantly recognisable on a white background. This is a great example of how using four colours can work well if you adopt the Square Colour Scheme, if you don’t and pick randomly, you can sometimes have mixed results. But heck, test it!
It’s worth noting also that Google have chosen blue as their CTA colour out of the four, which knowing what we know about blue isn’t surprising. Check out our CTA blog for a full breakdown on CTA colour popularity.
Slack are a great example of how to successfully manipulate the Square Colour Scheme.
Companies sometimes forget that the colour wheel is a starting point, it’s purpose is to inform you as to what primary and secondary colours can work together. It does not limit you to four specific shades.
Slack are flaunting a Square Colour Scheme here (boarding on the closely related Rectangle Colour Scheme) but the red has been overthrown for a rosier shade and the yellow for a more orange tone (yes! the previously shunned orange!). Even standard blue and greens are not at their full vibrancy. And voila: A Square Colour Scheme that is a world away from the Google version. You’ll also notice that rather than pair these bright colours with white, they’ve instead gone with grey which actually complements more than I think white would.
Complementary Colour Scheme
Colours that are directly opposed on the colour wheel are complementary and very eye-catching, especially when you use them at their most vibrant. Complementary Colour Schemes are frequently adopted as they’re simple and bold. For a Landing Page, they can work particularly well.
Blue and orange are the overriding colours associated with Firefox and the two which are picked as the main logo colours. It’s interesting to note this particular colour scheme is made up of ostensibly the most loved and most detested colours of the spectrum and look how well it works! Wisely blue was used as the dominant colour with orange acting as the ‘pop’ of colour. How might this have worked had they switched the dominance around?
Analogous Colour Schemes
This colour scheme can be less punchy than the contrasting ones but can make for an aesthetically pleasing outcome. It’s created by combining three colours of the colour wheel that sit alongside each other and is often a colour collection associated with nature (think of the colour progression of autumn leaves, sunsets etc). Have a look at it in action:
As you can see BP use two shades of green and then yellow, making a classic Analogous Colour Scheme which is carried through on the page. Green is unsurprisingly a colour that people very much associate with nature and serenity, which for a company like BP is exactly the kind of message they need to push.
Triadic Colour Scheme
Triadic colour schemes are bold by their very nature, so if you’re going for a softly, softly, all natural, kind to skin, only organic sort of approach this may not be your best bet. Even when you tone it down these colour groups hit you in the face, due to their juxtaposition on the colour wheel.
This is a good example of the scheme in action, most prominent with the logo. For a company like Burger King bold and brash is definitely the way to go. Their product is fast food, cheap and cheerful and so they can afford to adopt a colour scheme that mimics that sentiment.
If they had instead adopted a sleek white and black colour scheme you would have a completely different Landing Page that would no doubt leave the audience somewhat confused.
Rectangle Colour Scheme
The Rectangle colour scheme is more harmonious than the Square scheme we saw earlier, as it encompasses two pairs of complementary colours. This can result in some bold looks and gives you plenty of room for experimenting with shades and intensities.
FedEx have almost adopted a full Rectangle Colour Scheme here, but have overthrown the red for purple, essentially giving them a whole new colour scheme we shall henceforth call the Wonky Rectangle.
Anyway, this is a nice example once again of how you can mess with the ‘logic’ of colour schemes slightly and still end up with an eye-catching and recognizable look.
Split-Complementary Colour scheme
The Split-Complementry colour scheme is defined by picking one colour and then the two colours either side of its complementary colour. So, if purple and yellow make for a complementary scheme, you would pick the two shades either side of one of them to create the Split-Complementary.
Admittedly the image can throw you off the scent a little here, but if you ignore that then Fanta are a good example of a typical Split-Complementary colour scheme. As you can see it’s a loud colour selection (especially when you cast orange as the starring role) but for a company like Fanta who want to strongly be associated with fun and liveliness it’s a good pick.
Key Takeaways to Ensure Your Colours Make Conversions
- Do A/B Test, colour combinations, contrast, colour dominance etc.
- Take care. Even some ‘classic’ combinations can have their own problems if used unwisely. Take the common Complementary Colour Scheme of red and green (Midas’s own as it happens) these colours work well but are also difficult to read for people with some forms of colour blindness.
- Typography colour should be carefully considered. Readability is pivotal.
- Colours have connotations, consider what yours might be saying.
Whilst I would guess that images of Superman, Catwoman and The Flash can only help the performance of your Landing page, those are not the kind of hero Images I would actually recommend. Unless of course you’re an online store selling comics or you really are Batman and have decided to create a blog, perhaps entitled ‘The Batman Blogs’. If the latter that’s awesome and we should talk more.
Another term for a hero Image would be ‘banner image’. It’s the most prominent element you can incorporate into your landing page (indeed, any page) and it’s the first thing to hit your audience when they arrive.
There are no set rules for what makes a good hero image, and with infinite potential, is infinite opportunity to get it wrong (yes, I’m a glass half empty sort of person). The point is your might-be customers will take only seconds to form an opinion on your company, which is why the design is critical if you hope to see that conversion rate increase.
Consider your would-be customers the way you would your in-laws, they’re just waiting for an excuse to deem you a poor choice and disown you.
As I said, hero images are limited by nothing, but you can make some general good judgements depending on the type of company you are. There are multiple names and categories you’ll hear but I’ve narrowed them down to the three most powerful ones below.
1: Flaunting the Product
If you’re selling items that are both non-essential but highly desirable, the best thing you can do sometimes is let them sell themselves. Products like gadgets, heated hair implements, etc are designed not only to function but also to look desirable, so let your banner image be a platform for that.
Apple is an obvious one to pick as a good example. Their products are highly coveted not only for their technological capabilities but for their sleek design. With so much trouble gone into the aesthetics of their devices, it seems a shame to do anything but show off all that (and it’s certainly not hurt their business).
Cosmetics are another product type whereby the packaging is designed to be sleek and easy on the eye. The beauty industry is especially at pains to make every element of their product aesthetically pleasing as it all feeds in unconsciously to the idea of ‘this is pretty, ergo it will make me pretty in return’. As such, you can also get away with flaunting the products themselves as Benefit have successfully done here. It’s worth noting that the beauty industry can also adopt the ‘Ideal Self’ hero image, which I’ll go onto shortly.
2: In Action
‘In Action’ hero Images work perfectly for products surrounding sport, fashion, food or service based companies like banking or insurance.
‘In Action’ Images are all about giving your target audience an idea of what life might look like with their product (in this they are similar to ‘Ideal Self’ hero images) but also to put their product in an exciting context. ‘In Action’ hero images rely heavily on emotion, so depending on what kind of company you are will depend on what message you wish to convey.
Take the example of Wiggle above. They sell all manner of gear for Triathlons predominately so it’s likely their target market is going to consider themselves ‘athletes’ or ‘at a professional level’ (and while we’re at it, they’d be right, have you seen the madness of a Triathlon recently?).
Anyway, if Wiggle were to have a hero image showing a guy cycling along casually on a flat road, the target audience are likely to be turned off within seconds. Why?because they don’t associate their ‘professional’ level of fitness with a company that on first glance would appear to cater to people who have a medium fitness level.
So, Wiggle went the right way. The hero Image here clearly depicts a mountainous terrain and a cyclist facing a steep incline. It simultaneously shows off the cycling gear nicely and what you can’t see is easy to get to with the prominent CTAs on the left.
Garmin are a great company to illustrate this too. As we said, any business that sells gadgets can go with the ‘Flaunting the Product’ approach, but if your gadget is designed to facilitate fitness then an ‘In Action’ banner ad is much more powerful.
Why? Well again it’s to do with that emotional reaction that is necessary to invoke a reaction from the audience. If you can show off your product as well as give it context then within seconds (which is all you really have) you’ve informed the audience of what they’re getting and for who it’s intended.
If you look at Garmin’s banner image for example it perfectly highlights what Garmin are all about. These products aren’t lightweight, these are very much for people whose level of fitness is more suited to IronMans rather than a casual jog now and then. As such, the hero image here portrays a moody background, a steep incline, and someone going full tilt.
This combination perfectly hammers home what Garmin wants to portray. Their products are versatile, hardy and for those people who consider themselves ‘proper’ athletes. Compare this to that of Fitbit:
Fitbit, you could argue would have a similar audience and yet have opted to go with a ‘Flaunting the Product’ hero Image. Now there’s nothing ostensibly stopping them going for an ‘In Action’ image, but as their product is designed to be both stylish and functional, it makes sense that they instead went with the ‘Flaunting the Product’ as their audience are typically going to be made up of people who are less about extreme sport, more about general health and fitness.
GoPro are yet another great company who would be mad to do anything but show their products in action. GoPro products are versatile and can be used for all manner of things, skiing, skydiving, and heck, probably Quidditch. This banner image shows that their products not only catch those up-close moments, but that they’re also all about fun. GoPro’s aren’t trying to pull in the knitting-weekly crowd, these are for people who would call themselves thrill seekers. Interestingly showing a child in this image also harks at the concept of fun not just being for twenty-somethings, you can be a thrill seeker and ‘capture memories’ of your family whilst you do so.
This is a nice example of how you don’t have to be a gadget company to make use of the ‘In Action’ hero images. Lush have opted to show you their product being used, rather than simply flaunting it in it’s pretty packaging. This works really nicely for a product whose texture would be important and the suds also give that luxurious feel to the image.
3: Ideal Self
Ideal-Self hero Images are pretty self-explanatory and are rife in the beauty and fitness industries. Typically, they show us an ideal self we could be if only we had the product shown. It sounds simple and a ploy you’re far too self-aware to fall for, but I’m afraid to say that when we’re not jumping to conclusions and judging books by their cover, we’re making decisions based on unconscious processes and connotations.
Could this be any more Ideal self? With Dior products, you apparently will not only become 100% more beautiful, you will also be an actress and able to amble casually along golden sands bathed in sunlight with a whimsical look on your face and no doubt a song in your heart.
Not that I’m bitter about these things. These types of images really are powerful and attempt to hold up a mirror and show not what we are but what we could be.
Using a beautiful model and a fantastic setting combined, once again give context to what Dior are all about, sophistication, beauty and happiness.
The implication being we too can have all those attributes if only we buy into the ethos.
Perfume is particularly guilty of the ‘Ideal-Self’ trope. Unlike makeup or fitness items it can’t show you the benefits of a scent, so instead it gives you a narrative, and sexual attraction is an automatic and obvious one. These Paco Rabanne images are particularly good hero images, not only in colour but in content.
The monochrome infiltrated with gold gives a sophisticated, expensive feel, whilst the two figures posed suggestively adds an edgy, exciting vibe.
And voila, a hero images that suggests we might have it all if only we had the perfume.
This is a subset of the Ideal Self if you like (also flaunted to some extent with the Dior image) which you might call ‘Ideal-Self Association’. Blandly put, you can put a famous face against your product and the values and ethos surrounding them in their professional sphere will be attributed to your company. So Rimmel here have incorporated Cara Delevingne, an attractive but edgy looking model, so if you want to be that sort of person, you’re more inclined to be swayed by a model like Cara than say, Natalie Portman.
Additionally, it also brings in the crowd of people who are ardent fans of celebrities and treat them as life gurus. We’re not saying there’s anything right or wrong about that but we are saying it works.
Key Takeaways on Hero Images
- Let your product and company ethos dictate the type of hero image you choose to adopt. If it’s brilliant but not much to look at, go for In Action, if it’s pretty more than functional try Flaunting and if it’s something aimed at people essentially wanting to be better or different then it’s an Ideal-Self-image.
- There are no set rules, if your company fall in between the cracks of these categories then split test, see which seem to inspire more conversions and a reduced bounce rate.
- Consider your colour scheme in conjunction with the image you choose, is it compatible?
And there you have it, 3 things to scratch your head about that will without a doubt have an impact on your conversion rate. As with most things concerning design, it isn’t an exact science, which is why you need to toy with all the facets and see what works. You also need to see what your competitors are doing, as they will be a key indicator as to which way your design should go.
Excellent. Now you can consider yourself fully informed.