Building Landing Pages by Gilles de Clerck

1. Convert visitors into customers
Landing Pages

2. Acquisition
getting potential customers
to visit your landing page so
they learn about your product
Conversion
enticing potential customers
with value propositions so
they want your product

3. How to structure
What to write
How to visualize
How to design
Asking for feedback
Resources and inspiration

4. Explain product features…
Product
… as customer bene
fi
ts.
Market

5. Conversion rate
= visitors / signups

6. Conversion
marketing product
“get on wait list” “sign up”
“early access”
“sign up for beta”
“get started”

7. Conversion rate
= desire — (labor + confusion)

8. + Desire
Entice with value. Create intrigue. Go out of your way to make it as easy as
possible for visitors to imagine how their lives will be better with your product in it.
— Labor
Minimize the work visitors have to do to get your value props. The more words and
images to process, the harder and more tiresome. Aim for every word, visual and element
to add meaning.
— Confusion
Make it crystal clear how your product improves visitors’ lives. Be speci
fi
c and
consistent at every step and turn.

9. Messaging > Design
1. Hone your message. Identify your product’s most desirable value propositions.
2. Combine copy and media to convey those value props as clearly and concisely as possible.
3. Design your page in a way that enhances the clarity and impact of #2.

10. Value propositions
“Here’s what our product can do.”
Product quality matched to
“Here’s what you can do with our product.”
customer bene
fi
t

11. Imagine your product is fast
quicker output
greater output
more e
ffi
ciency
bene
fi
t
“Get work done faster.”
“Get more work done.”
“Save yourself time.”
value prop

12. Imagine your product is secure
protection
control
bene
fi
t
“If you lose your card, freeze it from the app.”
“Turn o
ff
contactless, online payments and
withdrawals from the app.”
value prop

13. Generating value props
1. What bad alternatives do people resort to without your product?
2. How is your product better than that alternative?
3. Write as an action statement — value prop.

14. Example — Duolingo
BAD ALTERNATIVES
Expensive language learning
courses and subscriptions.
In-person learning courses with
long-time commitments.
Boring language learning courses.
HOW YOU’RE BETTER VALUE PROP
100% free language learning.
Flexible language learning at your
own pace.
Have real-world conversations in
new languages.
Learn a new language for free.
Learn a new language whenever,
wherever.
Learn a language through real-
world communication.

15. Example — Revolut
Bad alternative
Transaction fees
Moving money costs money.
Transaction delays
Wastes productivity.
Hinders opportunity.
Limited control
Di
ffi
cult to budget. You lose money.
Cumbersome to open an account
Takes a lot of time.
Not available for everyone.
Better solution Value prop
Spend, withdraw and send money
anywhere in the world. No additional fees.
Send and get money in real-time, to and
from anywhere in the world.
Take control of your money with spending
noti
fi
cations and smart budgeting tools.
Open an account in seconds without
street address or credit checks.
Transaction fees
No fees.
Transaction delays
Money arrives right away.
Limited control
Set limits, intuitive analytics, noti
fi
cations.
Cumbersome to open an account
Semi-automated KYC onboarding in 5
minutes.

16. more examples

17. Proven template
1. NAVBAR — Top of the page: company logo and site links.
2. HERO — Big section with header, subheader and most enticing imagery.
3. SOCIAL PROOF — Logos and/or testimonials of best-known clients.
4. CALL-TO-ACTION — Signup button with concise incentive to go for it.
5. FEATURES — Key value propositions. Why people would choose you.
6. CALL-TO-ACTION
↺ — Repetition cooks an idea into people’s heads.
7. FOOTER — Miscellaneous links.

18. Navbar
Hero
Social proof
Call-to-action (CTA)
Features
CTA
Footer
Proven template

19. Hero
If the visitor reads
nothing else on your page,
they should still get your product and why they should use it.
Header
Subheader
Image

20. Above-the-fold
Below-the-fold

21. If the visitor reads
nothing else on your page,
they should still get your product and why they should use it.
Header
Subheader
Image
Hero

22. Hero — Header
Make them want to scroll. But don’t require them to scroll.
Descriptive, while concise.
Hook them. Or lose them forever.
Be speci
fi
c. Don’t be vague. “Improve your work
fl
ow!”
If a visitor reads only this,
would they know what you’re selling?

26. How to write killer headers
1. Identify how users get value from your product
2. Add a hook to keep ‘m reading

27. How to write killer headers
1. Identify how users get value from your product
❋ Value props
2. Add a hook to keep ‘m reading

28. Airbnb
Dropbox
Deliveroo
Revolut
Web
fl
ow
Robinhood
Slack
Stuck in hotels, no real culture
experience.
Unorganized papers, lost
fl
ashdrives.
Long waits and tra
ffi
c-heavy
trips for food.
Finding ATMs, forgetting to pay
people back.
Contracting website out to
devs and agencies.
High-fees on low-volume
trades.
Messy email threads and
impractical group chats.
Stay in locals’ homes.
Online cloud storage with
automatic
fi
le-syncing.
Quick deliveries from local
restaurants.
Instant mobile money transfers
for friends.
Code-free website tool for
anyone.
No-fee stock trading platform.
Single app for real-time, time-
wide communication
Experience new cities like a
local.
Upload your
fi
les to the cloud
automatically.
Get your favourite meals in one
click.
Get paid back instantly by your
friends.
Launch your website yourself.
Trade stocks for free.
Communicate e
ff
ectively with
everyone in one place.
Product Bad alternative Better solution Value prop

29. How to write killer headers
1. Identify how users get value from your product
2. Add a hook to keep ‘m reading
❋ Boldly address likely skepticism

30. “Build your own website.”
“But, I don’t know how to code.”
“This’ll take too long. I’m not a designer.”
“This will be limited like other such tools.”
What stops customers from buying?

31. Don’t know how to code.
It’ll take too long.
Low-functionality.
Build your own website. Without code.
Build your own website in 20 minutes. No code.
Build a custom website in 20 minutes. No code.
Objection Updated header

32. Rank higher on Google
Ace the SAT
Erectile dysfunction pills
“I suck at SEO.”
“I bet it’s hard work.”
“I don’t want to ask my doctor.”
You don’t have to be an SEO pro
to rank higher on Google.
Ace the SAT with just 10
minutes of studying per day.
Erectile dysfunction pills.
Delivered to your door.
Value prop Objection Value + Hook

33. Airbnb
Dropbox
Deliveroo
Web
fl
ow
Robinhood
Slack
Only available for long-term.
Security and privacy risks.
High delivery costs.
I can’t code.
There’s a minimum size.
It’ll be expensive.
Experience new cities like a
local.
Upload your
fi
les to the cloud
automatically.
Get your favourite meals in one
click.
Launch your website yourself.
Trade stocks for free.
Communicate e
ff
ectively with
everyone in one place.
Product Original Objection Updated
Experience new cities like a local. No
minimum stays.
Upload your
fi
les to the cloud
automatically. Chosen by Fortune 500s
for superior security.
Get your favourite meals in one click.
No extra fees.
Stock trading without fees. No
minimums.
Communicate with everyone in one
place. Free for teams.

34. Now that prospects understand what you product does,
use your subheader to specify how.
Header
Subheader
Image
Hero

35. Hero — Subheader
❋ How does our product work exactly?
❋ Which feature makes our claim more believable?
When you promise amazing value, visitors think:
“Ok great, but how?

37. Header 1. Value prop
3. How it creates value prop
2. Introduce product
Subheader

38. How small brands sell
more online
Privy’s conversion, email marketing
and text messaging tools help you get
more customers from your tra
ffi
c.

39. Your most restful sleep
is just a sip away
Calming teas that help you relax, unwind
and drift into a deep, restorative sleep.

40. Ace the SAT with just 10-
minutes of studying a day
10-min microlessons designed to boost con
fi
dence
and make SAT strategies easy to remember.

41. Airbnb
Revolut
Web
fl
ow
Robinhood
Slack
An online rental marketplace with thousands of
options in your area.
Revolut is a money transfer platform that instantly
connects you and your friend’s banks.
Web
fl
ow is a website building platform that uses
plug-and-play tech to help you launch quickly.
Robinhood is an e-trading platform that allows for
instant investments without trading fees.
Slack is an all-in-one communication platform that
organizes your conversations into channels,
threads and direct messages.
Product Header Subheader
Experience new cities like a local. No
minimum stays.
Get paid back by your friends
instantly. No fees.
Build your own website in 15 minutes.
No code.
Stock trading without fees. No
minimums.
Keep your business communication
organized in one place. For free.

42. Hero
Now that prospects understand what you product does,
use your subheader to specify how.
Header
Subheader
Image

43. Hero — Imagery
Visualize value props conveyed in header + subheader
Complement and reinforce the copy. Not distract from it.
Show your product, in action if possible.

44. Physical — Picture

45. Physical — Picture

46. Software — Screenshot

47. Software — Screenshot

48. Software — Screenshot

49. Software — Screenshot

50. Software — Screenshot

51. Software — Screenshot

52. — Leo Burnett
“In advertising, the greatest thing to be achieved is believability.
Nothing is more believable
than the product itself.”

53. Navbar
Hero
Social proof
Call-to-action (CTA)
Features
CTA
Footer
Proven template

54. Social proof
When visitors scroll down from the value props in the hero, they should be seeing
other people/companies that are not you vouching for those value props.
Logos
Testimonials
Make them feel as if everyone is already using your product. Except for them.
Create irresistible FOMO.

55. Social proof

56. Social proof

57. Social proof
What if nobody’s using your product because you’re super-early stage?
❋ Play the hand you are dealt
❋ Fake it ‘till you make it
Be resourceful

58. Call-to-Action
Get visitors to act on their excitement and FOMO. Make it feel easy.
Button
Form
“Click here for magic”

59. Start recording
Record podcasts in studio quality
Learn why users leave your site Show my heatmap
Order from your favorite local restaurants Find food
Get paid back by friends instantly Setup your account
Find a rental
Experience your getaway like a real local
CTA
Value prop

60. Cut out as many steps as possible
Join beta
Your email

61. Navbar
Hero
Social proof
Call-to-action (CTA)
Features
CTA
Footer
Above-the-fold

62. 1. Your magic
2. How you create magic
3. Visualize the magic
4. Social validation
5. Click here for magic

63. 1
2
3
4
5
1. Your magic
2. How you create magic
3. Visualize the magic
4. They say it’s magic
5. Click here for magic

64. 1
2
3
4
5
1. Your magic
2. How you create magic
3. Visualize the magic
4. They say it’s magic
5. Click here for magic

65. 1
2
3
4
5
1. Your magic
2. How you create magic
3. Visualize the magic
4. They say it’s magic
5. Click here for magic

66. Navbar
Hero
Social proof
Call-to-action (CTA)
Features & Objections
CTA
Footer
Below-the-fold

67. Above-the-fold
Below-the-fold
you earn the attention
you earn the sale

68. Features & Objections
Feature #1
Feature #2
Feature #3
Put all your value props on the table and proactively
address objections visitors might have concerning them.
Make the overarching hero value prop concrete, feature by feature.

69. Cook the perfect steak, every time
Cooks and sears
No clean up
More than just meat

70. Podcasts that look and sound amazing
Local recordings in 4K quality
Uncompressed crystal clear audio

71. … but it’ll be complicated
So simple Grandma can use it
Guests can join with one click. No downloads,
no accounts. We made this for non-techies.
… but I can’t edit
Everyone can edit with our Magic Editor
Save hours of editing with a few clicks. Upload
your logo, change the background, choose
your speaker layout, cut clips, and export.

72. Feature
Header
Paragraph
Imagery

73. Concisely describe the value of the feature and
address possible objections.
Point out how the status-quo sucks and
describe how you make it better.
Keep it short, simple and speci
fi
c. No sales
fl
u
ff
.
Bullet points.
Feature copy

74. Header
A simpler work
fl
ow for docs & tasks
Paragraph
Tired of linking Google Docs and Trello? Notion seamlessly
blends the two. Full-powered project trackers with docs
inside. Save your team from context switching.
Header
Invest for free
Paragraph
We’ve cut the fat that makes other brokerages costly, like
manual account management and hundreds of storefront
locations, so we can o
ff
er zero commission trading.
Header
Truly Private Messaging
Paragraph
Status uses the peer-to-peer protocol Whisper and end-to-
end encryption to protect your communication from third
party interference. Only you can view your messages.
Header
With LOOP, parents are more connected with each other.
Bullet points
• Create a chat room to organize school carpools.
• Find a trusted babysitter on the
fl
y.
• Arrange playdates and (kid-free) social gatherings.

75. Product screenshot (or mockup).
Image that demonstrates feature in action.
Make sure it adds value to your story.
Avoid meaningless eye candy.
Thumbs up for animated GIFs.
Feature imagery

83. Navbar
Hero
Social proof
Call-to-action (CTA)
Features
CTA
Footer
Proven template

84. Navbar + Footer
❋ Logo
❋ Links to key sections
❋ CTA

85. Conversion rate
= desire — (labor + confusion)

86. Value propositions
Make it crystal clear how your product improves visitors’
lives. Be speci
fi
c and consistent at every step and turn.
increase desire
Information density
Use copy and visuals to maximize information density: the art of
saying a lot with a little. A high ratio of ideas to elements.
decrease labor & confusion

87. Design
A visually appealing design helps conversion.
By showing you’re not an amateur.
Don’t overdo it, but make sure:
❋ It's enjoyable to visually skim.
❋ It looks thoughtfully put together.
❋ Each section is clearly structured.
❋ It re
fl
ects what you stand for (brand).

88. Landing page builders
landerapp.com
instapage.com
leadpages.net
unbounce.com
wix.com
web
fl
ow.com
These tools typically include:
❋ Drag-drop building blocks for various elements
❋ Built-in mechanisms for collecting your leads
❋ Easy integration with other tools

89. Getting feedback on your page
People outside of your target audience
Learn how enticing and comprehensible your copy is people who aren't familiar with your market
or product. A mistake many make is to over- assume the baseline knowledge of an audience.
People from your target audience
Learn if your messaging is su
ffi
ciently unique and descriptive to convince people from your
target audience to choose you over competitive solutions.

90. Getting feedback on your page
❋ Would you take your credit card and sign up right now? If not, what would it take?
❋ Rate how the page sustained your interest on a scale of 1-10.
❋ What do you suggest be rewritten or redesigned to help it better sustain your interest?
❋ What unanswered questions are you left with?
❋ Something awesome you wanted even more details on?
❋ If you had to delete half the page's imagery and copy, which would it be?
❋ What triggered your “bulls*t” re
fl
ex?

91. https://persistiq.com
https://frontapp.com
https://airtable.com
https://
fi
gma.com
https://tryshift.com
https://notion.so
https://web
fl
ow.com
https://grammarly.com
https://cover.com
https://frame.io
https://withjoy.com
https://slite.com
https://
fl
at.io
https://voice
fl
ow.com
https://grammarly.com
https://softr.io
https://billdr.co
https://zapier.com
https://mightyapp.com
https://voiceform.com
https://gumroad.com
Inspiration
https://pagecollective.com