UI design 101: Lighting & Shadows

Learn how to create cohesive and professional UI designs by correctly applying shadows and light to your interfaces.

3 min read

February 15, 2023

Learn design online

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

  1. 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.
  2. 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.
  3. 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.

Become a Product Designer in 16 weeks on Dribbble.

Upskill today
  • Flexible learning

  • Design mentorship

  • Hiring network

UI Design 101: How to Make Key Elements Stand Out

UI design 101: The Power of Prominence

February 10, 2023 3 min read
product designer skills

Essential Product Designer Skills for Career Success

February 03, 2023 3 min read
freelance ux designer

8 Steps to Becoming a Freelance UX Designer

February 03, 2023 11 min read
ui design principles

10 Fundamental UI Design Principles You Need to Know

December 06, 2021 10 min read