When should I use colored shadows instead of classic neutrals?
TL;DR
Using colored shadows in UI design can be beneficial in certain situations to enhance the visual appeal, convey meaning, or create a specific atmosphere. However, it's important to use colored shadows judiciously and considerately. Overusing them or using inappropriate colors can lead to visual clutter or confusion. Additionally, always ensure that the colors and contrasts you choose meet accessibility standards and are inclusive for all users.
Detailed answer
Using colored shadows in UI design can enhance visual appeal, convey significance, or create a specific mood in certain situations. Here are some simple steps for creating impressive shadows:
Create visual hierarchy
Colored shadows can be used to create a sense of depth and hierarchy within the UI elements. By using shadows of varying colors, you can draw attention to important elements or actions.
Provide visual feedback
Colored shadows can provide visual feedback to users, indicating actions or states. For example, a red shadow around an error message can signal an issue that needs attention, while a green shadow around a confirmation message can convey success.
Consider thematic design
In UIs with a thematic design, such as gaming interfaces or creative applications, colored shadows can contribute to the overall theme and create a more immersive experience.
Enhance aesthetic appeal
Sometimes, colored shadows are simply used to add visual interest and make the UI more visually appealing, especially in designs where creativity and innovation are emphasized.
Make shadow color more natural
Pure grey rarely looks good (except in a strict black-and-white theme). In the real world, shadows always have a hint of color. By adding a touch of your UI's neutral tone to the shadow, you can achieve a more natural and appealing look.
Make material colors as shadow
Observe materials in the real world, especially semi-transparent ones. Their shadows take on the color of the object. You can use these tones to illustrate such materials, giving your design a fresh and realistic look.
Related reading: When should I use colors alone to create visual depth, without relying on shadows?
🤝 Credits
Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!
- How to make Better shadows in UI Design by UXmisfit
- Drop shadow tips by UX toast