"A scrimmed background can indicate surface overlap, but not the degree of elevation. When the background is scrimmed in a UI, it expresses that the content above it is at a higher elevation. Scrimmed backgrounds express large, but unspecified, amounts of elevation."

Scrimmed backgrounds

"Shadows can express the degree of elevation between surfaces in ways that other techniques cannot. Shadows show the edges of a surface and its degree of elevation against the background. They also make differences in surface elevations perceptible between non-overlapping surfaces

Both a shadow’s size and amount of softness or diffusion express the degree of distance between two surfaces. For example, a surface with a shadow that is small and sharp indicates a surface’s close proximity to the surface behind it. Larger, softer shadows express more distance.

Subtle differences in shadow size and diffusion communicate:
- A detailed degree of distance between two surfaces
- Elevation differences between non-overlapping surfaces"

Shadows

"The degree of elevation difference between surfaces can be expressed using scrimmed backgrounds, or using shadows."

University of Michigan - Ann Arbor

"To successfully depict elevation, a surface must show:

1. Surface edges, contrasting the surface from its surroundings
2. Overlap with other surfaces, either at rest or in motion
3. Distance from other surfaces"

Learn Before

Related

Learn After