Have you seen one of those website that makes you want to touch the monitor to feel the texture or a
beautiful big image so real you want to jump right into it? No, we're not talking about those fancy 3D
flash websites but one that plays with depth so well it creates a whole new dimension right at your
flat screen.
Nike Better World used the mixture of fluid movement and layers of images to replicate a faux 3D effect to the
website. Everytime you scroll the page, the different layers of graphic moves creating a space between the objects. We especially enjoy looking at the page with the
orange running shoes. They looked as though they are in the midst of falling everytime the page is scrolled.
It is not difficult to put some magic touch to your website to give them more depth.
Here are some quick tips we've learned to share:
1. The 1px Wonder
Notice how the white box stands out from the background? Actually a
1px grey line was applied to the box to give it a faux shadow between the white box and the background. This works especially well if you just want a simple touch of depth to your website and easily achievable using
CSS.
Same method can be applied to navigational bars, buttons and others to create the effortless faux 3D effect for your designs.
Apple did a great job in using these magical 1px lines on its navigation bar to separate the section of the pages. The darker lines works as shadow whereas the lighter ones creates highlight.
2. Foreground and Background
While choosing an
image to use, always choose one that has a strong perspective and focal point. Otherwise, try
editing the image to emphasize more on the object at the front and a blurred out background to show depth. For instance, we've edited this image with two cows. The cows are nearer to you hence the color is brighter and clearer where as the background is blur and darker. This helps to make the cows stand out from the background creating a good
depth of field.
3. Size Does Matter
An object on its own does not show any depth unless it is being compared to. By playing with the size of an object near and far it creates an instant depth. This method is commonly used in
carousel styled photo gallery or operating system UI.
Although depth is not an important element in web design, but why limit yourself? There are so much more methods you can try and explore to give your design more flair.
Here are some of our favourite websites using depth beautifully:
http://www.floridaflourish.com/http://www.wearecupcup.com/http://www.joshsender.com/http://riotindustries.com/http://365daysofastronomy.org/http://www.jonabel.com/http://www.nineflavors.com/http://www.motocms.com/http://substrakt.co.uk/http://carlcartee.com/
Notice how the white box stands out from the background? Actually a 1px grey line was applied to the box to give it a faux shadow between the white box and the background. This works especially well if you just want a simple touch of depth to your website and easily achievable using CSS.
Same method can be applied to navigational bars, buttons and others to create the effortless faux 3D effect for your designs.
While choosing an image to use, always choose one that has a strong perspective and focal point. Otherwise, try editing the image to emphasize more on the object at the front and a blurred out background to show depth. For instance, we've edited this image with two cows. The cows are nearer to you hence the color is brighter and clearer where as the background is blur and darker. This helps to make the cows stand out from the background creating a good depth of field.
An object on its own does not show any depth unless it is being compared to. By playing with the size of an object near and far it creates an instant depth. This method is commonly used in carousel styled photo gallery or operating system UI.