19 of the best landing page design examples to discover in 2018

19 of the best landing page design examples to discover in 2018

How to convince your visitors to take the plunge on your website?

There are so many elements that a high-end landing page requires, and making it as best as possible often depends on your landing page goals are

Take the length of the form, for example. This is only one of the many components that you need to optimize, but best practices will tell you that short and long forms work well, it all depends if you want to generate a lot of (potentially) form submissions. lower quality.

 Click here to learn best practices for optimizing landing pages and generating more leads.

So, if you are looking to improve your landing page, useful to find out what’s going on in a good landing page and see some examples of these nuanced elements in action. Surprisingly, when I started doing some research on this last point, I realized that there were virtually no sites with examples of modern landing pages and impressive ones that were not just a simple registration form on a front page. So we decided to compile a list of landing pages that we like ourselves.

 Design-and-Optimize-LPs.png "width =" 600 "title =" Design-and-Optimize-LPs.png "style =" width: 600px; margin-left: auto; margin-right: auto

A big caveat here: I do not have access to statistics for these pages, so I can not tell you which point they convert visitors, prospects and customers. However, these examples – even those no longer active on the company’s website – present some of the best combinations of nuanced landing page elements I’ve ever seen.

Obviously, if you are inspired to try any of these tactics on your own site, the only way to know if they will work for you for sure is to test them for yourself.

Registry Entry Pages

1. Shopify

Like most other display pages in this article, the Shopify homepage simplifies things. The user-centric title contains only a few words, for example, and the page relies on simple bullets, not paragraphs, to communicate the details and benefits of the test. There are only a few fields to complete before starting. All this allows you to better understand the point: sell online with their tool.

 Shopify Home Page

2. Muzzle

Landing pages help users decide if your product or service is really worth their time and energy. What better way to communicate clearly and directly your value proposition than to confront visitors with the problem that your application solves?

Muzzle, a Mac application that removes on-screen notifications, does not accept this mentality on their otherwise minimal landing page. Visitors to the page are greeted with a flurry of embarrassing notifications in the upper left corner of the screen. Not only is the animation hilarious, but it also conveys convincingly the usefulness of the application without lengthy descriptions.

 Landing page of the muzzle inscription with yellow download button


TransferWise allows you to send and receive money in different currencies, and its landing page , illustrated below, separates each action so as not to be distracted by options that do not concern you.

To send money, the transfer form is available to you right. To receive money, simply click on the middle tab and to sign up for TransferWise using your debit card, click on the far right tab.

Each tab on this landing page produces a different call to action. you sign up for – each one of them in a dynamic green box to highlight your next step after your three possible starting points.

 TransferWise landing page with CTAs to send money, receive money and TransferWise Debit Card

4. Airbnb

To make it easier to convert visitors into hosts, Airbnb offers a tempting customization: a projection of average weekly earnings estimated based on your location. You can enter additional information about your potential adaptations in the fields to get an even more personalized estimate.

If you visit the page already convinced, the clarity of the call at the top of the page facilitates its conversion. the spot.

 Landing Page for Airbnb Listing "class =" alignCenter shadow "style =" margin-left: auto; margin-right: auto

5. Teambit

Whimsical is not usually the first word that comes to mind when one thinks of human resource management software, but it is precisely the landing page of Teambit. A simple form at a field is accompanied by a delightful desk filled with animal characters – all very satisfied with Teambit, in case you’re wondering. An animal drawing appears next to each information section of the landing page, allowing visitors to scroll down to find out more.

The Teambit landing page is the perfect proof that you do not need a product or service conventional fun landing page.

 Teambit landing page with CTA to register with Google "class =" alignCenter shadow "style =" letter spacing: 0px; text-align: center; margin-left: auto; margin- right: auto

[Click here to see the whole landing page.]

6. Wistia

First is the landing page of Wistia for their free Wistia account. From the start, you notice the shape to a field to create your account – the blue background with minimal patterns contrasts well with the bright white form field.

The length of the form field combined with the prominent placement eliminates almost any friction to create an account … but if you have any doubts, you can always scroll down below to read the answers to the most frequently asked questions. By separating these two sections with a sharp color contrast, Wistia greatly facilitates the conversion.

 wisita-landing-page-example.png "width =" 660 "style =" width: 660px

7. Webflow

Webflow, a design tool for Web developers, integrates a lot of information into a single GIF file and three form fields. Having the entire registration form on one line is a good idea here – not only does this shorten the page, but filling in each box from left to right shows users how much they need to click on the fourth blue button and get

The animated GIF file under the form is visible in the same frame on the website, so that users can see how the product works and register without scrolling or click on a new page.

 Webpage Landing Page

Ebook Landing Pages

8. Nauto

Nauto, a data platform for autonomous cars, helps make autonomous driving safer for companies that manage autonomous fleets. Naturally, its customers need all kinds of information to sell on this platform. Nauto has it, packed into a super simple ebook whose landing page gives you a brief contact form and some preview statistics to prove why this resource is so important.

<img src = “https://blog.hubspot.com/hs-fs/hubfs/nauto-ebook-landing-page.png?t=1534381407760&width=690&name=nauto-ebook-landing-page.png” width = “690” style = “width: 690px” alt = “]

At the top of the page, shown above, a warm picture of the interior of a car marries the shape of capture The green “Download Now” button may have even been used (on the road, the green means were used after all).

Scroll down and you will see another file. Wait for “Get the eBook” to remind users for them.You will also see three discordant statistics on car accidents to entice users to learn more.Watch it below

 nauto-ebook- landing-page-CTA-1 "width =" 690 "style =" width: 690px

9. Industrial Strength Marketing

From the start, this landing page attracts me with a hard-hitting header : “Do not make me zoom in”. This directly corresponds to a common experience that most of us had when we were browsing our phones or our tablets – and that’s a bit foolish.

But that’s not the only thing that interests me. Note that the red color is placed strategically: it is at the top and bottom of the form, which brings you even closer to the conversion event.

 industrial-strength-marketing-landing-page-example.png "width =" 660 "height =" 738

Moreover, this design is meta to start: it has air and works great on mobile, too. Keep in mind that many visitors will access your landing pages on their smartphones or tablets, and if your website design does not suit them, they might give up and leave your page.

Industrial Strength Marketing has made the fonts and form fields large enough so that visitors do not have to pinch to zoom in to read and interact with the content, for example.

 industrial-strength-marketing-mobile-landing-page- 1.jpg "width =" 450 "style =" width: 450px

 industrial strength-marketing-mobile-landing-page-2.jpg "width = "450" ​​style = "width: 450px

10. Incoming Emotion

Even if you do not speak Spanish, you can still appreciate the conversion capabilities of this HubSpot partner site. My two favorite features of the page? The form remains in a fixed and visible position when you scroll through the site. I also love the hands that serve as directional landmarks to fill the form and share the page with others.

 inbound-emotion-1 "style =" margin-left: auto; right margin: auto; width: 669px "width =" 580 "height =" 364

11. Velaro Live Chat

Sometimes the smallest details make the biggest difference. For example, they are what makes the Velaro Live Chat landing page great.

This small PDF symbol on the image of the feature allows you to set the expectations for the download format. The arrow in front of the subtitle makes it easier to catch your attention. to the important copy that they want visitors to read. Like IMPACT, they also have an automatic check box to subscribe to their newsletter information on their form, which, if it? is enabled, is a great way to increase the number of subscribers. All these seemingly insignificant little details make for a solid and admirable landing page design.

 velaro-landing-page-example-1.png "width =" 1032 "style =" width: 1032px

12. IMPACT Branding & Design

Full Disclosure: IMPACT is a HubSpot partner – but that’s not why they’re included here. IMPACT landing pages have long been a source of inspiration for design. I love the simple layout of the page, the large title print and the detailed image, the outline that surrounds the shape, the colors and the fonts that are very pleasing to look at.

The free guide that IMPACT offers here download also does not emphasize the download itself in the blue button that allows you to submit your completed form. Instead, IMPACT invites you to “generate more conversions” by focusing on what you will gain by reading the guide.

 impact-landing-page-example-2.png "width =" 660 "style =" width: 660px

Landing Pages to Learn More

13. Unbounce

It’s not surprising that Unbounce is at the top of the list – they actually wrote the book on creating high-conversion landing pages. While there are many amazing things about this landing page, the two that I adore are: 1) Using a window of discussion instead of a classic form and 2) detailed information – but well packaged – under the form.

The first helps to draw attention to the purpose of the page, namely that you must complete the form in a discreet and less arduous way. The second gives this page an SEO boost (the search engines will have more content to crawl) and will alleviate the concerns of people who need to know more about a content before transmitting their information without distracting people from the chat window.

 Screen Shot 2017-07-20 at 11.21.12 AM.png "width =" 630 "height =" 1310

14. Bills.com

Often, people think landing pages are static pages on your website. But with the right tools, you can make them interactive and personalized.

Let’s take the example below from Bills.com. To see if you can benefit from their consultation, you must answer three questions before receiving a form. It begins with this one:

 bills-dot-com-landing-page-example.png "width =" 660 "style =" width: 660px

Then, you answer two other questions, as one below:

 bills-dot-com-landing-page-2.png "width =" 660 "height =" 216

And here is the last form of landing page where you fill in your details: [19659096] bills-dot-com-landing-page-3.png “width =” 660 “height =” 472 “>

I do not know how the algorithm works (or whether there was one), but while I was filling it, I worried about and not about . Once I discovered that I did, I was delighted to fill in the form, which I’m sure most people in debt and using this tool are. By making this offer more exclusive before the form appears on the landing page, I bet that Bills.com has dramatically increased conversions.

15. Trulia

Trulia did something very similar to Bills.com with her landing page. It starts with a simple form asking for “an address” (which sounds less scary than “your address”, even if that’s what they mean). Below this simple form field is a bright orange button that contrasts well with the hero image behind the form, and points out that the estimate will be customized to your home.

 trulia-landing-page-example.png "width =" 660 "height =" 463

Of course, the address itself will not be sufficient to estimate the value of the value. ;a house. It just denotes the neighborhood of the house. That’s why the next page follows with more questions about the property itself, such as the number of beds and baths. Below, you see the copy “Tell us where to send the report” – with a warning that by entering this information, you agree to connect with a real estate agent. This is a great example of a company that gives value to its visitors from the outset, while setting the expectations of visitors about what will happen.

 trulia-landing-page-2.png "width =" 660 "height =" 951

16. Landbot

Landbot, a service that creates chatbot-based landing pages, places its own product in the center of its cat-powered landing page. Visitors are greeted by a friendly bot – with emojis and GIF – that encourages them to provide information in a conversational format, rather than via a traditional form.


17. Webprofits

For a bit of contrast … and the long landing pages? With just a few tips, you can make sure that even the longest landing page is short. The Webprofits homepage below shows us how.

At the top, a prominent CTA button allows you to learn more – with a nice contrast on the background so it pops up and a down arrow to encourage scrolling. By not placing a form field in the foreground, they help reduce friction and give visitors the opportunity to learn more before receiving a conversion option.

They also allow you to understand what Webprofits actually do . The rest of the page contains detailed information on what you will get when you transfer your information. In addition, it includes strategic ACTs along the way so you can complete the form, such as “Let’s Talk About It”.

 Screen Shot 2017-07-20 at 1.36.52 PM-1.png


Sometimes, just stop and admire a landing page to be beautiful. Using high resolution photography and plenty of white space, H.BLOOM’s landing page is a pleasure to watch.

In addition to its beauty, the page has beautiful conversion elements: a shape above the fold, clear and concise. description of what will happen when you fill out the form, and even the button “Send” bright orange. The only thing we changed? The copy on the button “Submit” – which could be more specific to the current offer.

 hbloom-1 "style =" margin-left: auto; right margin: auto; width: 669px "width =" 580 "height =" 738

19. Conversion Lab

Although I do not usually include an example of a home page with a form in a message on landing pages, this website is special. The homepage is the entire website – the navigation links simply take you to the information below.

When you click “Get Help with Landing Pages”, the entire site moves to make room for the form. Here is what it looks like before clicking on:

 conversion-lab-landing-page-1.png "width =" 660 "height =" 472

And when you click on this CTA, check how does the form appear:

 conversion-lab-landing-page-2.png "width =" 660 "height =" 463

I like how you do not have to leave the page to fill the form.

 Free Guide Optimize Landing Pages "src =" https://no-cache.hubspot.com/cta/default/ 53 / 57a6ec8a-e966-44b4-bbaf-d93bfeb76919 .png

 Free Guide Optimize Landing Pages

Leave a Reply

Close Menu