Design tips Sharing: 11 Graphic Depth Hints method

Article Description: enhance the design of the three-dimensional, depth sense! 11 strokes.

Adding depth to the design will make your design look realistic and visually interesting. Create a three-dimensional stretch that allows viewers to fall into your design. And it can also help you build visual pointcuts where you want to be.

We are three-dimensional, the objects around us are also three-dimensional, but the screen is two-dimensional, the missing dimension means that the visual performance on the page is worse than the visual perception of real life. Through some graphical means, the missing dimension can be recovered to enhance the sense of reality, a sense of physics.

So how do we create depth in design?

Deep Sense Hints

First, there are two kinds of depth hints:

One is a graphical hint--it can reproduce the texture in real paintings or photographs;
A kind of graphic hint----------not reproduce the texture in real paintings or photographs;

Drawing artists refer to their static monocular cues (observed and stationary) as graphical cues (pictorial cues), which can produce three-dimensional depth effects on two-D planes.

Graphic depth implies that the overall design will not create an abrupt sense, can be independent of the role of different design elements, and finally all elements converge into your design, the depth of the feeling came out.
Each hint has its own unique characteristics, expressing different visual information. Each suggestive way conveys a sense of depth in its own different way.
Many users can find a sense of depth in the flat design, so the problem is not three-dimensional or two-dimensional design, the problem is how you choose the depth hint of the way.

Below I will introduce some methods of graphic depth hinting

Graphic depth hint

1. Overlap

This is a strongly suggestive method of depth hinting, which works better than any other, and provides a sense of conflict between objects.
When an object is concealed by another object, there must be a depth of space between them.
The concealed objects must be clearly designed so that they can recognize their shape. Otherwise the overall work of feeling zombie two shapes on two dimensions is tightly attached to everything, not the depth of the relationship.

Transparency is one of the ways to overlap, which gives us a clear picture of what is being concealed. Parallax is another way to show a concealed object.

From the above we can learn that we can use overlapping methods to put the main information on the top, the secondary information placed below, so that the main information to cover up the secondary information, while creating a sense of depth.

2, size and proportion

The larger objects look closer, and the smaller objects look far away, and by placing different sizes of objects next to each other, they can bring a feeling that it is not their actual size, but the reason for the depth of the distance.

If we copy and extend the object and create a series of objects of similar shape, only the proportions are the same, then the depth will come out.
Information organization, important information in close vicinity, eye-catching point, not important information put a little farther.

3, Material

The use of materials gives a hint that this is a bit like the surface of visual elements in real life.
The material is generally fine and close, the precise material also can let the person associate to the real life three dimensional object.

4. Straight Line Perspective method

By organizing, it is possible to create a three-dimensional visual sense by converging parallel lines in the graph to a point or place.
A single line cannot construct a three-dimensional view, but a large number of line energy. It can also imply the relationship between the positions of objects.

The Perspective method is an example of how to construct three-dimensional objects in two-dimensional plane.

5, Shadow

A shadow projecting from one object to another can imply the distance between them. Projection may be the most common method we use to increase vertical feeling.
When the shadow becomes smaller, darker, and more sharp, this means that it is closer to the object being projected. If the color is lighter, the shadow is larger and the shadow is blurred, indicating that it is farther away from the object being projected.

6, the position relationship on the image surface

The higher the object, the more it usually means the farther away from us.
We can use real-life examples to show that.
What we see down there, such as (soil, grass), is something that we all have access to physically, so it's close to us.
We see clouds and days that we cannot touch, at the top, so far away from us.

7. Light and Shade

Just like the projection of that method. The different effects of light on the surface of an object imply that the object is three-dimensional.
Gradient, bevel, concave-convex, can show the effect of light and shade, so as to show a sense of depth.
And you can use the light intensity to show the three-dimensional position of the light source relationship, if the light point, near, if darker, the explanation is far.

8. Focus

The focus of the eye will be clear and the rest will become blurred.
The clearer it is that the closer the focus is, the more obscure it is the farther away from the focus, and the implication is that the spatial relationship is established.

9, reference

Any object of a known size can give us as a reference for comparing another object. Depending on the size ratio of the two familiar objects, we can vaguely perceive their depth or position relationship.

10, Color control

The farther away it is, the smaller the contrast between the object and the background. So the darker projections look closer. The reason is that it is more comparative. Then think of the focus, the farther the object, the more blurred, the comparison is smaller.

11, color

Black seemed a little farther, and the warm bright color seemed to be nearer.

Summarize

More depth hints can give you a better command of the design, and different depth cues provide different depth textures.
The better you do it, the greater the difference between the foreground and the background, the better the graphical presentation of the foreground elements.
How many of these methods have you used? I have used the focus myself, and perhaps a more ingenious question is "which of these methods have you used?" ”

Try a useless method, explore, or you will reap unexpected results.