I’m a Lead UX UI designer based in Hà Nội, Vietnam. This article is the first addition to my series of UI/UX design articles. Things that I’d teach to my past self if I could go back in time like how to design shadows for UI. Things that I learnt through trial-and-error and the hard way. Please feel free to share this article with your network if you feel this was helpful to you in any way. Thank you very much!
First things first, shadows in UI design made a comeback in 2018 and now it’s the norm. While google’s material design introduced a systematic way of using shadows with purpose and not only for aesthetic reasons, it was quickly combined with card based UI design systems.
Like any other element in design (color, typography, imagery) shadows are a double edged sword, use it cleverly and it goes unnoticed. Use it like a maniac and everyone’s eyes are twitching looking at that out-of-place design. But what’s the purpose of using shadows, you ask? Using shadows for your product design, is very different from using them in graphics, illustrations. Let’s take a look at some ways to design your user’s behavior using one of the most subtle.
Types Of Shadows
Not all shadows are made equal, let’s breakdown what kind of shadows are commonly used in UI Design across the board.
01. Deep Base
Here’s a solid black colored shadow with low opacity. The source of light is right above the card in this case – creating perception of depth. Great for creating emphasis on a single or group of elements.
02. Shallow Base
A soft and delicate shadow can be achieved with a soft Shallow base. The perceived depth for the card is shallow and is seen positioned closer to the base or other elements behind it. It’s a great way to create distinction between different components without creating a lot of distraction.
Colored shadows try to imitate the how light responds to different type of materials in the real world. While this is great for creating a strong presence of brand through colors, it best works with a less saturated value of the same color.
05. Internal Shadows
Internal shadows create a negative sense of depth in the base. Something like a container in real life ~ something that can be filled. As buttons are inspired from real life buttons, something that has inner shadow gives the impression that it can hold something inside it. Making it the perfect choice for forms, input fields. If you insert an inner shadow to a larger area it feels – non interactive almost like it’s set in stone (example shown later).
When should I use shadows in my UI Design?
Shadows look neat and are super trendy right now but what can you communicate using shadows. For content heavy websites or apps it’s very useful element to introduce hierarchy. But that’s not all ~
01. Visual Hierarchy
When we touch something in the physical world we immediately assess it’s texture, it’s weight, if it is strong or not and so on in a fraction of a second. Imagine all the elements, buttons, text, cards are real life objects. They would be stacked on top of each other.
02. Indicate Interaction
Depth adds the perception that things can be pressed or filled. Buttons tend to have either directional, deep, shallow or colored shadow to show that they are extruding out of the rest of the elements to give the feeling that they can be pressed down. While text fields, radio buttons and check boxes have to be filled in with information.
03. Gestalt Principles
Shadows help divide information into neatly organized section. Too much information that isn’t organized well may make it difficult to consume the information. Law of Common Region plays a great role in UI Design. Law of Common Region states that elements that are grouped in a closed region are together and related to one another.