This document summarizes key concepts of Material Design's environment including surface, elevation, and light and shadow. Surfaces can be any shape and thickness, follow physical laws, and cast shadows. Elevation depicts the z-axis position through shadows, overlaps, and distances. It also establishes an elevation hierarchy and components have default resting elevations. Light and shadow are important cues that provide depth information and must be used consistently.
3. Material Environment
Material Design has 3D qualities
Real-world-like physical laws
● Can be stacked and attached
● Can not pass through each other
● Casts shadows and reflects light
3
6. Surface - properties
● Various shapes
● Infinite resolution
● Content
○ displayed in any shape and color on Material
○ does not add thickness to Material
○ can behave independently of surface behavior.
6
7. Surface - properties
● Material is an solid
● Follow the laws of physics
● The shape can be changed freely in the x and y directions
● Can be split and combined
● Can be spontaneously generated or dismissed anywhere
● Can move along any axes
7
10. Elevation
Resting elevation
● All material components has default resting elevation
● Designed to be able to indicate when components are interactive
Changing elevation
● Change elevation in response to user or system events.
Elevation interference
● Must not collide with each other as elevation changes
10
11. Elevation - Depicting elevation
To successfully depict elevation
● Surface edges
○ Help identify components
○ Edges are indicated using shadows, colors and opacities
● Surface overlap
○ Overlaps indicates using different elevations
○ Clarify edges and avoid vague overlaps
● Distance
○ Can be expressed using a scrimmed background or shadows
11
12. Elevation - Elevation hierarchy
Content at different elevations
● Surface on the front is more important
Content on coplanar surfaces
● Same elevation, Same importance
○ For e.g. all cards in a collection have equal importance.
12
16. Light and shadow
● Shadows provide cues about
depth, direction of movement, and surface edges
● Must be used consistently throughout your product
16