Let's chat

01158 242 212

Get in touch with our team


9 min read

3 steps to designing a successful landing page

This article was updated on: 07.02.2022

Landing pages are arguably one of the most important components of lead generation, yet most companies don’t use them enough — or at all.

For the majority of companies, the lion’s share of attention is towards the homepage, which is perfectly understandable as it is essentially your ‘front door’, but from a statistical point of view, does it drive your conversions?

Surprisingly, the average conversion rate for a website is between 1% and 3%, which means it’s only converting a fraction of site traffic. This is a huge contrast when compared with landing pages however, which on average have a 5-15% conversion rate!

This jump isn’t down to luck, digital marketers can fine-tune a users journey through channels such as email marketing, social media and pay-per-click (PPC) advertising to make sure that when users get to a landing page tailored to their search, they are given what they are looking for and reasons why they should stay.

So how do we get users to convert? there is no exact formula, but there are some best practices to increase your chances of making a successful landing page.

1. Understand your users & what they want

The first hurdle, and often the most distracting step, is spending all your time creating a landing page that looks the part, but doesn’t take everything other than a great design into consideration. Don’t make this mistake, a landing page isn’t there to get visitors, you’ve got to ensure you give users a good reason to stay and engage with your page.

It may seem obvious, but we need to know where the user has come from, and their intentions, to ensure we stand a better chance of getting them to convert. Start by asking these questions below:

  • Where did my visitor come from? Social media? Advertising? Tailor your page to suit the channel your user has come in from, it’s important to meet visitors’ expectations when they land on your pages.
  • What types of visitors do I receive from this traffic source? Will your landing page be their first exposure to your business or are they familiar with your brand? Do you know anything about their demographics? Understanding the visitors and what they know about your business will help you decide what pieces of content to include.
  • What are they looking for? Why are you targeting them in the first place? What have they shown interest in and what answers are they looking for if they get to your page? Making sure your page content is relevant gives your users an instant reason to stick around.

2. Keep your design and layout simple

A good landing page design is attractive and minimal, presenting information in a relaxed and easy to understand way. To avoid distracting people with redundant elements, use a simple layout with plenty of white space that keeps people focused on your product/offer and call to action.

If you can’t justify why something should be on the landing page, then maybe you should reconsider it. Overcrowding your landing page with content for the sake of it is a risk. Something like navigation links or related products could encourage the user to leave the page, and therefore not convert.

TIP – Another advantage of less content is load time, slow page speed can have a detrimental effect on your landing page, compromising revenue, conversions and the user experience.

There are of course, some essential elements to a landing page you should always include, which are:

  • A powerful headline The headline should tell the reader what the product or service is all about. It should be short, to the point, and compel the user to stay.
  • A subheadline to compliment the headline – If the headline grabs the users attention, then the subheadline should make them to stay. It should take the opportunity to go into more detail about the offer at hand.
  • A small paragraph to further promote the offer – This is a great opportunity to elaborate what’s on offer in a nutshell. Bullet Points or statistical data is a bonus.
  • At least one supporting image or video – Visual content is an essential component of landing pages. The brain processes images 60,000 times faster than text, so users will be affected by the images on your landing page instantly. Focus on high-quality, relevant visuals that compliment what you are selling.
  • Supporting proof elements – Sometimes you need evidence to support your case, testimonials, customer logos, or security badges can help build trust and encourage users to convert.
  • A form and/or powerful CTA – This is the most obvious element as it captures the conversion, but make sure it is simple and clear! Limit the information that you need from the user to make leaving a few details simple.
  • Methods of contact – Having a phone number or address can help clarify that your company is genuine. If a user is hesitant about converting, having a point of contact can ensure that users can choose to get in touch. Don’t overdo it though, links to social media accounts could distract the user away from converting!

3. Visual hierarchy & layout

A clear and obvious visual hierarchy will ensure you make it obvious where the user should look, and in what order. Combine this with a strategic layout, and the user should be able to digest the information on the page without struggling to understand what the offer is for them.


By going through steps 1 & 2, you should start to build an idea of how you think you should structure your page and the content that will go in it, especially when considering what the user is looking for.

Studies show that when a user lands on your website, their eye path starts from the upper left corner, and moves on from there. According to this layout study by Eyequant, these areas on a page get the most attention:

Taking this into account, it would make sense to assume that positioning your headline and subheadline (that addresses the proposition/sale) in the top left section of your page in a clear and readable font should get you off to a good start. Of course, there can be exceptions, but use this as a starting point and test from there.

Another study that further supports a predictive eye movement is the Gutenberg Diagram, otherwise known as the ‘Z pattern’.

The Gutenberg diagram divides a page design into four areas: the primary optical area at the top left, the terminal area at the bottom right, the strong fallow area at the top right, and the weak fallow area at the bottom left. According to the diagram, Western readers naturally begin at the primary optical area and move across and down the display medium in a series of sweeps to the terminal area. For example, a layout following the Gutenberg diagram would place key elements at the top left (headline), middle ( form or image), and bottom right (call to action). Again, it’s important to consider this as only a guide for predictive eye movement and not a guarantee, as we can dictate where users look using visual hierarchy.

Visual hierarchy

When done well, landing pages can guide readers to various points of a page through a visual hierarchy, each step building on the last to complete a strong sales message. Something as simple as a font weight on an irrelevant element could distract the user, and upset in the balance of what order we are trying to present the information.

It may seem obvious, but using a light font weight for your headline and a bold one for your subheadline may disrupt the balance of which one is read first, potentially causing a domino effect to your overall design & message.

Consider using these design principles to assert your visual hierarchy and reduce complexity in your landing page designs:

  • Direction – Direction can be used to guide visitors to the conversion goal. The introduction of arrows or signage will help show where you want users to go, even if it isn’t very subtle.
  • Affordance – Affordances provide strong clues to the operations of things. For example, a button that appears raised from the surrounding surface seems real and encourages clicking.
  • Contrast – Contrast is a simple and effective way to present something in stark contrast to its surroundings. For example, using opposing colours such as a bright orange button in a monochromatic blue scenario will always get attention.
  • Nesting – Nesting is a term often used when formatting bullet lists in documents. ‘Nesting’ can add some clarity, reduce time and apply emphasis through interruption by adding some hierarchy by way of indentation.
  • Highlighting – Highlighting is an example of selective attention, whereby readers are able to ignore the surrounding text and just focus on the “highlighted” words. Something as simple as a different font colour, background or font weight can be a great way to highlight something important in a large amount of text.
  • Space – Space lets your page elements breathe. It makes your landing page easy to read, and can have a calming effect for visitors. Isolating an element can be a good way to draw attention to it.
  • Distraction – If there are too many things happening on your page, the chances of your visitors seeing what you want them to see is diminished in direct proportion to the number of distractions. As mentioned previously, less is more.
  • Consistency – Consistency helps define and further the familiar, creating understanding and context. This is essential to creating PPC landing pages, as consistency from the advert all the way to the conversion is paramount to create trust through design & content. Something as simple as a change to the font somewhere in this process can create disruption.
  • Overlapping – Overlapping can be used to connect one element to another. In terms of marketing, this is most commonly used for price- related information (like a sale price hovering over a product) and graphical highlighting (zooming in on a product screenshot).
  • Encapsulation –Encapsulation provides instant separation – and isolation – of a group of elements from their surroundings. Encapsulation creates an immediate sense of importance. For example, wrapping a form or bullet points in a different coloured box to the rest of the page creates an immediate sense of importance.

4. Bonus – next steps

Dynamic text replacement

A dynamic landing page displays different messages to different users, depending on key variables such as location or keywords.

The reasons to consider using dynamic landing pages is the potential to increase your conversion rates by making your content more relevant for the user. The idea is that – instead of arriving on a normal landing page, probably built for multiple campaigns with a generic set of keywords to cater for all search terms – the page will be customised to be even more relevant to the user’s individual needs.

For example, if a user has searched for “dog walker” – a dynamic landing page would automatically change based on different factors such as the user’s location, e.g. “dog walkers in Nottingham”.

Specific customisation can be highly effective for driving conversions – so consider using it in your landing pages to answer yours users questions faster!


Of course, everything above should give you a lot to think about, but the final thing to remember is the most important part of impr oving your landing page is testing. An effective landing page simply cannot be created without an in depth amount of testing. Testing results are essential for seeing what your landing page is doing right, and what it is doing wrong. Test, test, and test some more!

Looking for help with your landing page?

If you are Looking to get your first landing page or need help improving your current one, then get in touch with us here