Landing Page Design: 12 Important Rules with Real Examples

In our previous article on landing pages, we looked at 8 major factors that need to be considered when creating them. At this time, we decided to elaborate on the design of landing pages. Since the design of web pages is inextricably linked to content, we will also examine some points regarding the content of landing pages.

Surely, you know the main purpose of the landing page - to induce a site visitor to take a certain action (for example, buy your product or subscribe to the newsletter). In the implementation of this goal, not the last role is played by high-quality design. He is able to focus the attention of potential customers on your call to action, to make it more visible. In addition, it simplifies the perception of all the information posted on the landing page.

And now, from words - to business. Consider specific rules, following which you can improve the design of your landing page, and, therefore, increase the level of conversion on your website.

1. Take care of the usability of your landing page.

Getting on your landing page, the site visitor should immediately understand:

  • page target
  • action that he must take
  • the benefits your product will bring

If it does not meet these requirements, it can be considered useless. Do not force visitors to your site to wander through the maze of your landing page. Believe me, they will not want to spend their time on it and simply waving you a pen. As a result, your site will increase only the bounce rate, and an increase in the conversion rate will remain an unattainable dream.

Here is an example of a successful landing page, taken from the site FeedMyInbox, which even a schoolboy will deal with:

2. Do not use too much graphics.

Your page to call to action should contain only the necessary graphic elements. Excessive images will only clutter it up, especially if they are located in the “first screen” area. In the upper half of the scroll bar there should be only a logo and a stylized image of the product that you want to sell.

Along with these images, pictures that show the advantages or characteristics of your product are also allowed. Be careful when using icons. In some cases, they will not bring any benefit, but will only distract the attention of potential customers.

Consider the landing page of the Dialogix website, which offers a web service for monitoring social networks:

As you can see, there are no extra graphic elements on the page. It contains only the logo of the program, its screenshot, icons of client companies, as well as the image of a cute bird symbolizing Twitter.

3. Minimize navigation options

The more navigation options you offer your site visitors to your landing page, the more likely they are to use them. Your home page may contain dozens of navigation links, but the landing page should only indicate one direction to potential customers, since it is the initial element of the sales funnel.

If you can’t do without links to other areas of your site, then think about how to reduce the likelihood that site visitors will click on them. For example, you can leave only the top navigation bar and completely remove some links. Navigation links are required only if the site visitors have a serious reason to click on them. If you believe that potential customers are unlikely to look for such links, then you can not include them.

The creators of the eWedding application, with which you can create your own website dedicated to your wedding, have adopted this rule. On the landing page of their site, only links related to the product itself (for example, application characteristics or topic variations) are visible. And the other links are located in a secluded place: at the very bottom of the page. In addition, they are printed in rather small print:

4. Use modal windows

When posting information or some links that may be of interest to visitors to your site, try using modal windows instead of redirecting them to a new page. Modal windows can provide potential customers with any information without interrupting the conversion funnel.

Modal windows and tooltips may contain frequently asked questions, lists of product features, screenshots, etc. Use them at the first convenient opportunity, so as not to suspend the process of turning site visitors into real buyers.

For example, on the sale page of the Capo program that creates spectrograms of music files, a modal window is used in the form of a screenshot of its interface:

5. Avoid red in the call-to-action button.

In many cultures, particularly in the United States and European countries, red has a negative connotation. In their picture of the world, red is the color of aggression, danger, and a stoplight. Even in the most positive connotations (passion and love), shades of red cause people anxiety. From here a conclusion: if your site is intended for the European and American audience, refuse use of a red background in the call-to-action button. Perhaps, in some cases, it will get away with you, but it's not worth the risk. Better use calmer colors, such as blue or green (as is done on the Harvest time planning application):

6. Make the call to action button visible.

So, we found out that the red background is not the best solution for drawing attention to the call-to-action button (see the previous paragraph). But there is another extreme - the use of too pale colors or small print, because of which it is literally lost on your landing page. The call-to-action button should be a bright spot on your landing page so that site visitors can notice it even with the naked eye.

The degree of "visibility" of the call-to-action button can be assessed using a simple visual test: stand back about a meter and a half from the computer screen and honestly answer the question: "Is the call-to-eye button clear in the eye?" If you can’t say yes with confidence, then your call-to-action button needs work.

You may need to change its color so that it contrasts with the background of the page itself, or slightly increase the font size. Some careless web designers even manage to place the CTA-button outside the "first screen", and then they are still surprised why the website conversion rates do not get off the ground. In order not to repeat their mistakes, carefully consider all aspects of the call-to-action button.

Take an example from the designers of the site Plnnr, which makes individual excursions to different cities. Their yellow button, located on a gray background, is simply impossible not to notice!

7. Specify only information of interest to site visitors.

Give your website visitors only the information they need to make a decision. Do not overload their heads with too much information. Your goal is to turn potential customers into real buyers with the minimum amount of information.

Think about what information your potential customers may be interested in, and express it using accurate and understandable words. Your text should be short and touch the point. Modern consumers really value their time, so they will immediately want to know if your offer meets their needs. If they fail to do this in seconds, they will leave your site without hesitation.

In addition, the text presented on the landing page should have a clear structure (title, subtitle, bulleted lists). Subject to this condition, visitors to the site will be able to skim through the entire page and select only the information of interest.

Take a look at the landing page of the online text editor TitanPad. As you can see, it contains only the necessary information (application functions and a clear call to action):

8. Do not request too much information.

When creating a subscription form, try to minimize the information that you request from visitors to your site. In most cases, it’s enough just to ask them for an email address. If you need other personal data of your potential customers, for example, a mobile phone number, you should explain why you are requesting this information.

Again, this is necessary so that visitors to your site have less reason to leave it. After all, almost every person has doubts about how you will use his personal data. What if you start to fill up his email box with spam? Or will you send him a text message, cluttering his mobile phone with unnecessary information?

Any additional information that you ask the site visitors is another obstacle to becoming your customers. And the more obstacles in their path, the higher the likelihood that they will not reach their final destination.

Fortunately, many web developers are aware of this simple truth and try not to elicit extra information from potential customers. On some sites, they do not request any personal data at all: you simply register and continue your work. Take, for example, the blog. All that is required of you is to come up with the name of your page and a password, and you can immediately start creating a post:

9. Do not ask c site visitors all at once.

Imagine that a potential customer comes to your site and immediately sees a huge bright button calling for a certain product to buy. What will be his reaction? At best, he will have a number of questions, such as: "What do they suggest I buy?" or "How much does this product cost?". And at worst - he will immediately close your landing page, thinking that they want to shove a useless thing without even asking if he needs it.

Therefore, do not immediately start talking about buying, if you do not want to scare your customers. Split the purchase process into 2–3 steps so that they learn the necessary information before making a final decision. Otherwise, they will get the impression that you are imposing your product on them.

The call-to-action button should contain more neutral phrases, for example, "View tariff plans and prices" or "Learn more." They contain less forced subtext than in Buy Now or Subscribe expressions. In addition, thanks to them, site visitors understand what they should expect in the next step.

The developers of the VaultPress plugin designed to support WordPress sites have successfully applied this rule in practice:

10. Aim for a simple and uncluttered design.

All landings have one specific goal: to encourage site visitors to perform a specific action. If certain design elements do not contribute to the implementation of this task, you can safely get rid of them.

This does not mean that your landing page should be half empty: you just have to determine which components are relevant and which are not. If you are confident that they will increase customer confidence in your sales call, help them better understand your product and, in general, improve their overall impressions of your company, the conclusion is obvious: these elements must be present on your landing page.

Pay attention to the landing page of the application Things 2 for iPhone:

As you can see, it is made simply and with taste. At the same time, it contains all the necessary elements: a description of the application, its screenshots and a call to action ("Go to the App Store").

11. Highlight better deals.

If your landing page contains several calls to action (for example, tables with different tariff plans), you can prompt visitors to your site the most profitable or popular option using graphic tools. For example, you can highlight the corresponding sentence in the frame or make its font larger.

You should not automatically highlight the most expensive option, otherwise your website visitors will think that you are doing it on purpose to make them fork. Most companies focus potential customers on an intermediate tariff plan, which contains all the necessary options and at the same time has a reasonable price.

See how the designers of the Ning website, offering an application for creating their own social platform, did this:

As you can see, they have chosen a darker background for the Performancé tariff plan, which belongs to the middle price category. In addition, it is located in the center of the screen - the most visible area of ​​the page. Pay attention to the Popular Choice icon, indicating the popularity of this tariff plan.

12. Report on the benefits of your product.

The main question that interests visitors to your site: "What benefits will I get from this product?" It is not enough to list its general characteristics and functions - you must indicate how it can help them in real life. First of all, you yourself must be confident in the value of your product in order to convey this idea to your potential customers with the help of a bright headline, clear text and optimal content structure on the landing page.

In general, do not hesitate to praise your product according to merit, as is done, for example, by the developers of the Skylight application:

Do not forget to test the landing pages

So, we analyzed a dozen recommendations for the design of landing pages and provided them with real examples to follow. We hope that they will inspire you to further improve their landing pages.

However, do not forget about another important stage in the creation of landing pages - A / B-testing. Any changes that you make to the design of your landing, one way or another, will lead to certain results. They can raise or lower your site’s conversion rate or even keep it at the same level. It all depends on the specific situation.

Hence the conclusion: do not be lazy to conduct A / B tests before stopping on a specific version of the landing page. Take note of the results of these studies and select the option that is ahead of all others in terms of conversion, even if, at first glance, it seemed inconspicuous to you.

Watch the video: Why Flat Design Rules Plus: New Templates! (December 2019).


Leave Your Comment