UI Design

How To Dominate Shadows In UI Design?

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.

Types of Shadows - UeyeDesign Tutorials

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.

Deep Base Shadow - UeyeDesign Tutorial

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.

Shallow Base Shadow - UeyeDesign Tutorials

03. Colored

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.

Colored Shadows - UeyeDesign Tutorials

04. Directional Shadows

Let’s take a look at this one for a moment. The shadow seems totally off ~ that’s because the source of light is not right above the card but is slightly to the side creating a false sense of depth that is more realistic than others. The only issue that a directional shadow presents is that it is hard to manage when placed on several components. Directional Shadow overpowering another component especially in a mobile device is inevitable. It could be used scarcely in desktop based landing pages – as they have more room than your traditional 2019 webpage.

Directional-shadows - UeyeDesign Tutorials

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).

Internal-Shadows - UeyeDesign Tutorials

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 ~

Visual Hierarchy

Visual-Heirarchy-in-Shadows-UI-Design

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.

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.

Indicating-Interaction-with-Shadows-in-UI-Design

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.

Gestalt-Principles-for-Shadows-in-UI-Design copy

Leave a Reply