Landing Page 101: How to design a landing page that converts

Landing pages can be one of the most important parts of a website. While a homepage needs to be all things to all visitors, landing pages have very specific functions and requirements. Mastering landing page design—creating landing pages that convert—can set a designer apart from their competition.

Here are eight basic things to keep in mind when designing a landing page

  1. Card - Landing page app card colors credit card landing page product typography web
  2. Landing page: Header banking card cash back credit card customer service dashboard e-finance finance financial services fintech landing page product design product page site web web design web site webdesign website
  3. Landing page - Kitchen clean colors food illustration landing landing page ui website

Row 1: Jesper Dahlqvist, Vladimir Gruev for heartbeat, Outcrowd .

1. Use Established Patterns

There’s a reason that most landing pages look alike. Years of testing different patterns for creating landing pages that convert have resulted in a few distinct variations. While it’s fine to experiment with other patterns, know that those other patterns have likely been tried and discarded by others in favor of layouts that converted better.

One of the most common landing page patterns is the “long sales letter” style. These landing pages have been shown to sometimes convert at much higher rates (as high as 662% more
 compared to control pages) than shorter pages, especially when calls to action are sprinkled throughout the page. But, sometimes shorter pages do convert better. It’s worth trying both.

2. A/B Test

Every landing page needs to be tested. A/B testing, where you change and test one element at a time (simultaneously against a control version), gives the clearest picture of what works best.

A/B testing should be done regularly to continue making improvements to your landing pages.

A/B testing should be done regularly to continue making improvements to your landing pages. Things you might consider testing are images, headers, calls to action (including both the wording of the CTA and even the color, position, or size of the button), form length, overall page length, or color palette.

3. Remove Main Navigation

When someone arrives on a landing page, the goal is to get them to take the desired action on that page. If the page includes your site’s normal navigation options, you’re giving people a lot of ways to move on from the page without taking the action you want them to take.

Landing Page - Print clean colors design illustration landing minimal page ui ux web website

Landing Page - Print

by Outcrowd

This web application provides the perfect print for you, using only the finest materials and technologies to make prints that will capture your breath with their impact, details and color accuracy. Web app Print is the best in New York for printing, fra...

View on Dribbble

4. Less is More

While longer landing pages can convert better than shorter pages, that doesn’t mean you need to cram in every bit of information you can. Simplifying the page, including reducing the number of design elements, including more negative space, and making sure the page only includes a single offer or call to action (though they should generally be repeated multiple times).

5. Use Shorter Forms—Sometimes

In general, the longer the signup form, the lower the conversion rate. It’s a good idea to only include the questions you actually need the answer to in order to fulfill the offer. That means different things for different forms.

A newsletter signup, for example, might only include a field for the email address and possibly a name. With a form that’s made to attract specific types of leads, though, it might make sense to include more questions to weed out the leads that aren’t qualified. And an order form would require more fields to process payments and deliver products.

In general, the longer the signup form, the lower the conversion rate.

Forms are another excellent are to A/B test to find the right form length and questions to include to get the exact results you want, whether that’s the pure number of leads or a higher percentage of qualified leads.

6. Make Copy Scannable

People have short attention spans. That means the content you serve them needs to be scannable. It’s not that people won’t read long copy, it’s that they need to be able to quickly find the parts that answer their questions.

There are a few ways to make copy scannable. Make use of headings and subheadings. Use bulleted and numbered lists. Keep paragraphs short and don’t be afraid to use bold or italicized text to make particular keywords stand out.

terra: home page courses e-learning edtech education identity landing landing page memberships online product design product page promo site teach visual design visual identity web web design webinar website
Shot Link

terra: home page

by Vladimir Gruev for heartbeat

Ahoy fellas! How is the sun treating ya? So, I decided to play around with some abstract shapes and patterns, and here's an outcome...What vibes do you get from this shot? Be sure to share your thoughts 🍍 Looks awesome? We think so too. Come hang ou...

View on Dribbble

7. Differentiate Sections

Another way to make copy scannable is to differentiate between different sections of information. Creating a visual distinction between sections, either through using separators or different backgrounds, makes it easier for visitors to scan the landing page.

Creating a visual distinction between sections makes it easier for visitors to scan the landing page.

Using images in between sections can also help to break up content and differentiate sections from one another. The images should reinforce the content in either the sections that come before or after them.

8. Repeat the CTA

This is one of the most important parts of any landing page: make sure the CTA (call-to-action) appears more than once on any landing page that requires scrolling. Including one near the top for people who have arrived on the page ready to take action is the most important one. But including another CTA after every one to three sections of the page (depending on how long those sections are) make it easy for people to convert at any point on the page. You want to catch people in the moment they decide to sign up or purchase. If they have to scroll to look for a CTA, you may lose them. Don’t make your landing page hard for your visitor to use.

Teachers: Landing page e-learning edtech education identity identity design landing page product design product page visual identity web design

Teachers: Landing page

by Vladimir Gruev for heartbeat

Hey everyone! Doesn't it make you feel young when you continuously learn something exciting and useful? Stay young, pursue new knowledge and break through life challenges! Anyways, another creative shot from us depicting a digital learning tool to con...

View on Dribbble

Experimentation is key

Creating an optimal landing page requires experimentation. While studies have been done to show how and why certain parts of a landing page work, but even those studies sometimes have conflicting results. The only way to know for sure what works for your particular project is to try different things and track the data.

Find more Landing Page design inspiration on Dribbble

Cameron Chapman About the Author — Cameron Chapman: Editor. Blogger. Author. Designer. Copywriter. Marketer. Entrepreneur. Speaker. Consultant. Coach. I wear a lot of hats. What most of them have in common, though, is storytelling.

Find more Process stories on our blog Courtside. Have a suggestion? Contact