Design works have no sense of space? No grades? Too dull? What's the trick?

A problem that leaders and customers often say is that this design always feels something is missing, too flat and lacking in hierarchy. Please change it again. You may be in a mess, and the hierarchy knows it, but how to do it? In fact, there is no clear official definition of visual hierarchy, but we can understand it as a way to express plane composition and space composition through points, lines, surfaces, colors, graphics and other modeling elements. Reasonable layout of points, lines, surfaces, colors and figures will make the plane and space more reasonable, that is, the visual level.

Visual level is reflected in many aspects, such as color, element size, contrast and so on. Below we can explain on the game website that the design is the same.

First, the level of picture elements.

When designing, if you just put the material on it and don't handle the hierarchical relationship between screen elements, such as light and shadow, perspective between elements, then the product will definitely look flat! Chaos! Flowers! The following figure

You may wonder, I have put the elements that should be put, why does it still appear to be hierarchical? We can learn from some good photographs how they deal with elements. The visual level is actually the same as the perspective in photography, which will benefit you a lot.

The above is my analysis of the photo above. As can be seen from the figure, some techniques used by photographers to deal with the visual level will exist in general photographic photos, and the current visual level will be realized through different treatment techniques for the three.

If the foreground is regarded as the visual center as shown in Figure 1 and Figure 2, then the foreground must be the highest and clearly visible, and the vision must be the weakest in fuzzy vision. If the middle scene is regarded as the visual center, as shown in Figure 3, then the foreground and vision are the weakest. If you do this, the whole photo will look layered and natural, because that's how the human eye sees things. As for how to strengthen or weaken, it is nothing more than size, light and shade, and clarity.

Having said that, what does this have to do with our design? How to use these in our design? Let's take a look at how excellent designers handle it!

The web page above is EA's excellent baseball display page artist recruitment, which is very good. As you can see, this website has obvious layers, so how did they do it? Let's analyze their handling methods!

It can be clearly seen from the webpage that the webpage is divided into three scenes: front, middle and far. With the foreground as the visual center, the foreground is sharpened and the middle and far scenes are all Gaussian blurred through different processing methods for different levels of elements, as shown in the figure.

Compared with the above picture, this processing method is somewhat different, taking the middle scene as the visual center, so the elements of the middle scene are clearly visible. Weakening the foreground and foreground by narrowing and blurring will make this processing method more layered.

Second, the level of color.

The level of color, it is not enough for you to do the level of elements well, and color is also very important. There are many tutorials on how to match colors online, so I won't say much here. Here, I mainly talk about how to express layering through color matching.

Everyone knows that there will be main colors, auxiliary colors and contrast colors in the decoration design of online stores, but I don't know why the products are not monotonous and fancy, so this may be because the color hierarchy is not handled well. Color hierarchy means that after I remove the color of my work, the proportion of black and white does not appear in my work. If a work is much darker, the overall effect will be very heavy. If there is more white, the effect will be pale. The more gray, the less white and black.

As can be seen from the above picture, even after the color is removed, only black, white and gray are left, and the picture is not monotonous and uneven. Because the designer adjusted the brightness and purity of the color, even after the color is removed, it looks very layered.

The ratio between colors will also affect the color scale, as shown in the figure below. The main colors are blue and black, and the auxiliary colors are white and yellow. You can see that the proportions of these colors are not equal. If there is only one color everywhere, then this page will definitely fall into the pit of monotonous color. If there are too many colors and each color accounts for a large proportion, then it will definitely fall into the pit of fancy colors, so the proportion of colors must be grasped, which is generally the focus.

You can see that important information stands out in the whole page. Through the contrast of light and shade and size, the visual level is highlighted, so as to realize the visual level. The web page made in this way is not monotonous or fancy, which is convenient for visitors to find important information!

Summary:

The visual level is worth learning for friends. A single visual level is only part of the design. In addition, font layout and material selection also need to be studied. It's not very detailed, but I hope everyone knows that this article is about something that needs attention and thinking in design.