How to Design a Killer
Landing Page A Detailed Guide @teachablehq @allisonhaag LET’S GET STARTED

Hi, I’m Allison Content Marketer
& Designer @teachablehq @allisonhaag We make it easy for over 5,000 people to teach their own online courses.

This page looks awesome, right?

It converts at 20-30% (depending
on the source)

Do you want to build
your own similar looking landing page and create your own online course? GET STARTED NOW FOR FREE

Curious how we designed our
landing pages?!

I will explain! Curious how
we designed our landing pages?!

In this presentation, you’re going
to learn the best practices on how to create landing pages that convert, look awesome and support your brand

Before we get into it,
let’s define a landing page

“as a single page with
a specific target: getting visitors to complete an action.” Wix.com defines a landing page AKA CONVERSION

Don’t confuse it with a
homepage…

A homepage should appeal to
multiple audiences. It’s the place where anyone can see your product

As a website with one
target audience and goal We define a landing page AKA CONVERSION

I think you’re getting the
idea… Your goal is to get your target audience to sign up for your offer

Sign up for your newsletter
Subscribe to your blog Download an ebook Attend a live webinar Enroll in a course LIKE… I think you’re getting the idea… Your goal is to get your target audience to sign up for your offer

CONVERSION RATE People who completed
your goal People who came to your page MATH! =

What is your offer? Before
you start, have an answer to these 4 questions:

What is your offer? What
are the benefits? Before you start, have an answer to these 4 questions:

What is your offer? Why
does your audience need your offer now? What are the benefits? Before you start, have an answer to these 4 questions:

Before you start, have an
answer to these 4 questions: What is your offer? How do they get your offer? Why does your audience need your offer now? What are the benefits?

The answers to the questions
create your unique value proposition

They tell your reader… what
they get from you when signing up

They tell your reader… why
they can’t live without your offer what they get from you when signing up

They tell your reader… all
while creating a sense of urgency in an easy to convert landing page why they can’t live without your offer what they get from you when signing up

Sounds complicated, but it’s not!
Image source: Flickr

Here are 46 tips to
make building your landing page EASY!

Teachable 1 TIP Products to
build a landing page Instapage Unbounce (instapage.com) (unbounce.com) (teachable.com)

Copy, images, layout: everything supports
your conversion goal Headline Subhead Benefits Social Proof Color Typography 2 TIP ABC

A great aesthetic supports your
brand goals and can lead to future conversions

COPY Write copy in the
voice of your audience 3 TIP

Copy should be about the
visitor COPY 4 TIP

What are they getting from
your product? COPY How are you solving their painful problem?

Keep copy: Clear Concise Engaging
Persuasive COPY 5 TIP

Keep copy: Clear Concise Engaging
Persuasive COPY 5 TIP Don’t confuse your audience about what they’re getting from your offer

To captivate your audience, use
D Bnonn Tennant’s hypnotic words: COPY 6 TIP YOU BECAUSE IMAGINE

COPY For more writing advice,
Teachable’s Content Marketer & Writer, Ashley Hockney, wrote a great post about her 10 Tips for More Powerful Copywriting READ THE POST NOW

Your headline needs to say
what your landing page is offering COPY: HEADLINE 7 TIP

Your headline needs to say
what your landing page is offering COPY: HEADLINE 7 TIP

Your subhead is a more
detailed explanation of your headline COPY: SUBHEAD 8 TIP

COPY: SUBHEAD 8 TIP Your
subhead is a more detailed explanation of your headline

In the benefits section, address
how you’re solving your audience’s pain points COPY: BENEFITS 9 TIP

In the benefits section, address
how you’re solving your audience’s pain points COPY: BENEFITS 9 TIP

In the benefits section, address
how you’re solving your audience’s pain points COPY: BENEFITS 9 TIP Unsure of the pain points? Check out Teachable Co- Founder, Conrad Wadowski’s post explaining how to find them READ THE POST NOW

Use a list to showcase
how you’re solving the pain points COPY: BENEFITS 10 TIP

Use a list to showcase
how you’re solving the pain points COPY: BENEFITS 10 TIP

Focus solely on the benefits
of your product COPY: BENEFITS 11 TIP

You need to first sell
your audience first on why they need your product (aka how it solves their problem) COPY: BENEFITS

Including all of the features
of your product can confuse or complicate their purchasing decision, which can cause them to not buy at all COPY: BENEFITS

If you’ve enjoyed these tips
so far, check out my detailed blog post: Best Practices to Create Great Landing Page Design READ THE POST NOW

Include testimonials… COPY: SOCIAL PROOF
12 TIP

COPY: SOCIAL PROOF
…data…

COPY: SOCIAL PROOF
…social proof

The more people see that
others are interested in/ used your product, the more likely they will convert COPY: SOCIAL PROOF

Have a clear call-to-action button
CALL-TO-ACTION 13 TIP

CALL-TO-ACTION

Michael Aagaard points out that
there are two main elements to a CTA CALL-TO-ACTION

Michael Aagaard points out that
there are two main elements to a CTA The visual cue to the audience of where to click CALL-TO-ACTION DESIGN

Michael Aagaard points out that
there are two main elements to a CTA The visual cue to the audience of where to click CALL-TO-ACTION Answers the question of why click the button DESIGN COPY

Enclose your CTA in a
rounded shape CTA: DESIGN 14 TIP

Enclose your CTA in a
rounded shape AKA MAKE IT A BUTTON! CTA: DESIGN 14 TIP

Give your CTA 3D elements
CTA: DESIGN 15 TIP

Like changing color/shade when hovering
over the button CTA: DESIGN

Contrast matters! CTA: DESIGN 16
TIP

Your CTA needs to stand
out from everything else on the page CTA: DESIGN

Size is important CTA: DESIGN
17 TIP

Make the button larger than
the other elements CTA: DESIGN

CTA: DESIGN 18 TIP Include
extra white space around the button to make it stand out even more

Product complexity determines CTA placement
above or below the fold CTA: DESIGN 19 TIP

According to Kissmetrics… CTA: DESIGN
The more complex the offer, place below the fold Product/offer complexity CTAplacement Complex Simple BottomofpageTopofpage

According to Kissmetrics… CTA: DESIGN
If there is limited information needed to make a decision, above the fold The more complex the offer, place below the fold Product/offer complexity CTAplacement Complex Simple BottomofpageTopofpage

Be descriptive when writing CTA
copy CTA: COPY 20 TIP

Tell the reader exactly what
will happen when they click the CTA button CTA: COPY

CTA: COPY 21 TIP SUBMIT
SEND AVOID

CTA: COPY TRY SIGN UP
LEARN MORE ENROLL NOW REDEEM OFFER DOWNLOAD NOW REGISTER FOR WEBINAR

Include a thank you page
THANK YOU PAGE 22 TIP

It’s a bonus page! Use
it to… Introduce other products, a blog, an online course THANK YOU PAGE Give a bonus piece of content (they’ll love you for it) Attend a live training webinar Follow your social networks Ask them to sign up for your newsletter +

Have a clear visual hierarchy
to make your value proposition obvious DESIGN 23 TIP

DESIGN CTA SUBHEAD HEADER SOCIAL
PROOF SUPPORTING IMAGE

DESIGN Like this landing page
design? Sign up on Teachable to create your own school for free! GET STARTED NOW

Use a simple, clean page
design to make your value proposition obvious DESIGN 24 TIP

Use white space to… DESIGN
25 TIP …allow the viewer’s eyes to move easily around the page

Use white space to… DESIGN
25 TIP …allow the viewer’s eyes to move easily around the page …emphasize what’s important

Limit off-page navigation links They
direct your viewer off your page and away from your main CTA DESIGN 26 TIP

Consider psychological color implications DESIGN:
COLOR 27 TIP Icon: Flaticon

Youthful Optimistic Energy Urgency Courage
Warmth Trust Security Aggressive Excitement/Fun Feminine Romantic Tranquility Sexuality Soothing Calming DESIGN: COLOR What characteristics do you want your brand to exude? Creative Friendly Luxury Truth Loyalty Coolness Wealth Health Balance Relaxing Easy-going Environment

DESIGN: COLOR Black makes Squarespace
look sleek and high-end

DESIGN: COLOR Yellow portrays Geico
as friendly and optimistic

Tailor color choices to your
audience’s preferences DESIGN: COLOR 28 TIP

DESIGN: COLOR For a female-focused
audience… (Stick to softer tints)

DESIGN: COLOR For a male-focused
audience… (Go for bolder shades)

Research color palettes for inspiration
DESIGN: COLOR 29 TIP Icon: Flaticon

My favorite sites: Adobe Color
DESIGN: COLOR

DESIGN: COLOR My favorite sites:
Colour Lovers

DESIGN: COLOR My favorite sites:
Coolors

Make sure colors don’t impair
readability DESIGN: COLOR 30 TIP

Easy to read Hard to
read DESIGN: COLOR

DESIGN: COLOR 31 TIP Use
a light colored background with dark text

Use a light colored background
with dark text DESIGN: COLOR 31 TIP (or vice versa)

DESIGN: TYPOGRAPHY
32
TIP

DESIGN: TYPOGRAPHY 32 TIP You
will have less problems with browser compatibility

DESIGN: TYPOGRAPHY Sans serif (best
for mobile reading) Verdana Geneva Arial Helvetica Tahoma Trebuchet MS Lucida Grande Serif (inspires feelings of trust) Georgia Times New Roman Palatino Times Monospace Courier Monaco Courier New Best fonts to use:

Use one font to reduce
clutter on the site DESIGN: TYPOGRAPHY 33 TIP

Use 12pt font for body
text DESIGN: TYPOGRAPHY 34 TIP (It’s the easiest to read in the least amount of time)

For an older audience, use
14pt font DESIGN: TYPOGRAPHY 35 TIP

For headlines, use 17-25pt DESIGN:
TYPOGRAPHY 36 TIP

Make sure there is enough
space between each line to give the text room to breathe and be read easily DESIGN: TYPOGRAPHY 37 TIP

DESIGN: TYPOGRAPHY 37 TIP Make
sure there is enough space between each line to give the text room to breathe and be read easily

Include an image of your
product OR a captivating image supporting your offer IMAGES 38 TIP

IMAGES
Image of offer/product

IMAGES
Image supports offer

We are visual beings IMAGES
Image source: The Next Web

Visuals entice your reader to
stay on your page and learn more about your product IMAGES

Use images with people IMAGES
39 TIP

IMAGES We are drawn to
faces, especially the eyes

IMAGES When the eyes are
looking in a certain direction, we follow the line of sight. This is a psychological trick that influences the power of suggestion

Use eyes to focus attention
on the important parts of your landing page IMAGES 40 TIP

Use directional cues to point
out where to look next IMAGES 41 TIP

Use directional cues to point
out where to look next IMAGES 41 TIP

The 13 ULTIMATE Free Stock
Photo Sites (All free for commercial use) @allisonhaag for your Presentation or Online Course @teachablehq IMAGES 42 TIP To find your perfect visual, check out my list of The 13 Ultimate Free Stock Photo Sites FIND YOUR IMAGE NOW

If the background is an
image, make sure the text is legible by darkening the photo IMAGES 43 TIP

IMAGES Or try adding a
box behind the text

White text over most images
is usually the easiest to read IMAGES 44 TIP

Use video to explain complex
offers IMAGES 45 TIP

Conduct A/B Tests A/B TESTING
46 TIP

A/B TESTING We recommend A/B
testing every element using Optimizely or Visual Website Optimizer

Phew! That was beefyImage source:
petakidas.com

Download the slides to remember
these tips when you’re creating your own killer landing pages! GET THE SLIDES NOW

Thanks for staying with me
until the end! For more, follow us on Twitter Happy Designing!