Not just a pretty logo: Tips you should follow to create a compelling Landing Page

Filip Wilczek
SwingDev Insights
Published in
7 min readSep 6, 2018

If you want to establish your product’s online presence there is no better way to do it than creating a great website. And if you want to generate leads and sales you might be interested in a very specific type of website: the landing page. Unlike the regular website that promotes the whole brand and usually has a lot of parts (like “About Us” section), the one-page format of LP helps focus only on one product — it’s designed to encourage users to take clear-cut action. There are two types of landing pages, defined by their goal:

1. To create Leads
The purpose of it is to capture all relevant data about a potential customer, for example, their email address.

2. To get Clicks
This one is about getting the users to click through your website, and so, step by step, get them to your conversion goal.

In order to create a compelling landing page, one has to know its anatomy. The structure of every site divides into two parts: Above and Below the Fold.

Above the Fold

Most users will use any excuse to go back from your website to viewing cat memes, so be direct and concise. If you want to grab someone’s attention you have to get rid of all the possible distractions and use bold visual language. Single most important part of any landing page is the above the fold or the hero section — this is everything what visitors first see when they open the website. If they don’t like it, chances are they won’t stay to scroll down through the rest of your content. There are four elements you can find on almost every landing page hero section:

  • A headline, the main title of the whole landing page. Often the only thing people actually read, so it has to be engaging
  • A short subheader that adds necessary information to the headline
  • A hero image, video or animation that supports visually your message
  • A call to action that engages visitors to interact with your product, either by completing a sale or by simply furthering their awareness about it.

Composing great landing page is as much about good copywriting as it is about graphic design. A good headline will be relevant and specific enough to differentiate from competition, it’s better to be clear than to be clever. It shouldn’t just tell what you sell, but why someone might want to actually buy it, so make it about the customer and not about yourself. Lastly, don’t be afraid to make it properly big, it’s one the most important elements so it definitely should stand out.

“On the average, five times as many people read the headline as the body copy. When you have written your headline, you have spent 80 cents out of your dollar.”
D. Ogilvy

The main function of a headline is to generate curiosity, while subheader gives more details to keep visitors engaged. They should complete each other so that the product’s value is clear.

Hero image is basically the first thing most people will notice, as humans rely mostly on sight, hence it has to create a strong impression. A well-crafted landing page will always have a strong visual, so try to avoid using cliche stock photos or low-quality materials. That way you won’t look cheap and unprofessional.

Above the fold section from the kid.io website created by Kevin Mercier, notice how nicely balanced, yet distinct all the elements are http://kevinmercier.com/#/?_k=sgrysq https://kid.io/

Call to action (often abbreviated to CTA) is essential for interaction with potential customers so be sure to really think this bit though. It usually takes the form of a button located below the headline. Good button copy should be “invisible” so that the action feels intuitive, also if it sounds like a weird thing to say it’s probably not very good. When designing this bit be sure to include action — common good practice is to start with a verb. Be careful with words though, don’t use vague words that bear no value to the customers (like “Submit”) or force them to commit too early (“Learn more” is usually better than “Buy now!”). As it is one of the most important elements of your whole website it has to be visually distinct; you should never make visitors look for it, so feel free to repeat it throughout the whole site.

Below the Fold

After you sell the potential customers a brilliant vision of your product with catchy headline and a nice picture, you have to provide them with more knowledge about whatever you are selling. Try to look at your website from potential buyer’s angle, ask yourself: “If I were the one to buy this thing, what would I want to know next?” Never assume anybody knows anything about your product before you provide them with this information. If you sell something complex or unparalleled most people could use some explaining about how it works and what it exactly does. If it is similar to other products explain how it is better and different. It is important to keep up the momentum from above the fold, so present everything in a brief manner. There are many element that you can use depending on the purpose, couple of the most popular elements that can be met below the fold are:

  • Benefits and features
  • How it works
  • Proof
  • Use cases
  • FAQs
  • Pricing table
  • Forms
  • Footer

Explain what you sell

If you sell your product to the well-informed audience you usually have to list all the most important features. A professional will not be interested in the benefits of using pro gear, but rather in details and how it compares to the competition.

Listing benefits serves the purpose of showing why anybody would want to buy your product; where features tell, benefits sell. They help turn blank data that don’t tell outsiders much, into real life profit, by answering the “so what?” question. For example: if something uses less energy than competition’s product how much money someone can save from switching.

To make the product seem coherent and less complex provide insight into how it works. Most pages offer one of two ways of answering this question. The first school of thought is to show how accessible is the product, e.g. get product A in 3 easy steps: download, register, enjoy! The other method is to remove doubt in the new product by showing how it works and all the mechanisms behind it.

Delightful “How it works” section from http://flyingpinata.co/ crafted by Bakken & Bæck

When it comes to providing proof, most people think of social proofs (like testimonials or number of downloads) that rely on the bandwagon effect. But going with the obvious method has its limitations. If you make any sort of claim it’s good practice to show the evidence next to it. Do not to wait till the very end of the page, because doubts tend to amass, e.g. if you state that “it’s easy to use” provide a video demonstration next to it so everyone can see that it’s true.

Season your Landing Page with more information

The common element you will find on almost any landing page is a pricing table. Price is an obvious question for most potential customers. Good pricing table should be simple and contain the comparison of different options. It also can have suggestions which plan fits best different customer types. Call to action is an absolute necessity here. Some companies put their pricing on a separate page, as it is easier to share this information with anyone that requests it, even though it makes people leave the page.

Neatly done pricing tool from https://monograph.io/ made by Dixon & Moe https://dixonandmoe.com/

Most landing pages consist of a form that gathers user’s information. Rule of thumb is that the shorter and more visible form the better. Make this part as legible as possible, show which fields are optional, give each of them a label above, provide input validation that doesn’t confuse users and avoid dull copy whenever possible.

Footer is where external links are more acceptable than anywhere else on your landing page (since someone already took the effort to scroll all the way down). If your goal is to maximise direct conversion rate you can drop the footer, though if it is also your homepage it might not be a good idea, as the users could get lost without any sort of navigation.

What about my brand?

This might be surprising coming from a graphic designer (most designers might not want to admit it, this is our work after all), but your logo is not that important. Most people skim through the part of the website where the logo is located to more eye-catching elements located below, like the headline. A good logo is important for brand awareness, but it doesn’t sell your product. It is one of many elements of branding, alongside things like colors, imagery, and your sense of direction for the brand. Way more important is the way you want to communicate with people, everything else derives from that.

Iteration is key

There is no recipe for a perfect landing page that will work 100% times, that’s why you should test everything, and never be afraid to redesign your site according to the feedback you get. After all, your landing page is just a mean of communication between you and potential clients. Once you learn the basics, feel free to experiment. Human touch is important — it makes the website come alive and distinguish it from the competition. Many of the best pages on the web don’t follow those rules word for word. For detailed pattern ideas for all the elements listed above, I suggest reading The Landing Page Cookbook. Brilliant book I used for writing this article and furthering my design expertise.

--

--

Filip Wilczek
SwingDev Insights

Full-time product designer, part-time illustrator, and occasional writer