While flat design is necessary and important at times, adding depth to a design opens a whole new world of visual interpretation. Dimension allows for a design to feel more realistic, more engaging, and much more visually interesting. It can either make a design feel like its popping off a screen or page at you or stretching back into a created space on the page. Essentially, depth gives a sense of distance, and it’s this distance that leads a viewer to be drawn into this three-dimensional space that has been created.
Depth can be created in graphic design by using a variety of techniques, including the following:
1) Drop Shadows
The most common of these techniques is the use of drop shadows. Adding drop shadows to objects within a design immediately creates a sense of distance between the object itself and the area that the shadow is being casted on, showing that the object is placed above another layer within the created space.
Depth can be created in graphic design by using a variety of techniques, including the following:
1) Drop Shadows
The most common of these techniques is the use of drop shadows. Adding drop shadows to objects within a design immediately creates a sense of distance between the object itself and the area that the shadow is being casted on, showing that the object is placed above another layer within the created space.
2) Size and Scale
Using varying size and scale is another great way to show distance in a design. When viewing large and small objects in comparison to each other, larger objects tend to appear closer, and smaller objects seem to be further away, creating that sense of depth. When viewing this set of circles below, it appears as though the circles are getting closer and closer from the left to the right side of the page, right? This appearance is due to the increase in size of each circle. This technique can also be used in scenic designs, like the image in the next section, to show which element is “closer” in the scene compared to the rest.
3) Overlapping
Overlapping objects makes it seem like your design has multiple layers, which once again gives the appearance of depth. In this example below, we get the sense that there is a whole mountain range going back into the image because of the layering that is used with the mountains. We know that the mountains on the far right and left are farther back in the picture than the rest because of both the differences in size, but also because they are overlapped by the remaining 3 mountains.
4) Perspective
Changing the perspective of a design can change the feeling and interpretation of it completely. Compared to flat design, which has just a straight on two dimensional perspective, giving the perspective of a design from a different angle can create much more dimension within your designs. Linear perspective is a commonly used form of this technique, which uses converging lines at one or more points to create that sense of depth and distance. The most common example of this is having a road that appears to be going on and on into the distance.
This technique can also be used to give depth to text as well, whether it is in a logo or graphic. Take a look at the logo below, which uses perspective to create a three dimensional block out of text.
5) Gradient background
Background colors and images can be a huge factor in creating depth. A commonly used technique, especially in web design, is using a gradient background to create more depth within a flat colored background. This is helpful when designing things like buttons on a web page or images that are linked, because the depth causes the image/button to pop more off of the page than the rest of the content, drawing in the attention of the viewer.
Whether used alone or paired with another, all of these techniques will add dimension to a flat design in a way that is much more engaging and “real”. If your looking for a new way to make your designs “pop”, give one of these a shot!
