Use of 3D Effects in Web Design
3D graphics can give web page designs a range of 3D illusions, which are powerful devices for managing attention. Using 3D graphics in web design can also add significantly to overall page filesize, and can reduce usability if overused, so should be used deliberately and with care (unlike the title image above!).
Good uses of 3D effects
3D effects to suggest “Clickable” or “Interactive”
In the real world, things that are pushable tend to be three-dimensional, such as buttons on a radio.
The designers of early graphical user interfaces for computers used this to create a really concise GUI shortcut to say “clickable”.
The button effect is one of the strongest design conventions in interactive design.
Examples of button & bevel 3D effects
In a similar idiom to buttons being clickable, we are used to the concept of instrument “panels” in the physical world.
Often, groups of controls are put together on a raised or lowered panel (which has the ergonomic benefit of being locatable by touch alone).
Also, screens nearly always have a bevelled edge.
Graphical user interface (GUI) designers have taken advantage of this convention when creating digital controls.
Input fields, drop-downs, multiple-select controls and radio groups have traditionally used bevelled or grooved effects to distinguish them from plain ‘page’.
Application windows have bevelled edges, which helps to strengthen their ‘container’ properties.
Example of 3D Panel style
Using 3D effects to Differentiate objects from their surroundings
3D graphics create a sense of space between different elements.
That makes it a very effective way of reinforcing differences.
Shadowing, including drop-shadows, gradients, and highlighting, is the most useful principle.
Drop-shadows and bevelling/embossing are familiar.
This bevel example shows how real 3D effect can be achieved with very subtle colour changes.
Remember that gradients are also lighting effects: they suggest an illusion of light.
Highlighting makes an element seem nearer.
It can be as simple as putting a lighter tone next to a darker one: this one puts a lighter gradient over a shaded background.
Example of differentiating through 3D graphics
Adding richness to web pages with 3D effects
3D effects can suggest a rich, multi-layered, realistic, believable environment.
The golden rule is: use with care
Nothing works if it’s applied to everything – things need something to stand out *against*.
Use 3D graphics consistently
Light source is often crucial.
Two things to remember about all 3D/shading effects is that they’re both light effects and illusions.
For the illusion to work, the user needs to believe that what they’re seeing could be real.
To create a physical illusion, you need a plausible facsimile of reality, and consistency in treatment.
For example, if you had an element appearing to be both behind and in front of another element, the illusion effect could be broken.
One of the most common mistakes in 3D effects is to use different lighting sources on different elements.
It’s OK to have more than one light source, and a lot of design does that today, because it produces lighter and softer effects.
However, the overall light environment has to be just believable enough.