First, we need to know the layout. Most of the formats we usually make or see are centered, axial, divided, inclined, skeleton and whole layout.

↑ typesetting in the center, using the visual center to highlight the object you want to express-it is recommended to use typesetting in the center when there are not too many words in the picture and the main body is clear. Central typesetting has the function of highlighting the main body and focusing on the line of sight, reflecting the solid color of the atmospheric background and the gradient color of the high-end background.

The picture above is Allison's work.

↑ Axis typesetting, which uses axis symmetry and adopts regular and stable picture display, is eye-catching and generous-when the produced picture meets the requirements of central typesetting but the main area is too large, axis typesetting can be used. The symmetrical layout of the central axis can not only highlight the main colleagues, but also give the picture a sense of stability, so that the whole picture has a certain impact.

Axis shape is a very effective form when making posters of e-commerce activities.

↑ Split typesetting, using split lines to make the picture have clear independence and guidance-when there are multiple pictures and paragraphs in the produced picture, split typesetting can be used. Split typesetting can make all parts of the picture extremely clear and independent, and can have better visual guidance and direction when watching; Through the segmented volume, the primary and secondary relationship of each part in the current picture can be clearly defined, which has good contrast and makes the whole picture not only harmonious but also crowded.

↑ Inclined typesetting, through the inclined arrangement of the main body or the whole picture, makes the picture have a strong sense of rhythm and stimulates the vision-when the produced picture has rhythm, impact, instability, jumping and other effects, inclined typesetting can be used. Inclined typesetting can make the plain picture generate alive. When you find that your picture is too rigid or stiff, trying to tilt an element in the picture will have unexpected effects.

↑ skeleton typesetting, through the orderly arrangement of pictures and texts, makes the picture rigorous, unified and orderly-when there are many words in the picture, skeleton typesetting is usually used. Common typesetting methods, clear conditioning and rigor in skeleton typesetting, make the picture stable, which is not a mistake, but it is a single typesetting method after all. Sometimes, in order to break the single and smooth skeleton type, we can also apply the form of Figure 3 above and add some rhythmic materials in a regular arrangement.

Web design (including e-commerce) is mostly skeleton typesetting.

↑ Full-page typesetting, which conveys the most intuitive and intense visual stimulation through a large area of elements, makes the picture rich and has a strong lead-in-when there is a very clear theme in the picture, but there is less copy, you can use full-page typesetting. Common page layout includes page layout, detail page layout and text page layout.

For example, the first picture: the whole full version will make the picture have a strong sense of bringing in.

For example, the second page: complete details can quickly clarify and show the main body.

For example, the third type: the full text usually expresses some copywriting in the form of decoration.

Second, the method

After understanding the basic layout, let's understand some problems that need attention in typesetting.

The first is the choice of layout. If you get a customer's request, but you can't figure out what method to typeset next, it is obviously disgraceful and a designer's qualification. I also wrote in the above example that different layouts can be applied in different situations, and there are so many different situations, fewer words and fewer pictures, fewer words and more pictures, fewer words and more pictures, more words and more pictures, and the same words and pictures. Secondly, how to apply it. Layout is an ethereal art, with a fixed theoretical form, but various forms of expression. When you are proficient, how to put it will look good, and when we start practicing, we'd better pay attention to one point that typesetting needs to be strictly observed-leaving white space.

Many masters have said that the analysis of blank space, most of them are macro, are linked to artistic conception. It is meaningless for me to repeat things. I want to say a few fine blank questions. First of all, I want to deny the impression that many people think that leaving blank is to be minimalist. In fact, blank space is everywhere, and minimalist style is just a more macro definition of blank space ... so how to understand and use blank space? First of all, we should have several concepts about blank space.

First, text spacing and line spacing are all blank spaces, and if this distance is too uniform and crowded, the picture will be rigid, so in the case of more paragraphs, we can adjust the paragraph spacing appropriately to improve the effect of the picture, that is, increase the blank space between words.

As shown in the figure below:

Second, if there are other elements inside an element, then the internal area of this element needs to be left blank reasonably, and the internal elements should not be too full or too biased.

As shown in the figure below:

Third, there should be reasonable white space between elements, otherwise it will appear crowded and uncomfortable.

As shown in the figure below:

Fourth, in addition to full-page typesetting, I think there should be enough white space around the picture as far as possible. Sometimes it is unnecessary to put so many decorative elements. In the picture, it will rob the subject, such as the picture below. In fact, bamboo leaves can also express what they want, and they are more flexible.

Fifth, when the decorative elements are scattered, don't concentrate on one area, which will make a certain area look empty and not crowded, and also make the picture look stingy. Try to make the scattered elements more atmospheric and write freely, make up for the emptiness of colleagues around you and make the picture more atmospheric.

As shown in the figure below:

Sixth, blank space should be removed at the same time. Blanking is the effect of balancing the blank picture. Generally speaking, the common blanking method is line blanking, that is, when there is an element below, when the top is empty, add an element on it to balance the picture; When the main body is too small to leave too much white space, it is necessary to enlarge the main body, adjust other elements and remove white space.

As shown in the figure below:

Figure 1: the central body is too small, and the upper and lower cavities Figure 2: the lower part turns white, and the upper cavity Figure 3: the upper part turns white and the picture is stable.

For example:

The central element is too small, and the outer space.

The overall enlargement of the center makes up for the excessive blank space between the subject and the copy, but the blank space relationship between the subject and the copy is not very comfortable.

Open the line spacing of the copy, so that the space sense of the subject and the whole copy is similar, and make up for the extra gaps in the copy.

Combined with blank space, I will give a simple example to apply non-layout in different situations mentioned above. When the scheme given to me by the customer is few words and few pictures, many ways, such as central type, central axis type, complete version type, skeleton type and subsection type, can solve the current problems. For example, we make a picture with words and pictures:

Figure 1: central type Figure 2: central axis type Figure 3: complete version

↑ skeletal type

Split type

Sometimes we will encounter many small pictures in a picture, and the material size of many small pictures is different. This is also where many people often make mistakes. Most people put them at will and match them with words. In fact, we can show each picture in the same size and shape, which is both regular and generous, as shown in the figure:

And when the material is not very beautiful, even if the arrangement is neat, the overall picture is still a little crowded, we can simplify the complex and remove the small picture display:

To sum up, there is no absolute good or bad layout, only suitable and inappropriate; This issue mainly focuses on simple layout, and the next issue will have a deeper understanding of the complex layout of our team.

(Chengdu Qianju)