How to increase the layering of design?

Combine all the elements in the picture reasonably, clearly and rhythmically to make the whole picture look more comfortable, pleasant and harmonious. Does it feel deep? Well, in other words, it's just-not much, not much, it looks comfortable, just right!

This paper is divided into three chapters, and each chapter has several subdivided knowledge points. Please read it carefully!

Preliminary understanding, let's take a look at the outline of the article:

First, the level of the picture.

Divide the picture with points, lines and surfaces.

news

Looking for layers in photography

Second, the level of color.

Contrast of colors

The popularity of gradient color

Control of multicolor collocation

Third, the level of the text

Font contrast

Word contrast

Please click to enter a picture description.

First, the level of the picture.

1. Use points, lines and faces to divide the picture.

Points, lines and surfaces are the most basic design elements in design. Students who have studied plane composition should know that points are connected into lines, points are connected into planes, and when the planes are reduced to a certain extent, they are points. The boundary of a surface is a line. When the width of the line increases and the points spread to a certain area, it becomes a surface.

The above words seem complicated, but when you think about it carefully, this is the principle of everything in the world, even the starry sky in the universe. Here's an example.

Please click to enter a picture description.

The above figure can basically summarize all the changes of points, lines and surfaces. Let's analyze it below.

Please click to enter a picture description.

The cross elements in the red circle can be regarded as "points" and appear as decorative elements in the whole picture. It should be noted that the so-called "point" is not just a circle. Any element with the smallest size and area in the diagram can be regarded as a "point". A point in a graph can be regarded as both a "point" and a "face". So even point-to-point is right.

Please click to enter a picture description.

What do you think are the lines in the yellow circle? I think it is not a line, but a point. Why? Because no matter from its proportion in the picture or the role it plays, it belongs to the attribute of the point. Where is the boundary? At the junction of green block and red block. And the boundaries of color patches. And this just shows an important use of "line"-segmentation. The "lines" in the picture divide the whole picture into four areas of different sizes, making the picture more interesting and layered.

Please click to enter a picture description.

The four areas divided by lines are also the element "face".

This legend not only illustrates several important characteristics of points, lines and surfaces, but also proves that points, lines and surfaces are not fixed because of their shapes, but constantly change.

Finally, some characteristics of points, lines and surfaces are summarized:

Point: It is the most decorative element, so it plays a decorative role in the picture in most cases.

Line: In addition to decoration, it also plays the role of dividing the picture, inserting elements and guiding vision.

Face: It often plays the role of stabilizing the picture and carrying important information.

In addition, it should be noted that points, lines and faces are used in combination. Think about how to show the characteristics of points and lines without a plane.

Please click to enter a picture description.

Please click to enter a picture description.

Please click to enter a picture description.

Please click to enter a picture description.

Through these design cases, we can analyze and summarize that the effective use of the combination of point, line and surface can design works with rich levels. How do we do this? -Replace replication. Draw lessons from the point, line and surface elements of good design works and then apply and innovate them.

Please click to enter a picture description.

blank

Blanking is a very common technology in design. Blanking not only makes the picture neat, clean and breathable, but also makes the understanding and application of "face" more profound. The minimalist design, which is widely used now, is a better design type in the treatment of blank space.

Let's talk about the influence of blank space on the level first, and look at several design cases first.

Please click to enter a picture description.

Please click to enter a picture description.

Please click to enter a picture description.

The common feature of the above design works is that there are a lot of blank spaces in the design, and at the same time, the levels of the picture are dealt with, such as the size contrast between blank spaces and the main picture, and the direct contrast between titles and supplementary words.

Please click to enter a picture description.

I processed the above picture, which is divided into background layer, blank layer, main model layer, title copy layer and functional copy layer. From here, we can see how the design level is designed. You might as well deconstruct your favorite design in this way to study the level of design.

3. Find layers in photography

Nowadays, photographic pictures are used more and more, especially high-quality photographic works can ensure the quality of design to the maximum extent. But why is this? Have you thought about it? One of the reasons is that photography is hierarchical.

Please click to enter a picture description.

Please click to enter a picture description.

Please click to enter a picture description.

Everyone is familiar with this B-mounted earphone, which is made by photography and has three levels: close shot, middle shot and long shot. Not only does it look very delicate and rich, but it is also very textured.

But what if there are fewer layers of pictures? Quite simply, we can use words as graphic elements to increase the level of the picture.

Please click to enter a picture description.

Please click to enter a picture description.

Second, the level of color.

1. color contrast

Using contrasting colors and contrasting colors to design is also a common method to increase layering, because there is a very strong color contrast, the impact of the picture will be very strong and the visual impression will be more exciting.

Black and yellow contrast is a very classic color scheme. Although there are only two colors, it will be very rich through the combination of copywriting and pictures in the picture. In this minimalist color matching, it is more necessary to make rational use of points, lines and planes, otherwise it will be a bit monotonous.

Please click to enter a picture description.

Judging from the above design, the designer used the yellow contrast color-blue when matching colors with black and yellow, which can not only enrich the color of the picture, but also make some important elements in the picture stand out and play an emphasis role.

Please click to enter a picture description.

Please click to enter a picture description.

Please click to enter a picture description.

Please click to enter a picture description.

Yellow-blue color matching and red-green color matching are also commonly used classic color matching. As can be seen from the above two cases, the color matching of yellow and blue is young, fashionable and scientific with high saturation, while the other design is red, green and blue with low saturation, which is more retro and deeper.

2. The popularity of gradient color

Gradient has been popular for several years. This year, Taobao's mobile app has also designed a gradient, which shows that the use of gradient is also growing. Gradient itself has the characteristics of rich layers, so the use of gradient and the reasonable collocation of point, line and surface elements will produce impact and enrich the layers of the picture to the maximum extent.

In our daily design, we still need to choose the color value of the color more carefully. Generally speaking, we will choose the same color gradient, adjacent color gradient and contrast color gradient. The number of gradient colors should not exceed two. More than two kinds of gradient colors need very strong color control ability to control. I'm talking about more than two colors in the same gradient.

Please click to enter a picture description.

Please click to enter a picture description.

Please click to enter a picture description.

Please click to enter a picture description.

The use of gradient color mostly appears in UI design, and with the development of UI design, there are many design methods and color matching methods for web design, whether it is web pages or e-commerce.

Please click to enter a picture description.

Please click to enter a picture description.

Please click to enter a picture description.

Please click to enter a picture description.

Please click to enter a picture description.

Gradient color matching can be used together, for example, the above picture belongs to the same color gradient, but there is a rule in this use, that is, the saturation of several gradient colors that are matched with each other should be basically the same, otherwise the problem of color "flower" will appear.

3. Control of multi-color collocation

For multi-color design, what we need to do is to control the saturation and lightness, and try to keep the saturation and lightness of each color in harmony. Whether it is a faint Chinese style or a strong European and American style, it will make the picture rich and layered, not "chaotic" or "flowery".

Please click to enter a picture description.

Please click to enter a picture description.

We can see that there are many colors in the legend above, but why do we feel rich and layered? Yes, that is, saturation and lightness are controlled in place.

Please click to enter a picture description.

Please click to enter a picture description.

Third, the level of the text

1. font comparison

Font is a difficult part that we must use in our design, but the formal part that puzzles everyone will make the picture extremely rich. Even if there are only words without patterns, as long as the typesetting is reasonable, amazing results can be obtained.

Please click to enter a picture description.

Please click to enter a picture description.

Different fonts express different artistic conception and meaning, especially China fonts have been passed down for thousands of years, and each word has a specific meaning. Western languages are mainly decorated with serif and sans serif fonts. Sometimes rough, sometimes slender.

Please click to enter a picture description.

Please click to enter a picture description.

Please click to enter a picture description.

2. Comparison of words

The contrast here includes font, size, thickness, color and so on. Why do we choose to compare? Because contrast is the best way to open and reflect the hierarchy, let's talk about it one by one.

Please click to enter a picture description.

I am here to analyze and deconstruct this work. 30% is the largest area in text and the largest proportion in picture elements. The description of the discount coupon shows that this is discount information, and this description is also the second largest proportion in the picture. Then there is the following information, such as time, address, telephone number, etc., with the least number of words. Through these three text sizes, open the hierarchy and get three levels at once. Plus the background of the last pattern, golden bow on white background, a total of 6 levels. In addition, in order to unify the picture, the font of the text is serif.

Please click to enter a picture description.

Please click to enter a picture description.

The above two posters are the same, so you can interpret them.

The color of the font, the above two posters of aranya are a series, and the color of the theme text aranya is changed to green and blue respectively, which can increase the layering of the copy on the one hand and unify with the color of the visual subject on the other. Here are some design cases that you can try to analyze.

Please click to enter a picture description.

Please click to enter a picture description.

Please click to enter a picture description.

Finally, talk about alignment. Alignment makes the picture more orderly and looks more reasonable and comfortable. Let's use the poster above to analyze it.

Please click to enter a picture description.

Look at these blue lines, which are the alignment of this poster.

abstract

In fact, the sense of hierarchy is formed through the division of points, lines and planes, the collocation of colors, and the comprehensive use of text typesetting. It strives for perfection in details such as size ratio, color selection and alignment, and the sense of hierarchy naturally emerges.