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