The Art of User Interface Drop Shadows

Summary

The art of user interface drop shadows involves creating natural and realistic shadows to indicate floating surfaces, which can make the interface look more professional.

Abstract

The article discusses the importance of drop shadows in user interface design, emphasizing the need for natural and realistic shadows to indicate floating surfaces. It explains the difference between core shadows and cast shadows, and provides guidelines for applying them correctly to create a more polished and professional look. The article also highlights common mistakes made by designers, such as using only one drop shadow with a large blur and high opacity, which can make surface edges too fuzzy and harsh.

Bullet points

Drop shadows are helpful cues to indicate floating surfaces in user interfaces.
Natural and realistic shadows are essential for users to interpret floating surfaces correctly.
Most designers fail to display core shadows and cast shadows correctly.
Core shadows are the thin, dark ring closest to the object, while cast shadows are the lighter and thicker shadows behind the object.
Applying a core shadow and cast shadow correctly can give the interface a more sleek and polished look.
Common mistakes include using only one drop shadow with a large blur and high opacity, which can make surface edges too fuzzy and harsh.
The article provides guidelines for applying core shadows and cast shadows correctly.
The result is a surface with two different drop shadows that mimics a real-world shadow.
Applying this drop shadow technique to interface components can make them look more professional.
The article recommends getting a subscription to the UX Movement Newsletter on Substack for more insightful design articles.

Make your UI look professional

Many elements on interfaces tend to mimic real-world objects. Drop shadows are one of them. These are helpful cues to indicate whether a window or panel is floating. Floating surfaces signify a temporary or momentary state that requires user interaction.

For users to interpret floating surfaces correctly, your shadows must look natural and realistic. There’s an art to drop shadows that most designers don’t know.

Notice how these two surfaces have different drop shadows. The difference may look subtle, but it affects how users perceive the interface. An unnatural shadow like the one on the left will make your interface look less professional. Making your shadows more natural will give your interface a more sleek and polished look.

When you cast light upon a real-world object, it creates two distinct shadows. The first one is the core shadow, the thin, dark ring closest to the object. The second one is the cast shadow, the lighter and thicker shadow behind the object.

Most designers fail to display these two shadows correctly. They tend to use only one drop shadow with a large blur and high opacity. Doing this makes the surface edges too fuzzy and harsh.

Applying a core shadow and cast shadow is the correct way to display your drop shadow. Make the core shadow dark and tight to the surface. For example, a 1-pixel Y-axis and 3-pixel blur with a 10% opacity works well.

Then make the cast shadow lighter with a bigger blur and deeper Y-axis. A good default is a 6-pixel Y-axis and 12-pixel blur with an 8% opacity. The result is a surface with two different drop shadows that mimics a real-world shadow.

Now you can apply this drop shadow to your interface components and get a more natural and polished look. Notice how the menu looks more professional after the change in shadows. It’s these little details that matter when it comes to designing a visually appealing user experience.

For more insightful design articles, get a subscription to the official UX Movement Newsletter on Substack