What Goes Into A Dynamite Landing Page Design [+Examples]
Inbound marketing techniques like SEO, social media marketing, and paid advertising can be highly effective, but also expensive. So when you attract a visitor to your website using one of these methods, you’ll want to do everything in your power to convert them to a sale and reap some of your investment. Thankfully, there’s an efficient way to do this: with highly-optimised website landing pages.
Landing pages are pretty simple in nature, but a lot goes into creating an exceptional one. In this guide, we’ll show you what goes into a landing page that is relevant, persuasive, and beautifully-designed, to drive up its conversion rate, get more leads, and improve your inbound marketing ROI. We’ll carefully walk through the most important steps in the process, explaining how to create killer landing pages that convince people to click on your CTA, complete your form, and eventually buy from you.
Table of contents
What is a landing page?
A landing page is a selling tool that converts visitors to leads. It does this by collecting their personal information in exchange for something valuable, which qualifies them as a lead. In this sense, it’s effectively a one-page advert whose goal is to sell something worthwhile to the prospect, and convince them to exchange their personal information for it.
The valuable thing being offered varies depending on your business, and what you’re trying to achieve. But it’s always the single goal and focus of your landing page. Some common examples include:
- An eBook download
- A newsletter subscription
- A free software trial
- A free quote
- A product purchase (or a free product)
The landing page can be focused on pretty much anything, provided it’s something that the prospect wants (and which you’ve skillfully sold to them throughout the page). If you’re offering something genuinely valuable to your prospect, your landing page will have a much higher conversion rate.
Here’s how a user might typically convert to a lead on your landing page, using a downloadable eBook as an example:
- They click on a CTA in a promotional email you’ve sent them, which takes them to the landing page.
- They browse through the page’s content, which persuasively sells your eBook, and makes it seem worth downloading.
- They complete the form on the page, and are shown a thank you message and a button to download the eBook.
Now you have their email address and some other personal information. They are no longer a website visitor—they are a lead. Your landing page has successfully completed its job as a smooth and effective salesperson.
What is the goal of your website landing page?
A website landing page must have a single goal, such as signing up for a software trial
As mentioned above, a landing page has a single goal and purpose, and almost every piece of content should be designed to help achieve that goal (with the rest improving the page’s SEO—more on this later).
For example, if your landing page is designed to attract more subscribers to your newsletter, everything on the page should help to achieve this aim. This might include the extensive benefits of your newsletter, the kind of content they can expect to receive, and perhaps some website testimonials from other subscribers who talk about how amazing it is. If your landing page is designed to promote a free trial of your software, you’ll probably want to talk about the problems the software solves for them, with a short video explaining how it works, and also a selection of your best customer reviews.
Whatever the goal of your landing page, it must be clear and focused, with every piece of content helping to achieve it.
Understand the audience for your website landing page
When we’re creating something for our customers, it can be easy to forget them entirely and just design it for ourselves. When this happens, we often end up creating something that works perfectly for us, but badly for the people it’s designed for: our customers. If this happens for your landing page, it won’t convert many people into leads.
To counter this, you must step into the shoes of your target audience, and approach the design of your landing page from their perspective. An effective way to do this is to create buyer personas for them, which reveal their demographics, personality, goals, motivations, and other valuable marketing information. If you already have personas for your business, now is a good time to review them, to get a better understanding of who you’re designing the page for. If you don’t, once you’ve completed your landing page, we highly recommend taking the time to create them as they can help your business immensely, across pretty much every facet.
But personas are a time-consuming endeavour. In the meantime, you can ask the following questions to get a better understanding of your audience:
- What are their demographics? This might include their gender, profession, age group, technical ability, and other useful descriptions that form part of their persona.
- What are their needs? A landing page addresses a desire. Some common desires include a desire for knowledge, a desire to be more productive, and a desire for riches. By understanding your user’s needs, you can write copy that sells more effectively.
- Devices they commonly use. If 75% of your target audience tend to use mobile for their web browsing, make sure the mobile experience is perfect before the page is promoted.
Best practices for landing page designs
Now that you have a single goal for your landing page, and a good understanding of your target audience, we can move onto the design itself. These are the best practices for landing page designs, which you’ll need to stick to for your own.
Offer something worthwhile
The success of your landing page is hinged on offering something valuable to the prospect
The success of your landing page depends heavily on what you’re offering. If you’re offering something genuinely valuable to your prospect, and you effectively communicate its value in your landing page, they’re much more likely to go for it.
Put effort into offering something worthwhile to your prospects. You might take the time to create an eBook, a white paper, or a spreadsheet that helps them to calculate something complex. Of course, these should always be related to your business in some way.
If your page effectively communicates your value proposition, and addresses one of your prospect’s needs, you’re sure for success.
Make every piece of content count
The world is a complex, stressful place. So when we’re trying to get something done, we want the process to be as straightforward and simple as possible, providing us with the exact info we need to complete it. This reduces our cognitive load (the load on our working memory), and can even make the task feel enjoyable.
Keep this in mind when designing your landing page. Every single element on the page—whether text, imagery, or something else—must help to sell what you’re offering. And if it’s doing a half-assed job, get rid of it!
Every new element on the page, increases the user’s cognitive load, making the task a little more mentally taxing. This goes for the largest buttons to the smallest icons—so make sure that everything counts. This is one of the tips in our article on information design too, which is another extremely useful methodology for creating killer landing pages.
Make your landing page design scannable
Negative space, chunked content, and bullets make the page easily scannable
We don’t read web pages. We scan them, cherry-picking the information we believe is most relevant to our goal. Many commercial websites are built with this behaviour in mind, with its content grouped into neatly-chunked sections that can be easily consumed.
To support scanning, you can use these design practices:
- Use headings (and sub-headings if necessary) to group sections, and create a solid hierarchy of information.
- Use bullet points and numbered lists, rather than long paragraphs of text.
- Use plenty of negative space in between sections, to clearly show that they’re unique units of information.
- Add the most important information “above the fold.” This includes the most potent benefits, your CTA, and your form.
- For your CTA button, use a colour that contrasts highly with the background colour, so that it’s easy to see. On landing pages, the CTA is usually a button that either jumps to the form on the page, or opens it in a pop-up.
These are good practices for most pages on your website, but are especially important for landing pages.
Navigation reduces the conversion rate of your landing page. If the prospect is tempted to navigate elsewhere, there’s a good chance they won’t come back, at which point your landing page has failed. To improve its conversion rate, remove all navigation menus (header and footer) and links from the page.
It’s common practice to keep your company logo as a link, which often leads the user back to the home page where they can find out more about your business. If you decide to include this, make sure you set the link to open in a new page, so that they can easily get back to your landing page afterwards.
A short, relevant URL for your website landing page
If you’d like your landing page to be found through Google (rather than sharing through email or social), make sure the page’s URL is short, and contains the SEO keywords that you’re targeting for the page. For example, if you’re offering an eBook on how to declutter your home, the URL might be www.yourdomain.com.au/declutter-your-home. This should help to improve its ranking.
Answer the user’s questions
This is a key component of designing for your target user. Take some time to figure out what kind of questions they might have when considering your offer, and aim to answer every one of those questions on the page.
Your answers don’t necessarily have to be in an FAQ format, either. They can be included in your sentences, bullet points, video, and even your imagery.
Optimise for mobile
Your landing page must look great and work perfectly on mobile, otherwise you’ll turn off a large percentage of users
About 50% of people browse the internet using their mobiles,1 so your landing page has to work just as well on mobile as it does on desktop computers. Whoever is building your website must invest the time to create a great mobile experience for your prospects. Otherwise, you risk losing half of your leads right off the bat.
Use conversion-centered design principles
As its name suggests, conversion-centred design is a framework that focuses on high conversions. It contains a list of useful principles that can help you to create exceptional landing pages—here they are in summary:
1. Create focus
For landing pages, creating focus means providing a single goal for your user. We’re already touched on this various times, but it’s worth repeating again: make sure that every piece of content is helping to sell your offering, with nothing superfluous remaining. This also means removing your navigation entirely, so that your prospects’ only path is to complete your form.
2. Build structure for your website landing page
Arrange your information in a way that shows a clear hierarchy, with the most important content first. This means using headings or sub-heading for each section, and adding your most persuasive selling points above the fold. A well-structured page is much easier for the prospect to understand.
3. Stay consistent
This goes without saying, but make sure your landing page is consistent with the rest of your website, with your branding clearly illustrated. This keeps things professional, and helps to build trust.
4. Show benefits
People will visit your landing page because they’re trying to get something out of it. So again, make sure you list the benefits of what you’re offering clearly, succinctly, and blazoned across the page.
5. Draw attention
Use typography, colour, and size to highlight your most important elements, and draw the user’s gaze. A good example is large text for your headings, and bright or highly-contrasting colours for your CTA button.
6. Design for trust
People prefer not to give away their personal information, particularly their email address. You can convince people you’re trustworthy with social proof, which includes customer testimonials, reviews, short case studies, or logos for companies you’ve worked with in the past. When it’s clear that you’ve done a good job for others in the past, people will be much more inclined to hand over their personal information to you.
7. Reduce friction
You’ll need to make your landing page super simple for your visitors, so that it requires the least brain power as possible. This means chunking your content, using simple, straightforward language, plenty of negative space, and a form that is highly usable (more on this below).
What to include on your landing page design
So far we’ve covered your landing page’s goal, audience, and some best practices for its design. Now, we’ll explore the elements on the page itself.
These are most effective landing page elements that you should include in your design, in order of importance. This doesn’t mean you should include every element listed here, just those that work best for your particular scenario. Remember: a clean landing page will perform better than a cluttered one!
Form & CTA
Your form is the most important element on the page, and must be impeccably designed
From your perspective, the whole point of the landing page is to collect people’s personal information, so that you can sell your products or services to them. And to get their information, you’ll need a form—arguably the most important element on the entire page.
Form design is a skill in itself, so we’ll take some time to explore the most effective design practices.
Above the fold, and accessible
The form should appear “above the fold,” so that it’s readily accessible by the user. If the user scrolls out of the view of the form, you might also consider adding a floating CTA button that allows them to jump back up to it easily. This button can be locked to a particular section on the page, like part of a “sticky header.” You’ll just need to make sure that the button contrasts enough with the background, so that it’s highly visible at all times.
The alternative to the floating CTA button is to repeat the form further down the page, but this is only necessary if you have a long page.
Use a pop-up if appropriate
Some designers choose not to show the form on the page itself, but show it in a pop-up that appears after clicking a CTA button. If you already have a lot of content on the landing page, this is a good solution to make it a little cleaner. But if not, showing the form on the page itself takes away one extra step for the user to complete it (and the fewer steps, the higher their chance of success).
While we’re on the subject of CTA buttons, if you’re using one for your page, be sure to use relevant, action-oriented language that describes the main benefit of your offer. For example, if you’re promoting a newsletter subscription that teaches your readers how to grow their business, the button text might be “Learn how to grow your business.” This also applies to the submit button for your form.
For the form itself, you’ll want to be as conventional as possible. Web forms haven’t changed much in the last 20 years, and for good reason: they work! Use standard form fields with clear borders, that are the right length for the content being entered, have clear labels that sit directly above the fields, and a submit button that is nice and bright. You’ll also want to include good validation functionality, that allows the user to quickly identify their errors, and easily correct them. The usability of your form can have a drastic impact on the conversion rate for your landing page, so take your time to get it right.
If you think your target audience will respond better to a different type of form, such as a “chatbot” or interactive form that reveals new fields as you go, try that instead. Just be aware that convention often works better, because it’s tried and tested.
Only add fields you need
As with the other elements of the landing page, stick to the fields that you need the most. This is usually just name and email fields: two critical pieces of information that are difficult for the user to get wrong. If you think you need more, seriously consider how you’ll use that extra information, and whether it’s worth making the form more complex, and potentially reducing its completion rate.
Use a thank you page for your website landing page
When the prospect successfully completes the form, they should be redirected to a “thank you” page that confirms their success. Make this confirmation text the largest thing on the page, and be clear about what happens next—e.g. if you’re offering content such as an eBook, will you email it to them? Maybe they can download it directly from this page?
The thank you page is also a great place to promote valuable content that you’ve written, such as popular blogs, eBooks, or white papers.
A persuasive headline
The one thing you can pretty much guarantee will be read on your page is the headline, so it needs to be the most persuasive piece of content on your page.
A winning headline for a landing page needs to:
- Encapsulate the biggest benefit of what you’re offering
- Be succinct, and ultra-specific about what you’re offering
- Use short, simple language (this also applies to the content for your entire page)
- If possible, create a sense of urgency.
If your headline clearly addresses one of the prospect’s needs, they’ll be more likely to read the rest of your content, and complete your form. And as with the form, be sure to spend a solid chunk of time on your headline, as it can be the page’s most potent seller.
If you have too many strong selling points (a nice problem to have), and are struggling to select a single one for your headline, you can add another in smaller text underneath.
Clear benefits help to push the prospect over the line
As mentioned above, people are visiting your page because they’re expecting to get something in return. And there’s no better way to convince them to complete your form than to spell out the wonderful benefits of what you’re offering.
Benefits can be shown in various forms: your headline, bullet lists, sentences, vivid imagery that communicates a desired state, video, and more. If possible, add your most desirable benefits in the top-half of the page, so that the prospect can quickly glance over them, realise that your offer is something they want, and click on your CTA to complete your form.
Relevant imagery that sells
Website imagery should always be relevant to the page’s meaning and content. For your landing page, if you’re offering free quotes for swimming pools, include an image of your most gorgeous, crystal-blue pool. If you’re offering an eBook on how to oil your timber decking, show a before and after image of a newly-restored deck. Whatever the purpose of your landing page, be sure to include imagery that helps to sell what you’re offering, otherwise it’s nothing more than a distraction.
Social proof works well for landing page designs
We’re social animals through and through, who regularly look to our fellow humans for guidance. Social proof is an incredibly powerful seller, and you’d do well to include some on your landing page.
Social proof takes a few forms online, which are outlined below. Each of these can be effective, so select the form that best suits your own landing page, and the resources already available to you.
Reviews or testimonials
If some people are already using your offering and have given positive reviews, be sure to include them on your landing page. Reviews and testimonials tend to work best when they meet these criteria:
- They’re fairly short (100 words max)
- They show the reviewer’s name, image, and company (if B2B).
- They show the full 5-stars
To keep the page clean, include 5 or fewer of your best reviews.
Awards impress prospects, and show off your skills
If a company has taken the time to nominate and give your business an award, you’ll want to tell the world about it. Awards are quality indicators, and tell your prospects that you know your stuff. They can be highly persuasive sellers, so be loud and proud about them.
Recognisable companies you’ve worked with
If you’ve worked with large, recognisable brands, in the eyes of the prospect, their reputation rubs off on you. Including their brand logos on your landing page can elevate your company to their lofty status, and is a highly effective form of social proof.
In some cases, what you’re offering on your landing page will help the prospect to achieve a measurable goal. If this is the case, and you’ve already achieved impressive results for other people, showing them on the page is another compelling way to sell.
Some examples might include:
- CRM software that has shown to increase customer retention
- A performance mechanic who has increased the speed for a number of racing cars
- An estate agent who has an impressive number of properties in a short period
When displaying impressive results, it’s good to make the result large and bright, so that it clearly illustrates your achievement.
An elevator pitch allows you to quickly explain what you offer
If you’re offering a service or product that needs to be explained, an elevator pitch is a great way to do so. It should be as concise as possible, and readable in around 20 seconds. It should also appear high up the page (maybe directly below the headline section), as some people will need to understand what your business offers before they can be convinced to complete your form.
A video does a similar job to your elevator pitch, explaining what your company offers. Many people will prefer to watch a video over reading text, so if you have the budget to create a good quality video, you should consider doing so. You can also access analytics for the video itself, which reveal how many people have watched, and for how long.
As with the elevator pitch, if the video needs to be watched to understand what you’re offering, be sure to include it near the top of the page.
Alternatively, the video’s purpose might be to sell the prospect on what you’re offering.
Educational content is great for website landing pages
If the page is designed to be indexed and found through Google (rather than being emailed or shared in some other way), you’ll want to include SEO-rich content that will improve your ranking. Keep your best-selling elements near the top of your page (headline, form, benefits, etc.), and your educational content down the bottom, which serves as further reading for the prospect.
For the content itself, make sure that it is:
- Relevant to the purpose of the landing page
- Genuinely useful to the reader—don’t just fill it with meaningless information!
- Includes the keywords that you’re targeting for the page
- Uses keyword-rich headings to chunk the content, and improve SEO further
As well as being great for SEO, educational content also shows the prospect that you know your industry well, which creates credibility and helps to drive up the page’s conversion rate.
FAQs are another form of educational content that are great for SEO, as well as answering any questions the user might have. As the least important element on the page, they’re best placed at the very bottom. To keep the page tidy, it’s good practice to place each question in a collapsible accordion that reveals the answer when clicked.
Landing page examples for different layouts
Landing pages tend to be fairly simple in design and structure, because they’re all trying to persuade the prospect to complete the form. Here are some common landing page examples with layouts that work for most goals, which include the most important elements.
In this layout, the headlines and benefits are immediately accessible next t the form, and are followed up with strong social proof sections, then some SEO-boosting FAQs.
In this layout, the headline and CTA are laid over a banner image. When the user clicks on the CTA, the form opens in a pop-up, which helps to keep the design nice and clean.
Other persuasive elements on the page include a list of benefits, and proven results.
Our final layout is suitable for a product offering, with an image of the item on the left hand side, with a compelling headline on the right, and the form directly below it. The elevator pitch and video can explain what your company does, or provide more information on the product itself.
Amazing landing page designs
Here are some amazing landing page design that we found online.
This is an excellent example of a headline that sells. It includes a clear benefit, uses simple language, and uses a large, highly-contrasting font that you can’t miss. The sub-heading explains how you’ll actually achieve the benefit.
Underneath, the CTA button is bright green and easy to spot, with text that clearly states what will happen when you click. There’s also some awesome social proof directly underneath, in the form of major brand logos.
DoorDash is a US food delivery service, and this page is designed to encourage delivery drivers to work for them.
There’s so many good things about the page. The headline is beautifully written with an enticing benefit, while also reassuring the prospect that they can cancel their subscription whenever they want. The form uses just a single field, ensuring a low barrier of entry, and the left-hand image illustrates what the app actually looks like, and how the user can earn a tidy sum of money by working for them.
Further down the page is an elevator pitch, some benefits of working for DoorDash, some requirements for signing up, and other useful information for potential employees.
10/10 for this landing page.
Nosto is e-commerce software that focuses on creating personalised experiences for shoppers. This landing page focuses on the benefits of A/B testing through their software—a valuable exercise that also works well for the landing page itself (we cover this further down).
The page is a typical example of what a landing page looks like. Headline on the left, form on the right, and benefits directly underneath. Their benefits might be better if they used more bullets, and it’s a little odd that the “watch recording” button is repeated. But aside from those points, it’s a solid landing page that likely performs well.
Share Calmly is software that automatically hides apps when you share your screen on a video conference. This prevents sensitive or damaging information being shared.
This screenshot is actually their homepage, but it would work just as well as a landing page. The headline is persuasive, and the text underneath solidifies the benefit further. The CTA is an eye-catching solid black, and describes the action being taken. On the right-hand side, the illustration helps to convey the company’s personality, while showing the software being used.
Further down, they include an explanation video of how the software works, some key features and benefits, pricing, and how to get in touch with them. This is another awesome example of a landing page.
BuzzSumo is software that allows you to measure the social performance of content. Their page has a slightly different approach than most landing pages—they’re trying to encourage the user to enter a keyword or domain into the search field, which runs their software and presents them with a list of useful results. This provides an instant demonstration of their software, and is a great way to convince the prospect to sign up for a free trial.
Other great features of this page is the persuasive headline, the screenshots of their software, social proof from some of the biggest companies in the world, and a handful of excellent testimonials.
The Pro Lounge
This landing page is designed to promote newsletter subscriptions. The copy is designed to make the newsletter feel important and exclusive, and to provide you with information that few other people would receive. It’s a straightforward design that doesn’t need much else, though might benefit from a little social proof further down. The form submit button could also be a bit brighter.
Taboola is software that helps to promote content. This landing page is promoting a report on readership trends across different industries, and has all of the key ingredients for a high-converting page. As with The Pro Lounge, they’re pushing a message of exclusivity and importance, all wrapped up in a report that you can download for free!
They use multiple CTAs throughout the page, which jump back to the registration form. They also clearly state the benefits of downloading the report, in both bullet and paragraph form.
Strikingly is a web publishing app that allows you to create free websites. They’ve gone for a simple approach with their landing page, which jumps straight to the form itself, with just three fields to get started. Underneath, they briefly describe how easy it is to create a website (which is a daunting task for most people), which persuades the user to take the leap.
Skype needs no introduction. Before Zoom came along, it was the video conferencing app of choice, becoming so popular that it became a verb (“I’ll skype you”).
It remains a major player though, and this landing page is a solid example of good design. The CTA button is nice and bold, and they tell you their most important features directly underneath. The headline is weak though, and could be much improved by including a benefit.
Shopify provides e-commerce software for businesses. This particular landing page is designed for arts and craft businesses. The headline is clear and straightforward: use our software to sell your products online. The text underneath assures them that it contains everything they need, and they include some nice shots of a beautiful online store, which could be theirs if they signed up for a free trial.
One small criticism is the overly wordy “Enter your email address” placeholder in the form field, which could just read “email” and remain clear.
A/B testing your website landing page
A/B testing is a method that tests two versions of something (version A, and version B) against each other. It’s used across a variety of marketing techniques, including print ads, emails, and landing pages. It’s an effective conversion rate optimisation method, and a surefire way to improve your design. Even small improvements in your page’s conversion rate can have big differences to your bottom-line.
In A/B testing, it’s important to test a single variable at a time. If you test two completely different landing pages, with unique headlines, copy, and designs, you won’t understand which exact elements determined the winner. But when you test just one thing, you can say more confidently whether it affected the result.
Some good things to A/B test include:
- The headline and subheading
- Body copy
- The placement of your form
- The placement, colour, and wording of your CTA
Using an A/B testing tool will make this process much easier, as they usually have inbuilt features that allow you to quickly set up the test, and take care of the tricky statistical components for deciding a winner. Optimizely and VWO are two tools worth considering.
How to measure your website landing page’s performance
There’s a single metric that you should be measuring for your landing page: conversions! More specifically, you’ll want to measure the conversion rate for the page, which is the number of visitors divided by the number of people who completed your form. The average landing page conversion rate is thought to be around 4%, but by following the principles and advice in this article, you should be able to easily beat that number.2
You can measure conversions by setting up a goal in Google Analytics, or using CRM software such as HubSpot.
You can also keep an eye on other metrics such as:
- Page views—this tells you effectively you’re marketing the page, as well as its SEO performance (if applicable)
- Sessions by source—this metric tells you where your visitors are coming from
- Average time on page—this shows how compelling your page is, and you should see a positive correlation between this and your conversion rate.
But ultimately, you’ll want to focus on the conversion rate for your page, as it’s the most direct measurement of performance.
Website landing page optimisation and SEO
A word of caution when optimising your landing page for SEO: you may find that it damages your conversion rate, purely from the fact that it adds clutter to the page. There’s a delicate balance to be sought—is the extra organic traffic providing more conversions for you overall? You’ll need a clear answer to this question if the page has been optimised.
Landing pages should only be SEO optimised if it produces clear results. In many cases, you may use SEO-optimised pages to attract organic visitors, and on those optimised pages, include a CTA that links through to a high converting landing page.
Segmentation for your landing page design
Segmentation is another efficient way to improve the conversion rate of your landing page, but it requires a unique landing page design for every one of your customer segments, so can take a lot of work.
For example, if you have two distinct customer segments that you think would respond differently to certain aspects of your landing page, creating unique designs for each of them can be incredibly effective. You might also find that the designs are fairly similar aside from a few key components, which is a lot easier to achieve.
For landing pages, customers can be segmented in a number of ways, such as:
- Traffic source (i.e. Google, a social network, email)
- The keyword they searched for when finding the landing page
Some things that you might change for your landing pages based on their customer segment:
- The headline
- The language and tone of your copy, to create relevant messaging
- The length of your copy. For example, older people might be more inclined to read long-form copy than younger people.
- The type of social proof that you use
For future segmentation, you can also include a select box on your form, asking for information such as their age group, industry, or profession. But keep in mind that every additional field makes the form a little more arduous, and may reduce its conversion rate.
Good job on reaching the end of this mammoth article! You should now have a solid understanding of how to create a high-converting landing page for your business, using a combination of best practices, testing, and measurement.
We hope that this helps you to create killer website landing pages, and drives up your company’s revenue.
- Christo Petrov, 2021, 55+ Mobile Vs Desktop Usage Stats You Should Know in 2021, Techjury
- What is the Average Landing Page Conversion Rate By Industry?, Unbounce