Creating UI shadows that don’t suck
With the possibilities of modern CSS and multiple material design libraries, it is understandable why shadows are used in so many modern interfaces. They let you create multi-dimensional designs that are realistic looking, easy to develop and have that modern look and feel.
In spite of being used so widely, some interfaces look just so much better than the others. I wanted to write why this happens and what the general rules of thumb are when working with shadows in user interfaces.
1. Make shadows subtle
Look at the way shadows work in real life before applying them to your UI. Usually, the cards or other visual elements we are working with in interfaces are assumed to be flat like paper in the real world, and the shadows they cast should resemble that by being small and of low opacity. The lighting is assumed to be diffused, which means you need to make sure the drop-shadow is blurry enough, the opacity also needs to be much lower than in print designs because it is amplified by digital screen backlight.
I would also generally advise to avoid inverse, colorful (meaning color different from the background) or large heavy shadows. These are not very realistic and can be difficult to make work, especially if you’re not too experienced.
2. Mind the light direction
The direction of your imaginary light is important in UI. Generally in user interfaces the light comes from either top-left, top, or front, you will almost never see the light coming from top-right, the sides, or from the bottom, these all may make sense in specific cases or in graphic designs not strongly related to interfaces, but if you want to play it safe, your best bet is to avoid these unusual patterns. There’s a theory that people associate the light coming from above with sun and positivity, but the light coming from the bottom has a sinister feel to it (like fire or a scary story told with a flashlight etc).
3. Think about 3D Hierarchy
Decide the hierarchy of your elements in a three-dimensional setting, how far is each element from the surface of the one below it? The elements that you deem most important should look as if they’re on the very top. This will help users understand the hierarchy and will make your interface more intuitive. If the elements are stacked on top of each other, use the same depth of the shadow, if an element is on the third layer with nothing below it, the shadow will need to be twice as deep and diffused.
4. Use shadows combined with gradients and tone variations to show the depth
Just because you can slap shadows on all the elements doesn’t mean you should. There are many other ways to show depth and elements’ hierarchy including gradients and multiple shades of the same color. Combining a few different tactics can create beautiful and thorough interfaces.
As with everything, there’s more theory and techniques that go into creating stunning shadow-enhanced interfaces. If you want to dive deeper into techniques, Google’s Material Design Guide has solid explanations of their shadow choices, and it’s always a good idea to learn from the best.
