Depth perception is the visual ability to perceive the world in three dimensions (3D) and the distance of an object.

Source

Depth of perception will have influence on how your viewer sees an object and what kind of effects you will be adding to your design element. Let’s look some of the methods of adding dimension to a website.

Shadow

Any object casts a shadow by intercepting light, which informs the viewer of the object that the it is psychically there. We can do the same thing on a webpage by adding drop shadow to your body element, icons , buttons. Adding drop shadow to images and icons can achieved by using any image editing software such as Photshop, Gimp.
We can also add shadow by using CSS3. Here is an example :

-webkit-box-shadow: 2px 2px 2px #333133;
-moz-box-shadow: 2px 2px 2px #333133;
box-shadow: 2px 2px 2px #333133;

When adding drop shadow keep in mind that distance between the object and shadow also plays factor in mimicking shadow of an object.

Perspective

Perspective is a fundamental concept in 3D designing. Prespective gives an approximate representation, on a flat surface of an image as it is seen by the human eye. It is also one of the most important aspect of drawing. It helps designer to guide the viewer to a particular object.We can produce perspective on a web page by replicating or imitating a real object.

Consider Cupcup website, the rendering of the storefront is very realistic. It is almost same as if the viewer is standing right in front of the store not viewing it on a webpage. As a designer you have to visualize the website on your mind. You have fill in the gap between real element and the graphic element on your web page.

Related

• Showcase of Depth and Perspective in Web Design
• Perspective Lines Web Layout

Illustration and Cartoons

One can also add depth to the website by creating illustration or cartoon charters. Without saying depth and shadow already comes into to scenario and drawing objects must be positioned in three-dimensional space. Most of illustrator actually draws the image using a tablet or scan a drawing into Photoshop, then adds color to bring the lifelike feeling.

A good color palette also can help in rendering depth. It means that the mixture of light and dark colors has been done in perfect combination. Dark colors are generally used for background and light colors for the foreground. Just remember that the lighter colors attract the eyes .

Size is another determining factor in adding depth to the website. But one thing needs to be mentioned here. Size does not have any individualistic role in adding depth to the website. Size has to be combined with overlapping layers to get the desired effect.

Adding Photographs

Photographs is another way to reproduce what the human eye would see . However, this is where depth of perception comes in. You have very creative on how you use an image on a website  You have to incorporate the website seamlessly so that it brings three dimensional factor to a webpage.

Many people use their own portrait images to personalize and visually add depth to websites.

Last but to least, lot of website actually combines all these factors to create a unique website that is interactive and makes the website “pop-out.”

Websites with Depth and 3D Elements

We have discussed couple of ways above to add some realism to a webpage. Now, let’s see some websites that uses those technique well.

You can use any of the above methods to add depth and bring “3D” aspect to a website website. If you have any suggestions on please share with us.

Lead Image Credit

Bookmark or Share This Post