Tips and Trends on Creating Depth in Web Design

15
63

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.

mosaiko
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.

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

abc

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.

Nisha is the head blogger for Slodive.com. She loves tattoos and inspirational quotes. Check her out on google plus https://plus.google.com/u/0/116437517919411097994.

15 COMMENTS

  1. Depth in design is one thing that separates professional designers from beginners. It takes more than just the knowledge of Photoshop tools, but an artistic eye as well.

    We recently posted a tutorial on getting realistic looking depth using a shadows and other techniques on our blog.

  2. I really didn’t knew about this depth tool before but after seeing and reading so many new things, I think it will be really very helpful for the designers…Thanks for sharing this with us…

  3. It is going to be one of my favorite and the most visiting posts. Thanks for sharing such useful techniques for depth in design the websites.

LEAVE A REPLY

Please enter your comment!
Please enter your name here