UI Design 101: Lighting & Shadows
Shadows are an important aspect of UI design. They create depth, contrast, and visual interest, and can greatly enhance the overall user experience. However, not all shadows are created equal, and using them effectively can be a challenge.
In this post, Senior Product Designer Jesse Showalter explains how to properly work with shadows and different light sources in your UI designs.
Understanding shadows in UI design
Shadows create depth by creating the illusion of layers. When a shadow is applied to an object, it appears to be floating above the surface of the UI. This creates a sense of depth that can make the UI more engaging and realistic.
Shadows also create contrast by highlighting the edges of an object. When an object has a shadow, its edges become more defined, which can make it stand out from the surrounding UI elements. This contrast can make it easier for users to identify the object and understand its function.
How to create perfect shadows
Jesse Showalter: Make sure that all of the shadows in your interface come from one light source. You can see on my screen, I have an interface that’s built, and there are multiple different light sources. But in our new improved version, you can see that all of the shadows are moving down because the light source is coming from on top. That is going to give us a nice, consistent look.
More tips for using shadows
- Use shadows to create a hierarchy of importance: By applying a drop shadow to an object, you can make it appear closer to the user, which can make it seem more important. This can be particularly useful for highlighting important buttons or calls to action.
- Use shadows to indicate interactivity and focus: When a user interacts with an object, the object can be highlighted with a shadow to indicate that it has been selected. This can make the UI more intuitive and user-friendly.
- Use shadows sparingly and consistently: Too many shadows can make the UI feel cluttered and overwhelming, while inconsistent use of shadows can make the UI feel disjointed and confusing.
Want to learn more essential UI/UX design techniques? Dribbble’s Certified Product Design Course led by Jesse Showalter starts on March 6, 2023, and registration closes soon! Enroll before Monday, February 27 2023 at 11:59 PM PST to save your seat. Enroll now.