Every landing page, ever
If you need an effective landing page for your product, use the following framework for your content so you can get back to working on the actual product.
Page structure #
Hero heading #
Explain the goal of the product. Be concise.
For example:
Opening the door to work from anywhere.
Web development for the rest of us
Hero subtitle/tag line #
Describe how goal aligns with your audiences needs.
For example:
- Move faster and work smarter, with people, apps and AI at your side
- Accept payments, offer financial services and implement custom revenue models – from your first transaction to your billionth.
- Simple and complete testing utilities that encourage good testing practices
Visualization (Hero background or side image) #
Use imagery that represents the product's features or outcomes. Bonus points for novelty and visual impact, such as shader based visuals, concept illustrations, or high-quality video content. Use these if your product is less abstract.
Call to Action (Hero button/buttons) #
You can have up to three main page actions, but as always, the fewer options the better. You want to nudge the user towards the most productive thing they can do at this point. Don’t forget to visually differentiate the primary, secondary (and tertiary if necessary) actions and weight and order them intentionally so that the most prominent action, the one a user might even take by accident, is the correct next step for the majority of your audience.
For example:
Create an account
View properties
More discerning user might need more information before they know which decision is most productive for them. In other words, they aren’t likely convinced yet.
Mini-Social Proof (right beside CTA) #
Offering social proof extends reassurance to your users in ambiguous situations where people aren’t sure about what the next appropriate course of action is.
For example:
- 1,000+ properties listed
- Over 6 million turtles saved
Dynamic or live updates signal active use. Animations can suggest growth or change, even if the content isn’t live.
Features #
What will I be able to achieve with this product.
For example:
- View all of your ports in one place.
- Copy and share network URLs.
- Accept and optimize payments globally - online and in person.
Make the features list partially visible at the bottom of the user’s viewport to encourage them to scroll for more details.
Benefits #
Highlight the high-level value and the ease of use of how the features benefit you, the user.
Examples:
- Plan - Align your team from idea to launch with tools that track work, visualize roadmaps, and gather insights.
- Automate - Improve your software development process by automating builds, tests, and deployments with CI/CD.
- Live Activities - Stay in touch without touching your phone.
More Social Proof #
Use this section to offer reassurance and address potential objections or concerns your audience may have.
- A list of companies already successfully using the product.
- Reviews and Testimonials
- Certifications and Standards achieved.
- Awards won/Feature comparisons against alternatives.
- FAQs
In the early days, you will likely be short on examples of the above. An alternative approach is to craft and illustrate a short, believable story that follows the Problem–Agitate–Solution (PAS) Framework, showcasing the problem your audience faces so they can see themselves in the story.
Last Call to Action #
For example:
- Create an account to start browsing properties today.
- Explore what people are making.
- Try our Demo.
- Watch our tutorial or speaker series.
This is likely your last chance to convert those who need more information or further engagement with the product to determine its suitability. You might want to include an alternative, more high-touch communication channel if you have one.
For example:
- Contact our sales team.
- Request a demo or a callback.
Footer #
For example:
- Privacy policy
- Social media links
- Contact
- About Us
These links support secondary tasks users need before moving forward, like finding legal information, regional operations, contact details, or media resources.