How to increase the layering of design?

What is the sense of hierarchy?

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 profound? Well, in other words, it is-not much, not much, it looks comfortable and just right!

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

a preliminary understanding, Let's take a look at the outline of the article first:

1. Level of the picture

Use points, lines and surfaces to divide the picture

Leave blank

Find the level in photography

2. Level of color

Contrast of color

Prevalence of gradient color

Control of multiple color collocation

3. Level of text < Dividing the picture by plane

Points, lines and planes are the most basic design elements in design. Students who have studied plane composition should have some knowledge that connecting points into lines and connecting them into planes, and the plane is a point when it is reduced to a certain extent. The boundary of a surface is a line, and when the width of the line increases and the point spreads to a certain area, it becomes a surface.

The above sentences seem complicated, but when you think about it carefully, this is the principle of all elements in the world, even the starry sky in the universe. Let's give an example below.

Please click on the input picture description

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

Please click to enter the picture description

The cross element in the red circle can be seen as a "dot" as a decorative element in the overall picture. It should be noted that the so-called "point" is not just round. Any element with the smallest size and area in the picture can be regarded as a "point". The dots in the picture can be regarded as both "points" and "faces". So it's right to even point to face.

Please click on the input picture to describe

What do you think is the line 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 point. And where is the line? At the junction of the green block and the red block. And the border of the color block. 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, which makes the picture more interesting and layered.

please click to enter a picture description

and the four areas divided by the line are the element "face".

This legend not only illustrates several important features of points, lines and planes, but also proves that points, lines and planes will not be fixed because of their shapes, but will change constantly.

Finally, some characteristics of point, line and plane are summarized:

Point 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 the vision.

plane: it often plays the role of stabilizing the picture and carrying important information.

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

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 effective use of the combination of points, lines and surfaces can design works with rich levels. And how do we do it? -replacement copying. Draw lessons from the elements of point, line and surface of good design works and then use and innovate them.

Please click to enter the picture description

2. Blanking

Blanking is a very common method in design. Blanking not only makes the picture neat, clean and breathable, but also makes a deeper understanding and use of the "face". The minimalist design that is widely used now is a better design type in blank processing.

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

Please click to enter a picture description

Please click to enter a picture description

The * * features of the above design works are that there are a lot of design blanks, and the levels of the picture are processed while leaving blanks, such as the size contrast between the blanks and the main picture, and the direct contrast between the titles and supplementary words.

Please click to enter a picture description

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

3. Find hierarchy in photography

Nowadays, photographic pictures are used more and more, especially high-quality photographic works can often maximize the quality of design. But why is this? Have you thought about it? One of the reasons is that there are levels in photography.

please click on the input picture description

please click on the input picture description

please click on the input picture description

This B-mounted earphone is familiar to everyone, and it is made by photography, and all three levels are available. Not only does it look very delicate and rich, but it also has a sense of quality.

but what if there are fewer layers in the picture? 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

2. Levels of colors

1. Contrast of colors

Using contrasting colors and contrasting colors to design is also a common method to increase the sense of hierarchy, 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 scheme, it is even more necessary to use points, lines and planes reasonably, otherwise it will be a bit monotonous.

Please click to enter the picture description

From the above design, the designer used the yellow contrast color-blue when matching colors with black and yellow, which can not only make the colors of the picture richer 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

Yellow-blue color scheme and red-green color scheme are also commonly used classic color schemes. As can be seen from the above two cases, the yellow-blue color scheme is more saturated, which makes it look young, fashionable and scientific, while the other design is red-green-blue color scheme with lower saturation, which makes it look more retro and deep.

2. The popularity of gradient color

Gradient color has been popular for several years. This year, Taobao's mobile app is also designed with gradient color, which shows that the application scope of gradient color is also growing. The gradient itself has the characteristics of rich layers, so the use of gradient and reasonable collocation of point, line and surface elements will have 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. And 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

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, both for web pages and 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

Gradient colors can be used together, for example, the above picture belongs to the same color gradient, but there is a rule for this use, that is, the saturation of several gradient colors that are matched with each other should be basically the same, otherwise the 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 light Chinese style or a strong European and American style, it will make the picture rich and layered without "messing up" or "spending".

Please click to enter a picture description

Please click to enter a picture description

We can see that there are many colors in the above legends, but why do we feel very rich and layered? Yes, it is the control of saturation and lightness in place.

please click to enter a picture description

please click to enter a picture description

3. Level of text

1. Font contrast

Font is a difficult part that we must use in our design, but the formal part that bothers everyone will make the picture level extremely rich. Even when there are only words without patterns, we can get amazing results as long as the layout is reasonable.

Please click to enter a picture description

Please click to enter a picture description

Different fonts express different artistic conception and meaning, especially Chinese fonts have been passed down for thousands of years, and each word has a specific meaning. However, western languages are mainly decorated with serif and non-serif glyphs. Sometimes rough, sometimes slender.

please click to enter picture description

please click to enter picture description

please click to enter picture description

2. Contrast of words

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

please click on the input picture description

I came there to analyze and deconstruct this work. 3% is the largest area in the text, and it also accounts for the largest proportion in the picture elements. Through the explanation of DISCOUNT VOUCHER, this is discount information, and this explanation is also the second largest proportion of the text in the picture. Then there is the following information such as time, address and telephone number, using the smallest number of words. Through these three text sizes, the levels are opened, and three levels are obtained at once. Together with the background of the last pattern, the white background and the golden bow, there are 6 levels. In addition, in order to unify the picture, the fonts of the text are all 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.

font color. The above two posters of aranya are a series. Changing the color of the theme text aranya into green and blue respectively 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, let's 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 on the picture description

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

Summary

In fact, the hierarchy is formed by comprehensively using the division of points, lines and planes, the collocation of colors and the typesetting of words, and strives for perfection in the details of size ratio, color selection and alignment, and the hierarchy naturally emerges.