The six fundamental ways of adding depth to your designs

“It is not length of life, but depth of life.” – Ralph Waldo Emerson

The typical web design, you will notice, has advanced a considerable amount since the days of the animated and somewhat awfully designed geocities websites. With the improvements in the markup languages HTML and CSS and the incredible graphic software now available, website design has become an industry in itself. It is therefore important to stay up to date with the latest trends and to also to be imaginative and to spark new ones. It is because of this that many people have begun to experiment with depth, this article will take a long hard look at depth and explain various ways in which it can be achieved.

For the past few years now, web designers have been adding depth to their designs. What is depth? Well in terms of perception which will be my main focus today. Depth perception is is the visual ability to perceive the world in three dimensions (3D). Now of course this is impossible when it comes to design on 2D surfaces. Nonetheless, we can still simulate the effect using various methods.

William of Tyre was one of the first men that attempted to add depth to his work

But why would we want depth in our designs? Depth can be useful a tool for distinguishing certain areas of you website. When you used well you can even divide your design into layers, one layer being in the foreground, another in the background and any in between. With layers, content that appears in the foreground is given a focus and emphasized, whereas the opposite effect applies to the background.

1. Perspective

Perspective can be great for guiding the reader to a particular element. In the following example we notice how the designers at Flourish have used perspective to make the tree the focal point of the page. Along with some beautiful jquery, the site interacts with the reader well. However, when emphasizing an important area or element it is essential that other areas of the same importance do no suffer an deemphasis (unless that in the attention). I believe Flourish have done an excellent job in putting focus on the tree and their design views, however because of this I believe their slogan and logo just above isn’t given the attention it deserves. Nonetheless, a great example of perspective in web design.

Flourish Web Design

Nine Flavours have also used subtle perspective to add emphasis to their logo. The background appears recessed and so the logo (thanks to a drop shadow) is brought forward.

Nine Flavours

Daylight Touch throws in a bit of perspective by adding a 3D Iphone image. You will notice the Iphone facing to the right and so its vanishing point is also to the right. This guides the reader’s eye to the product name and then the two call to action buttons below.

Daylight Touch

2. 3-Dimensional graphics

During 2009 a handful of designers who were daring enough to experiment with depth decided to add 3 Dimensional graphics to their designs. The result was positive and led to a popular trend that involved folding, the same effect seen when folding a piece of paper or card.

The beautiful fold technique

From the Couch

There are two types of folding, rigid and curved. Curvy gives the impression of flexibility and to me, relaxed. The guys over at From the Couch have done an excellent job in demonstrating the beauty of curved folds. Some sites can sometimes go over board with this technique but I believe Marc and David have been spot on here. I particularity look how the shine effect continues around the fold.

Yoast

Rigid folds give the impression of precision. Yoast is a great site demonstrating how a simple fold can add depth to a website. The site also demonstrates how a site can have layers, you should be able to count five. Layers is what depth creates. The layer that appears on top of all others is the most prominent and therefore emphasized (foreground). Whereas the bottom layer (background) usually contains less important information. Each layer tends to be differentiated from the other by a change in colour or opacity. Remember, when adding depth to any website to design, be sure to give the correct areas emphasis.

The fold technique became so popular everyone had a go at it:

Other fold examples

When i came across cubescripts I just had to include it in this article. The perspective used to the right of the design does not add any emphasis or focus to the design but it makes a change from the standard 2-D designs that we see day to day.

A very 3-Dimnesional design!

Illustrations

Sometimes, a ’simple’ 3D illustration or graphic can be enough to add depth. However, bare in mind they will be the center of attraction so it is essential to keep quality high and mistakes few.

Positive Hype

Synch Media

Not only do 3D illustrations add depth and clarity to a website design they can also add character. As soon as the reader lands on your page they will make a snap judgement as to the style of the site, it’s purpose and subconsciously, will this site benefit me. A friendly and inviting illustration can be a great first impression. Synch Media have produced a firendly robot design that instantly gives them an ‘image’. After visiting the website you are most likely to remember it because of the distinguishing robot.

Creative Increase (below) is another great example of a 3D illustration that adds depth, with the help from perspective edges on either side:

Creative Increase

3. Shadows

Shadows are another factor that can add depth to your web design. Be it inner or drop, either will give the impression that an object/element is recessed or hovering. Drop and inner shadows are so powerful that even the most subtle one pixel line can lift an element off the page. Henry Jones over at Web Design Ledger wrote an excellent article talking about exactly that, Adding Depth with Pixel Perfect Line Work.

Dissecting Metalab’s Design

When it comes to subtlety I always find myself returning to MetaLab. To demonstrate how depth is added I cropped the stylish vertical navigation. On the left you can see a 2D list, however even with a lighter colour for the selected item some depth can be seen. When we look at the entire area we notice a few things that confirm depth in the design. Firstly, the popular fold technique is used. Secondly, the point towards the right over hangs the content area on the right. I believe Metalab did not use a drop shadow because they wanted the selected area to ‘hug’ the list rather than to hover slightly above it.

Demonstrating that depth is used

MetaLab navigation demonstrating inner shadow

You will have to look closely (attention to detail) but you should notice a subtle inner shadow on selected items on the top navigation as well. This is another trend that became popular for user interfaces. When clicking a button it feels natural if the button appears recessed, by pushing down on the mouse button, you ‘physically’ push the button on the website.

A drop shadow can lift elements off the page

Here we notice MetaLab have decided to use a drop shadow. Why here? I believe their aim was to improve interaction with the reader. A drop shadow puts the are that much closer to you and entices you join their newsletter or to work with them. A little enticement at the end of a visit can be key when reeling in clients.

Tips

A few tips

4. Focus

Another method that gives your website design depth is, focus. For this we look at the way light and cameras respond to each other. I am no photographer but I do understand that a camera has the power to focus on objects at different distances. When focusing on sometihng relatively near to the camera, the background can appear blurred. Many people use this to their advantage to produce beautiful bokeh photography. When focusing on an object slightly further away, anything close to the camera will also be out of focus and blurred.

My question is, why not use this effect in web design? I am sure there are other designs that have attempted this, but the best example I could find was AWP Express. It includes both, an out of focus background and foreground. Complete with a beautiful brand illustration.

I would love to see more use of this effect in web design. I will definitely be trying it out!

A beautiful example of depth of field in web design

5. Colour Shading and Opacity

When searching for ways to add depth I didn’t realize how effective a simple colour palette can be. A good palette that allows depth will contain a mixture of dark and light colours. Dark colours can be related to the background and light to foreground. This is mainly because lighter colours tend to attract the eye whereas darker colours require a little more attention.

If we look at Versions we immediately notice the central focal point and the lovely brand illustration. When looking slightly closer we notice the background contains the same grassy hills but much darker and monochromatic. This is strong evidence that light colours are emphasized when on top of dark colours. It also concludes that colours on top of shades of black or white are emphasised. Furthermore, you will notice the dark gray hills in the background also have a slight blur. Perfect depth!

Versions

The AppStorm design also demonstrates a great use of depth with colour. The design is mostly dark gray but content is emphasised with a white background.

Appstorm, white on very dark gray. Result: Content emphasised

Similarly with Vuu Media:

I think I'm in love with this design!

6. Size and Placement

A final way to add depth is the most obvious, Size. However, size on it’s own won’t add any depth as seen in William of Tyre’s artwork. If you would like to use size to add depth then you must combine it with overlapping. If we take a look at how Symphony have showcased their CMS it appears as if the screenshots to the left are further away then the ones on the right.

Symphony demonstrating depth with size

Derek over at Valen Designs shows us how it’s done with the addition of some nifty javascript.

Valen Designs

Summary

To conclude, depth is, by all means, not essential to web design, but it does give your design a bit of flair. I have discussed six ways in which you can achieve depth with each being fairly easy to apply. I am always a fan of large illustrations that make me stare, it usually leaves and good first and last impressions so I would thoroughly recommend those. As mentioned, I would also like to see the design community playing with depth of field, AWP pulled it off and produced a stunning design so why can’t you? I hope you have enjoyed the first article of the new year. My plan is to stay consistent, so future articles will be of the same quality

  

Written by Liam McCabe

The almighty creator of CreativityDen. Loves every bit of design as well as going out with friends, playing golf and enjoying life!