SlideShare una empresa de Scribd logo
1 de 129
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.
Best Practices for Great Landing Page Design @allisonhaag
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!

Más contenido relacionado

Último

Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 

Último (18)

Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 

Best Practices for Great Landing Page Design @allisonhaag