How to create a Landing Page that sells?
A thread
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread">
↓
A thread
↓
First, you have to be clear about what you are building your landing page for.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🎯" title="Volltreffer" aria-label="Emoji: Volltreffer">
Most pages fall in roughly one of three categories:
https://abs.twimg.com/emoji/v2/... draggable="false" alt="1️⃣" title="Tastenkappe Ziffer 1" aria-label="Emoji: Tastenkappe Ziffer 1"> Idea Validation (low fidelity)
https://abs.twimg.com/emoji/v2/... draggable="false" alt="2️⃣" title="Tastenkappe Ziffer 2" aria-label="Emoji: Tastenkappe Ziffer 2"> Taking Pre-Orders (med fidelity)
https://abs.twimg.com/emoji/v2/... draggable="false" alt="3️⃣" title="Tastenkappe Ziffer 3" aria-label="Emoji: Tastenkappe Ziffer 3"> Selling a Product (high fidelity)
↓
Most pages fall in roughly one of three categories:
↓
The fidelity of your landing page should match the fidelity of your idea.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="💎" title="Edelstein" aria-label="Emoji: Edelstein">
This thread focuses on the highest fidelity page:
Product sales pages.
For a lo-fi example check this perfectly simple page by @thatdudedenis built in http://sneak-peek.io"> http://sneak-peek.io
https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten">
↓
This thread focuses on the highest fidelity page:
Product sales pages.
For a lo-fi example check this perfectly simple page by @thatdudedenis built in http://sneak-peek.io"> http://sneak-peek.io
↓
It has to hook the reader early, and slowly build towards the climax without losing their attention.
Your page is broken up in sections, the same way a story is broken up in scenes.
Which sections? Let& #39;s have a look!
↓
You can make your product page as elaborate as you want it to be, but it should at least have:
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧩" title="Puzzle piece" aria-label="Emoji: Puzzle piece"> An appealing cover image
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧩" title="Puzzle piece" aria-label="Emoji: Puzzle piece"> A 5-word Promise + longer Value Proposition
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧩" title="Puzzle piece" aria-label="Emoji: Puzzle piece"> 3+ Key Benefits
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧩" title="Puzzle piece" aria-label="Emoji: Puzzle piece"> Features
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧩" title="Puzzle piece" aria-label="Emoji: Puzzle piece"> Product Shots
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧩" title="Puzzle piece" aria-label="Emoji: Puzzle piece"> Social Proof
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧩" title="Puzzle piece" aria-label="Emoji: Puzzle piece"> Call(s)-to-Action
↓
↓
Optional Power-ups are:
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🍄" title="Pilz" aria-label="Emoji: Pilz"> Demo Video
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🍄" title="Pilz" aria-label="Emoji: Pilz"> How it Works (in case not obvious)
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🍄" title="Pilz" aria-label="Emoji: Pilz"> About the Maker(s)
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🍄" title="Pilz" aria-label="Emoji: Pilz"> FAQs
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🍄" title="Pilz" aria-label="Emoji: Pilz"> Chat(bot)
...
↓
...
↓
An Appealing Cover Image
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🌄" title="Sonnenaufgang über den Bergen" aria-label="Emoji: Sonnenaufgang über den Bergen"> A cover image is an opportunity to explain your product in one glance.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🌄" title="Sonnenaufgang über den Bergen" aria-label="Emoji: Sonnenaufgang über den Bergen"> A good cover image immediately grabs the visitor& #39;s attention. It is the hook we discussed earlier.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🌄" title="Sonnenaufgang über den Bergen" aria-label="Emoji: Sonnenaufgang über den Bergen"> When selling digital products, your cover image makes it tangible.
↓
↓
A 5-word Promise
https://abs.twimg.com/emoji/v2/... draggable="false" alt="💎" title="Edelstein" aria-label="Emoji: Edelstein"> Most stories are about transformation.
Your Promise sells that transformation.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="💎" title="Edelstein" aria-label="Emoji: Edelstein"> Your Promise gives extra context to your cover image. Let them play off each other.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="💎" title="Edelstein" aria-label="Emoji: Edelstein"> Ask yourself:
"What is the main outcome for the user, when buying this product?"
↓
Your Promise sells that transformation.
"What is the main outcome for the user, when buying this product?"
↓
A Longer Value Proposition
https://abs.twimg.com/emoji/v2/... draggable="false" alt="💬" title="Sprechblase" aria-label="Emoji: Sprechblase"> Your Value Proposition often is an elaboration of your Promise, and should be no longer than a Tweet.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="💬" title="Sprechblase" aria-label="Emoji: Sprechblase"> Your Value Proposition explains, in one sentence:
the product category, its main benefit, the audience, the pain it solves.
↓
the product category, its main benefit, the audience, the pain it solves.
↓
3 or more Key Benefits
https://abs.twimg.com/emoji/v2/... draggable="false" alt="➕" title="Fettes Pluszeichen" aria-label="Emoji: Fettes Pluszeichen"> Key Benefits are a chance to break your Promise into smaller bits. So not what the product IS, but what it DOES for your Customer.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="➕" title="Fettes Pluszeichen" aria-label="Emoji: Fettes Pluszeichen"> Accompany Key Benefits by images or icons for legibility.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="➕" title="Fettes Pluszeichen" aria-label="Emoji: Fettes Pluszeichen"> Don& #39;t go overboard. 3-5 is enough.
↓
↓
Features + Product Shots
https://abs.twimg.com/emoji/v2/... draggable="false" alt="⭐️" title="Mittelgroßer Stern" aria-label="Emoji: Mittelgroßer Stern"> Features explain what your product IS – not what it DOES. They explain HOW you fulfil your Promise.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="⭐️" title="Mittelgroßer Stern" aria-label="Emoji: Mittelgroßer Stern"> Features make your product tangible, so use the opportunity to show it off using product shots
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📸" title="Kamera mit Blitz" aria-label="Emoji: Kamera mit Blitz">
https://abs.twimg.com/emoji/v2/... draggable="false" alt="⭐️" title="Mittelgroßer Stern" aria-label="Emoji: Mittelgroßer Stern"> Don& #39;t overdo it. 3-6 features are enough.
↓
↓
Social Proof (ft. @yodanparry)
https://abs.twimg.com/emoji/v2/... draggable="false" alt="❤️" title="Rotes Herz" aria-label="Emoji: Rotes Herz"> Social Proof = 3rd party proof you can deliver what you promise. Testimonials are great for this.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="❤️" title="Rotes Herz" aria-label="Emoji: Rotes Herz"> You don& #39;t have to put Social Proof in a separate section. Contextual testimonials on single features are a cheat code.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="❤️" title="Rotes Herz" aria-label="Emoji: Rotes Herz"> Ask permission.
↓
↓
Calls to Action
https://abs.twimg.com/emoji/v2/... draggable="false" alt="⚡️" title="Hochspannungszeichen" aria-label="Emoji: Hochspannungszeichen"> Break pages up with Calls-to-Action (CTAs). Always give your customer plenty of opportunity to purchase.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="⚡️" title="Hochspannungszeichen" aria-label="Emoji: Hochspannungszeichen"> Most CTAs are simply buttons, but you can emphasise them w. some extra context
https://abs.twimg.com/emoji/v2/... draggable="false" alt="⚡️" title="Hochspannungszeichen" aria-label="Emoji: Hochspannungszeichen"> Make it clear what your button does. In doubt use: & #39;Buy Now& #39;.
↓
↓
That& #39;s all for now!
https://abs.twimg.com/emoji/v2/... draggable="false" alt="⚡️" title="Hochspannungszeichen" aria-label="Emoji: Hochspannungszeichen"> To Validate Ideas and take Pre-Orders you can set up a page in 2 mins using http://sneak-peek.io"> http://sneak-peek.io .
https://abs.twimg.com/emoji/v2/... draggable="false" alt="👀" title="Augen" aria-label="Emoji: Augen">
https://abs.twimg.com/emoji/v2/... draggable="false" alt="⚡️" title="Hochspannungszeichen" aria-label="Emoji: Hochspannungszeichen"> The examples in this thread came from Launch.OS.
Check out the full page below: https://venturism.podia.com/launch-os ">https://venturism.podia.com/launch-os...
Check out the full page below: https://venturism.podia.com/launch-os ">https://venturism.podia.com/launch-os...