Creating Depth in Web Design: 5 Design Tricks

Giving depth in design can give a website a unique feel, and a more memorable appeal. Depth can create a sense of realism, even if it's presented in an abstract way. This added sense of realism can create a lot more interest in any design, whether it be a graphic design, logo, web design, or other. Creating depth on an otherwise flat page can also be a great way to add emphasis to particular elements, and to help create correct hierarchy in design. Flatter surfaces may get less attention, while those with depth will gain more attention.


In this post we'll go over five design tricks and trends for creating depth in design, and some examples to go along with each. We'll also cover the do's and dont's of using depth and 3D features in design, and cover when it can be appealing, or when it can be too much.

5 Design Tricks

Realistic Interfaces

While this look is all too common, it's effective. The look of real, pressable buttons and elements creates for a sleek design that seems much more easy to interact with. Gradients, shadows, and other overly-used elements don't have to smother the page, but adding a few sleek effects to a button can really make it stand out. In the example below, we can see how this 3D button stands out among the link next to it, giving it a primary call to action.

Creating realistic interfaces however can take a turn for the worse. We've all seen designs that overly use gradients and drop shadows, and are anything but subtle. The key to creating successful interface elements with depth is to really imagine how they would look realistically - does that drop shadow look like it's really floating off the button naturally (or other element of your choice), or does it just look like a drop shadow placed there without real reason? Don't just make 3D interface elements, make realistic ones.

In the image above is featured an example from a great tutorial on creating depth in design like this: Crafting Subtle & Realistic User Interfaces. This tutorial specifically covers a lot of theory and best practices when creating individual 3D elements with this style, but there are plenty more step-by-step tutorials and examples around the web in full web design interface tutorials, button elements, and so on. Simply going through the motions for web element tutorials on a site like PSDTUTS is a great way to begin learning how to accurately and correctly create these elements with realistic depth.

Wrapping & Ribbons

Creating wrap around has been a very common design trends within the last year or two, and while it's used very commonly, it's also a nice technique that creates depth in design for a nice visual effect, and can also help bring attention easily to any areas that need it, like in our first example above.

There are plenty of different looks for this, from a solid folded look above, or to a more rounded and soft look. A great showcase for these elements can be found on WebDesignFan: Showcase of 3D Elements in Web Design.
These ribbons can often be used for headlines, blog dates, featured items, or just anything else that really needs to stand out, such as a call-to-action design element (Sign up, Contact, etc.). Just looking through the showcase mentioned above, or through others like it, can give you an idea of where they are commonly used, and some great places they belong. In other circumstances, some designers use wraparounds to create depth and separation between full site elements.

For example (above), a footer may separate it self from the above sections on a page by acting as a complete wrap around itself, wrapping around a content layer. Above links to a tutorial that's great for softer, or rounded, wrap around. Likewise, WebDesignTUTS has another great tutorial on the more common "folded" wrap around look: Create a 3D Ribbon Wrap-Around Effect (Plus a Free PSD!).

Perspective

Creating a unique perspective can also add depth, in a very visually appealing way. This method is not as subtle as many other design tricks that create depth, and is often meant to create the main interest in the design. A cool effect, and often times a sense of realism (even if in a cartoon-like way) can create a memorable experience for many visitors.

The perspective design approach can come in many different forms, and there really isn't a lot on exact, step-by-step how-to's for designs like this. Rather, perspective designs are fairly unique from designer to designer, although the general idea is quite a trend.
The basic rules for creating perspective are much the same as you may have learned in an art class back in school - following consistent angles and horizontal alignment can make things look right, as well as the right proportions size-size and with any change in angles across a horizontal space. Take a look at some tutorials from an artistic standpoint: one-point perspective tutorials, multiple perspective tutorials.

The above is a great example of an abstract perspective in web design. Likewise, there are more realistic examples, as depth in any form creates more realism on a 2D space.

Marc's Design offers realistic interfaces and depth using a few of the methods above, as well as perspective to bring focus to the main element: the computer interface featuring the portfolio pieces. Perspective, while primarily creating strong visual interest, can also be directed to points of interest on the page.

Breaking the Grid

Sometimes there can be none or very little design features that give an element depth, such as drop shadows, curves, and gradients. Depth can also be easily created by overlapping the grid, and placing some elements over or under others. With the design below, simply making the content area overlap the rest of the areas to seem bigger, makes it seem closer — giving the design depth, with merely flat elements. A slight drop shadow is used in this design for more emphasis, but there are also plenty of examples that create depth in a similar way, without this added design touch.

In the design below, almost all the page elements are flat. However, by overlapping a few pieces, depth and order is created. This creates some interest in terms of design, and keeps the design from looking too flat or boring.

Finally, we see a web design that uses primarily flat elements and sections, and has created depth within the imagery of the site. Overlapping objects create depth for the entire design, and the coffee mug acts as apart of this image, but then overlaps the header, creating more depth and interaction between the site sections.

Playing with Shadows

Creating depth with shadows is the final design trick we'll discuss today. It's a popular trend, and as one can see, it's used in many of the design techniques featured above already. However, there are a lot more interesting things one can do with shadows, rather than just creating a subtle effect. Things such as floating elements, warped pages, and so on are all creative effects that can be made with a unique use of shadows.

A rounded shadow below an element on a page can make it appear as if it's in 3D space, no matter if the floating element is a lifelike interface like above, or a flatter design feature.

A more realistic approach can also be used, and quite easily. Simply using a photo or some element with a shadow included can help it stand out, if used from the right perspective like in the example above. Otherwise, for Photoshop-made elements, realistic shadows from another unique perspective can also be imitated digitally.

A shadow from a front light source can give the impression of an otherwise flat element the ability to "stand up" or be propped up for display. Notice the subtle gradients to the lower left and right of the screenshot, as well as a small realistic shadow below the iPhone as well. This design affect also mimics a shadow that would be on a glossy surface. Assuming different textures the shadow lies on is another great way to get creative with shadow effects.

Finally, warped shadows are a more recent trend that can be used in a number of situations, and provide a sense of depth easily without sacrificing structure from a development standpoint much of the time. (See how the content area above is still square, and does not need to be bent itself - easy to code and easily expandable). A similar technique, page or corner curls, are also often times used to create points of interest.

Conclusion

Depth doesn't always have to be used in design in order to create a great look, but it is a common trend that can still create great results. There are several techniques that work, as well as some things to avoid as well. Above we covered five of the most common trends for creating depth in web design, but of course, there are plenty more. If you know of any further examples, tutorials, or trends, feel free to link to them below!