All Blogs
How to Design a Landing Page that Really Converts
If you're selling online, you simply can't afford to ignore your landing pages.
I've been a graphic designer for almost 25 years. And in that time, I've seen it all: limp headlines, invisible CTAs, and conversion processes so convoluted that even data-entry workers wouldn't touch them.
The common thread? Poor design, poorly implemented.
So if you want a landing page that can convince and convert, read on for some essential design tips to help your business turn browsers into buyers.
Before we get stuck into the specifics, here are a few general design features to keep in mind:
With that out of the way, let's dive in to the the essential elements of a successful landing page.
You know what people are like on the internet.
When they click through to your landing page, you've only got seconds to convince them to stay.
That means you need to hook them immediately with a powerful statement, an irresistible offer or an intriguing question.
There are lots of different factors involved in building a killer landing page headline. But you can bet that the best ones out there will:
Lyft's landing page is a great example of a headline that ticks almost all of these boxes.
It's huge. It's centred. You'd have to try hard to look anywhere else from the moment you arrive on the page.
In less than ten words, this deceptively simple headline :
On top of all that, it's laid out so close to the next stage in the sales process that it's almost impossible to keep your eyes from following the page's intended path.
At the other end of the scale, Airbnb's landing page for hosts takes a less direct and more human approach.
Again, it uses less than ten words, but it still manages to:
It's easy to see how differently each of these companies has approached their headlines.
While Lyft is offering us concrete, numerical benefits, Airbnb is trying to move us with the concepts of social sharing, inclusion and altruistic behaviours. It's inviting you to become part of a communal movement, rather than just to earn a bit of cash on the side.
For a company as huge and well-known as Airbnb, it's an appropriate method.
Millions of people already know what Airbnb does, so there's less of a need to explain how things work and what's involved. And it's also a handy way for them to distance themselves from the "faceless billion-dollar corporation" stereotype – they're still just a humble bunch of Silicon Valley dudes who put people first.
If you're running a global e-commerce site that's continually featured in the media, it's a great way to write a headline.
But be honest: you're probably not. So until you are, you'll get more bang for your buck with a headline that contains a concrete, specific benefit – and if you can weave in an emotional response at the same time, even better.
Not every e-commerce landing page is about making a sale right there and then.
If you're selling a high-priced item, or selling software as a service (SaaS), you'll often need to nurture a relationship, or hook them in with a free trial – and that means you need your visitors to sign up for something first.
So what's the most important rule to remember when it comes to designing an effective sign-up form for your landing page?
Remove as many barriers to conversion as possible.
You don't want the process to be any more difficult than it has to be, and you don't want your visitors to have time to second-guess their decision to sign-up when they're halfway through the form.
In general, a carefully constructed form will:
Basecamp's clean and simple sign-up page is a perfect example of a form done right.
There's just one field to fill out – no fiddly passwords or intrusive phone number requests – and that single field is tied to a specific offer (a 30-day free trial).
The CTA button reinforces the same offer, using the same enticing action-words that work so well in headlines ("start", "free"). And there's also an option to sign up with your Google account instead.
They've even made good use of the small text below their CTA, with a constantly ticking tracker of the businesses that have signed up, which adds further social proof.
You might not have impressive data like that to add trust to your landing page yet. But at the very least, you should be using this space to add a reassuring disclaimer about privacy and data protection
Wix, on the other hand, is a great example of a sign-up page that's been stripped down to its bare essentials.
Aside from the mandatory privacy policy and terms and conditions, the only links on the page are those that take you forward (either logging in or completing the sign-up process), so its users have almost no choice but to complete their application.
The form's fields are huge, and the labels unobtrusively shrink away once you click into the box. There's a clear division between the two ways of signing up (with an email or with a social media account), and there's so much white space that it almost appears stark – which only helps to further highlight the contrasting colours of the social media buttons.
Best of all, the "Sign Up" CTA fills out its colour as soon as you start to enter your details into any of the form's fields – a reactive cue that forces you to start thinking about submitting before you've actually finished.
Along with your headline, your CTA should be the most visually arresting part of your landing page design.
When visitors first arrive and scan around the page, it should be immediately obvious where they need to click to move forward – so your CTA really needs to pop off the page.
With that said, here are a few features you need to keep in mind when designing and placing your all-important CTA button:
Beyond the visuals, it's also important to get the right message into the button.
Don't waste valuable converting space with impotent wording like "Submit" or "Continue". Confirm the offer, demand action and use the power-words people love to hear: "Download your free guide now", or "Start your 30-day trial today".
Unbounce, for example, has worked hard to make their CTA slap you in the face.
It's bold, huge and central – and as far as I can tell, the two CTA buttons are the only clickable links on the entire page.
On top of that, Unbounce has chosen to:
Xero, however, have decided to take a different approach to their CTA buttons.
Rather than focus all of their efforts into drawing your eye to the same CTA multiple times, Xero has included three different CTAs above the fold.
First – and most eye-catching – is the bright green button containing power-words ("buy now") and a benefit ("save"). This is the standard bold CTA that you'd see on most effective landing pages, and it's the prime route that Xero would like its visitors to follow.
Second, there's a softer option conveniently located nearby: a white button, with non-bold lettering, offering a free trial for visitors who aren't yet fully convinced, but are convinced enough to give it a go without risk.
Finally, there's an even softer CTA (with no prominent colouring) offering the same free trial, with a simple outline to distinguish it from its surroundings.
It's no coincidence that this last-chance level of CTA is contained in the navigational menu. When visitors are taking their time to make up their minds, and are still exploring the site's different pages, there's an invitation for a free trial ready to pick them up while they're browsing.
Importantly, this menu CTA is ready and waiting on every page of the site. So wherever they are when they're finally converted – or if they're still deciding whether they need to read through another page before they commit – that free trial is already staring them in the face.
There's no magic formula for designing a landing that converts.
Every product, website and consumer is different, and it might take many rounds of A/B testing and meticulous tweaking before you find the combination of factors that pulls in the highest response.
But there's still value in rules of thumb. So always remember to keep the following in mind:
Sources:
CTA button shape and size theory
About the Author:
Danny Molt has been involved in design for almost 25 years working with some of the top uk design agencies. For the last 5 years has been the head of digital marketing for Print-Print Limited Danny focuses on UX design and page optimisation to help with improve customer conversion.
You can contact him at on Twitter @DanMolt
I've been a graphic designer for almost 25 years. And in that time, I've seen it all: limp headlines, invisible CTAs, and conversion processes so convoluted that even data-entry workers wouldn't touch them.
The common thread? Poor design, poorly implemented.
So if you want a landing page that can convince and convert, read on for some essential design tips to help your business turn browsers into buyers.
Get the basics down first
Before we get stuck into the specifics, here are a few general design features to keep in mind:
- Always keep your landing page clean and uncluttered. The visitor's eye should naturally fall to and follow the important information and the next step in the process.
- Remove the main site navigation. You want to keep your visitors focused on the specific goal of the landing page – signing up, buying or downloading. You don't want them wandering off to explore the rest of your pages.
- Respect the F-shape. Keep your sub-headers on the left, and your sign-up forms and calls-to-action on the right.
- Make sure your landing page is responsive. With so many people using smartphones and tablets, you need your page to be sexy and functional on any kind of device – especially when you're driving traffic from an email campaign.
- Feel free to experiment. Your landing page won't usually be integrated with the rest of your business's website, so don't worry if it doesn't completely fit in with the site's overall style.
With that out of the way, let's dive in to the the essential elements of a successful landing page.
The Headline
You know what people are like on the internet.
When they click through to your landing page, you've only got seconds to convince them to stay.
That means you need to hook them immediately with a powerful statement, an irresistible offer or an intriguing question.
There are lots of different factors involved in building a killer landing page headline. But you can bet that the best ones out there will:
- be instantly clear about what's on offer
- be concise and easy to read
- match up to the promise of the link or advert that brought the visitor to the page
- be concrete and specific
- contain an element of action
- identify a consumer problem or pain-point – and offer a solution
- use the enticing words people love to hear: you, free, easy, start, today.
Lyft's landing page is a great example of a headline that ticks almost all of these boxes.
It's huge. It's centred. You'd have to try hard to look anywhere else from the moment you arrive on the page.
In less than ten words, this deceptively simple headline :
- tells you what they're all about (making money driving)
- is concise and readable (almost every word is just one syllable)
- makes a specific promise ("$35/hr")
- includes an element of action ("make")
- and uses a word people love to hear ("your").
On top of all that, it's laid out so close to the next stage in the sales process that it's almost impossible to keep your eyes from following the page's intended path.
At the other end of the scale, Airbnb's landing page for hosts takes a less direct and more human approach.
Again, it uses less than ten words, but it still manages to:
- convey what they're about (hosting people)
- attach a personal, emotional value to the benefit (funding your passions)
- use a relevant subheading to strengthen its emotional value (funding your passions AND improving the lives of others)
- include the words people love to hear ("your", "help", "passions", "belong").
It's easy to see how differently each of these companies has approached their headlines.
While Lyft is offering us concrete, numerical benefits, Airbnb is trying to move us with the concepts of social sharing, inclusion and altruistic behaviours. It's inviting you to become part of a communal movement, rather than just to earn a bit of cash on the side.
For a company as huge and well-known as Airbnb, it's an appropriate method.
Millions of people already know what Airbnb does, so there's less of a need to explain how things work and what's involved. And it's also a handy way for them to distance themselves from the "faceless billion-dollar corporation" stereotype – they're still just a humble bunch of Silicon Valley dudes who put people first.
If you're running a global e-commerce site that's continually featured in the media, it's a great way to write a headline.
But be honest: you're probably not. So until you are, you'll get more bang for your buck with a headline that contains a concrete, specific benefit – and if you can weave in an emotional response at the same time, even better.
The Sign-up Form
Not every e-commerce landing page is about making a sale right there and then.
If you're selling a high-priced item, or selling software as a service (SaaS), you'll often need to nurture a relationship, or hook them in with a free trial – and that means you need your visitors to sign up for something first.
So what's the most important rule to remember when it comes to designing an effective sign-up form for your landing page?
Remove as many barriers to conversion as possible.
You don't want the process to be any more difficult than it has to be, and you don't want your visitors to have time to second-guess their decision to sign-up when they're halfway through the form.
In general, a carefully constructed form will:
- use the smallest number of fields necessary to continue the process. Typically, the more fields your visitors have to fill in, the lower the conversion.
- avoid asking for sensitive or personal data unless it's essential and relevant. You wouldn't ask a stranger on the street for their age, phone number and passport number. If you really do need this data, try to save those questions for a page further down the line – when your visitors are already more comfortable and committed.
- use fields with large dimensions. Make it easy for users to click on to the next place to enter their information.
- let users sign up with their social media accounts instead. Logging in with Facebook or Twitter means less hassle with passwords and user names, and it might also let you capture additional information about your prospects if you include the right permissions.
- have any opt-in extras unchecked by default. As well as making you look pushy and presumptuous, having these options automatically included will just lead to a blog or email subscription list that's bloated with people who aren't really interested.
Basecamp's clean and simple sign-up page is a perfect example of a form done right.
There's just one field to fill out – no fiddly passwords or intrusive phone number requests – and that single field is tied to a specific offer (a 30-day free trial).
The CTA button reinforces the same offer, using the same enticing action-words that work so well in headlines ("start", "free"). And there's also an option to sign up with your Google account instead.
They've even made good use of the small text below their CTA, with a constantly ticking tracker of the businesses that have signed up, which adds further social proof.
You might not have impressive data like that to add trust to your landing page yet. But at the very least, you should be using this space to add a reassuring disclaimer about privacy and data protection
Wix, on the other hand, is a great example of a sign-up page that's been stripped down to its bare essentials.
Aside from the mandatory privacy policy and terms and conditions, the only links on the page are those that take you forward (either logging in or completing the sign-up process), so its users have almost no choice but to complete their application.
The form's fields are huge, and the labels unobtrusively shrink away once you click into the box. There's a clear division between the two ways of signing up (with an email or with a social media account), and there's so much white space that it almost appears stark – which only helps to further highlight the contrasting colours of the social media buttons.
Best of all, the "Sign Up" CTA fills out its colour as soon as you start to enter your details into any of the form's fields – a reactive cue that forces you to start thinking about submitting before you've actually finished.
The Call-to-Action (CTA)
Along with your headline, your CTA should be the most visually arresting part of your landing page design.
When visitors first arrive and scan around the page, it should be immediately obvious where they need to click to move forward – so your CTA really needs to pop off the page.
With that said, here are a few features you need to keep in mind when designing and placing your all-important CTA button:
- A rectangular button with rounded corners points the eye inwards, towards the content of the CTA. Sharp corners point outwards, distracting the visitor by drawing their eye outside of the box.
- Bigger is (almost) always better. A button that's large relative to the other elements of the page gets noticed more quickly and signifies importance. But take care: when a CTA gets too big, it won't be so obvious to your visitors that it's actually a clickable button.
- Complementary (contrasting) colours are usually the way to go. Use a complementary colours tool to find a combination of background and button that slaps your visitors in the face.
- Keep it close to your headline, benefits and sign-up form, but give your CTA its own space. The button needs to be close enough to your sales pitch to create a logical connection, but be surrounded by enough white space that it stands out at first glance – and has a chance to contrast with your chosen colours.
Beyond the visuals, it's also important to get the right message into the button.
Don't waste valuable converting space with impotent wording like "Submit" or "Continue". Confirm the offer, demand action and use the power-words people love to hear: "Download your free guide now", or "Start your 30-day trial today".
Unbounce, for example, has worked hard to make their CTA slap you in the face.
It's bold, huge and central – and as far as I can tell, the two CTA buttons are the only clickable links on the entire page.
On top of that, Unbounce has chosen to:
- lay a bright orange button on a bright blue background – a perfect example of contrasting colours that makes the CTA pop.
- use rounded corners to draw the eye inwards instead of outwards.
- surround the button with plenty of white (blue) space on either side. It's clearly distinct from the headline above and the images below, but it's close enough to feel connected.
- use a simple message that includes enticing words ("you") as well as two action-words ("click" and "start").
- add a directional cue to draw the eye back up to the CTA from the images below. That means that as soon as the visitor has finished reading the CTA and moved on, the inoffensive animated arrow is already inviting them to read it one more time.
- arrange their supporting imagery into yet another, more subtle directional cue. The seven screenshots below the button are laid out in a pyramid-shape that points straight back to the CTA. And if we want to get symbolic, we could say that they're shaped like a winner's podium, putting the button (and therefore the product) in a superior position.
Xero, however, have decided to take a different approach to their CTA buttons.
Rather than focus all of their efforts into drawing your eye to the same CTA multiple times, Xero has included three different CTAs above the fold.
First – and most eye-catching – is the bright green button containing power-words ("buy now") and a benefit ("save"). This is the standard bold CTA that you'd see on most effective landing pages, and it's the prime route that Xero would like its visitors to follow.
Second, there's a softer option conveniently located nearby: a white button, with non-bold lettering, offering a free trial for visitors who aren't yet fully convinced, but are convinced enough to give it a go without risk.
Finally, there's an even softer CTA (with no prominent colouring) offering the same free trial, with a simple outline to distinguish it from its surroundings.
It's no coincidence that this last-chance level of CTA is contained in the navigational menu. When visitors are taking their time to make up their minds, and are still exploring the site's different pages, there's an invitation for a free trial ready to pick them up while they're browsing.
Importantly, this menu CTA is ready and waiting on every page of the site. So wherever they are when they're finally converted – or if they're still deciding whether they need to read through another page before they commit – that free trial is already staring them in the face.
To sum up...
There's no magic formula for designing a landing that converts.
Every product, website and consumer is different, and it might take many rounds of A/B testing and meticulous tweaking before you find the combination of factors that pulls in the highest response.
But there's still value in rules of thumb. So always remember to keep the following in mind:
- Remove as many barriers to conversion as possible
- Keep your page design uncluttered and focused exclusively on the goal
- Make your headlines and body copy relevant, specific, powerful and inviting
- Simplify your sign-up forms until they're non-invasive, quick and easy
- And make that CTA pop!
Sources:
CTA button shape and size theory
About the Author:
Danny Molt has been involved in design for almost 25 years working with some of the top uk design agencies. For the last 5 years has been the head of digital marketing for Print-Print Limited Danny focuses on UX design and page optimisation to help with improve customer conversion.
You can contact him at on Twitter @DanMolt