2 weeks ago


98 The Principles of

98 The Principles of Beautiful Web Design Light and Shadow Light and shadow are the most important visual cues we can use to determine or create depth and volume in compositions. Even with accurate perspective and proportion, a composition without highlights and shadowing will look flat. Light and shadow establish visual contrast, and help to create the illusion of three-dimensional depth with two-dimensional media, such as pencil on paper or pixels on your computer screen. Light and shadow alone can also be used to make two-dimensional objects look like they exist in three-dimensional space. Each of the three cyan-colored circles in Figure 3.16 are the same size, but the different lighting effects and shadows applied give each a very unique feeling of depth and volume. A basic drop shadow has been applied to the first circle. It’s obvious that this is a two-dimensional object, but the drop shadow gives the illusion that the circle is hovering above the surface beneath it. The second circle has a linear gradient, and a shadow that’s skewed to the right. This combination of light with the tilted shadow suggest that it’s a two-dimensional circle that’s casting a shadow on an angled surface. The fact that the shadow is closer to the bottom than the top of the circle creates a sense of movement: it looks as if the top of the circle is falling towards or away from the viewer’s eye. A radial gradient—meaning one that’s applied in all directions from a central point—has been applied to the third circle, which looks spherical due to the highlight and shadows that the gradient creates. The shadow that it casts matches the location of the light source, which lends credibility to the volume and depth of the shape. Figure 3.16. Examples of light and shadow Just as there are many ways to alter the levels of depth with the circles in Figure 3.16, there are other methods to give your web page elements depth using only light and shadow. Take the menu in Figure 3.17, for example. The boxed-in words and rounded corners hint that these are clickable objects, and the dark background on the Products button indicates that it’s either hovered or active. It’s a simple navigation style that would work fine on just about any website, but unfortunately it feels a bit flat here.

Texture 99 Figure 3.17. A clear and functional menu—but it’s a little flat If these button shapes were really three-dimensional, what would they look like? Would they be flat with beveled edges, or completely rounded on the top? Would the tops of the buttons be straight on the horizontal, or would they have rolling curves? What would happen when light hit them? All these questions can be answered by looking around you. For the example in Figure 3.18, I imagined that my links were lit from above, so I gave them a slight gradient rather than making the background color flat. I also added a bevel to the edges to make them feel a bit like glossy, rectangular subway tiles. I wanted the active link to look inset instead of beveled out, so that it appears to be clicked. I achieved that by adding a shadow to the top of the block instead of a bevel highlight. I gave the text a little drop shadow as well, to make it feel like the letters were slightly raised from the button surface. Figure 3.18. Gradients, shadows, and beveling make this menu pop Adding shadows to text and objects is another practical way of creating depth in your layout. This can easily be done in Photoshop using layer styles, but what if the person who’s maintaining the site lacks access to a copy of Photoshop? As with creating rounded corners and rotating objects, CSS3 again comes to the rescue. The box-shadow and text-shadow properties promise to make web design far less dependent on heavy images. A great place to experiment with these and other CSS3 properties is No need to restrict yourself to just adding lighting and shadows to boxy elements, though: try involving some perspective, and think about how real-life objects work when you’re trying to manu-

Layout and Design - In Easy Steps
Boot Camp
30 ways to create amazing web experiences on tablets
Download PDF -
How to build a department web site (starter pack) - University of ...
PDF Specimen Booklet - Fontworks UK Ltd
Responsive Email Design Guide - e-Dialog
Visual Design for Library Websites - WebJunction
Visual Design and Web Site Usability
The Complete Guide to a High Converting Website