how to design a landing page
how to design a landing page

What is a Landing Page and Why Do They Matter?

In simple terms, a landing page is a page where your website visitors arrive at when they click on a link from an article or other advertisement. This can be a page or sub-page on your website or it could also be a blog, Squidoo or Weebly page, just to name a few.

The Purpose of a Landing Page

The purpose of a landing page is to reach your customers on a personal level. For example, if you were going to sell a dog training product, your landing page would not talk about the product itself, you would discuss the benefits it would bring to the buyer. I would not tell someone that the product has been around for 10 years and is the number one bestseller. That would be the job of the sales page. My job would be to touch the readers’ feelings by asking questions or making statements that fit their needs at that time. The buyer does not care about the stats at that point, he wants someone to something like, “Are you tired of your out-of-control dog jumping on everyone that comes in the door?” or “Finally, a proven way to get your dog to stop peeing in the house and making it smell like a kennel.” Both of these statements touch the frustration of the buyer and make them want to read more.

A landing page visitor gives you their email address in return for a Lead Magnet, discount, newsletter or purchase when a visitor buys a product, making them a paying customer. For example, Slack has a landing page that aims for the conversion behavior by giving a free trial.

Landing page

Amazon’s landing page wants visitors to add Amazon Pay to their commerce store with the incentive of getting a $100 Amazon.com gift card

how to build a landing page

And lastly, Disney+’s landing page asks users to choose between a free trial of Disney+ or to buy Disney+, Hulu, and ESPN for $12.99/month.

What are Landing Pages and Why Do They Matter?

Landing pages are a critical part of digital marketing because they’re a tool that will be involved in every digital marketing campaign that you run.

This article will help you design and build a landing page by covering the 15 key elements every successful landing page needs. Then, we’ll detail ways to audit and optimize your landing page, giving you the steps you need to improve your landing page and make it that much better. Let’s get started.

Different Types of Landing Pages

There are several ways to manage landing pages, but each landing pages are divided into 1 of 3 categories

Squeeze Page 

The main objective of a squeeze page is to collect email addresses from subscribers. You can use landing pages when you want people to be on your list for generating leads. A solid landing page will bring Lead Magnet and newsletter.

Here’s an example of a Squeeze Page from DigitalMarketer used to promote opting in by giving users the Lead Magnet of The Ultimate Facebook Ad Template Library.

Squeeze Page

Long-Form Sales Letter 

This kind of landing page designed for selling products and services with the composed word. The main purpose of this landing page to answer the most burning questions about your product to the visitors and to sell your entry your profit maximizers offers and core offers. 

This is also a good choice to use for more complex goods that need further more details and most costly items will resolve the problem for buying that specific product. The price of your product or service will determine the length of your landing page. The more expensive a product is, the more copy and explanation you’ll need to give to prove its worth and overcome someone’s objections to buying.

Here’s an example of a long-form sales letter, starting with the above-the-fold content

Long-Form Sales Letter

The content on this sales landing page shows the visitor exactly what the product is going to give them

Long-Form Sales Letter

And then, asks the visitor to convert by purchasing the $7 cheat sheet

Long-Form Sales Letter

Video Sales Letter (VSL)

Choose this landing page type to sell products and services with a video. A VSL isn’t that much different than a long-form sales letter in terms of when and why to use it. 

You can use it again for profit maximization, entry point offer, and your core offer. A VSL is a great option to use if your product or service needs a demonstration, showing your product in action. If your product or service is too complicated to explain with copy, consider using a VSL where it’s faster to show your product.

VSLs also give you more power over the order and sequence in which you give your information to your prospect. Unlike a long-form sales page where a visitor can scroll around, picking and choosing what they read and what sales arguments of yours they consume, with a VSL, it goes in the order you want to present it; you determine how your prospect will consume your sales pitch.

For example, here’s DigitalMarketer’s landing page for our 21-Day Launch Playbook and you can see the video in the left-hand side of the page

Video Sales Letter (VSL)

Design and Build Your Landing Page

Every landing page requires 2 things before you get started

A Good Offer: The Lead Magnet or product you are trying to create opt-ins or sales for.

A Good Audience: The person you are selling your product to Make sure you’re selling to the right person. Once these main elements are determined, you can start to develop the other elements of your landing page. 

Market Callout

The first checkpoint is to make sure you have a market callout. Your visitor needs to know they’re in the right place, so make sure you call out to them either directly or indirectly with recognizable images and vocabulary.

Notice how Strava, a collaboration-based fitness app company, directly calls out their intended users: runners and cyclists.

Since Strava is an app, they style their homepage [shown here] as a landing page designed to funnel interested leads to sign up for the app. Smart thinking!

This landing page from Signpost, a CRM software company, singles out small businesses as their core market. This helps filter out potential leads who might not find what they are looking for with Signpost’s services.

Market Callout

By filtering out other parties that may not benefit from your product/service, you increase the likelihood that people who sign up will, in fact, convert.

Clear, Concise, and Easy to Understand

The best landing pages have a single message and make a single offer. You should make your landing page as simple as possible with decent information. The goal is to make it as easy as possible to take clear action. If a visitor can’t understand your website within 5 seconds or less, you’ll lose them forever. Perform the 5-second test with friends or colleagues and make sure your landing page passes.

Within 5 seconds [max] your landing page should answer these 3 questions as follows

  • What’s in it for me?
  • Why should I care?
  • What do I do next?

If you’re having trouble passing the 5-second test, look back to check:

  • Is your content not clear and concise?
  • Are you trying to call attention to too many things at once?

If so, narrow down the scope to one message, one offer, and try again! 

For instance, there’s no confusion when it comes to this page by HubSpot. The headline makes it clear: 13 ebook Templates.

meta description here; max-width=

Cutting down on the clutter makes a world of difference for conversions.

Compelling Headline

Headlines should be clear , concise , attractive and in the rich format, so that you can grab your reader’s attention which will tell them that they’ve come to the right place.

One way of grabbing attention is by hitting a pain point. Think about what your ideal customer struggles with and what your product/service does to alleviate that issue.

Lyft knocks down the nail on the head here clearly. They are identifying 2 common pain points of their potential drivers, (lack of funds and time) and how working with Lyft could solve both issues (earning money on their own time).

 Compelling Headline

“Plant’s Make People Happy”—it’s a simple statement but The Sill delivers a headline that’s straightforward and tells plant buyers they are right where they should be. Not happy? The Sill is there to help. Genius.

Pro Tip: You will often see a company throw out a cute headline and rely on the subheadline to do all the heavy lifting. This is a bad practice because it often sacrifices clarity for the sake of “cutesy,” catchy headlines.

This issue can be fixed easily by simply flipping your headline and sub-headline. Remember, quality and clarity count more than anything!

Need some help or inspiration writing headlines that generate clicks? Check out the Digital Marketing Headline Swipe PDF

Use Social Proof

Using social proof strategies like this helps alleviate the risk of buyers. They feel great because they’re joining the club and others before they have already proven that this product works. Shopify effectively uses social proof with this landing page. Social icons on logos, testimonials, or the number of downloads/subscribers, etc all will let your visitors know they’re making a smart decision

Use Social Proof

Not only do they call out to the 800,000 businesses that use their platform, but they also include the logos of some of those businesses (seen in the next example).

Use Social Proof

To top it off, they add a strong testimonial from a company executive… LendingClub does a great job leveraging percentages for social proof with 97% of their investors getting positive returns. Plus, pointing out that over investors have invested over $28 billion using their services. Two strong examples of utilizing social proof, all above the fold.

Use Social Proof

A quick note on using eye-catching numbers: You want to make sure these are meaningful numbers, and that they are closely tied to the offer you are making. Big numbers are great, but if they have nothing to do with your offer, you are better off using the space more effectively. If you have social proof, be sure to include it on your landing page so your new leads quickly see that your product is vetted and trusted.

Brand Consistency

You don’t have to stick your logo on every landing page, but the overall look and feel of every landing page should be consistent with your core brand.

Take a look at this Digital Marketer website

 Brand Consistency

Notice the colors, fonts, and overall feel of the page? That’s the goal! You want your landing page to look like it was designed by the same exact person who did your website—one consistent brand image.

With a video featuring one of DigitalMarketer’s own employees explaining what the Jumpstart Pack product is all about, this landing page is focused on helping the customer make an informed decision. It’s the same for the DigitalMarketer website. This central message is all about consumable information to help potential leads make the best choice for them.

Now think about your own brand. Make sure that every landing page you are building would fit right in with the rest of your online or in-person presence.

Source Congruency

Visitors to your landing page should have no questions or concerns that the ad they just clicked on took them to the wrong (or shady) landing page. 

Text and images which are included on the landing page should match (ideally exactly) the text and images that brought the visitor to your landing page for overcoming the barrier of losing them.

With furniture company Burrow, their Facebook ad and landing page features the same model in the same setting in both their ad and their landing page.

Here’s their Facebook ad…

Source Congruency

And here’s the landing page it takes you to…

Source Congruency

One other reason this landing page/ad combo works so well is because they tell us a story. The person in the ad goes from sleeping to awake and stretching, presumably feeling refreshed after a nap on “the internet’s favorite sofa.”

This transformation gives the viewer a glimpse at the satisfaction they would feel if they had one of their own. Showing the desired end result is a great way to entice people to convert.

Here is another good example from SoFi for their app, which tracks your spending.

This is their Facebook ad…

Source Congruency

And their landing page…

Source Congruency

The app interface is the same on the ad and on the landing page ($720 spent on food). One thing that could be improved on would be to use that same purple background from the landing page on the Facebook ad. This would help build even more congruency.

Think about how you can integrate images, colors, and more from the ad onto your landing page.

Visual Privacy Policy and TOS

Not only are privacy policies and terms of service (TOS) required to advertise on some sites (including Google), they’re also good for conversions. Including your privacy policy and TOS lets your lead know what to expect and this can boost your trustworthiness, and thus, your conversions.

For instance, we’ve linked out to our privacy policy and TOS at the bottom of this landing page…

meta description here; max-width=

Bonus Tip: Adding another CTA button at the bottom of your landing page also helps make converting easy for the viewers who put in the effort to scroll through all of the content on your page.

But the policies and TOS don’t always have to be at the bottom of your page. Uber takes care of including the TOS and privacy policy by adding these links right under the CTA, rather than taking up space with a footer.

meta description here; width=

There are lots of ways you can include this information, so play around with it; just remember it needs to be accessible to viewers!

Put Your Call to Action Button Above the Fold

Most of your readers are not willing to scroll below the fold, so when making an offer, give them a chance to take action without scrolling. You do this by making your call to action (CTA) prominent and above the fold. This will guide the visitor what should they do next

For example, PayAnywhere makes it incredibly easy to convert with this landing page. The CTA is the first (and really, only) thing you see when the page loads. This reduces the confusion of the visitors.

meta description here; width=

At first glance, this landing page looks great, but dig a bit deeper and you will find an issue…

meta description here; width=

There is a CTA above the headline—in fact, there are 3!

Think about it:

  1. You could play the video
  2. Fill out the form to request a demo
  3. Or call the number at the top-right to “Talk to a Google Certified Specialist”

It’s unclear what the preferred action is. The landing page looks great but probably won’t drive traffic as well as it could if there was 1 strong CTA, rather than 3.

Having other buttons or CTA’s scattered across the rest of the landing page is fine, but you should only have one intended action that is visible above the fold. Any more than one will confuse the viewer, and a confused viewer rarely converts.

Contrasting and Modifying Button Color

There are few debates and disagreements regarding buttons color. In our opinion the button color should contrast (NOT blend in) with the surrounding design elements.

You want the button to stand out against any background images.

Typically, a bright color is easiest, but in this case, with Trulia, the darker orange CTA button stands out without being overbearing or blending in.

meta description here; max-width=

Here’s another great example from Hereditary Cancer Support. As you can see, a contrasting button doesn’t have to mean it looks out of place. Most of the time, your organization color palette will have one or two accent colors that are contrasting and bright—they are a great choice for CTA button colors!

meta description here; max-width=

Limited Navigation

he landing page should not distract the visitor with the ability to navigate away from the page. Too many options on a landing page can lower conversions.

GEICO does a great job here. The landing page is simple, and there is only one thing a viewer can do on GEICO’s page: enter their zip code.

meta description here; max-width=

To avoid creating a true island, their logo links back to the home page, but at a glance, there only looks to be one action available.

This landing page by Casper has 1 action available: Shop Now.

meta description here; max-width=

Limiting navigation will also make your landing page more concise, passing the 5-second rule.

Use Visual Cues

The landing page should incorporate arrows, boxes, and other visual devices to draw the eye to the CTA area. Even a simple arrow pointing at the desired CTA can boost conversions, as this landing page for a webinar with RES Software does…

meta description here; max-width=

Or the arrow used by DocuSign. It draws the viewers’ attention directly to the signup box. It isn’t overly distracting and doesn’t take away from the CTA on the button.

meta description here; max-width=

Hero Shot

Typically, an image or graphical representation of the product will bump conversions because people can see what they’re getting and your prospects can visualize themselves using it. This image is called the hero shot. 

Using a hero shot is not always a slam dunk so you might want to test it. Start with it as control but make a note to test without it also.

For example: When DigitalMarketer came out with an updated certification, we made sure to add in images that showed what the certification process will look like. This reduces confusion (if not eliminating it altogether), and the buyer knows what to expect once they purchase. This helps build excitement and anticipation. 

Jeff Bullas takes advantage of this tactic on this landing page for his ebook. By showing the cover of the book, you get a bit of a sneak peek of what the ebook will look like.

This is especially helpful if the content you are advertising is visually appealing, such as an app dashboard (like this one from DOMO), or a design-heavy lead magnet.

You want to wow the viewer and hopefully lead them to convert.

Relevant Form Fields

If you’re including a form on your landing page, don’t ask for information you don’t need! Having to enter in information can be a barrier to entry for some of your leads. They may not want to take the time to fill in all the data, or they may not feel comfortable giving you all of that personal info… increasing the chances that they’ll bounce. 

This doesn’t mean you have to take it down to 1 form field only—you want to capture the information that is relevant. Just make sure they offer you are giving is proportional to the value of the information you are asking people to give up.

Remember each and every information is not created equally. A phone number or email is going to be far more valuable to a person than the name of their company, for instance. Keep this in mind, and make sure there is proportional give and take!

So, if you only plan to follow-up via email, just ask for their name and email, at most. In fact, test dropping the name field, too, if you don’t plan to personalize your follow-up messages.

This no-fuss approach, taken by Nielsen, an analytics company, asks for an email. That’s it. The less you ask of your viewer, the more likely they are to opt-in.

This example from Bills.com is a great attention-grabbing form field…

Your debt amount is often seen as a private matter, but because of the lack of name and email fields, the question feels non-invasive. This is sure to help improve their conversions.

When you’re building your landing page, think about the most essential information you need, and stick to only capturing that.

Optimize for Mobile

Don’t miss out on mobile traffic. Your landing pages should be mobile friendly. That includes any images, forms, text, etc.

All of these elements should be responsive or you should consider building a separate landing page specifically for mobile viewers.

Apple knows that more and more people are searching on mobile, and they aren’t going to miss out on that audience. This mobile-friendly landing page isn’t too crowded or overwhelming.

Their simple image and CTA “watch the design film,” give a clear path to the next step Apple wants a viewer to do—watch the film.

Remember that you have way less landscape to work with on mobile, so it’s very important that you hit that checkpoint of clear, concise, and easy to understand.

Here’s another example of a stellar mobile landing page from Imperfect Produce.

They have their market callout and CTA above the fold.

Scroll down the page a bit and they include their social proof…

Reach the bottom of the page, and they give you another CTA. They’ve made it convenient for their viewer and given them another chance to move forward in their CVJ, instead of having to scroll back to the top to opt-in.

All of the text is centered, images aren’t taking up too much space, and the main CTA is clear and above the fold. It’s evident that this landing page was designed with mobile in mind!

And with that, you’ve made it through all 15 elements of a successful landing page. Use these steps and checkpoints to create more effective landing pages that drive conversions and move people through your Customer Value Journey.

Options to Build Your Landing Page

So you know all the elements of a highly successful landing page. So it’s time to build your project.

There are 3 options to designing and building your landing page:

  1. Outline it and outsource the building
    • Send your web developer the design on a piece of paper or a Word document and have them create that outline online
  2. Build it yourself
    • An option for people who have coding experience
  3. Use a Plugin Theme/Builder like:

Choose the option that works best for you, based on your budget and skill level. After that you can start building your dream landing page.

In the next module, we’ll look at ways to test and optimize your page to make it that much better.

Test and Optimize Your Landing Page

You should test a landing page when there is room for improvement, not fixing. For example, DO NOT test a landing page with a broken form—just fix the form. Or, a landing page that doesn’t have any traffic visiting it. There’s no way to collect data from a landing page without traffic.

DO test a landing page with elements working as they should be and has enough traffic going to it that you can get 100 converting actions for each variation that you’re testing.

Here are different elements of your landing page to test:

  • Call to action
  • Headline
  • Images
  • Trust indicators
  • Copy
  • Video

For instance, each time you change your CTA, you have a new variation of your landing page. A new variation to test. Remember to continue to have your control landing page (the original copy, headline, etc.) to use as a reference.

You can test landing page variations with tools like VWO.
For each variation you need:

  1. A hypothesis
  2. A control landing page
    1. Example, using regular capitalization in headers
  3. A variation landing page
    1. Example, using all caps in headers
  4. Metrics for measurement

If a variation wins (a variation that increased conversions), create an analysis to draw your conclusions, make the necessary changes, and figure out how to use this information in the future.

Here’s an example of part of a DigitalMarketer landing page analysis for a winning variation:

If a variation fails (a variation that decreased conversions), don’t be discouraged—everyone has them. The only way your test actually fails is if you have a failing variation and you can’t figure out why. That’s why you want to set your test up with a significant amount of research and a hypothesis.

If a variation flatlines (a variation that doesn’t increase or decrease conversions), your variation doesn’t mean anything to your audience. You can keep using your control as the winning variation.

Follow these steps and this process and you’ll have an effective landing page that generates opt-ins and sales. 

LEAVE A REPLY

Please enter your comment!
Please enter your name here