Designing effective Landing Pages

Source: IntelligentHQ

his post is the third in my series of posts on landing page optimization. The first two posts covered criteria for landing page teardowns and how to write great copy that converts.

When building effective landing pages, copy and design must go hand in hand. Lack of proper design can render even the most well-researched copy useless. I am not referring to edgy modern designs based on the latest buzzword but user-focused conversion-oriented design that draws users attention to the right pieces of content and helps them understand the page’s narrative.

Building blocks of a landing page

Michael Aagaard laid down the following building blocks of any landing page in his CXL course. While we need the right copy for them, we also need the right design considerations. Here’s what I mean.

Headline

The headline on the page is essentially the unique value proposition of your product. For more on how to craft your unique value proposition, refer to my previous blog post. The headline must stand out and be easy to read.

Visuals

Images, videos and icons help support the copy on the page. Visuals should be relevant to the story you are trying to tell. Avoid using stock photos. Use images that emphasize the copy and confirm the promises the product is making. If selling a saas product, you could also add product screenshots. Even though it results in adding more copy on the page, consider adding captions to your images and videos to explain.

Tip: When using videos, have a visible play button on the video thumbnail and add the length of the video too.

Features & benefits

Features and benefits form the body of the landing page and help to reinforce the users’ motivation and answer any questions they have. Avoid making this section a wall of text. Users should be able to scan the copy and visuals to get the gist.

Credibility

You do not want to distract users from the page’s narrative and have them read lengthy testimonials but at the same time, it is critical to establish credibility. Especially if you are not a Netflix or an Airbnb. So, you want to attract your users attention to the credibility cues on the page but not dwell on them so much.

Call to Action

Call to action or CTA is the primary goal of the page. This is the action that we want users to take. It is critical that the CTA is prominent on the page.

Expectation Manager

As the name suggests, this helps manage expectations and anxieties that the users may have in proceeding. These usually appear as “cancel anytime”, “no commitments”, “no credit card required”, “100% secure” below the CTA. This element plays the role of reassuring the user of next steps but you do not want users to dwell on them.

Design Considerations

Given that there are so many different elements on the page — each serving a different purpose and each requiring varied levels of user’s attention — how do you achieve the perfect balance? This is where design comes in! Design is essentially the string that ties all these elements together into a cohesive narrative.

This graphic illustrates the difference that design makes to your page.

Overlaying design on copy for an effective landing page

Your design should help achieve the following:

  • Attention: Direct users attention to the right content on the page
  • Comprehension: Help the user understand the content

Let’s look at how design helps with each.

Attention

Design plays an extremely important role on the page by guiding the user to find the right information in the right order. Here are some factors to consider.

Size

Size is a great way to make something stand out and grab attention. Bigger elements on a page tend to get more attention than smaller elements. Font size helps differentiate your content i.e. headline in large font and body copy in smaller font size. Here’s a starting point for font sizes for different content:

  • Primary headline: 32–40 px
  • Section header: 20–24 px
  • Bullet points: 16–18 px
  • Body copy: 16 px

For credibility cues, draw the user’s attention with a different font treatment and large quotation marks. It should be skimmable for users to be able to absorb the essence of it.

Similarly, make sure the CTA button is sized to look prominent and easy for the user to click/ tap on.

Space

White spaces on the page provide breathing room and also help focus on important elements on the screen. Crowded pages lead to cognitive overload where users do not know where to focus and may even end up bouncing. This is a good example of a landing page that can do with some space:

Example of lack of white space

So, while we want to add all the necessary information on the landing page, do not cram it all in. Introduce white spaces and go in for a longer page which is easy to parse through. Here is an example from Unbounce.

Use of white spaces on Unbounce landing page

Color & contrast

Color can be used to direct users’ attention to important elements on the page. Figure out for your brand what colors to use. In fact, similar to having different font sizes for different pieces of content, build a color hierarchy for headline, section headlines, primary CTA, secondary CTA, quotes and other elements on your website. This will bring consistency to your pages and make them more scannable.

If overlaying copy on a background image, ensure that copy is not the same color as the background image. You can use dark overlays on images to ensure copy on top is readable.

Reserve contrast for the primary CTA on the page. There is no magic color — red or green — that helps convert better. It is the contrast that makes the difference.

Here is a quick test: Squint your eyes and move your screen a few inches away. You should be able to spot the location of the CTA. If not, use a contrasting color for your CTA button.

Direction

Typically users view a page from left to right and top to bottom, forming an “F” pattern (in the english speaking world at least). If you are just starting out, this would be a good basis for designing your page. Position important pieces of content along the F pattern.

We humans are also attracted to people’s faces in images and have a tendency to follow their gaze. So if using an image with people looking at something, position their gaze to point at something important on the page. You can use other directional cues such as arrows, pointing etc. as well.

Comprehension

Legibility is the most important thing so avoid anything that would make it harder for your users to read the copy. Here are some points to note:

  • Avoid using fonts with feet such as Times and Luminari which make the copy hard to scan.
  • Ensure good line spacing. Extreme line heights which are too small (<0.8 points) or too large (>1.8 points) impede readability.
  • Avoid “light” font styles.

Test out different font size schemes for headline and body using https://type-scale.com to see what font style, size works for you.

It is easy to fall prey to the wall of text in the body of the page while extolling the features and benefits of your product. Here’s how to avoid it:

  • Organise copy in chunks
  • Add headline for sections so users can scan and get the gist
  • Make a bulleted list which is easy to scan and read, where possible
  • Have no more than 3–4 lines per paragraph
  • Switch alignment of copy chunks (for example, headspace)
  • Add necessary visuals to explain the copy better

This series of posts provides a good starting point for building your landing pages. But remember a good landing page has to serve a purpose — it must improve your user’s understanding of your product and move them closer to conversion. Monitor the performance of the page using web analytics, heat maps and surveys to see where you need to iterate and improve.

Don’t be lazy — test, iterate, repeat!

On the path to learning all things insights and optimization (linkedin.com/in/bithikamehra) | Foodie | Environmentalist| Loves to travel | Player of a few riffs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store