What is Elevation?
Elevation in Design Systems refers to the technique of using shadows and layering to create a sense of depth within a user interface. This visual strategy helps distinguish between elements, making interfaces more intuitive by clearly indicating the hierarchical relationship among components. Elevation can be particularly effective in emphasizing interactive elements like buttons and cards, suggesting their functionality through subtle visual cues. Design Systems typically standardize elevation principles with elevation tokens, specifying shadow sizes, blur intensity, and the light source direction, to ensure consistency across the product. By effectively applying elevation, designers can enhance usability and aesthetics, providing users with a clearer and more engaging interaction experience.
Key concepts explained
Elevation in Design Systems is like using different levels in a stack of books to create a sense of depth on a table. Imagine you have several books stacked on top of each other; the way they’re arranged helps you quickly see which book is on top and which is at the bottom. This layering makes it easy to understand the order and importance of each book.
In design, elevation uses shadows and layering to create a similar effect. Shadows give the impression that some elements, like buttons or cards, are lifted above the others, making them stand out and feel more interactive. Just as the books on top are more accessible and noticeable, elevated elements in a user interface draw attention and indicate they can be clicked or tapped.
How to use Elevation in Design System?
For example, Google's Material Design system uses elevation tokens to provide consistent shadow and depth effects across its various applications and interfaces. Material Design defines elevation tokens such as level-1 for elements that are slightly raised above the background like elevated cards, level-2 for elements that require more prominence like menu, and level-3 for even higher elevation like modals. Each token corresponds to a specific shadow intensity and spread, ensuring a uniform application of shadows across all components. This consistency helps users intuitively understand the hierarchy and functionality of different UI elements, enhancing the overall usability and aesthetic of Google's products. If Google needs to adjust shadow styles for a refreshed look or accessibility improvement, they can update the elevation tokens, automatically applying these changes across all elements that use them.