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.
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.
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.
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.
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.
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.
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.
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 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.
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:
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.
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.
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.
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!