UX Design
9 minute read

Built To Convert – Landing Page Design Best Practices

Cameron Chapman
Cameron comes from a design background and is the author of two web design books: Color for Web Design and The Smashing Idea Book.

Landing pages are any page that a visitor arrives at after clicking on a marketing call-to-action. This could be a search or display ad, an email, a social media post, or an affiliate link.

Some companies send traffic from those referring sources to their home page; that’s a mistake. Landing pages provide several benefits, including a clearcut offer that aligns with whatever the referring source is. This results in higher conversions than simply sending new visitors to the home page and hoping they figure out how to find what was offered when they clicked.

Designers can create landing pages that convert more effectively by following landing page design best practices like those included here.

Do Highlight the Benefits

Product designers tend to want to focus on features; consumers want to know about the benefits. They want to see how those features impact their experience. A person doesn’t buy a car because of its 300hp; they buy it because that 300hp allows them to go fast. That’s why many car ads mention their 0-60 times instead of just horsepower numbers.

On landing pages, this means using elements like headlines and bulleted lists to highlight the benefits of the product. This is what users want to know first: how does this product benefit my life or business?

landing page design best practices: highlighting the benefits
Teambit focuses almost exclusively on the benefits to their customers on their landing page, citing things like creating high-performing teams.

Do Use Relevant Images

People are visual creatures. A dearth of images can be unnerving to a person viewing a landing page. Good images add to a sense of trust between the consumer and the company.

There are many types of images that can be used effectively for landing pages. Product images are the most obvious choice.

landing page tips: use relevant images
Square uses images of their point of sale hardware and software on their landing page.

As users respond better to pictures of real people, images of people using the product are even more compelling. Stock photos of models, on the other hand, don’t necessarily add to the user’s experience.

great landing page design: images of real people perform better
Airbnb uses images that include real people in their landing page to attract new hosts.

Landing page designers should aim to use images that create an emotional response in the people visiting a landing page.

Do Test Your CTAs

Arguably the most important part of any landing page is the call-to-action. Because of their importance, designers need to test their CTAs to ensure they’re optimized to get the highest number of positive responses from visitors.

A/B testing is the simplest way to test CTAs. Designers can have two landing pages randomly shown to visitors for a set time, each identical except for differences in the CTA itself. From there, they can continue to refine and test until the CTA gets the desired results.

Designers should consider testing things like the CTA button color, the language surrounding the CTA (and on the button itself), and the placement of the CTA on the page. (Other parts of the landing page can also be A/B tested for better overall results.)

high converting landing page: test CTAs for best results
Basecamp is known for testing everything about their landing pages extensively, including their CTAs.

Do Make It Mobile-friendly

Considering how many people browse the web on their mobile devices, it’s a mistake for designers to overlook how their landing pages will look on smaller screens. While creating a design that simply looks okay on mobile is an option, simplifying the landing page so that it’s more effective on mobile is an even better idea.

Mobile-friendliness is especially important for landing pages that social media posts and ads or emails point to. In 2017, 75% of email users reported checking their email on a mobile device (and that number has only risen since). And 42% of people worldwide (not just internet users) use social media sites from their mobile device. Further, in 2018, 40% of Black Friday sales were made from a smartphone or tablet.

People don’t just browse social media and read email on their smartphones. They make purchases, sign up for services, and otherwise complete actions companies want them to make. Designers who overlook this huge percentage of the market are shortsighted at best.

mobile landing page design is a must
Bench keeps their messaging consistent between their mobile and desktop versions but the mobile version is streamlined and simplified.

Do Make It Consistent With the Referring Source

When someone clicks on an ad or link in an email, it’s essential that there’s consistency with the landing page they end up on. This can be done in a few different ways, depending on what the referring source is.

For example, if the referring source is a search ad, then using some of the same language between the ad and the landing page the user ends up on provides consistency. If the referring source is an email, then using similar images and color schemes can lend the consistency visitors need.

When designing a landing page, designers should know what the referring source will be to make sure they match up in at least a few ways.

landing page strategy: the source should align with the landing page the best converting landing pages match up with the referring source in some way
Monday keeps the "visual" messaging consistent between their ads and landing pages.

Do Include Social Proof

People want to know that a product they’re considering purchasing has made other customers happy. Social proof is one of the best ways to provide that reassurance.

There are a few ways to provide social proof. One is to include testimonials or reviews prominently on the landing page. Another way is to include social media conversations about the product. Designers should be careful when doing that, however, as automatically displaying all social mentions might end up showing both the good and the bad.

landing page content should include social proof
Casper includes their average reviews across multiple sites, a testimonial, and the number of customers who have given them five-star reviews prominently on their landing page.

Don’t Make Landing Pages Do More Than One Job

A landing page should only have one job to do, and this should be determined before it is designed. A landing page that asks visitors to purchase something, but also sign up for a newsletter is splitting the attention of that visitor. This makes it less likely they’ll take the most desirable action.

Designers should consider what the call-to-action is and make sure that no other actions are prompted on the landing page. Even things like other navigation elements can draw a visitor’s attention and prevent them from completing the desired action.

landing page elements should focus on a single purpose
Freckle’s landing page stays uncluttered and only focuses on getting people to sign up for a free account.

Don’t Ask for More Information Than Required

Asking for too much information can be a quick way to make visitors bounce from a landing page. And yet it’s common to see landing pages with forms that ask for not just a name and email address, but a phone number, company name, job title, and more.

the best landing page examples don’t include overly long forms
This form requires a ton of information from anyone wanting to download the "free" eBook, which likely deters a lot of visitors from signing up.

Unless a visitor can immediately see the value for providing that information, it greatly increases their chances of bouncing from the page. To decrease a landing page’s bounce rate, designers should only ask for the bare minimum of information in order to complete the offer.

a simple landing page is more effective
Shopify keeps their initial signup form simple: they only require an email address.

Another key usability issue common on landing page forms is when they’re not optimized for mobile devices. Form fields should be coded in a way that prompts the appropriate keyboard layout for each field.

That means when a user is entering their email address, for example, the keyboard shows the “@” symbol on the main screen; or when a phone number is requested, the keyboard switches to numerical input. This small detail greatly improves UX on mobile devices.

Don’t Include a Navigation Bar

Not including a navigation bar ties directly into the idea of single-purpose landing pages. Navigation is visual clutter on a landing page and can result in users clicking to a different page on the site without completing the desired action.

Eliminating the navigation bar helps keep the visitor on task. If designers are concerned with providing more information to visitors, it should be included on the landing page itself or in links further down the page, preferably after the first call-to-action.

There’s no sense in distracting a user who’s ready to sign up or purchase by giving them other options. Despite this, many landing pages include additional navigation options.

interactive landing page elements capture user attention
Muzzle’s landing page gets rid of all navigation options other than the download button (and a couple of subtle links for Release Notes and Help).

Don’t Clutter the Page

Landing pages should only include the information necessary for the person who landed on that page to complete the desired task. The more investment needed on the part of the visitor, in most cases the more information will be required.

For example, a free trial that doesn’t ask for payment information is a fairly low-risk offer and wouldn’t require as much information to be presented.

A page that’s requesting a user to make a purchase, however, will generally need to provide more information to the user. That amount of information only goes up as the price point increases.

landing page layout should be simple and uncluttered
Asana’s landing page is simple and to the point, with a header, call-to-action, product image, and plenty of white space.

Designers should follow good principles of design in creating landing pages just as they would with any other page. Minimalist and simple designs are generally preferred, as long as they fit the brand in question. White space around the content prevents users from becoming overwhelmed and allows them to focus on what’s important.

Don’t Stray From Established Patterns

People have certain expectations when it comes to landing pages. They want to know about the benefits, they want a clear value proposition, and they want an easy-to-complete call-to-action.

When a designer strays too much from the established landing page patterns, they risk alienating the user and interfering with their completion of the task at hand. Experimental designs are great, but often better suited for other types of pages and websites.

landing page design best practices include using established patterns
Zoho’s accounting software landing page sticks to tried-and-true patterns: heading, a little bit of extra information, and a call-to-action dominate the page, along with a product image.

Don’t Be Generic

While sticking to established patterns is a good idea, that doesn’t mean landing pages have to be generic. Designers should consider how including additional details and design elements to a landing page can improve the user experience, grab the user’s attention, and reinforce the value of the offering.

That could include video content, animations, slideshows, or a number of other design elements. What’s appropriate for one product or service won’t necessarily work for another. Designers should feel free to experiment with unconventional content on their landing pages, but be prepared to A/B test against more conventional methods to ensure they aren’t driving visitors away.

great landing page designs are unique without being unconventional
Landbot’s landing page uses an animated chat scroll that fits perfectly with their product offerings. It keeps the page interesting and unique without adding clutter.

Conclusion

Landing pages are a vital component of any online marketing campaign. Their singular purpose helps drive conversions without distracting visitors.

Designers who follow landing page best practices can create more value for the brands they serve by creating pages that convert better than the competition. Keeping landing pages simple, focusing on the CTA, keeping forms short, and other guidelines already mentioned will make landing pages perform more effectively while also improving UX.

• • •

Further reading on the Toptal Design Blog:

Understanding the basics

What makes an effective landing page?

Following landing page design best practices is the first step in creating an effective landing page. This includes creating a page with a single purpose and an uncluttered layout that uses relevant images, provides social proof, and highlights the benefits of the offering.

What is a good landing page?

A good landing page design effectively converts visitors and gets them to perform a desired action. It does this by following best practices such as having a single purpose and uncluttered layout, highlighting the benefits of the offer, and not requiring more information from the visitor than is necessary.

What is landing page design?

Landing page design is the creation of a single-purpose page that prompts visitors to complete a particular action. They are most commonly used as part of online marketing campaigns. Landing pages are the first page a visitor who clicks on an ad, social media post, or other campaign link sees.

What should be included in a landing page?

A landing page should include the information necessary for a visitor to complete the desired call-to-action. This often includes clearly highlighting the benefits of the offer, making the call-to-action clear and prominent, and not overwhelming the visitor with unnecessary information.

What is the purpose of a landing page?

A landing page is created in order to prompt visitors to complete the desired call-to-action. They are most often used as part of online marketing campaigns and are the first page a visitor arrives on after clicking on an ad, social media posts, or other marketing campaign links.