How to optimize the layout of information flow advertising landing page?

In an information flow advertisement , the role of the landing page is actually like a super salesperson.

After the user enters the landing page, the "salesperson" will begin to introduce the product features, selling points, etc. to the customer. When users see the points they care about, they are attracted and further persuaded...they will think "this is what I want", and then place an order and pay.

However, most of the time, advertisers will over-package this salesperson, always trying to show potential customers everything they want to say all at once, resulting in too many selling points piling up on the page, which makes users feel oppressed and drives them away.

From a design perspective, this problem can actually be optimized through landing page layout.

With the same selling points, high-quality typography can make the content presentation more rhythmic and promote the advertising to develop in a more effective direction. Today, we will talk to you about how to arrange (pack) the pages just right through three aspects: white space, image ratio and picture selection.

01 Over-stacked selling points equals no selling points

In all the landing page designs I have seen, "crowding" is a common problem. The most direct problem caused by crowding is that it creates a sense of oppression on the user's vision, forcing the user to leave the landing page.

To solve this problem, we need to understand

Leave blank space.

Most people have a misunderstanding that blank space = blank = no design. This is a misunderstanding caused by a lack of understanding of white space itself.

Just like the design of text and pictures, blank space itself is also a reflection of design ability. Correct white space can make the page more standardized, and elements placed in the middle of the white space are more eye-catching than elements placed in the elements. For example, this page:

This page only contains: brand, slogan, elements and logo. But the point is clear.

(PS: White space is not necessarily "white", but blank.)

In good design, all white space is "purposeful white space", which has a clear purpose to control the spatial composition of the page.

Purpose 1. Reduce the burden of page reading and achieve a good user experience

The heat map of many advertising landing pages shows that most users’ attention only stays on the first screen, and very few read on. This misleads optimizers or designers into thinking that since users only pay attention to the first screen, we should put more advertising information on the first screen.

However, it is this uncontrolled addition that causes the page to contain too much content, giving users a feeling of narrowness and oppression, and the page may even crash before the user has a chance to see the content on the first screen.

Therefore, we cannot simply think that too many elements are a good thing. On the contrary, appropriate white space can make the page feel more spacious and provide a wider field of vision. By leaving white space, we can reduce the sense of oppression on the page and make it easier for users to absorb the information we are trying to convey.

For example, the picture below only uses a simple background image and a slogan, which makes the key point of expression very clear.

For example, the following page:

A large area of ​​sky is actually blank space. The designer did not fill the entire screen, but only placed the main content in the middle, which are the brand "Huawei Skylink" and "￥9.9" on the whiteboard. The two whiteboards are actually a line that is disconnected in the middle and filled with the most user-attracting slogan. The user's attention will naturally stay on the "Only a day for overseas Internet access" in this position, and then naturally read on to "￥9.9".

Purpose 2: Highlight key elements so that they can be seen at a glance

MUJI Art Director Hara Ken said in his book "White", "Design involves the control of differences. Repeating the same work over and over again taught me that it is important to limit those differences and keep only the most critical ones."

Using blank space to limit page elements and highlight the main content of the page is the simplest and most natural way of expression.

In other words, white space is an effective rule that allows users to quickly focus on the product itself by reducing the elements and cluttered colors on the page.

This method is widely used on mobile pages of e-commerce . In fact, this method can also be used to highlight the key points in the landing page of information flow ads, instead of being framed by the habitual stacking of elements.

For example, the following figure:

There is only the product on the left and a brief introduction on the right. This blank space allows users to notice the product at first glance.

Let’s look at the following picture:

This is a picture of hot pot materials that fills up the left and right sides, and is filled with seasonings. In the middle is a lot of text , which is already very crowded, and the blank space is filled with two auspicious cloud materials. It is a page with almost no blank spaces. Anyone who enters this page cannot immediately understand what the theme of this page is.

Compared with the previous picture, one has the key points highlighted, while the other has no key points at all: the benefits of leaving blank space are clearly visible.

Purpose 3: Differentiate and group page elements to make page content more logical

White space can strengthen or weaken the barriers between elements.

For example, the normal content line spacing is 1.5 times, while the line spacing between paragraphs and titles should be 2; 2.5; or even wider. Using white space to create partitions and connections can make the page logic and grouping clearer.

For example, between form items, buttons, paragraphs and other elements that are related but need to be distinguished, leaving blank space can easily create a visual recognition and give users a clean and tidy feeling.

Purpose 4: Make the page composition more rhythmic

There should be a sense of rhythm in the landing page design, which is what I have always emphasized.

White space can give the page a sense of importance and create a different visual atmosphere. By changing the layout through white space in different ways, we can produce a variety of effects we need.

As shown below:

Use left and right margins, blank space between paragraphs, more blank space at the top, or more blank space at the bottom to create different visual effects.

02 How to make a landing page without good materials?

After talking about blank space, we have to mention another misunderstanding in landing page design, which is also a rule that seems to be accepted by the industry: the first screen of the landing page must be a picture.

In fact, there is a reason why most landing pages start with a "picture". After all, pictures are easier to grab users' attention than text, and placing the picture at the top and the content at the bottom makes the entire page design more balanced, avoiding the problem of novices having a light head due to their weak control, and it is also in line with the design habits of information flow landing pages.

However, this benefit is based on having a good picture.

When you don’t have a suitable picture, forcing one together will only distract users from the text, which is not worth the effort.

So what should we do? In the absence of suitable materials, should we put pictures on the first screen or not?

Let's talk about a concept first:

Plate rate

The ratio of images to a page is called the image ratio.

Generally speaking, reducing the image rate (less image content) will give people a clean and advanced feeling;

Increasing the image rate (more image content) will make the picture more appealing.

As a page where information flow is delivered, in most cases we hope to infect users, so a high image-to-image ratio is required. This leads to the convention that most landing pages start with images, as we said at the beginning. It also forms the habit of designers making up pictures even if there are no good pictures.

In fact, with this forced approach, picture materials cannot assist the copy well. Instead, they will compete with the copy that we want users to pay attention to for the limited attention of users. This is obviously harmful rather than beneficial.

So what should we do if we don’t have suitable image materials? In this case, we can use changes in color blocks, elements, fonts, and special effects to fake the effect of a high image rate.

Method 1: Use materials that simulate real scenes instead of general materials

For example, you can use simulated reality effects, such as desktop, hands, movie tickets, book papers, coupons, notes, etc., to make the interface more friendly and reduce the feeling of emptiness.

Like the picture below, if there is only the content in the middle, it is a mediocre personal introduction:

But if you use a real desktop to host the table, the whole design will not look thin:

Let’s take a look at the design of the first screen of the landing page below:

On the first screen of a flooring advertisement landing page, generally speaking, the materials commonly used by flooring merchants for advertising are flooring decoration renderings, but this is obviously not in line with the "grabbing" situation of the promotional activities that flooring merchants want to do. What should I do at this time?

The designer made use of the real wood special effects (which fits the advertising theme of flooring) and font changes, turned the copy into a "picture", and used hands, a very common material in the material library, to create a "grabbing" effect - this real scene created by piecing together real elements can well make up for the problem of not having "a suitable material picture".

Method 2: Use color blocks, geometric shapes and other elements, supplemented by special font changes, typesetting, special effects, etc.

In fact, in the wooden floor page just now, we have already seen the pseudo-high image rate effect brought about by the font change. Similarly, we can also use changes in geometric shapes and color blocks to achieve this effect.

For example, the following figure:

The image ratio of this page is not high, but through the reasonable combination of color, shadow and rounded corners, the whole picture looks not monotonous at all. It achieves the same effect as when there are pictures, that is, it stimulates the user's vision.

Let’s look at another real case:

OPPO's homepage makes use of chemical and color changes, supplemented by lines, frames, background colors, etc., to make the page full and vivid without using any picture materials.

03 How to place pictures without affecting the effect?

As mentioned earlier, you don’t have to put a picture on the first screen. You can use color blocks, font changes, etc. to fake a high image rate.

So the question is, when the client provides the material, should we use the material image directly? Or should we create a pseudo high image rate effect?

Here are two principles for filtering first-screen images:

1. Does looking at the picture strengthen the emotion of the slogan?

2. Will looking at the picture steal the attention from the slogan?

See the figure below for the specific logic. Generally speaking, the design idea of ​​the first screen picture can be implemented according to this rule:

The main part of the landing page will also involve the layout of pictures and text. In many cases, we will arrange related pictures and text side by side. Usually, people are entangled in whether the picture should be placed on the left side of the text or on the right side?

The answer is based on the visual center of gravity, that is, left>right, that is, when it comes to left and right typography, important content needs to be placed on the left. The details are as follows: