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.

1. Material Design
workshop
#1 Environment
2020/9/25

2. Material environment
● Surface
● Elevation
● Light and shadow
2

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

4. Surface
4

5. Surface
● 1dp thickness, various shapes and motions
● Shadow shows z-axis position
5

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

8. Surface - attributes
https://material.io/design/environment/surfaces.html#attributes
8

9. Elevation
9

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

13. Elevation - Default elevations
All elements have default values
13

14. Light and shadow
14

15. Light and shadow
● Key light
● Ambient light
15

16. Light and shadow
● Shadows provide cues about
depth, direction of movement, and surface edges
● Must be used consistently throughout your product
16

17. Research
https://material.io/design/environment/light-shadows.html#research
17