RULE: The opacity and spread of an object’s shadow indicate how close or far it is from the surface underneath.
DONT: express shadows without changing surface elevation (ex: using only color change, rather than color and height change)

University of Michigan - Ann Arbor

Material surfaces have consistent, unchangeable characteristics and behaviors across Material Design.

Properties

Material Design Documentation

Material has varying x & y dimensions (measured in dp) and a uniform thickness (1dp). You can, and should, show 3D-ness without adding thickness to elements.

Dimensions

Shadows show elevation

RULE: No matter how close you zoom in, it is remains clear without any pixilation.

Infinite Resolution

RULE: Adding content does not add thickness to the element (the element remains at 1dp thickness).


Content

There are 4 main rules regarding physical properties.

Physical properties

Material CAN:
- Change shape
- Change opacity (can be uniform across the entire surface, or can change opacity across a portion of the surface)
- Grow or shrink along its plane
- Join together to become a single surface
- Split, and become whole again

Material CANNOT:
- Bend or fold in ways that exceed the depth of the UI


Transformation

Materials CAN:
- Spontaneously generate or be dismissed anywhere in the environment
- Move along any axis
- Have coordinated motion

*material that exhibits z-axis motion is usually in response to user interaction*


Movement

Measurements

A divider is a line used to separate content, such as in lists or layouts. Its purpose is to create a clear visual distinction between different groups of information, which helps to organize the interface and makes it easier for users to process the content.

Learn Before

Related