Tips and Trends on Creating Depth in Web Design

As designers were always looking for new ways of design innovation, more and more designers are experimenting with depth in their designs. You may ask why would we need depth in a design? Depth is a useful tool for emphasizing an important area or element and also an overall more appealing visual. Using these few simple techniques you can create depth in your designs.

banner Tips and Trends on Creating Depth in Web Design
Source

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.

perspective Tips and Trends on Creating Depth in Web Design
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.

cutout Tips and Trends on Creating Depth in Web Design
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.

planview Tips and Trends on Creating Depth in Web Design
Source

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

footer Tips and Trends on Creating Depth in Web Design
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 Tips and Trends on Creating Depth in Web Design
shadow Tips and Trends on Creating Depth in Web Design
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.

wrap1 Tips and Trends on Creating Depth in Web Design

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.

car Tips and Trends on Creating Depth in Web Design
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.

ipad Tips and Trends on Creating Depth in Web Design
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.

Sharing is Caring
Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment Rules

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i><q cite=""> <strike> <strong>

Kindly use a valid Name and Email address. Spam or unrelated comments will be deleted

If you are a regular commenter, be sure to check our Comment Contest.