11 Ways To Add Depth To A Design

Posted: 05 Jan 2012 05:30 AM PST

Adding a sense of depth to a design can make that design seem more realistic and increase visual interest. Building out the 3rd dimension pulls the viewer into the design and can help you set up entry points and control flow throughout your design.

We’re 3-dimensional beings. Objects around us exist in 3 planes, but on screen we work in only 2 of them. The lack of the one dimension means our compositions appear less than lifelike. Adding back the illusion of the missing dimension will add back a sense of reality, a sense of the physical.

What can we do to create the illusion of depth in our designs?

Depth Cues

If we think of the 3 dimensions as up/down, sideways, and towards/away, it’s the last we’re talking about when seeking to add depth to our work. Because this towards/away dimension isn’t really present we communicate a sense of depth through a series of visual depth cues.

There are 2 types of depth cues

pictorial cues — can be reproduced in a photograph or realistic painting
non-pictorial cues — can’t be reproduced in a photograph or realistic painting

Pictorial depth cues do not have to be applied singularly to the entire design. They can be applied independently to the different elements that make up your design.

Each cue has its own unique properties that communicate different visual information. Each can communicate something different while still expressing depth.

Your visitor will find depth even in a flat design so the question isn’t whether or not to be 3d or 2d, the question is which depth cues will you use.

The rest of this post will focus on some pictorial depth cues.

Pictorial Depth Cues

Below are some of the different cues we can use to give the illusion of depth being present in a design.

Graphic showing occlusion and transparency with 3 rectangles

Occlusion (overlapping objects) — This is the strongest cue for depth. It overrides all other cues when a conflict seems to be present.

When one object obscures part of another object it’s clear there must be a depth of space between them. Objects that are nearer occlude (cover up) objects that are further away.

It’s important that the partially occluded objects are recognized for their complete shapes or the total composition can be seen as two shapes sitting side by side.

Transparency is a form of occlusion where we’re given a peak behind the occluding objects. Parallax is another technique to show moving elements occluding one another.

One way we can use the above is to organize information so that more important information partially occludes less important information.

Rectangles of different size creating depth perspective

Size and scale — Larger objects appear closer and smaller objects appear further away. By placing different sized objects near each other we add a cue that the difference in size comes from a difference in depth.

If we take things further and create a series of similarly shaped objects, varying scale only, we can create a perspective of size and scale that shows how deep our composition is.

We can use the above to show the relative importance of information. Less important information will take up less space and be smaller.

Texture — By definition textures imply a sense of depth as they aim to let you feel the surface of a visual element.

As distance from the viewing port increases, textured elements become smaller and more densely packed together.

A ground texture can also provides a size reference for other objects.

Linear perspective — By projecting a number of closely parallel lines that converge in one or more places in and around the composition we directly show 3-dimensional space.

These lines don’t need to be visible, though they can be. They can also be implied by the objects in the composition.

Perspective is by definition a technique for representing 3-dimensional objects and depth relationships on a 2-dimensional surface.

Two rectangles with shadows of different size

Cast shadows — A shadow cast by one element on another gives cues about their relative distance. Drop shadows are perhaps the most common way one adds depth. Reflections work similarly in that a reflection appears on a different surface.

When the shadow is smaller, darker, crisper, and nearer the object casting it, the nearer the object is to the surface holding the shadow.

You can increase the depth by making the shadow larger and lighter and placing it further away from the object. Blurring the edges of shadows also increases the illusion of depth.

Two rectangles, one in the upper left and one in the lower right

Location on the picture plane — When objects are seen higher up on the picture plane they are usually perceived as being further away.

Perhaps this has to do with a look at the world around us.

When we stand in our 3-dimensional world it’s those things we see at the bottom (the earth, the grass, the pavement) are those we’re physically connected with, those things that are generally closer to us.

The clouds, the sky, the stars, those things we see above are also further away from us.

Light and shadow turning 2 dimensional shapes into 3 dimensional volumes with depth

Lighting and shading — Much as light adds depth by casting external shadows, it also shows depth in how it acts over the surface of one object. How light plays over a surface gives clear cues about the shape of that surface in all 3 dimensions.

Gradients, Bevels, Embosses, and the like show depth in the way light is held and reflected off a surface.

The surface of an object can also show more or less light depending on its orientation from the light source. Closer to the light source will show a brighter surface with more reflected light.

Depth of field (focus) — The eye focuses on one object and as it does other objects become slightly blurry, while the focused object remains sharp.

The closer another object is to the one with the focus, the less depth is perceived between the two. The further away on the same depth plane an object is from the focused one, the blurrier it should appear.

This is true regardless of whether or not the out of focus objects are nearer or further from you. The blurriness is relative to the difference in depth with the object in focus.

Silouhettes of two people at different distances with a rectangle next to the one further away

Reference to nearby or known objects — Any object of known size provide a reference for all other objects in the composition. The size of the object can be known because it’s a real object like a person or house, or because it’s size has been defined elsewhere in the composition.

The known object adds a context tied to the absolute world and as such adds scale to the picture.

The nearby object adds a different kind of context, but a context nonetheless. An object can only be small in relation to another larger object.

Two rectnagles of different shades of gray on backgrounds of different shades of gray.

Degree of contrast — The contrast between and object and its background is reduced as the distance between them increases. This is why a darker cast shadow appears closer. It typically shows more contrast.

It also helps account for depth of field as the greater the contrast in focus and blurriness, the greater the distance.

Red, green, and blue rectangles

Color — Cool, dark colors tend to recede into the background. Warm, bright colors tend to move to the forefront.

Perhaps a result of the cool blue sky being further away than the warm reddish brown of the ground beneath our feet. It likely also comes about given the different visual weights different colors carry.

Summary

More depth gives you more control over the hierarchy of your design elements as different elements are placed at different depths.

Every image, every design, will divide itself into figure and ground. The greater the depth, the greater the distance between figure and ground, and the more important the foreground element becomes visually.

Since the canvas we work in is 2-dimensional, we can only impart a sense of depth through visual depth cues. There are a variety of different cues you can use, each communicating in its own unique way and each with a different strength in making us see depth.

How many of the above do you use to convey a sense of depth? Several I’m sure. Perhaps a better question is which have you not used?