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.

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

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.

Sharing is Caring
  • http://www.designbizz.com/ web design

    The tips you have been provided here is really great and the designs you have been posted here is really awesome…great one

  • http://www.designpanoply.com/ Design Panoply

    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.

  • http://www.indian-seo-company.com/ Caroline

    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…

  • http://www.fix-computers.net laptop_repairs_manchester

    Great article, like it. cheers

  • http://www.creativity-quotes.com Colin the Creative

    Excellent stuff, depth is something I’d like to learn more about, so a very timely article. Thanks, Colin.

  • Philippines Virtual Assistant

    Great Article … Interesting web design trends … thanks — Kathleen

  • Brett Widmann

    These are great tips! Thank you for the help.

  • http://www.aktivtek.no Lage Hjemmeside

    This I call inspiration. Every time I have to start a project I have to watch something pretty to set my brain on. Thanks for that I could do it here. Regards Lage Hjemmeside.

  • Justin Roman

    Hey that is a good post & a good set of coversations too. Keep sharing, that is good…

  • http://linuxthebest.com Sinbad Konick

    You just sharing amazing tips and tricks to us we are really grateful for that…Keep sharing many more…

  • http://www.geekandblogger.com Pavan Somu

    Liked the Shadows and Illustration effects. They are something special for me to give them a try.

  • Jai

    This is something I have to work on. Thanks for this tips. Very useful.

  • http://www.satyathakur.com Satya Thakur

    This is one of the few great articles from Slodive which really can really give a boost to the web designer.

  • Kamal

    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.

  • Tarun Jaitely

    Nice set of tips listed here. Thanks for sharing.