How a beginner can create a high-quality landing page on their own: a step-by-step guide. Four required home screen blocks

Which are created to sell one product and service.

To do this, it is important to present information in such a way as to transform ordinary visitors site into buyers. But before that, you should understand what the basic elements of a landing page are. The design of the site and, in fact, the articles are aimed at attracting attention and converting visitors into future clients. When creating a landing page, you need to take into account that a correctly selected picture and well-written text.

Before you start creating, you should think carefully about the concept of the site. Not only the presentation of your product, but also how it will be presented, why it should be interesting to people.

For example, you already have a business idea, but you have not yet attempted to promote it. First, look at your competitors' websites to understand exactly how you will have to present your product to make it look better compared to them. Analyze their information yourself and highlight for yourself what is happening in your business, get new ideas. This way you will understand how to make a landing page layout.

Where to make a landing page prototype?

You can turn to specialists who have been involved in similar matters for a long time, or you can come up with everything yourself. First, try to present everything in a draft and only then move on to creating a landing page website. And over time, you yourself will begin to understand what is effective and what should be changed or removed.

The rules of a sales landing page state that a clear product offer must be created. so that the visitor wants to purchase the products himself, and so that he has no questions about what exactly is being offered to him. That is, this offer must be clearly formulated and extremely clear.

This will help the potential buyer navigate the site, not only in terms of prices, but also the relevance of the product. Basically, a landing page exists by mixing copywriting and infographics. The landing page, one might say, should replace the manager, so that in the end, when ordering or contacting an employee, the person already knows the information he needs and only clarifies minor details or simply confirms his actions.

This kind of presentation of the site is very much appreciated. For example, people who prefer systematization and ease of order processing to communication.

Landing page website creation

What else should you consider when creating a landing page?

80% of what a person sees and 20% of what he reads are better perceived. So you should also choose the right design and make small texts. View examples of other pages to know. Comparison tables are very helpful.
In the modern world, there is an unlimited number of different goods and services, and in most cases, someone is already doing the same thing as you. Therefore, you need to present your products in the best possible light. If you know exactly what your advantage is, don't be afraid to show it! Make different infographics and tables with your data and information from other companies.

Of course, you shouldn’t forget about the title - one of the important things when creating a landing page. The title determines whether a person will go further. And if the name attracted him, he will become interested and continue viewing your page. And there it’s not far from buying. It turns out that the candy wrapper is what attracts us first, and only then do we find out the filling.

How to make the right landing page

Post all important information at the very beginning so that the client understands what he is faced with.

Let me remind you that such sites are created in order to express one direction of the products provided. It's convenient, practical and easy.

It is very important that the visitor navigates the site well and can find answers to the most significant questions. This will improve people's attitude towards the site and increase traffic. Such skills in correctly distributing information throughout the site are important for landing pages.

All of the above are the principles of creating a landing page. They should be taken into account when creating a landing site yourself. Everything comes with experience, so look for new ideas, start, try, and you will understand how to make a good landing page.

Landing Page is a one-page website, a sales page, the purpose of which is to convey the value of your offer to target audience, grab contact details potential client or get the visitor to perform a targeted action. The result is ensured by a well-designed, selling landing page structure.

What is landing in simple words

Difficult? Now let's explain it in a simple way.Scrolling through the page, the user follows a path clearly defined by you (). You introduce him to your offer, then list the benefits, convince him to make a purchase, and finally call him to action.

This page briefly and succinctly conveys what the product is, why it is unique, what its advantages are (or what the company’s advantages are). As a result, the user is asked to fill out a lead form to place an order, download a free sample, etc. Next, the company’s sales department works with the received data, depending on the sales funnel you have built.

The landing page is precisely the beginning of this funnel. It is your first point of contact with the target audience, and it depends only on it whether visitors will be converted into leads or not.

The ideal landing page structure is 8 main screens

Let's start working on the structure of your ideal landing page?

The first screen is the block up to the so-called fold line, what the user sees on the screen immediately after loading your page, without scrolling down yet. At this moment, your main task is to capture his attention and interest him so that he wants to scroll further. The required element on the first screen is . Capacious, short and powerful.

Also on the first screen there may be a subheading that explains the main message that is in the heading.

Often on the first screen you can see the first one - the “Find out more” button, and even a lead form if visitors already know your service, or this is not the first contact with your company.

A striking illustration is a Sberbank landing page dedicated to a personalized scholarship. It is designed for those who already know the company (who doesn’t?). There is a short inviting headline, an intriguing subheading and a CTA button (“Ready to try”), complemented by the promotion logo.

At the top we see the navigation - those who are interested can easily go to the desired side and find out more, without having to scroll through the page for a long time.

After you have intrigued the visitor, you need to show your product in all its glory. Colorful photos will help with this; you can use some unusual techniques in the form of parallax or video.

For example, here is a landing page for an online store of exotic fruits. After the first screen, they immediately demonstrate ready-made sets to choose from:

The product has been shown, now it’s time to convince the visitor that it simply cannot be found better. That is, talk about the advantages – yours or your proposal.

It’s very interesting that this was implemented on the landing page of 7Devs, a development studio mobile applications. Each of the advantages is displayed on a separate screen with an interesting illustration and detailed description.

Block with prices

Of course, having seen the offer and learned about its advantages, the visitor already asks himself the question - how much does it cost? It's time here to tell him about it.

An example is a landing page for a company that produces custom-made caps. On the landing page they offer to purchase a certificate for making such an interesting souvenir. After the demonstration finished works The price for certificates is reported. It describes in detail what is included in each package.

Review block

The opinion of other people is what can finally convince a visitor to trust you with their contact information or place an order. Place your customer reviews in a separate block. This will be powerful social proof that your product is not only good - that others are ordering it.

Remember one thing important rule: the falsity is immediately noticeable. Don't make fake reviews with stock photos. Try how to do this - we told you earlier.

Answers to Frequently Asked Questions (Assuaging Concerns)

Even after all this information, the client may still have concerns. Why is it so expensive/cheap? How will I receive my order? Can I come to the office? And much more. Reassure your visitor and post answers to frequently asked questions. This will help him gain even more trust in you.

For example, this was done on the landing page of a company delivering wine sets to your home:

Advantageous offer (promotion, shortage, expiring)

Additionally, you can stimulate the visitor to quickly complete the target action with the help of an advantageous offer: a bonus, a gift, or discounts. A few more powerful triggers are a limited quantity of goods (shortage - suddenly I don’t have time to buy, everything will be sorted out), and expiring validity (you can turn on a countdown timer).

For example, Tilda offers to buy a course on Internet marketing with a 40% discount.

And LPGenerator offers to take the first lesson for free - and profitable proposition, and processing objections (“what if it doesn’t suit me”) in one block.

Do not forget that after the user has completed the application, it is recommended to redirect him to .

Contacts

The landing page visitor leaves you his contact information for feedback. But at the same time, you must show how you can be found, where you are. The person may want to call and find out the details. But first of all, the presence of contacts indicates that you are a real company and not scammers.

Be sure to include full contact information: telephone, mail, office address. A travel map will also be useful. You can also place widgets or buttons for social networks in the contacts block.

How does the landing page work?

Where are landing pages used? Yes, in almost all niches. Today it is the most popular tool quick sales, and for good reason – as a rule, such a one-page site has an order of magnitude higher conversion rate than a simple one.

When does it make sense to create a Landing Page? First of all, it all depends on the situation, the product and your niche. Before deciding to launch a sales page, you need to conduct a market analysis. But there are already a number of “standard situations” in which a landing page turns out to be an ideal solution:

when you run New Product and want to test a niche;
when you have new line products that are different from the rest;
when you spend promotion, and it must be taken out separately from the site;
when you have everything one product, or the products are seasonal in nature (for example, making souvenirs, flowers in boxes, even window installation services can be promoted using a landing page). The one service (product) – one page scheme works well here. In principle, no more is needed; everything can be successfully packaged in this format.

Landing pages work very well in the information business. Why create a full-fledged website for advertising courses, if you can create a sales page for each course and drive traffic to it? I taught the course, turned off the landing page, and that was it.

And if there is a website, what then?

The website and landing page do not interfere with each other at all. On the Landing Page you can display everything that will not be kept on the site for more than a certain period of time. For example, shares Special offers, some presentations of new products. Making a page on a website and then deleting it makes no sense.

How to promote Landing Page

Where to get traffic from? Since the landing page is one page, and there is not much text component on it, it only works in very exotic niches where there is no competition. mainly flows from or targeted advertising.

Conclusion

It is very important to ensure that the landing page actually converts visitors into clients - after all, this is its main goal. And here a lot depends not only on the content - text and pictures - but also on the structure of the selling page.

By guiding your visitor through your landing page from start to finish, you are guaranteed to convince him of the value of your offer. You intrigued, showed the product/service, listed the advantages. You indicated the price and collected reviews from grateful customers. We handled frequent objections and stirred up interest with a promotion or deficit. Provided contact information to show that you are a real company and not a fake. All this together will work for high conversion of your landing page.

A modern Internet marketing strategy is almost unimaginable without the use of landing pages (Landing Pages), which are increasingly found in advertising campaigns both large brands and representatives of the SMB sector of the Runet.

At our request, especially for users of work-zilla.com, your recommendations on how to create a Landing Page with high conversion voiced by LPgenerator Marketing Director Maxim Ploskonosov. Advice from an expert of this level will certainly be valuable for our customers and performers, because the LPgenerator service is the leading SaaS solution on the Runet for creating and working with landing pages.

In practice, landing pages for sales are most often used to solve the following problems:

First task- receiving contact information or lead (lead, “lead”; the term is ambiguous, meaning both data received from the visitor’s email, name, etc., and the user who left such information). Such landing pages are called lead-generating (Lead Capture Landing Page), the process that occurs on them is lead generation.

The second task is click, transitionor preparing prospects to complete the conversion on another page; This landing page is called a Click-through Landing Page and is part of a conversion path or mini-site.

If the lead page receives data (by the visitor filling out a special interactive web form, the so-called “lead form”), then Click-through landing, on the contrary, provides additional information about the essence of your offer. The final point of conversion on a CTR landing page will be a transition directly to another landing page, where a purchase or lead generation is made.

Autonomous landing pages with a lead form - this is the most popular type of organizing a constant flow of applications to the sales department for subsequent processing.

Selling landing page rules:

1. “One landing page - one offer”

A unique selling proposition (offer) is a set of marketing characteristics that describes your product offered to the market. In other words, an offer is an object that has value in the eyes of the target audience and is provided by you in exchange for money or personal data of a potential client. The essence of the USP is expressed through 4 text elements of any selling landing page: main title; supporting subtitle; text that reinforces the statement; final argument.

Each individual landing page involves one specific offer that the visitor receives to complete the conversion task assigned to him by the web marketer. All elements of the landing page should be focused on solving this problem: logo, main image, text components - title, subtitle, list of benefits, inscription on the interactive call-to-action button (CTA, Call-to-Action).

In practice, this principle works quite simply: the landing page generates a flow of leads for, say, signing up for a photo shoot - and THAT'S ALL! This call to action can be repeated as many times as you like, but there must be only one.

2. Exact match rule

The user reaches the landing page in most cases through advertising (context, media, social and email traffic, etc.). Every impression and every click matters and - more importantly - costs money.

The main title and all text content of your page must match (be relevant) to your advertisement and the keyword of the search query, if we are talking about contextual advertising!

A simple and clear landing page title is your main tool to attract the attention of visitors who have an extremely low “attention threshold” (5-8 seconds). In these few seconds, even the most leisurely user will have time to read the landing page title (at this point, 80% of them stop “researching” the page altogether). That is, the title must contain keyword, corresponding to your USP.

Don't forget the second aspect of the exact match rule: graphic design your landing page should match the design of your advertising banner or email newsletters.

3. Use high quality images and videos

The main means of influencing the target audience remains the image (visualization of the offer) of the product. A product photo or video should clearly demonstrate any of the advantages of your USP or a way to solve the problem of the user for whom your offer exists.

The main heading, subheading and main images of the landing page should not come into logical contradiction with each other.

4. Mention the benefits of the offer (bullets), not the technical characteristics

No need to bore visitors with listings technical characteristics your product or your merits - they are not at all interested.

You must talk about the benefits of your USP, addressing the underlying fears of the target group (“fear of loss”, loss aversion is the strongest incentive to complete the transaction). You can contact the user directly mentioning termination favorable conditions deals (“Only 3 days - 25% discount”) or in a more subtle way, for example: “Save these priceless hours for life - let the machine wash the dishes.”

The list of benefits is indicated by special typographical signs, so-called bullets, hence the slang designation for the benefits of the offer - “bullets”. By and large, there is nothing particularly difficult in creating bulletins: ask yourself what problems your target audience solves with your landing page, and write down the answer to this question.

The only thing you need to firmly remember is that a bad bulletin is based on the function of your product, a good bulletin is based on a benefit or solution to a problem of the potential customer.

5. Use social proof

The best way to strengthen trust in your offer is to place social evidence on your landing page: reviews, “social signals” in social networks (likes, “retweets”, etc.), logos of your reputable partners, etc. The psychological mechanism in this case is simple: signals indicating that other users have already taken advantage of your USP, which made them happy, solved their problems, dispelled their fears, saved their time and money, act as the strongest incentive to perform the conversion action desired by the marketer.

6. The conversion goal is embodied in the call to action (CTA)

If at the time of designing a landing page, the conversion goal for a marketer looks like an abstract, abstract concept, then from the moment the marketing campaign is launched, conversion is embodied in concrete results - income growth, sales, business expansion. Simply put, on an existing landing page, the conversion goal will be: lead, purchase, file/eBook download, registration, newsletter subscription.

For the visitor, the conversion goal is embodied in a specific call-to-action element (CTA element), which can be an independent interactive button (selling CTR landing page) or part of a lead form.

The CTA element is the main converting element of the landing page, because through it the conversion goal for which the landing page was built is achieved: converting a visitor into a lead, a lead into a regular customer.

This means that both components of a call-to-action button are equally important: its design and the call text. But although these elements directly influence conversion, their roles are different: the design draws attention to the CTA element, while the call text responds to main question user: “Why should I press the button?”

Note that the CTA text must clearly correspond to the title of both the landing page and the lead form: if the title reads “Download a unique video course on creating landing pages without knowledge of HTML,” then the call to action should echo it: “Download now!” All those meaningless button names like “Submit” or “Confirm” do not help your conversion rate.

7. Traffic sources

Traffic sources are a combination of all possible marketing channels through which visitors reach your landing page. Landing page traffic can be generated by search engines, media resources, social networks, offline blogs, email, clicking on links from other sites. From the point of view of web analytics, the abstract term “traffic” hides real visitors, who, for ease of analyzing the situation, are perceived as a set digital parameters: number of unique visits per certain period time; number of repeated transitions; failure index value; conversion rate, etc.

From point of view practical application all incoming channels differ in the presence of each own set advantages and disadvantages.

Search traffic with pay-per-click (PPC, contextual advertising) is distinguished by its high conversion efficiency, as it is perfectly targeted by keywords.

Email traffic shows good results - good conversion, but it is focused on “long” marketing strategies and requires the use of special tactics (segmentation of the subscription base, “cultivation” of clients, the so-called Nurturing).

However, none of the above-mentioned traffic sources can be considered in advance obviously hopeless or at least “worse than others” - the final result will depend on the type of USP, the nature of the target group to which the offer is targeted, advertising budget, the quality of landing page optimization for a certain type of traffic, target group segmentation and many more criteria, not the least of which will be the set of skills of a web marketer.

8. Conversion optimization

To evaluate the performance of your landing page, there are objective criteria expressed in numerical values.

The first and most important of them is conversion, also known as Conversion Rate, conversion rate, conversion rate, calculated as the ratio of the number of users who completed a conversion action on the landing page to total number visitors, expressed as a percentage.

The method used to optimize conversion is marketing research known as a split test (A/B test, A/B/n test), which consists of comparing 2 or more variations of the landing page.

The essence of split testing is simple and boils down to the following: visitors for a certain time (before reaching a threshold statistical significance) landing page options are shown alternately in equal proportions. Users are not aware of the existence alternative options landing page. At the end of the test, the marketer selects the landing page option on which the transaction was made. large quantity conversion actions (high conversion achieved, filling out a contact form, for example).

To obtain practically significant test results, you should adhere to set parameters statistical significance:

100 conversion achievements for each option;
1000 unique visitors for each option;
minimum 3 weeks of testing.

The process itself is simple, but when carrying out it, the “error of early data interpretation” should be avoided. You risk letting it happen by noticing initial stage split testing there is a clear advantage of one of the options, and deciding to stop testing there. You must strictly adhere to the significance threshold you set, since the results collected when running a split test and when it ends can differ dramatically, with the latter being the ones that are significant.

According to most experts in conversion optimization (CRO, Conversion Rate Optimization), the landing page elements that have a decisive influence on conversion should be A/B tested first.

Heading. It must be informative, understandable and concise, complying with the exact match rule.

Main image. Replacing the image can bring a dramatic boost in conversions. You can try replacing the photo with a video.

Lead form. Usually they test the number of fields, the location of their names, the presence/absence of the title of the form itself, color, location on the page, the presence and wording of the confidentiality guarantee.

CTA element. Here you need to test the wording of the call to action, the button color, size, position and call font. It's possible that good decision There will be placement of 2 or more identical calls to action on the landing page.

High conversions to you!

Hello, dear readers of the blog site. Today we will talk about such an important thing as landing page , which is very often called a landing page in the bourgeois manner (from the English landing page - landing page). What is it and why is it so important?

Let's dedicate the current article to answering this question, and also consider in detail those points that are very important when creating landing pages, and consider all this on specific examples landing page and the techniques that the best usability experts use to improve the effectiveness of landing pages.

What is a landing page and why is it so important?

Very often, even with proper operation on attracting the right people(target audience) to your website (, etc.) you, as a business owner, will not feel any return on it. It seems that traffic is flowing, and the audience is target, but there are practically no sales or subscriptions (depending on what conversion action you chose as the main task in). Nothing works. What can be wrong?

Most likely, you forgot to think through and prepare landing pages, which are often called landing pages. What it is?

And this is very important point, which can significantly increase conversion (the number of purchases or registrations), because landing pages are designed guide the user to perform the target action as efficiently as possible. If you direct visitors from all advertisements, for example, to the main page of the site, you can catastrophically reduce the conversion and go down the drain.

The term “landing page” itself is derived from the English phrase “landing page”, which in translation means just the target, landing (landing) page. Landing pages are created not just anyhow, but taking into account the psychology of visitors. They must grab you and not let go them until the very moment of purchase (or registration), because it will be extremely difficult to re-attract the visitor.

It's like a hook on fishing gear - it must reliably pick up and confidently hold the fish caught on it until the moment you fix it with a bait. If the hook (laying) is unsuitable or does not exist at all, then all your efforts from baiting, setting bait and other shamanic actions will go to waste. You won't achieve your final goal.

The landing pages themselves are either individual pages an existing website, or one-page websites specially created for this purpose. In fact, once a user gets into it, it’s already quite difficult to get out and he inevitably has to slide into it until he becomes your client. But this is ideal, and we will look at how to realize this ideal using various advertising tricks in the continuation of this publication.

Examples of landing pages

Depending on the goals you pursue, you can divide landing pages (landing pages) into several types:

12 steps to create the perfect landing page

You need to understand that the landing pages to which you will attract users from social networks (or from contextual advertising), must have a number of characteristics and satisfy certain requirements. So how? create perfect landing page paige?

Each landing page should be tailored for only one target (conversion) action - either subscription or sales. There is no need to be greedy, because the user’s attention will be scattered and the likelihood of him leaving will greatly increase (without choosing anything from the proposed options). It’s better to force clients to think and choose as little as possible - the path to the landing page should be straight as an arrow (obvious to him) and without any branches.
Must be present on the landing page call to action(with verbs in the imperative mood - call, buy, receive, come, etc.). Phrases should be short and motivating. For example, “buy now”, “get video course” or “subscribe and receive”.
They also rule bright buttons and arrows, creating an emphasis on them. Buttons in red and yellow shades work well, because they are noticeable and contain a call to action.
Well, arrows, as a rule, are designed to place even more emphasis on the button so that the user’s behavior on the landing page is as predictable as possible.
Sometimes they work very well animated buttons(but in any case, it will be necessary to test the effectiveness of certain elements of the landing page):
If the landing page uses(you can’t do without them on subscription landing pages, but they are also used quite often on salespeople), then make sure that they contain as few fields as possible. Ideally, the form should have only one field (for entering an email address), but for further communication (marketing) you will need to know the username, so two fields are the most common option. More fields can significantly reduce conversion. In addition, adding fields for entering a phone number or address makes users wary and can lead to abandonment of the target action.
In the article about I mentioned that Internet users do not read texts - they view them. And the most important thing in this regard is the title. If it is not there (or it is not highlighted accordingly), then this will greatly reduce the conversion rate. On landing pages Headings must be catchy so that the user is inclined to read further or immediately take a conversion action (subscription, order, call).
Your landing page should not only have calls to action and catchy headlines, but also argumentation of necessity subscription, purchase, order or call. In the case of a subscription page, this could be, for example, a short video with a description and content of the “freebie”, or the same thing is formatted in the form short list(list). In the case of a salesperson, this could also be a video with a review of the product, a list of the services that you offer (including your competitive advantages).
Works very well on landing pages reviews from existing clients, buyers or subscribers (it is better if some contacts of those who left these reviews are indicated so that everything looks believable).
Also works well on landing pages before and after comparisons. This is not applicable for all topics, but in the field of weight loss, cosmetology, fitness and many other niches it can be used with high efficiency. For example, this is what a company providing restaurant services does.
The landing page can be quite long, but when viewing the first screen(this is the area of the page that is visible without scrolling) it should be completely clear to the user what exactly you wanted to tell him.
To stimulate subscribers or buyers of certain products (for example,) you can use the option of additional bonuses that the subscriber or buyer will receive when ordering. When the user is on the verge of making a decision, it is precisely such “buns” that can tip the scales in your favor.
And, of course, it is worth emphasizing that “only here and only for a certain amount of time” the user will have access to all this splendor (subscription, special price for goods, additional set services). What's the best way to do this? That's right, put it timer counting down until hour X, when the given opportunity will be missed. Nothing stimulates a hesitant user to make a decision more than seconds literally running away before our eyes.
It would be a good idea to place a subscription, order or form next to the timer. contact number. This won’t always work, so you need to carry out tests (I’m thinking of writing a series of articles about conducting A/B testing - if you don’t want to miss out, subscribe to the newsletter), and it’s possible that such a simple and obvious way will allow you to increase the conversion of this landing page and more than recoup the money spent on promotion on social networks or contextual advertising.
Users also want to know who exactly is offering them this product, service, video course, etc., so it is necessary indicate information in the landing page about the author, store, company.
Naturally, it would be good to mention merits, achievements, and competitive advantages, but do not over-praise yourself, so as not to cross the line beyond which trust in the published information is already reduced.

Examples of errors that make landing unworkable

In addition to those things that help the landing page work more efficiently, it is worth listing common mistakes when creating landing pages, which can neutralize all the above “ear tricks”, and you will not get the desired result from advertising or promotion in social networks (or context).

Let me remind you once again that almost no one reads on the Internet (at least again open page), namely, views the information. If it turns out to be really worthwhile and requires more detailed study, then it will come to reading (in general, the same as with newspapers). That's why Don’t let your landing page become overloaded with information- this can disorient the user and cause a reaction of rejection even before the moment when he understands what is being said.
The text should be small, as concise as possible and filled with information, not water. A couple of paragraphs “about nothing” will make the user strongly desire to close such a landing page. Small font also doesn’t work well on a landing page. In general, its use is not necessary, because many words are not required to convey the essence.
Don't disappoint the user's expectations. If in an advertisement or in a post on a social network you talked about one thing, but when the user gets to the landing page they see something else, then there is a loss of trust and the conversion rate drops sharply. It is very important to monitor this compliance.

Landing page design actually very important. If it is unfinished, made unprofessionally, or has a repulsive appearance for most users, then even following all the rules described above for creating a good landing page will not save you. If you yourself do not have the necessary skills and taste, or you do not have a designer on staff, then you can use numerous designers or ready-made templates landing page, which will only need to be slightly altered to suit your needs.

Again, determine the best option Testing and analysis of statistics, for example, will help you (often not everything is as obvious as it might seem). This way, you can track the completion of the target action and understand which landing elements contribute to increasing conversion, and which are distracting and need to be changed.

Do you have some more time? Do you want to spend it usefully? Then grab some popcorn, sit back and watch a two-hour master class « Step-by-step algorithm Landing creation Page":

September 12, 2016

An effective landing page is a miracle of engineering, an incredible design project, where there is nothing superfluous and everything is done so that a person can quickly receive useful information and take the action you need. I’ll say right away that there is no universal answer to how to make a 100% successful landing page. You can first try not to repeat the mistakes of others and test, test, test!

Today we will talk about the following issues:

Font size
Accents
Font types and their variety
Line length and layout
Headings
Text block size and layout
Illustrations
Icons and lists
Background and font color
Psychology of color

Few people think that the success of a landing page (we’re not just talking about a landing page) depends not only on the right marketing proposal, accurate targeting of the target audience and the right content, but also on competent design. You only have a few seconds to produce good impression on potential buyer and “hook” him. To be precise - 5 seconds.

What font size is best?

In web design, font size matters more than anywhere else. A person evaluates the degree of convenience only by his feelings and instantly closes the page written in very small letters. He does this because he is confident that he will definitely find the information he needs in an acceptable form. It's stupid to lose a client because he decided not to strain his eyes.

Screen font size is measured in several units: pixels (px), percentage (%) and ems (em). Px is the most famous and oldest unit of measurement, which, unlike % and em, does not allow text to be scaled for reading by various screens, i.e. this is an absolute font size, and the user will not be able to adapt it to his tastes and preferences.

Once upon a time, the standard size for all sites was 12 px, but over time it became clear that it was too small for screens, and it was abandoned in favor of a larger font. Today, a font of at least 14-16 px or its equivalent in em and % is in use.

1 em = 16 px = 100% Times New Roman (serif).

Note that not all fonts are the same size: 16 px Arial is larger than the 16 px Trebuchet version for example.

16px- This optimal size, because the text it types on the screen looks about the same as text printed in a quality book (we don't take pocket formats, etc.). And it's great for people with vision problems, or those over 40 who don't see as well as they did at 20. For example, the text you're reading right now is Arial 16 px. If you print out a piece of paper with a 10 px font and place it next to the screen, you will see that the font sizes will be the same. So my choice is 16 px. Separate, insignificant pieces of text can be set to 14 px. Many people use 14 px as the main font, this is an acceptable option, but if your target audience is over 40 years old, then I would definitely choose 16 px.

In addition, it makes sense to specifically increase the font if you offer the reader a “sheet” - this will reduce eye strain and will not allow the person to give up in the middle of the text. You may have noticed that most e-readers offer more large font than sites.

How to attract attention to headlines?

Headings and subheadings should be clearly different in size and immediately catch the eye: the font should be contrasting with the rest of the text. This is necessary in order to quickly orient the user, show him all the most important things, attract his attention, “hook him in” and force him to stay.

For contrast, feel free to highlight headings in a different font (by the way, they can use serif fonts). Be sure to use a larger font for headings - this will attract additional attention to them.

It is also possible to use capital letters in the title ( Caps Lock) letters, unless it is too long, otherwise it will make it difficult to understand.

We meet every day huge number printed words - in books, on a computer or phone screen, in brochures, catalogs, etc. Our brain is accustomed to processing this flow of information, instantly recognizing millions of words from just a few letters.

In everyday life, we rarely encounter a situation where some sentences in the text are written in capital letters. And once we come across them, it makes it difficult for us to perceive and understand the content. The brain begins to parse each letter separately and then puts them together. I believe that correct title contains one capital letter - at the beginning!

An example of what not to do. The title and subtitle are written in capital letters.

Underlining in headings is only allowed if it is a link.

For example, like this:

You can experiment with colors and effects (inversion, color block, etc.).

Use quotation marks in headings - they attract the eye.

But better than any A typographic headline will make good copywriting stand out. Read a couple of books and go for it! Here are some tips:

A title or subtitle in the form of a question will pique the reader's interest.

The title must be no longer than 140 characters.

The title can be strengthened by a subtitle that reveals some details.

Which font should I choose?

Traditionally, fonts that do not have notches (fonts of the sans-serif, or “chopped” family) are used for the web: Tahoma, Arial, Verdana, Trebuchet and similar ones. Why is this necessary? To save readers of your text from the “ladders” along the edges of characters that appear on low-resolution screens.

You are free to choose any font, but remember that the browser will only display it if the font is installed on the user's computer. Otherwise, the most similar one from the standard set will be shown. I recommend that you don’t get too carried away and use proven fonts that are often found on websites.

When it comes to variety of fonts on one page, less is better than more. We’ll talk about how best to place accents later.

Life hack: if you have your eye on some site where you like the font, but you cannot recognize it, go to the secret library - there is a link to a useful application that will allow you to get all necessary information. (WhatFont app for Google Chrome)

How to place accents correctly

Always remember that the user reads no more than a third of the content you create, so help him find what he needs right away! The easiest way to draw a person's attention to something within the bulk of the text is to highlight it using:

bold writing (bold),

BY WRITING IN UPPER CASE (CAPITAL),

highlighted in a different color.

Bold writing

It makes sense to allocate them individual words, but entire semantic constructions. Alternatively, this type of highlighting can be used in lists and subheadings to highlight the main idea.

Italics

Italics on the web are evil. I think you can already guess why. If not, go back to the section on font types. Italics creates those “ladders”. If you use italics, then watch the size: there is nothing worse than small italics. I believe that italics on the web are only appropriate for quotations.

A little about UPPER CASE

It's possible, but don't overuse it! Above, I talked about how our brain reacts to sentences written entirely in capital letters. But there's another one important aspect. Full text written in capital letters, in the Internet environment means shouting. If the text contains a sentence written in capitals, you shouted it! Consider whether a “raised tone” is appropriate in a particular case.

Discharge

Do not write the word using spaces between letters. This highlighting will not be visible in the text. A person will simply stumble over a word, which will distract him from the main idea of the text.

Underlining and Links

Want to emphasize? Just a link! If your site has unclickable underlined text, you're screwed. Clean it up! On the web, this type of highlighting belongs to hyperlinks. Traditionally, hyperlinks are designed as blue, underlined text. This is a well-established standard on the Internet, and I don't recommend changing it without a good reason. A link highlighted in a different color looks strange and incomprehensible. Even Google and Yandex left them in exactly this version, although they could have afforded to set a new fashion.

Please note that sometimes (previously this was the case in mandatory) the link color changes to purple if the user has already clicked on it. Below is an example of how annoying a purple-colored hyperlink can be: I didn't click on the links, but they hint otherwise.

A typical mistake is to design links in the company’s corporate colors.

How to properly execute a Call To Action?

Pay special attention to the design of Call To Action. If you encourage someone to "buy now" or "start free trial version”, make sure you use colors that will grab people's attention and motivate them to take action. The “button” should be a bright and contrasting color.

As for the location of Call To Action, it is always on the first screen and at the end of the page and can be repeated several times in the text (this depends on the length of the page).

Here are some rules for designing a “button”:

Its color should be in contrast to color palette to attract the user's attention. A very common mistake is to make a button in the color of the entire site. She's just lost.

It should only be used for key calls to action, so don't use it for other purposes.

Here are illustrative examples. Below we see that the die " Personal Area" in the upper right corner attracts attention. It does not allow the user to “find out the price.” This is not a good option.

And here the “Buy” button is red, just like the “Find” button, not counting the fact that the logo has a more saturated color. This is also not a good option.

And here correct example. The button is orange, but it still catches your eye immediately.

Line length and layout: main rules

A one-column layout is considered the best in terms of increasing landing page conversion. The point is that once you pay to attract someone to your site, you can’t afford to lose them!

Forget about giving a person the right to choose (“what else could I read here”) - lead him along the path you want, predicting and controlling his every step. This is only possible when the content is formatted in one column. Multiple columns are only acceptable when you want to emphasize the difference between sentences.

Below are two examples. If we abstract from the specifics of the services, then the “Assemble the Bed” website, all other things being equal, will be more effective, because the client will quickly complete the target action. Everything has been sorted out for him and he is not given the opportunity to be alone with his thoughts. “Marshak Clinic,” on the contrary, provides a person with at least two text blocks competing for attention.

A three-column layout, as in the clinic example, is a road to nowhere, which is only appropriate for the vast expanses of online media that “sell” their readers a couple of dozen banners on each page.

True False:

The optimal line length (regardless of the page type) is from 50 to 70 characters. Text columns whose width exceeds this value are extremely difficult to read from the screen. On the other hand, if the lines are very short (less than 20 characters) and there is a lot of text, this will also irritate the reader - very often you have to move your eyes.

The string length problem becomes even more pressing with the advent of adaptive layout and requires accuracy and attentiveness from the developer: the screen size range today varies from 5’’ to 55’’.

When it comes to line alignment, it is known that columns of text that are aligned to the left help the reader to better focus on the content, resulting in a person reading more text. Right alignment is used very rarely.

Center alignment is only allowed in wide columns, otherwise you will end up with a different number of characters per line and sparse text. This kind of alignment, which takes people out of their usual comfort zone (where everything is aligned to the left), can be to your advantage: it will attract additional attention to what you write. But don’t overdo it: 5 lines in a center-aligned block, no more!

How to design a text block?

The structure of any page consists of blocks. Their number and content depend on the goals of the site.

There is only one rule: the text block should not be larger than the screen - every thought that you want to convey to a person should fit on one page without scrolling. Choose the size of the screen height yourself, based on which screens are the priority for your target audience - see the analytics.

Please note that Russians began to access the Internet through mobile devices more often (51%) than through regular computers. Smartphones and tablets are a completely different type of screen, user behavior and thinking! Sometimes a special landing page for mobile devices gives a higher conversion rate than just an adapted layout.

When it comes to the layout of the image, header and block, there are many options, but here are three classic ones.

Picture on the left, a block with a title and text on the right. A very good option: the picture attracts attention to the text (eye catch).

Picture on the right, a block with a title and text on the left is also a popular option, but loses to the first one because all the attention goes to the picture.

Picture above, title and text at the bottom is a good option when you need to “show off the product.”

I don’t really like it when text blocks are laid out in a checkerboard pattern, because it distracts the reader - he doesn’t understand what to focus on first: the picture or the text. Although we can see this method of arranging content on many sites.