Effectively Using the Drop Shadow in Web Design

The drop shadow is a bread and butter effect so frequently used in our studios that it warranted its own keyboard-shortcut [Control-Shift D]. Adding a drop shadow is one of the best and quickest ways to simulate depth in your layout.

As was mentioned in the previous post, the key to using effects well is adjusting the settings for the right circumstance. The image above is an example of drop shadows applied at various settings. The shadow on the first example is barely perceptible and could easily be overlooked. Remember that this isn’t necessarily a bad thing. The principle of subtlety is still at work and it ultimately contributes to the overall impact of the design. At the other end of the spectrum, we have the last example which illustrates a drop shadow gone wild. Avoid this 🙂 When a drop shadow makes it harder to see the item it’s applied to, then that’s a good sign it’s gone overboard.

Many times as a starting point, I’ll set the drop shadow opacity down to about 40-50%, knock the distance down to 2-3, and then increase the size to about 4. I’ve actually made this my default setting which is easily done from the style settings page by clicking “make default”. You can do the same for any style you select, not just drop shadows. Of course, your settings will naturally depend on the context of the design element you’re drop shadowing. Below is an example of an mock web layout for one of our previous clients that illustrates how subtle drop shadows can improve design. If you hover over the screenshot, you’ll be able to toggle the different versions.

As you can see, there’s a noticeable difference between the two layouts. The various design elements such as the content area and header sections benefit greatly from the use of drop shadows, none of which were applied with default settings. Of course, you don’t want to go overboard with drop shadows. The key to good design is knowing when and how to use them. You don’t want to go “drop shadow happy” and blanket a page with these effects with no rhyme or reason. Everything has to be done with a purpose and strategically. And while the differences between the two layouts may not be monumental to the average person, they can easily be the deciding factor in whether you land a job or are overlooked for one.