In general, there are two possibilities when designing on a two-dimensional surface: you can keep it flat, or you can create the illusion of three dimensional space or spatial depth. The illusion of spatial depth can be shallow or deep, recessive or projected.
The size and scale of the shapes or objects play an important role in creating the illusion of spatial depth. The size of one shape or object in relation to another can make elements appear to move forward or backward on the page (Landa 2006).
Some examples of web pages with depth (some more than others):
- Zen Garden praxis_de_cssocean_zenocean
- Zen Garden - nicolehanusek.com - traffic
- Zen Garden 165
A couple of these are (slightly) interactive. So check them out:
- http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenocean.css
- http://csszengarden.com/?cssfile=http://www.nicolehanusek.com/zenGarden/traffic/text.css
- http://www.csszengarden.com/?cssfile=/165/165.css&page=1
The Illusion of Spatial Depth
- In Photoshop, turn on your grid (View > Show Grid).
- Draw volumetric shapes like cones, cubes, and pyramids.
- Use the grid as a guide for the vertical, horizontal, and diagonal lines.
- Fill the entire page. Avoid creating flat shapes like squares and triangles.
- Use gradients to give your shapes a 3D appearance.
Made using Fireworks, my attempt at the illusion of depth, in PDF.
I’m a great fonder of Zen Garden but you can believe that I never seen like these beautiful and unique Zen Garden….so Thanks a lot for sharing you idea….