SloDive - Design Resources and Inspiration

Tips and Trends on Creating Depth in Web Design

Posted: 23 Nov 2010 06:27 AM PST

I have found many designs to be dull and flat. by adding some depth to a design it can give your work character, emphasis and can in some cases make your design memorable. I have compiled a list with hints and tips on how to add some depth to your designs and create emphasis and more impact to certain areas.

Perspective

Perspective is a great way to create depth on a 2d platform, as you can see in the example below Mosaiko has created a perspective look to their site, by taking all the lines back to a point then vertical gives the illusion there a flat top. By adding in the banana image with some reflection, this makes the image look as if it is sitting on a flat surface.

mosaiko
Source

Here is another good example where perspective has been used. with the use of images and shadows, they have created a recessed look, this gives emphasis on the navigation making it stand out more.

james good
Source

Plan View

I’ve see more and more websites use this technique, giving the viewer a top view effect. Displaying objects from their top view and adding shadows, making them appear to be placed there randomly, but cleverly the pencil does a good job of pointing the viewer to the first paragraph. By adding smaller images scattered about this adds to the effect.

plan view
Source

This technique can also work in the footer, giving the page an overall feeling of depth.

plan view
Source

Shadows

Shadows are a great way to make a object or element appear to recess, indented or hovering. Shadows can create the illusion of depth even when used suitably. Giving buttons a simple 1px drop shadow makes the button appear to be raised. Applying a iner shadow then creates the button to seem recessed, this is a common technique for buttons tabs and rollovers.

buttons
shadows
Source

Wraps

The page fold is another good way to add depth to a design. the fold is a great way to emphasize an area, and is great in drawing the eye. It came about in 2006 and since then its have become hugely popular and can be seen i many designs today. The fold is mainly used for titles, navigation and advertisements.

wrap

Illustration

Illustrations are another great way to a some depth into your designs. When using a illustration to create depth something to think about is the image will be the centre of attraction so you dont want to draw away any emphasis away from other elements. A good illustration will make the website more memorable so be sure to use high quality images.

letterpress
Source

Positioning and sizing of images is another factor to think about when using illustrations to add depth. In the example below they’ve placed images behind one another creating the illusion it is further away. they have also added out of focus effect to closer images to make the main image stand out.

Panelfly
Source

Summary

Depth is a useful tool in design, its is not always essential, but does add some flair to your designs. Good design leaves a lasting impression so remember, when adding depth to any design, be sure to give the correct areas emphasis.

Jovial Art of Julia Alekseeva – I.D. 87

Posted: 23 Nov 2010 04:17 AM PST

We are showcasing some superb work done by this super talented artist. You can see How she Has played wisely with a perfect combination of light and bright colors. Cruelty, love, Hatred, you talk about any emotion, and she will sow you Her superb skills in showing all the emotions right.