Best Practices for Great Landing Page Design [SlideShare]

Allison Haag

| Sep 10, 2015

What is one of the easiest ways to increase conversions? A great landing page. What’s an efficient tactic to get consumers to convert in one click? An easy-to-navigate landing page. What’s one way to make everyone think you and your product is awesome? A killer landing page!

I think you get the idea. 

A landing page dedicated to your awesome product (or offer) is simple to implement but has a high ROI. 

To get technical real quick, defines “a landing page is a single page with a specific target: getting visitors to complete an action.” Meaning your landing page is targeted to one audience with one goal: getting them to convert. 

Don’t confuse this with a homepage, which is designed to appeal to multiple audiences and convey information to anyone interested in your overall brand. 

Check out this difference between Credible's homepage and landing page… 


As you can see on the homepage above, there are multiple links to click on, a navigation bar and more information. With the landing page, however, it has one clear goal: click on the button to "Find My Savings".  

The goal of your landing page should be to get a conversion. Be it signing up for a newsletter, subscribing to your blog, downloading an ebook, enrolling in your online course, etc. That’s it. All copy, images and layout support that one single goal. Less is more in this case.  

With this in mind, your landing page needs to answer four questions:  

  1. What is the offer? 
  2. What are the benefits? 
  3. Why does your audience need your offer now? 
  4. How do they get the offer?  

These four questions explain to your reader what they get from you when they sign up and why they can’t live without your offer, while also creating a sense of urgency on an easy-to-convert page. 

Simply, these questions are the beginning steps to building your page's unique selling proposition

You can do this through two steps:   

  1. Creating consistent, compelling copy 
  2. Optimizing the 6 main landing page elements.   

Afterwards, I'll discuss some simple design elements (color, typography, images) to think about when you're creating your page to make it even better.

Let’s start with compelling copy: 

When building your landing page, consider your audience and your competition. 

When writing copy, you need to tailor it to your audience. Knowing their hopes, ambitions and goals will make writing engaging copy much easier. Try visiting online communities, forums or websites where your audience hangs out. You’ll discover their desires, problems and what they enjoy. You can use this information to help tailor your copy to their preferences. 

Have you looked at what your competition is doing? Pay attention to how they’re successful and try to replicate it, in your own words and style of course. I’m not saying copy outright, but a little inspiration never hurt. 

The goal of your landing page is to get your audience to convert. The copy of your page needs to be centered around this goal and reinforced each time you write a headline, a subhead, a call-to-action, etc. Each of these sections compose your unique value proposition: why people will buy from you and not your competition. 

Your copy needs to be about the visitor: what are they getting out of your product? How are you solving their painful problems? 

Your text needs to be captivating, persuasive, and above all else, clear. You don’t want your audience to be confused about what you are telling them or what they are getting from being on your page. 

To build urgency, keep your audience focused on converting and showcase your value proposition. Follow D Bnonn Tennant’s advice and use what he calls “hypnotic words”: "you", "because", and "imagine". These three words stimulate the unconscious mind to reduce purchasing objections, which ultimately gets your audience to buy your product and not your competitors (#conversion!). 

Here’s a quick summary of D Bnonn Tennant‘s reasons why these words work:  

  • YOU – We use you in probably every conversation we have with someone. The word you entices our own interests, goals and desires because it speaks directly to… ourselves. When you’re reading something that includes the word you, your brain’s defense mechanisms lower and messages are able to slide past your subconscious walls. Use you to slip past your audiences guards and make them feel like your product fulfills their goals, desires, dreams and interests.  
  • BECAUSE – Humans want order. We’re always looking for the cause and effect. Because is an indicator of an upcoming explanation of the reason why. Hearing or reading the word because cues the brain’s gatekeeper to let the message pass into the subconscious.  
  • IMAGINE – The word imagine helps the audience envision the outcome of a purchase, not the act of purchasing, which helps lower their purchasing resistance. Imagine stimulates the brain to actually think of owning the product and makes the person consider what their life would be like with it, creating a sense of ownership. It’s much easier to make a sale when your audience already imagines their life with your product. By feeling like they already have it, they will want to keep it, aka make the actual purchase to keep those desires fulfilled.   

Use these three words to connect with your audience and entice them to buy your product by showing how you will solve their painful problems. 

Unsure of what your exact wording should be? Get some inspiration from your existing customers. Is there a word or phrase they keep using in their support or fan emails, on social media or online forums when talking about your product? If so, try out that phrase. Talk to a friend, peer or audience member to see if the message you’re envisioning translates correctly to them. You can even A/B test to see if one performs better than the other.

For even more copy help, Teachable’s Content Marketer & Writer, Ashley Hockney, wrote a great post about her 10 Tips for More Powerful Copywriting

Six landing page elements 

With every landing page you see, there are six main elements that make it successful: headline, subhead, images, an explanation of the benefits, social proof, and your call-to-action. 

These 6 elements need to work in cohesion together to create your unique selling proposition because “it’s estimated that you have 8 seconds to convince users to stay on your page.”  

That’s not a lot of time. Let’s go into how to make the most of those 8 seconds. 

1. Headline 

Your headline is the first thing a viewer will see when they come to your page (it is the largest size after all). It needs to be clear and concise, confirm your offer, and include messaging that reflects the audience’s entrance point. 

For example, let’s say you created an ad for a free growth hacking ebook. The page that the ad is directed to should have a title showing where they will get the ebook. 

Check out Farmigo. They created an ad for their company and a new landing page, just for the Facebook traffic.

Landing page and ad, Farmigo

2. Subhead 

Your subhead is a more in depth description of your headline. It’s all of the explanation you wanted to add to your title about why your offer is amazing, but just couldn’t fit. Use this space to be persuasive and explain your offer in greater detail as Trip Tribe does.

Trip Tribe landing page

3. Images, Part 1 

Include a striking image of your product or a photograph that relates to your message. Why? Humans are visual beings. According to The Next Web, our brains process visuals 60,000x faster than text. That’s pretty impressive. Not only do captivating images make your page look better and give your audience a better page experience, but having these visual cues entice your audience to remain on your page to learn more about your offer.

Hubspot offer landing page, meatbox landing page

As the example above shows, Hubspot uses an image of a computer and SEO drawing to reinforce their offer, while MeatBox uses an image of cows in a meadow to support their headline. 

4. Benefits 

Teachable’s Co-Founder, Conrad Wadowski, talks a lot about finding your audience’s pain point, or the needs they’re willing to pay for. The benefit statement section is where you can address the pain points you’ve found for your audience, like TripIt has below. 

TripIt landing page benefits

Use a bulleted list to explain how your offer directly solves their pain problems. Make sure to focus solely on the benefits of your product, not the features. You need to sell your audience first on why they need your product (aka how it solves their problem). Adding in all of the features at this point will only confuse or complicate their decision, which can lead to them not buying at all. 

5. Social Proof 

We’ve all heard the term social proof before and have probably let it impact our own purchasing decisions via testimonials, social media or data. These statements prove to your audience that other people have used your product, found it successful/useful/fulfilling and want others to feel the same. 

Think about it. When was the last time you bought something on Amazon (like those awesome Steve Madden heels or the newest Madden PS4 game) and didn’t read the reviews? And even if you didn’t read the reviews online, your purchasing decision was more than likely influenced by someone other than yourself. 

The more people see that others are interested in or used your product, the more likely they are to convert. 

Spyfu is really promoting the social proof with two placements on their landing page: 1) the publications they’ve been featured in and 2) customer testimonials. 


6. Call-to-Action 

Your call-to-action is the reason you have a landing page; you want someone to sign up for your offer. What it looks like, how it reads and where it’s placed are all key to getting those conversions. 

Michael Aagaard points out that there are two main elements to a CTA.  

  1. Copy: Answers the question of why click this button 
  2. Design: The visual cue to the audience of where to click  

The copy needs to be clear, simple and most importantly, descriptive. Make it clear to your audience what the next steps are when they click that button. Avoid submit and send. Try “sign up for the newsletter”, “enroll now”, “register for Monday’s webinar”, etc.

Although I discuss page design elements further on, I want to point out a few things to think about when creating your CTA.  

  • Enclose CTA text in a box. This makes it look like a button, and people want to click buttons! Use rounded edges. Try a 3D effect. When the mouse hovers over the button, have it change color/shade; it entices people to click. These little changes make your button go from flat to fab! 
  • Color doesn’t matter. CONTRAST matters. Your CTA button should stand out from everything else on the page. Let’s go back to art class and look at the color wheel. First, find the main color of your site, then look at the color that is directly opposite it on the wheel. That is the best complementary color for you to use for your CTA. For example, if your page background is blue, use an orange CTA to stand out from the rest of the site. 
  • Size is important. Make the button larger than the other text on the page. You don’t want your ultimate goal to get lost. 
  • Include white space around your button so it clearly stands out from everything else on the page.  

Sun Basket has a CTA button that is contrasting, has a 3D element to make it pop, is bigger than the surrounding text, has white space around it and is descriptive.

Sunbasket landing page

I left one point out of that list above: whether to put the CTA above or below the fold. This question is based on the type of content you have and the product that you’re offering. According to KissMetrics, the more complex the product/offer and the more information to digest, place the CTA below the fold. If the offer is simple and doesn’t require much information to make a decision, place the CTA above the fold. 

Read How to Write & Design Your Landing Page Call-To-Action for a more detailed explanation on crafting the perfect CTA.

Bonus Page: Thank You 

Once your audience completes your CTA, you have one more page to keep their attention and inspire further conversion: the Thank You Page. 

The thank you page is the perfect place to introduce your audience to other products you have since you’ve already captured their attention. This could be another CTA asking them to share your content they just signed up for, subscribe to your blog, sign up for your newsletter, attend a live training webinar or even give them a bonus piece of content (they’ll love you for it).

Fedora thank you page

These bonus CTA’s are placed on the thank you page because if you placed them on the landing page, it would call attention away from your main message and effect conversion. 

Branding Elements 

One of my favorite Teachable features is the sleek landing page design. At Teachable, we’ve incorporated many of the design elements required for a great landing page into an easy-to-use template. Think crisp and uncluttered, hierarchical elements, white space, CTA’s (above and below the fold), etc. 

Teachable is customizable too. Remember that first image I used in this post comparing a homepage and landing page? Well, digital scrapbooking guru Jessica Sprague completely customizes her pages. We continuously get emails asking how to do it! If you’re interested, check out this blog post & webinar replay where she explains how she made it happen. 

Her landing pages are gorgeous and captivating, which I love! Having a great looking landing builds your brand and reputation, and keeps people coming back for further conversions. 

If you’re building your own landing page, a few great landing page builders are: Instapage, Unbounce and Hubspot. If you want to sign up for Teachable to create a killer landing page for your awesome course, it only takes 10 minutes! 

Whichever path you choose, there are still a few things that you need to think about when building your landing page: color, fonts, and images. 


I could probably talk about this topic forever. There is so much to think about when choosing colors for…anything. Even I get exhausted. To keep it as simple as I can, I’m going to discuss a couple elements to consider when thinking about colors for your landing page (and brand). 

What do all these colors mean?! 

Color psychology chart

Every color has psychological implications associated with it. CrazyEgg states that “psychologists have suggested that color impression can account for 60% of the acceptance or rejection of a project or service.” 

That’s a pretty steep number. When choosing your landing page color palette, consider what characteristics you want your brand to portray. 

Pick colors that are associated the characteristics you want to exude. 

If you want to portray luxury and trust, blue and black would be good options. If you want hint at optimism and health, yellow and green would be great options. 

Not only do each color have certain associations, but women and men prefer different colors. 

If you audience is female-focused, opt for blue, purple, and green and avoid orange, brown and grey. Stick to softer tints of these colors too. 

For a male audience, try using bold shades of blue, green or black and stay away from purple, brown and grey. 

Complementary colors 


It’s the great marketer debate: does color affect conversion? As I mentioned above in the CTA section, it’s contrast that’s important. When two complementary colors are placed next to each other, their contrast is the strongest (and actually makes the colors appear brighter). 

When choosing the palette for your site, make sure to include a color that is complementary to the main color of your page. 

Here are my favorite sites for palette inspiration:  

Make sure the colors that you pick are readable. You don’t want a green background with blue text. A helpful hint is to use a light colored background with dark colored text. 


At Teachable, we give you a list of seven typefaces to choose from for your course landing page. Almost all of them are sans serif fonts because, usually, close to half of your traffic comes from mobile users and san serif fonts are easiest to read on phones. 

That being said, if you’re designing your own landing page from scratch, you’re not as lucky, and have to pick your own fonts. Best practice is to stick with commonly used Google web-fonts like those in this list by the Sutter Group:  

  • Serif  
  • Georgia 
  • Times New Roman // Times 
  • Palatino Linotype // Palatino 
  • Book Antiqua   
  • Sans serif  
  • Verdana 
  • Geneva 
  • Arial 
  • Helvetica 
  • Tahoma 
  • Trebuchet MS 
  • Lucida Sans Unicode // Lucida Grande   
  • Monospace  
  • Courier New // Courier 
  • Lucida Console 
  • Monaco

Using these fonts ensure that the majority of browsers and operating systems render your text correctly. Plus, it’s much easier when sending newsletters and dealing with different email service providers. 

When choosing fonts, stick to one font to reduce the clutter on your landing page. Each of the fonts above have bold and italic styles, which are simple ways to differentiate text. 

Font Sizes 

Another way to differentiate text is with size. 

A study by Wichita State found that body text is best at 12-point because it’s the easiest to read in the least amount of time. If your audience is older, bumping up the point size to 14 doesn’t hurt to make it easier on the eyes. Headlines look best at 17-25pt. 

In that same Wichita State study, it was discovered that any font, larger or smaller than 12pt, decreases readability. If you want someone to spend time reading your copy, try enlarging the size in the testimonial section or reducing the size for the money back guarantee statement. 

The last size factor to consider is line spacing. Make sure there is enough space between each line to give the text room to breathe and be read easily. 

Images, Part 2 

Earlier, I explained the importance of having an image of your product or a captivating image to related to your offer. Now I want to go into a few more details about choosing that image. 

I’m going to use Teachable’s landing page design for my example throughout this section. 


If you don’t have a specific image of your offer and want a gorgeous photo, check out this list I created showcasing The 13 Ultimate Free Stock Photo Websites

Now that you have found your image, think about how the text will look on top of the image. 

If your image has a lot going on in it, consider darkening it up with Photoshop. This way the text will be easier to read. A quick hack is to add a dark rectangle over the photo and reduce the opacity until the image is dark enough for the text to be readable and the image to still show through. 

Another factor to consider is the color of your headline. If the headline color you chose for your theme is blue, avoid using an image where there is a lot of blue. It will make the text very hard to read. My advice is to keep the headline white because, for the most part, it’s usually the easiest to read on top of images. 

This also is important for your CTA button. Does the color of it get lost because of the picture? If so, I’d recommend changing one (probably the image) because your CTA should always be the focus. 

When choosing the image above, I went through at least 4 or 5 different ones before I settled on this one. 

I know this is a LOT of information to think about when you’re building your landing page. It will take time to get it perfect. (Yay for A/B testing!) But all of the effort and thought is worth it. 

Taking the time to create a killer landing page will only help your goals of conversion and if your landing page is amazing (which it will be), more and more people are likely to come across it.   

Resources used in this post: Are you using these tips in your landing page? Have you made any simple changes that increased conversions? Let me know in the comments below.

Read part two in the landing page design series: 

Step-By-Step Guide: Create A Unique Selling Proposition for Your Landing Page

Allison Haag is a Product Designer at Teachable who pulls design inspiration from her worldwide adventures.