see case
read article
Blog
How to make a converting landing page
How to make a converting landing page

How to make a converting landing page

5 mins
Published on
22 Dec
2023
Marketing
Contributors
Nick Rybak
Nick Rybak
Founder, Product Designer
Subscribe to newsletter
By clicking subscribe you're confirming that you agree with our Privacy Policy statement
Congratulations!
You're in! Expect awesome updates in your inbox
Some Error appears

One doesn’t need to be a professional copywriter to showcase your brand. You should present the value of your product to your customers and convince them to take targeted actions.

In this article, we will provide a short step-by-step guide on how to make a good landing page. As an example, you’ll find some free landing page templates at the end.

What is a landing page?

To begin with, it is worth understanding the concept of landing. A landing page is a web page (website) where the site visitors come from search engines, such as Google, Bing, and Yahoo. As a rule, the main task of a landing page is to inform the user (potential customer) about your services or products and convert the visit into a real deal. It would help if you also remembered that your goals might not coincide with your potential customer goals. Mind that each user has their own need, and we should try to help them fit the need to make a positive user experience.

How to understand that the landing page is good

What are the criteria for a good landing? Where should you pay more attention? 

Here’s a list of the criteria we use:

Adaptability

According to the latest research, there are already more users of mobile devices than desktop ones. Every website should now work well and look good on desktop and mobile devices. It may even be better to start design and development from the mobile version. 

Download speed

Website loading speed is critical for both SEO and user experience. Imagine a situation when you have a low connection speed and need to open a website on your mobile device. It is doubtful that you will wait an extra minute for the website to load. You will probably go to the next one from the SERPs list.

User-friendly design

The design of your site must be simple and user-friendly. A user will not leave the site in the first ten seconds if the site provides intuitive behavior and eye-catching visuals.

A clear message

Your landing page visitor should understand what this page is about from the first words—no vague headlines with an unclear message. Your headings and graphics should scream about the very essence of your site.

CTA

Last but not least. A call to action is essential because it is the goal of your customers’ path. If you want to sell your product, focus your landing page on the “buy” button. It should look, read, and mean the same thing throughout the page because that’s the target action of your landing page.

Structure of a good landing page

We figured out what a good landing is, so let’s define its structure:

Hero section

According to statistics, more than 60% of landing page visitors do not scroll the website below the first screen. Therefore, we should write a good and readable title so that the user immediately understands where he got to and what this site is about. It is also necessary to place a CTA on the first screen to attract the user’s attention and invite him to perform the target action on the website (for example, filling out a feedback form, registering, buying). Don’t forget about graphics because graphics are the most attractive type of content for people, and the picture on your main screen will be the first thing they notice, so they should convey the essence of your site as best as possible.

Hero section design example
Example of Hero Section from Foursets' Dribbble Account

{{form}}

Social proof

When we are done with the main screen, we can proceed next. Please note that if the user stayed on the website and scrolled the page down but didn’t complete the target action from the main screen, he was interested, but he didn’t fully understand the core of the landing page or want to study your product more. As a rule, landing page owners want to gain some trust from the user and place a block with the logos of their eminent clients. This is the so-called social proof, which, as it were, tells the user that if this well-known company has used our services, then you can too.

Social proof section design example
Example of Social Proof from Zeus UI Web kit

Features

Let’s talk a little more about the product with the help of one or two blocks about its competitive advantages. Do not forget that you need not only to praise your product or service but also to get into the pain points of your target audience. For example, if you sell vegetables with home delivery, you know that it is vital for your clients to have their vegetables delivered regularly, fresh, and at the right time. Thus, you will describe three-time delivery on your website. You will also highlight that your vegetables are fresh, delivered on time, and don’t go bad.

Features section design example
Example of Features section from Zeus UI

Testimonials

Next, we will need more detailed social proof—for example, testimonials from your customers. The essential thing in reviews is that they are real and evoke empathy. Include links to your clients’ companies’ social networks or websites in the reviews. It will show that these are real people and you can write them and ask for their opinion if you like.

Testimonials section design example
Example of Testimonials section from Zeus UI

CTA

You can place your CTA several times on your landing page. The visitor may already want to become your client or find out more. Again, we need a clear call to action—for example, registration, purchase, transition to another page, etc.

CTA section design example
Example of CTA section from Zeus UI

FAQ

There’s a section with frequently asked questions for those who have not yet converted to customers. Note that you are handling typical objections from your audience with this section. Think about the real questions your potential customers might have and answer them.

FAQ section design example
Example of FAQ section from Zeus UI

Footer

These blocks will be enough to generate interest in your service or product or even convert a user into a client. Therefore, at the bottom, you should place a footer with links to other website pages (if any), your contacts, and social networks. A visitor of your landing page who is not yet ready to use the services can contact you or go to another page for a more detailed study.

Footer section design example
Example of Footer section from Zeus UI

Conclusion

Additionally, it’s worth mentioning that people take 80% of information visually and don’t like to read texts. It would help if you tried to display information simple and concisely by using graphics for this - pictures, videos, graphs, and illustrations. Don’t forget about contrast rules to draw attention to specific elements (e.g., CTA). And do not forget that to convert a visitor into a client successfully, you should fit the need of your potential customers. Try to interest and help them achieve the goals that led them to your site.

Bonus

We will provide several free landing page templates for Figma for those who finished reading this article. Download the templates.

Subscribe to our mailing list to be notified of new blog posts and other free resources.

Wanna make project ?

Fill out the form or
book a call
fill out the form
Budget
Lead source
Congratulations!
You're in! Expect awesome updates in your inbox
Some Error appears

Sign up for our newsletter

Sign up and get a lot of Figma material absolutely for FREE

By clicking subscribe you're confirming that you agree with our Privacy Policy statement
Congratulations!
You're in! Expect awesome updates in your inbox
Some Error appears