In a fast growing trend, web designers are making clever use of images to add depth and interest to the two-dimensional web.
As a media form, the Internet is something of a paradox. It is at once a broadcast (YouTube, podcasting) and print media. It offers stunning interactivity and static text. It can be full of color or devoid of it. With such pliability, a web designer can have a significant impact with a few subtle techniques. One such example is a trend toward adding depth with a simple, but well planned background image.
Depth Perception and Human Visual Cues
The science of how humans perceive depth is extremely complex and interesting. On the one hand, researchers have been able to identify many of the visual, psychological, and physiological aspects of depth perception, but on the other hand, technologists cannot seem to make 3D movies that don't give some viewers a headache.
Effectively, depth perception can be divided into oculomotor and visual cues.
Oculomotor cues are the result of physical sensations associated with perceiving depth. These physical sensations are generally referred to as accommodation, convergence, and myosis. Wherein accommodation describes the physical sensation from your eye muscles trying to focus; convergence describes the rotation angle of the eye; and myosis describes the relative size of the pupil.
Fortunately, if you just want to add perceived depth to your otherwise static web design, you can focus your attention on the significantly less complex visual cues, or more specifically static monocular visual cues.
Static monocular visual cues are image details that trick the mind into seeing depth, where it does not actually exist. These sort cues are generally not dependent on the differences perceived by each eye (stereoscope images, for example, produce binocular visual cues) or on motion to communicate depth. Rather, they are static features, five of which can easily be used to add depth to your web designs.
Shade
When presented with subtle differences in color (or lightness), especially when that color is blurred or graduated rather than stepped, humans will often perceive that difference as shade and, also, shade as a measure of depth.
Here is an example from ThinkGeek. Notice that the shading below the page's main navigation provides the illusion of depth.
In this next example from the Surf Ride site, shading is again used to make a navigation bar seem closer to the viewer than the section below it.
The Carl Cartee store page uses shading to provide depth and create the illusion of louvers.
Gradient
Color and texture gradients can also add the illusion of depth, particularly when the near field seems to be more sharply in focus and the far away field is blurred. In these cases the human eye sees the difference in color or texture as an indication of distance and, therefore, depth.
As an example, notice how ShoeGuru's one-pixel wide gradient background, which is repeated horizontally, creates an apparent stage for shoe images.
In this next example from e-laptops, notice that the white-to-gray gradient makes the star symbol appear to have more depth.
Occlusion
Occlusion is the technique of placing one object in front of another to give the illusion of depth. For example, notice how the monkey near ThinkGeek's footer has its left arm and part of its torso behind the main body of the page, effectively tricking the eye into seeing depth.
Another example from the same site shows an "On Sale" tag resting on top of a banner and a banner on top of the main body of the page.
On the Keedo Kids Clothing site, a Post-It-Note graphic occludes the main section.
Relative Size
When the mind imagines that the absolute size of two or more objects is the same, but perceives them at different sizes, it assumes that the differences are due to distance or depth. So that adding similar but differently sized items provides a 3D visual effect.
Shopify uses this technique, along with occlusion, to produce the illusion of depth on its home page.
In a similar fashion, the Symphony CMS site also uses relative size.
Perspective
Perhaps the most obvious use of monocular visual cues is perspective, wherein the image itself seemingly has depth. This can be accomplished with photo-realism or with simple two-dimensional shapes.
For a photo-realistic example, notice how the image of the iPhone is in perspective on the Apple site.
The StoneTire site uses perspective and some occlusion to make a truck appear to have depth.
Try It For Yourself
Armed with these techniques, you should try to add depth into your next web design. To help get started, check out Drew Coffin's tutorial about creating ribbon elements. It will help you produce designs like this one.
Resource
- Stephan Reichelt, Ralf Häussler, Gerald Fütterer, and Norbet Leister's Depth Cues In Human Visual Perception and Their Realization in 3D Displays
