What is a landing page?
Before we get into analyzing every single great landing page design in this article, let’s start with some definitions.
In the digital marketing world, a landing page is a separate, unique web page created exclusively for a marketing or advertising campaign. It’s the place where a visitor lands when they click on a specific link or an ad they saw on Facebook, Google, Youtube, LinkedIn or other similar websites.
The particularity of a landing page is that it’s designed with a sole focus or goal, also known as a call to action (CTA).
Using a single web page like a landing page is a great way to increase conversions and lower your cost per acquisition, as there is less distraction than on a website. A great landing page design generally doesn’t even have a navigation bar on top so the only action the visitor can take is to answer the CTA.
Now, any page can on a website can be a landing page if you carefully craft your UI/UX, but for the sake of this article, we’ll use the term to describe campaign-specific pages that only contain a single call to action and no navigation bar.
So without further due, here are some of the best landing page examples (with analysis) to inspire you for 2020, and make your conversions go through the roof.
Table of contents
1. Shopify
2. Groupon
3. Codecademy
4. Webflow
5. Khan Academy
6. Uber
7. Trulia
8. OFFSET
10. Quicksprout
11. Hubspot
12. Hubspot (again)
13. Impact
14. Indochino
15. Fabletics
16. uCraft
How to Create a High Converting, Great Landing Page Design
Sign-Up Landing Pages
1 – Shopify‘s Simplicity and Design is Almost Flawless
Shopify, the big e-commerce Canadian platform, is always good at keeping things simple. They talk directly to their user with an effective, straight-to-the-point big title.
They reinforce their authority with a social-proof oriented subtitle, saying over 800K people use the platform.
Their graphic design also brings another dimension to the page with the use of superposition/overlapping and drop shadows, which are extremely useful to catch the eye of your viewers.
But where it gets interesting is how streamlined it is. There’s no paragraph, only key points, there’s only one form field to fill which makes it super easy for them to close the deal and you barely have to scroll to see the entire thing.
Ending the page with some more social proof (logos of companies that work with Shopify and a testimonial) is also a powerful way to create excitement in your customers.
3 takeaways you can implement:
1- Keep your landing page designs short, streamlined and quick to read.
2- Create simple but eye-catching designs using superposition/overlapping and drop shadows.
3- Less is more: while having more form fields can be better to attract more serious and qualified leads, signing up for a free trial does not require a big commitment, so only one form field is what will generate the most conversions.
2 – Groupon‘s Straight to the Point Landing Page
It doesn’t get any more minimalist than this great landing page design by Groupon. This one doesn’t focus on strong design or flashy effects but is incredibly conversion focused.
The flat green background creates strong contrast with the items on the page, which makes them the only things you can really look at.
They use geolocation personalization to create proximity with the page viewer, who’s in Wichita, Kansas in this case.
Their title is simple, yet effective: everybody loves a massive discount.
They only require one form fill: less effort from potential customers.
And finally, the creative fits and doesn’t distract you from the rest of the page. Who doesn’t love a good fruity cocktail? They look smooth.
3 takeaways :
1- Use a flat coloured background to create a strong contrast with the items of your page. This allows for more focus and attention from your page viewers.
2- Use the simple, poignant title to make visitors salivate at your offer.
3- If your form field is small (1-3 input fields), put it at the very center of your page. It’s where the eyes are naturally drawn towards.
3 – Codecademy Mixing Perfect Design and Knowing Their Audience
The design above the informational part is minimalist and subtle, making it easy for the user to focus on the form box and the amazing offer stated in the title.
The red they use for their CTA button goes in harmony with the rest of the page and acts as a great accent colour. It also stands out perfectly without being too aggressive.
They offer the possibility of signing up with Facebook or Google+, lowering the barrier to conversion and showing great social proof.
Finally, they show a student testimonial explaining how coding helps him. It’s a very well thought marketing angle as learning to code is almost becoming a must-have skill for a lot of job sectors.
3 takeaways:
1- Use a minimalist design. In case you weren’t paying attention, minimalist design is absolutely dominating the internet. No more clutters and big paragraphs, more spacing and straight-to-the-point copywriting.
2- Make your CTA stand out, but also make sure if fits with the rest of your page. A green button in this one, even if it was the only thing we would’ve been able to look at, would have looked out of place.
3- Use audience-targeted social proof. In this instance, Codecademy knew exactly who they were talking to, which drastically increases conversions.
4 – Webflow: Longer Layouts Can Still Make For Great Landing Page Design
Even though the typical example of a good landing page presents something short and sweet, Webflow is able to create a great landing page design, even if we have to scroll a bit more (poor us).
They start by making a statement with some extremely solid social proof (Facebook, NASA, Twitter, DELL) and a catchy title.
The most interesting part and where they’re able to pull off the long one-page design is because they break down the important information in 3 distinctive parts. The 3 big titles, 3 different gradient-coloured parts and straight to the point graphic design.
They even reinforce social proof with 3 different testimonials that all fit in their specific category and provide insight on what you can use the platform for.
All in all, one of the most complete landing pages on this list.
3 takeaways:
1- Longer design can still make for a great landing page. Make sure to separate in very distinctive, easy to read and well-designed parts. I would also recommend keeping the most important information in 3 parts as for is starting to be a bit much.
2- Use testimonials that are related to the section you’re talking about.
3- Provide examples of what people can use your offer. This will help them picture themselves using your product/service and ease the conversion.
5 – Khan Academy‘s Amazing Use Of Space
This landing page is the use of space at its best. They start the landing page with an attractive headline and 3 separate calls to actions, depending on who you are in relation to education.
The following part is interesting because they’re able to direct our focus on the essential, using both minimalist copy and design.
The spacing is really what creates an effect, as we’re able to breathe throughout the page and give our attention to the small important parts.
They also make sure to appeal to the biggest possible crowd: whichever area you need help in, they provide.
And then, of course, reiterating the big statement on how it’s free forever at the end is what closes the deal.
3 takeaways:
1- Use a lot of spacing to focus the attention of your users on the most important part. It also allows for a smooth scrolling experience and an “I want to see the next point” kind of feeling.
2- Make sure you have a call to action for each person of your target audience. Here, a simple “Register” button would confuse the user.
3- If you have an amazing offer, like something being free or a big discount, always have it at the very beginning and at the very end of your page. I would even add it somewhere in the middle inside a title or the copy to really accentuate it.
6 – UBER: Making Your Offer Relatable
The use of superposition in this great landing page design example by UBER shows how you can condense information a bit more than usual without the page feeling too crowded.
They also have their copywriting on point that speaks in volume to users: working on your own time.
Here they have the form laid out with all the information there is to enter. Even if a bit longer, it works with the design as the form really stands out, is placed up high so you can’t miss it and doesn’t look too intimidating to fill.
All the necessary information is condensed in 3 key points (the 3 reasons why you should subscribe), making it easy to scan through it.
They also use relatable and friendly people for the creative to help with conversions – this could be you. Notice these persons are both smiling, one the most common and effective marketing techniques.
3 takeaways:
1- Use smiling psychology. Smiles sell as they evoke joy and trust in viewers. Making these people relatable will allow you to reach an even bigger audience.
2- They use images and sections that overlap with others, making the page extremely dynamic. It’s an easy and effective way to create amazing UI. You can learn more about this subject in this very interesting article.
3- When using a longer form, try to make the form section smaller and integrate it well in your design instead of just having a big block. You can also try to have fewer text forms and more dropdowns or choices to decrease user effort to maximize conversions.
7 – Trulia‘s Minimalist Landing Page
Trulia, a bit like Groupon earlier in this list really makes it tough not to get a conversion.
They barely use any copy, but what they use (“How much is your home worth?”) is the only thing you’re here for.
They use a subject related background with soft colours and a dark overlay that brings harmony to the page and makes you focus on the offer, place at the center.
Since they don’t use any other strong colours in the page, they can opt for pretty much anything that stands out, so the orange, that evokes friendliness and cheerful confidence, works perfectly.
3 takeaways :
1- Have a well defined, single focus offer that will always give you the highest conversion rate possible. Here there is no ambiguity about what is page is for.
2- Use overlays on your background to make sure it doesn’t catch too much attention from the viewer. You want them to focus on the form of your landing page to get the conversion.
3- If your landing page design is sober and doesn’t really stand out, make sure to use colours that will really pop for your buttons.
8 – OFFSET‘s Great Landing Page Design
Great design is what creates the best landing page.
OFFSET uses one of its artist’s best designs to sell their service. It shows exactly the kind of world you can be transported to when signing up to their website.
The bid header states precisely what you’re getting and the written copy is small and gives the necessary information. You don’t need to scroll, everything needed is centred.
They use a light but effective gradient on the button, making it stand out just a little more while still matching with the background design. The word “Explore” on this button is also a “low friction word” (Joanna Wiebe) making it more likely to increase conversions than rawer words like “buy” or “sign up”.
3 takeaways :
1- Use great, related design to create emotion in your users.
2- Use low friction words for your call to actions to increase conversions.
3- Gradients on buttons are becoming increasingly popular as they give another dimension to the page and attract attention even more.
Information & Services Landing Pages
9 – Conversion Lab‘s Amazing UX
While this example is more of a one-page design (the page automatically scrolls down to the section when you click on one of the header items), it’s still a great landing page.
The best part is that you don’t see any form when you land on the one-page website, so there’s no pressure on the user. When clicking a CTA, the form simply appears seamlessly on the right.
Not leaving the page to fill the form is a big plus and maximizes conversions.
While orange buttons may sometimes be overused, here the contrast with the light blue is easy on the eye and reinforces a positive sentiment of the brand.
Having the founder appear at the top of the page also creates proximity with the user: they know exactly what they’re getting and who they’re working with.
3 takeaways:
1- Make sure your user doesn’t have to leave the page to fill the form. You want to make the experience as smooth as possible, and having to load another page makes the transition too long.
2- Creating great contrast with a complementary colour improves your design while increasing conversions. You can use this tool to find complementary colours.
3- When offering a service, having a good picture of you can help to reach your user’s emotions. Make sure you smile and you convey trust in your picture.
10 – Quicksprout: Social Proof at its Best
This is straight social proof for anyone who is at least a bit familiar with online marketing.
They sell you the dream of huge organic traffic without spending a dollar on ads (strong title) and they have you believe because who’s teaching the class? Neil Patel.
The page doesn’t have more than two lines of text in a row, making it extremely easy to scan and gather the information.
They use effective, simple graphic design with the use of drop shadows on the curved green line.
Even though I’m not a fan of long buttons, it works in this case because it makes the interaction very personal, like you’re answering Neil Patel directly.
3 takeaways :
1- If you have the necessary resources, partnering with familiar faces in your industry will greatly improve conversions.
2- Make the landing page personal, almost like you’re talking face-to-face with your viewer.
3- Use minimalist but effective design. Drop shadows are extremely useful to make those designs stand out, but be careful and don’t abuse them as they can quickly become tacky when overused.
Downloadable Resource Landing Pages
11 – Hubspot: How to be Short and Concise
Hubspot always does it right with their downloadable resources landing page designs. They’re always short and concise and don’t beat around the bush.
They give great value, especially for designers by stating you save “countless hours” using their pre-made templates.
Including examples of what you’ll receive is also a very effective way to create a landing page that converts.
More subtle, but they also make sure those conversions are at a maximum by including two infographics formats: illustrator (for more advanced designers) and PowerPoint, a very user-friendly platform that’s not as scary for people that are not familiar with graphic design in general.
3 takeaways:
1- Clear and concise. There’s literally no gimmick on this one. The only thing they state is what you’re getting with very minimal copywriting.
2- Including concrete examples of exactly what people are getting will vastly increase conversions as it gives an idea of what you can do with the product.
3- Know your audience. Here they know how long design takes and explain clearly what the benefit of downloading these templates is.
12 – Hubspot (again)
This Hubspot landing page has more information than the previous one, but it’s still done in wonderful fashion and one of the best landing pages on this list.
It warrants more copywriting because of how complicated a sales plan can be, but they still manage to keep the copywriting at a minimum with the inclusion of strategically placed bullet list.
In case you weren’t ready to download by simply seeing the great design at the top of the page, they include strong statistics and social proof at the end of the page.
Buttons stand out and are congruent, sporting the famous Hubspot orange.
3 takeaways :
1- Use bullet lists instead of big paragraphs to outline key points. It’s a lot faster to scroll through than a big cluster of words.
2- Using your own colour for buttons and accents reinforces your positioning as a brand.
3- I would recommend always including some social proof for downloadable resources as people need to know it’s worth their time.
13 – IMPACT: The Powerful Use of Gradients
Here, IMPACT is going for a sleek and modern look, which works very well for a one-page design.
The use of gradients makes everything on your page stand out more. But watch out, they’re not as easy to do as they seem. Read this for great gradient tips.
The UX of this landing page is very well executed. It’s split into 4 parts that form a square so your eyes are naturally drawn from one step to the next step: they start on the top left and end on the bottom right (with you likely filling the form). Combined with the fact that it’s a no-scroll landing page, viewers are not likely to skip any part.
The CTA is very appealing, giving you the promise of generating more conversions. It also matches perfectly with the colours of the page but stands out just enough for you to notice it easily.
3 takeaways :
1- Use gradients. They’re becoming increasingly popular and you’ll see a lot of them in 2020. If you think it works well with your brand, you can even go into vibrant gradients. You can even use gradients on buttons to make them stand out.
This video shows exactly how to do it :
2- Use geometry. Split your landing page into parts and try to do the UX exercise yourself until it “feels natural” to go through the whole page.
3- Use a personalized CTA. Instead of just saying stuff like “DOWNLOAD” or “REGISTER”, explain the promise of what happens when you click on the button.
E-Commerce Landing Pages
14 – Indochino‘s Classy and Minimalist Landing Page
One of the key points of creating great landing page designs is having beautiful visuals. The attractive products Indochino offers does just that.
Here we see the model wearing their product as a key element of the page. It acts as a testimonial in itself as it allows people to see how it looks when worn.
Congruency is also an important part of this landing page. Just looking at their logo, we have a minimalist, classy feel that they reproduce perfectly in their landing page design.
Finally, integrating the Instagram feed can be a good way to showcase your product while acting as a testimonial/social proof section.
3 takeaways :
1- If you have a beautiful product, create beautiful visuals and make them the center of attention on your landing page.
2- Stay congruent with your brand. It’s really important to know and perfect your brand image so your landing pages align to look harmonious. Also, make sure that your ad shows a similar design to the landing page to keep congruency at a maximum with ads and landing page continuity.
3- Use your own, beautiful social media creative to showcase people using your product. This adds a subtle sales element to your landing page and increases conversions.
15 – Fabletics‘ Great Landing Page Design: Gamifying The Experience
This soft-coloured, great landing page design by Fabletics is everything you want from an e-commerce landing page.
The red, while standing out, still works in perfect harmony with the beige and the “zen vibe” of the picture.
Fabletics provides actionables on how to use the landing page, so you know exactly how everything is going to go.
They also gamify the experience by having the users taking a quiz, making it more likely to evoke curiosity in users.
The 2 big headers at the top of the page stand out, but the easiest one to read is the most important one: the offer. This makes us focus on the essentials of the landing page.
3 takeaways:
1- Gamify your landing page. This is becoming a very popular practice in digital marketing, and it makes a lot of sense. With the power of computers, we’re bound to see more and more interactive advertising in the future. Here are 7 ways to gamify your marketing.
2- Give steps to your user so they know exactly how to act upon your landing page.
3- When you have 2 important titles, make the one focusing on your amazing offer the easiest to read and the one that catches attention the most.
16 – uCraft‘ Great Landing Page Design: Catering to Your Audience The Right Way
This landing page uses very few words to convey its message. Ucraft is a website builder dedicated to non-coding freelancers and entrepreneurs who want to build professional websites with a few clicks. Besides the minimalist design and excellent placement of elements on the page, what truly impresses is the copy.
Once you lay eyes on the Ucraft landing page, you instantly understand what it is all about and where you need to go next. The visible and powerful headline compels young people to learn more about the website builder’s tools, templates, and pricing options because it makes a promise nobody can refuse – better and faster websites for anyone.
Moreover, there is also the promise of togetherness, help, and support. Whoever built a website or attempted to create one from scratch knows how lonely and frustrating the entire process can be. The image of the young woman in the background makes things even more relatable, showing us that Ucraft understands its audience and serves its needs through simple but powerful marketing and design techniques.
The subheading – with its humorous flair – appeals to one of the largest and most influential demographic in today’s business world: the busy young entrepreneurs, start-up visionaries, artists, freelancers, etc., reiterating what Ucraft is all about: building websites in a fast, smooth, streamlined manner so any freelancer or company can become relevant in the online world.
Ucraft closes the deal with their offer of a 14-day free trial, without backing anyone into a corner, but allowing entrepreneurs to test and choose what is best for them.
The entire landing page fosters an environment of trust, collaboration, and freedom of choice – values which this generation of businesspeople appreciates dearly.
3 takeaways:
1. Give yourself the time to write a headline that is bold, impactful, and serves the needs of your audience directly. Headlines that convert are not easy to come by, so take your time with this crucial element on any landing page that you want to convert.
2. Do not be afraid to place a humorous, intriguing, and audience-relatable subheading on a page using overlays. It is not always the background that matters, but the feeling you want to instill in the hearts of the audience. Can your users build a website in those few minutes it takes to heat last night’s pizza leftovers? The psychology of curiosity is at the top of its game with this page.
3. Always place your fantastic offer at the page’s end, especially in relation to the Call to Action button. In this case, offering freedom of choice is even better than providing discounted prices.
How to Create a High Converting, Great Landing Page Design?
A well-crafted landing page can easily turn visitors into buyers or prospects into leads so you want to make sure it is optimized for conversions. Here are some landing page ideas and design tips to keep in mind to maximize the efficiency of your landing pages.
1. Short & Sweet
Sometimes, less is more. The Groupon, Trulia and OFFSET landing pages are great examples from this list. Have the offer or the images do the heavy-lifting and close the deal for you. Make sure to include compelling and informative titles.
2. One page design
You don’t want your visitors to have to leave the landing page. Keep the landing page focused on your offer, remove navigation on top and see your conversions grow. Also, make sure that forms are either visible upon arrival on the landing page or have them open in a lightbox.
3. A/B testing
Probably one of the most effective ways of increasing your conversions. Experiment with different versions of your landing page by changing the background image, the colour of the CTA buttons, the creative you use, your titles or even the page layout. Make sure to track your results with Google Analytics.
4. Design first
To create great landing pages, you have to be good at creating beautiful UI. It reinforces the positioning of your product/service and your brand. You can use this article to find out great design tips and how to make your landing pages that much better.
5. Appealing creative
If your product is beautiful, great, use it to your advantage. If you don’t have a lot of creative, invest in it. It’ll be one of the best decisions your business has made. You can also use minimalist design and clean UI to make your landing page stand out more.
6. Stay congruent to your ad
While designing your landing page, keep in mind the ad people clicked on to get on it. Ad congruency is extremely important so you want your landing page design to be similar to your ad design so the transition is smooth. Oh and don’t forget to install your Facebook pixel to gather the necessary data.
7. Use social proof
Customer testimonials, customer pictures, logos of the companies you’ve worked with or video testimonials are still one of the best ways to increase conversions. People want insights about your product/service and what’s better than a satisfied customer or a popular company as social proof?
8. Use bullet points or small sections instead of big paragraphs
The landing page becomes that much shorter and that easier to read when using this technique.
9. Use drop shadows and gradients to make your page stand out
Those are some of the easiest design tricks to create great UI. Be careful to not abuse it and stay aligned with your brand though.
10. Use spacing and well-defined sections
This creates a much more enjoyable UX and is highly likely to increase the conversions of your landing page. Using different colours for different sections is a great way to increase UI as well as UX.