Shadows
In digital interfaces, designers use shadows to create a natural aesthetic to elements. Shadows add depth and make elements stand out against their backgrounds.
Modern interfaces are layered and use shadows to indicate the distance between surfaces (elevation) and show hierarchy. The larger the distance between an element (e.g., a floating button) and the surface is, the higher the elevation is, and the blurrier the shadow of the button gets. These spatial relationships between elements help users navigate across an interface and determine clickability.
Shadows also increase scannability so users can more easily detect elements on a page.[1]
Pro Tip: When overused or used improperly, shadows can add visual confusion to a design and hurt its usability.
References
- Flat-Design Best Practices | Nielsen Norman Group