The way shadows are used throughout a product should be consistent, so as to accurately convey the degree of elevation between surfaces. How large or small a shadow is, reflects the element's elevation. Shadows can also demonstrate selection.

RULE: The larger the shadow, the higher the elevation, and vise versa.

Usage

"Shadows provide useful cues about a surface’s direction of movement and whether the distance between surfaces is increasing or decreasing." 
- When an element changes elevation, its shadow should change. 
- When an element is changing shape or size, but elevation does not change, the shadow should stay the same. 

Shadows and Motion

Research done by Google demonstrates that the use of shadows can affect the accessibility of a page for low-vision users. 

- Shadows and elevation can impact user identification of elements. Other attributes that can affect this include font characteristics, elevation, color, layout among surrounding elements, and context of use. 
- Speed and efficiency of element identification can be increased with the use of shadows. 
- Shadows and outlines can help a user to determine if an element can be interacted with.

Shadows and Accessibility

"Shadows provide cues about depth, direction of movement, and surface edges. A surface’s shadow is determined by its elevation and relationship to other surfaces."

University of Michigan - Ann Arbor

In the Material Design environment, the UI illuminated by virtual light sources called key lights and ambient lights. Material surfaces cast shadows when they obstruct light sources.

Learn Before

Related

Learn After

Learn After

Related