top of page
Upgrade to Get Unlimited Access
($10 One Off Payment)

How to Design Effective Landing Pages

Many people may confused landing page with website home page. The main difference is that all landing pages have a strong intention - "convert". Convert viewers into buyers, or let me restate it straightforwardly, convert traffic into money. Landing page is a standalone page built for marketing campaigns. Due to this nature, it needs to deliver information more effectively and grab viewers attention more efficiently, compared to other kinds of website pages. So how can we design a landing page that converts better?

Four Essential Elements on a Landing Page

1. Strong CTA

Needless to say, call to action is the most important element of a landing page. Call to action is usually in a form of linked texts or clickable buttons that encourage users to take action. Design of the CTA largely impacts the conversion rate and bounce rate of a landing page. So how can we make a CTA more convincible?

Firstly, what the CTA says is crucial. It needs to create a strong desire for the audience to take actions. To achieve maximum conversion, the text should be aligned with the business goal.

For example, "buy now", "order now" are very common for e-commerce or online shops. This is because they directly link to the final stage the conversion funnel, which is to let the users make the purchase. On the other hand, service-based businesses would use"book now", "contact us" or "join us" to prompt users to get involved. This is because sometimes your potential clients simply want a quicker way to ask for know more information. Some digital services such as Shopify, Bluehost or Webflow would use "get started" or "try it for free" to attract users.

Apple Keyboard Landing Page
Apple Keyboard Landing Page
Webflow Landing Page

Generally, there are some underlying principles. 1) Use "now" to create a sense of urgency; 2) Make the texts concise and clear to mitigate any frictions transiting to the next step.

Secondly, how to design CTA is also very important? There are some psychology tricks behind it. Here is an article about how we can use psychology to make more attractive CTAs - "CTA Psychology".

Use contrast to make it pop. Just like this, simply using a different color to display the word "contrast" already creates a visual cue, indicating that it might be clickable. Besides color, they are other ways to bring out the contrast. For instance, bring down the background opacity or apply shadow to the button. This makes the CTA appears to be on the front layer of the page. Another example would be using capital letters. Capital letters are very powerful. I guess we all have the experience of reading messages while those uppercase letters are just like SHOUTING to us.

create contrast by changing background opacity
create contrast by changing background opacity

2. Whitespace

I put whitespace as the second essential element because it is indeed essential! Whitespace or negative space basically means areas on the landing page where no contents are displayed. Even though they may appear to be in color black, we still call it whitespace. Some people think it is a waste of real estate on a website, so they make something like this. But TBH do you know where to look first?

One of the universal design principles is KISS - "keep it simple, stupid" (know more about how we can utilize KISS to make better visualizations). Introducing more whitespace significantly reduces visual clutter and increase visual clarity. If too much information is presented, each piece of information is competing to grab the viewer's attention. When the viewers are overloaded with texts, links, buttons and images, they are much less likely to pick up important messages. This brings us to the second benefit of negative space. It creates a visual hierarchy since whitespace naturally falls into the background layer. Therefore, users' attention is drawn to the CTAs which appear to be floating on the front tier. And you have already known the importance of making CTA pop.

Then let's talk about how to create more whitespace and design a minimal landing page. This is not as easy as it sounds, since deleting existing contents sometimes is even harder than adding new contents. Firstly, ensure that only essential information is included. By "essential" I mean it either effectively offers the solutions that address customers' pain points or demonstrates the business values that are delivered to clients. When it is hard to decide whether to keep or delete, refer back to the KISS principle. Consider whether it is clear and easy to understand for our audience. Secondly, creating more negative space can be achieved by removing some elements to the bottom of the page. For example, non- essential links can be put in the footer. As you can see from image below, Airbnb landing page has done a great job in terms of whitespace. The article "How Airbnb drives users’ actions with their landing page design — a UX analysis" gives an amazing explanation.

Airbnb landing page
Airbnb landing page

3. Social Proof

We need good social proof on a landing page to demonstrate that the products or services we offer are trustworthy. This is the same logic as you are more likely to purchase products with good reviews on Amazon. Social proof can be in various forms, such as ratings, written or video testimonials. Social proof provides a sense of connection when the viewers landed on a web page with no prior knowledge of the business.

Besides, don't forget to include your customers' photos if possible. We, as social creatures, subconsciously gravitate towards landing page presence with people's faces. This is because it adds a human touch to the design and triggers empathy and reassurance (read this article "The Effect of Human Faces in Web Design" if you want to know more).

Testimonial on Webflow landing page
Testimonial on Webflow landing page

4. Description

Don’t forget to actually describe the product or services that you offer. But it is worth noting that not to overdo it, keeping it simple and concise is still the key. Landing page is not the place to put down all details and specifications, rather its main purpose is to showcase and attract audiences. For example, Apple only uses one or two sentences to describe the core values of each product. And then add a CTA "Learn more" that leads to full details.

Images or videos are great ways to demonstrate your products or services since most of us are visual creatures. Both image and video deliver information much more effectively than texts. Most people get overwhelmed when they see huge paragraphs on a website, therefore, use videos as an alternative to telling your stories. Additionally, image is the first thing we notice after landing on a page, hence take the advantage of using beautiful photos to grab users’ eyes and make the website more attractive. Emotions are contagious, hence using smiley faces can create a more pleasant user experience.

Bluehost landing page
Bluehost landing page

261 views0 comments


bottom of page