What are the typical challenges faced when using shadows in design?
TL;DR
When using shadows in design, key challenges include:
- Ensuring a consistent light source to prevent a disjointed appearance;
- avoiding overuse which can make the design feel cluttered and overwhelming;
- considering accessibility to maintain text readability;
- testing shadows on various backgrounds to ensure they appear effective under different conditions.
Detailed answer
Using shadows in a design can significantly enhance the depth and visual appeal of an interface. However, several challenges can hurt the design's effectiveness and look. Here are some typical challenges and common mistakes to avoid.
Applying hard shadows
Don't use the default settings in your design tools. Try out different values to create shadows that look smooth and natural.
Instead of using pure black, choose darker shades that match your design's color scheme. In real life, shadows aren’t black; they’re darker tones of the objects they fall on because of reduced light.
Adjust the opacity according to the blur value and color to achieve your desired effect.
Inconsistent light sources
One of the most common mistakes is not maintaining a consistent light source. Inconsistencies in where shadows are cast relative to their elements can make a design look disjointed and visually confusing. It’s crucial to define a single light source direction and stick to it throughout the design to ensure coherence and realism.
Overusing shadows
Employing too many shadows can clutter the design, making it appear overwhelming and muddled. This not only detracts from the overall aesthetic but can also hinder the user's ability to easily navigate the interface. It’s important to use shadows judiciously and ensure that they serve a clear purpose in enhancing the usability or hierarchy of elements.
Ignoring accessibility
Shadows can sometimes reduce the readability of text, especially for users with low vision. When applying shadows, particularly around text or interactive elements, consider their impact on contrast and legibility.
Ensuring sufficient contrast and avoiding shadows that blur or obscure text are essential for making the design accessible to all users. However, it is generally advisable to avoid using shadows on text altogether to maintain clear and legible typography.
Not testing with different backgrounds
Shadows can vary significantly in visibility and effect depending on the background they are cast upon. A shadow that looks subtle and sophisticated on a light background might be barely visible on a dark one, or vice versa.
Testing your design across a range of background colors and patterns is vital to ensure that shadows contribute positively to the design under various conditions.
Tip! Use Figma plugins
Numerous plugins are available in the Figma marketplace to help you create attractive shadows on any component instantly.
There is a useful tool called Beautiful shadows. It has an intuitive interface, allows you to control a light source, and casts shadows on your component in your preferred direction. This plugin automatically generates shadow styles, often layering them for a refined effect.
Related reading: How can I use shadows to enhance visual hierarchy in a design?
🤝 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!
- Designing in the Shadows: How to Use Shadows to Enhance Your UI by Nanzing Johnmark
- Shadows in UI design: Tips and best practices by LogRocket