Mobile UX
UX Design
Web App UX
July 23, 2019

Guaranteed Conversion With These 9 Landing Page Design Elements

Andrea Fabian
Landing page design wireframe

Wanna generate leads? Or perhaps sell your products? Or simply collect data?In this article, we’ll first take a look at landing page examples. Then we’ll talk about landing page design, best practices, how it all works, and what crucial elements it needs to include.

The difference between a homepage and a landing page.

A homepage provides plenty of information and resources to potential customers. A navigation bar or a menu and multiple links offer visitors easy access to any content they want.

This makes it harder to predict their goal. Some would like to read more about your business, while others might jump straight to the features and pricing list.

So this type of page design would usually include:

  • Navigation bar / menu
  • Lots of info
  • Lots of links and sources
  • Not necessarily a strong CTA
  • Organic traffic
Simplified and tightly focused landing page design
Vintage agency

Simplified and tightly focused, a landing page however has a specific message. It has a main purpose to convert visitors into leads, maybe a few other distractions, but definitely a powerful call-to-action.

They come in two structural types:

  • Lead Generation (or lead capture) page: B2B marketing typically uses this structure. It has a form as a call to action and the sole purpose of collecting lead data.
  • Click-through page: E-commerce typically uses this type of page which has a button as the CTA. It describes the product in detail, warming visitors up for their purchasing decision.

What recipe leads to a well-crafted landing page design?

So how to design a landing page? At UX studio we use the following steps:

  • Guide the user towards a well-defined goal (think of it as a one-way street, just going straight ahead).
  • Set out a great value proposition that has an effect on the target audience.
  • Define the people who fit into the target group and make sure they already know your product before they get to its landing page.
  • Know where to draw the line. Don’t drown visitors in text. Provide only the information that helps them make a decision in your favor.

To achieve the best landing page design, get these elements right. So let’s dig a little deeper and see the nine elements that define the structure of the best landing pages:

  1. Value proposition (clear and concise copy)
  2. No distractions – no navigation menu
  3. Engaging media (photo illustration video)
  4. Well-defined call to action
  5. Above-the-fold placement
  6. Condensed form
  7. Well-defined audience/purpose
  8. Trust marks
  9. Testing

1. Value proposition + clear and concise copy

Value proposition landing page design element
Dropbox

While generating traffic, make sure the text in your ads matches the value proposition. Know which information interested them in your product before they got to its landing page. Make them feel comfortable and certain that they’ve come to the right place.

Your value prop and copy make up the biggest factors that affect conversion rates.

To do that best, communicate straightforwardly. You have no more than eight seconds to resonate with people and convince them with a value proposition that focuses on their pains. They need to feel you have the solution to their problem. Those interested in how to define a value proposition can check out this cool article we wrote recently.

2. No distractions

Distraction free landing page design
Duolingo

A landing page should stand alone. Create it for the sole purpose of getting visitors to convert, to make a sale or capture a lead. Contrary to a homepage, it needs no links and as little navigation as possible.

Keeping it simple and concise will let you eliminate distractions and deliver what people expected.

3. Engaging media (photo, illustration, video)

Engaging landing page design
Slack

Now that you have an outstanding value prop, bring your page to life with the help of an empathetic photo or an illustration. It should capture visitors’ attention and explain your offer at a glance. The page should follow the latest best practices.

Considering the latest design trends, subtle animations will also make you stand out from the crowd. People respond to visual content faster and most recall it easier. If your page contains a useful or catchy video, your target audience will spend more time discovering your product. You shouldn't, however, use graphics carelessly.

To create an appealing and recognizable brand image, you must make sure the entire website has a consistent overall graphic style. Not all businesses will have the funding to commission an illustrator to produce one-of-a-kind illustrations for their brand. To retain this coherence, we advise using free best quality images.

Also, think twice before using random stock photos. It might seem professional, but visitors already know them. Present yourself as real and trustworthy to boost your conversion rate. Provide high-quality shots which enhance the quality of your product or service.

For digital products, show print screens of the platform. They give a better insight into what you want the visitor to buy or sign up for. For landing page design inspiration, Slack always does the trick.

4. Well-defined call to action

Well defined call to action button placement on a landing page
UXfol.io

After you’ve won your visitor over with all the nice elements, let them know what to do next. Get them to act with the help of a clear and direct call to action.

Your CTA could also encourage people to fill out a form or simply buy a product. If using a button, make sure it stands out and let your visitors know what will happen once they click. “Get started today!”

Having a specific offer associated with the CTA helps boost conversions because people feel that they’re getting something in return. “Get started for free” or “Buy now for 10% Off!”

5. Above-the-fold placement

Above-the-fold landing page design element

This term dates back before digital to the days of print. People figured out that to make a good sell, they needed to put eye-catching headlines and images on the top half of a folded newspaper.

In digital terms, “above the fold” content fills your screen. Visitors will see this first when they land on your page. Hook them with compelling content to get their attention so they’ll stay and convert.

6. A condensed form

Depending on your landing page’s goals, consider whether you’ll need a form. Short and long forms perform the same, but the quality of the users converted matters. Also, if a form has a secondary role on your page, don’t put it up front. Let your visitors explore and learn more before they get to the conversion option.

7. Well-defined audience/purpose

Know your target group and let them know what you’re selling. Get to know their needs and provide solutions that will fix their problem. Do it in a language they understand. Using a tone on your landing page that matches the target audience’s personalities provides higher conversion.

8. Trust marks

Trust marks are an important part of landing page design
Trello

Once you’ve gotten on the same page with your visitors, build their trust by adding trust marks on your page. If you’ve worked with famous brands, add their logos or use classic trust signals like testimonials. If you received recognition through a press mention, add it! Use anything that proves the quality of your product or service and will encourage visitors to convert.

9. Testing

Testing different elements from a finished landing page design
Edmund Boey

Don’t expect to get it right on the first try. You must test different approaches before finalizing your landing page design.

So what elements you should test?

  • Value proposition
  • Fold – Which visual element tells the story best?
  • Page length – Sometimes a few scrolls will convince your lead about your offer; in other cases, you only need an image.

Write at least four value propositions and use them separately on the same design. Then add a call to action, whether a form or just a sign-up button. While generating traffic, match the text on your ads to the value proposition. Find out what kind of information interested them in your product before they got to your landing page.

Create at least three above-the-fold designs for the best performing value proposition. Try different kinds of images, CTA copies, buttons, etc. Use conversion measurement tools to find out which performed best.

Once you have the final above-the-fold design and value prop, concentrate on the rest of the content.

Try at least three versions: just above-the-fold, a longer page that contains detailed information about the product, and one in between.

Use conversion measurement tools to find out which version brought the best results. Heatmaps also help you see which part of your landing page design elements caught most of your visitors’ attention.

Final thoughts

Take your time when coming up with your landing page design. A well-designed and optimized landing page will generate more leads for your business. To achieve the best results, you need good teamwork between a marketing manager, a designer and a decision-maker.

Online site builders offer outstanding landing page design
Unbounce

If you don’t have the team to create it from scratch, you can design a landing page online. Many sites like Unbounce or WIX offer responsive and easily customizable templates.

Optimize your design for multiple devices and make the content above the fold fit perfectly on all screen sizes. As more and more people use their phones for browsing, they want answers right away. Depending on the target audience, consider a mobile-first approach for your landing page.

Keep your page alive by staying up-to-date with the latest best practices and remember: Whether with A/B testing, research, or a survey, test it so you provide the information your visitors need.

Take the next step to improve your website’s UX

UX studio has successfully handled 250+ collaborations with clients worldwide.

Is there anything we can do for you at this moment? Get in touch with us, and let’s discuss your current challenges.

Our experts would be happy to assist with the UX strategy, product and user research, and UX/UI design.