How many shadow variations are typically needed for a good elevation system?
TL;DR
- Typically, three shadow variations are needed for an effective elevation system. This number ensures a clear progression in elevation, aiding in visual hierarchy and consistency across your designs.
- You’ll use these different elevations to show how active an element is. The less active an element is, the lower the elevation. The more active an element is, the higher the elevation.
Detailed answer
By defining a fixed set of shadows, just as you would with color, typography, spacing, and sizing, you can streamline your workflow and ensure consistency across your designs.
Elements like toasts, cards, and menus need elevation to be noticeable. If these components lack elevation, they may appear as part of the background, leading users to overlook them and miss important interactions.
In establishing an effective elevation system, consistency and simplicity are key.
Your interface needs at least three levels of elevation: low, medium, and high.
Elevations differ based on the spread of their drop shadows. High elevation shadows have a wider spread compared to medium and low elevation shadows. This mimics real-world shadow elevation. Users appreciate shadows that appear natural, so aim for subtle and realistic effects.
The Soul design system defines six elevation levels. Elements in their resting state can be at levels 0 and 1, while levels 2, 3, and 4 are used for states like hover or drag interactions. The 5th level creates a new, focused layer in the UI to draw the user's attention.
Related reading: Soul Design System
Here’s an approach to defining shadow variations:
Start with the extremes
Begin by defining the smallest and largest shadows in your system. The smallest shadow should be subtle, enhancing elements without overwhelming them. The largest shadow should be significantly more pronounced, used for elements that need to stand out prominently on the interface.
Fill in the gaps
Once you have your smallest and largest shadows set, create additional shadow sizes that transition smoothly between these two extremes. These intermediate shadows should increase in size and intensity linearly. This progression allows for a clear, logical escalation in elevation from one element to another, aiding in visual organization and hierarchy.
Avoid excessive use of raised and overlay elevations
The shadows and surfaces of raised and overlay elevations can create cluttered UI if not applied intentionally.
Pro tip: People are very good at seeing things in 3D. Creating a system that uses this kind of logic makes the product easier to use and provides teams with ready-made choices for creating detailed yet organized interfaces. By combining elevation and vibrancy into one system, designers and developers remove the need to consistently make design choices focused on individual components, which are really part of a much larger system.
Related reading: Is there a recommended limit to the number of shadows to apply to a single element?
🛠️ Useful tools
These tools will make your job easier and more effective.
Elevation Scale Figma Plugin – create shadow systems and effect styles using your preferred steps from a custom function.
🤝 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!
- Refactoring UI by Adam Wathan and Steve Schoger
- How to Use Surface Elevation to Elevate Your Interface by UX Movement Newsletter
📚 Keep exploring
Never stop growing. Explore resources thoughtfully handpicked by Cieden’s designers.