How to reach as many customers as possible on the first screen on the Landing page?

Simple tips that you can immediately apply: what to write and how to draw an effective design. We show many examples from our experience, mainly B2B business. This approach will be useful for copywriters, designers, customers and everyone involved in the development of landing pages.

Why the first screen is the most important part of a sales page

The first thing to understand is that customers are not only viewing your site. When a person searches for something on the Internet, he opens 8-10 sites and spends on average 6-36 seconds on each. The more visitors stay on your page, the higher its conversion will be.

First of all, a person sees what shows on the first screen of the website of his device. This is where he decides whether to stay on the page or move to another website. This decision takes only a few seconds. If during this time the client saw that he was being offered a solution to his problem, then he stays at your page to study the page further, if not, he goes to competitors (other websites).


Remember, people don’t buy because of the beautiful words, or because the company is so cool. A person contacts to the company if he believes that his problem can be solved here. When we explain this to entrepreneurs, a lot of people start looking at their marketing differently.

And here we smoothly move on to the question of how to fill content the first screen. By content, we mean not only text, but also visual content. 

Illustration: show not the product, but how it will improve the customer’s life

Let’s start with the fact that it is generally important to show the product or the service. For some reason, in the landing page development, it is important to focus on text. If you don’t write it, the users won’t understand. Certainly, text is important – but it will not solve all the tasks of a landing page.

Why illustrations are better than text. There are two reasons. Firstly, since a client opens several sites, he simply does not have time to study the text on each page in detail. Instead of reading deeply, a person glances over the page, paying attention to the elements that stand out. This is called a Z-Shaped Pattern reading.

Secondly, the correct picture communicates much more than the text. Illustrations are more informative and, obviously, clearer than words.

Most of the landing pages for new buildings/constructions that we have come across show a view of the house from the outside on the first screen. The house can really be very beautiful – but the buyer cannot live in the yard. Perhaps you should not show the new building itself, but the interior of the apartment and (preferably) the view from the window.

Another example, how Apple presents their products:


Apple product illustration. High-quality images of the gadget make you want to hold it in your hands

Title: just name what you are selling

About five years ago, it was super popular to make long headlines using 4U technology. The essence of the method was to represent four main components: Urgency, Usefulness, Uniqueness and Ultra-specificity. The result was insane, almost paragraphs of text in the title: “Increase your status by 30% tomorrow with a luxury watch with [some kind of] technology” 

Besides the delusional meanings, there are other problems. There are usually a lot of elements on the front screen anyway, so a large header creates a mess and is not fully readable. Moreover, it is not always clear what is being sold here, because the product is represented at the end.

A universal option is to indicate the name of the product in the title. If you are selling a coffee shop franchise, then write: “Coffee shop franchise”, without promises of earnings and other questionable things.

If the product for the market is new and unclear, follow the formula “name” – “what is it like”.  Here is another example of a screen for a complex product, where the title is drawn up using the same formula:

Instead of “Instant hair transformation”, it could be “hair thickening spray”. So the users can understand straightforward what the website offers.

Subtitle: Describe a helpful action

Call to Action is the reason why a person wants to buy a product. It usually sounds like a solution to a customer’s problem. Call to Action is gradually replacing the “traditional” USP (unique selling proposition). The problem of USP is that the most important thing for the client is not the uniqueness of the company or its product, but what benefit he/she will ultimately receive.

If a user comes to your page, which is not yet looking for a product on purpose (this user appeared on your website from social networks as example), then the useful action should be in the heading, and the name of the product in the subheading. So you will focus on the benefits for which the visitor came, and then explain to him what product brings it.

You may have noticed that we haven’t written anything about buttons and calls to action. In our opinion, the importance of the call (at least on the first screen) is overestimated: the buyer is usually not ready to take any action when he/she is at the beginning of the page, at this stage he/she is more interested in learning more about the product. And then, if a person really wanted to leave a request, he/she will do it regardless of how the call to action is formulated.

Five design rules to follow on the first screen

There are many written rules in web design, but there are also enough unwritten rules. Unfortunately, often the designer wants to make beautiful design, while forgetting about the convenience for the user. Although it is from him that action and money are expected.

1. Display the illustration large. Usually, the elements on the first screen are arranged like this: text on the left, picture on the right. When the illustration is vertical, there is no problem. But when it is horizontal and stretched from left to right, you have to reduce size of the illustration in order to stick a picture on the side of the text.

The product needs to be shown large. Therefore, arrange the elements so that the illustration can be seen easily:

2. Use the principle of visual hierarchy. Visual hierarchy is when all elements are highlighted so that the eye reads them in a specific order. For example, picture → heading → subheading → button → logo. 

3. Don’t overload with elements and widgets. One of the most popular mistakes is trying to tell everything at once. On such pages, we see several headings and subheadings, all kinds of contacts, a calculator and some other garbage that pops out to you.

There are two problems here. Firstly, too many icons, buttons and widgets, that creates pressure and a sense of “advertising”. Like they are trying to push hardly on you to buy the product. Secondly, even if you correctly placed everything, the screen will turn out to be colorful and difficult to understand.

4. Do not overlap elements. Probably the worst thing to do with the first screen is to place text on top of the photo, and even darken it. We understand what looks beautiful, but think about it: in this situation, the photo will interfere with the client’s reading, and the text will interfere with seeing what is in the photo.

The solution is simple: separate photos and pictures from text.

5. Leave white space. The emptiness between the elements is needed so that the user does not have a feeling of chaos. 


As you might have guessed, these rules should be applied not only to the first screen, but to the entire page.

What else you need to know about the first screen

Can you post a video instead of an illustration?
In some cases, yes, you can. This is suitable for situations where it is very important to show emotion and / or atmosphere. For example, organizing children’s parties or expert meetings. By the way, the video is also an illustration, because it illustrates something.

Do not put the video behind the text, so that they don’t interfere with each other.

What if the first block is shorter / longer than the device screen?
The block can be longer or shorter, if this solves some problem. There is no problem in a long block: as you remember, scrolling is not a problem. It can also be shorter if, for some reason, it is important that the user sees the second screen too. 

What exactly can’t be posted?
The least important information for the client: text about the company, photographs of employees and so on. Remember: the task of the first screen is not to overwhelm it with information, but to make you want to study it.

Can I post an open contact form?
You can, if there are a maximum of three input fields. If there are more fields, hide in the button.

How to get high conversion right away?
It’s impossible to tell how well a product page is doing its job until it receives traffic. Even if there is cool text and beautiful illustration, it is better to test at least two versions of the first screen.

If you have any questions or need help with your project, please do not hesitate to contact us. We will be happy to assist you.