Light and Shadows in Material Design System

The Material Design Environment

In Google’s Material Design System, UIs are displayed in an environment that is a metaphor of the physical world. It is inspired by the physical world and its textures, including how they reflect light and cast shadows.

In the physical world, objects can be stacked or attached to one another, but cannot pass through each other. They cast shadows and reflect light.

Material Design reflects these qualities in how surfaces are displayed and move across the Material UI. Surfaces, and how they move in three dimensions (3D), are communicated in ways that resemble how they move in the physical world, using light, surfaces, and cast shadows.

The goal of Material Design is to create hierarchy, meaning, and focus that immerse viewers in the experience.

Light in Material Design

In the Material Design environment, virtual lights illuminate the UI. Key lights create sharper, directional shadows, called key shadows. Ambient light appears from all angles to create diffused, soft shadows, called ambient shadows.

Shadow cast by a key light
Shadow cast by ambient light
Combined shadow from key and ambient lights
Elements use shadows on dark surfaces, even if they are less visible.

 

Light sources

Shadows in the Material environment are cast by a key light and ambient light. In Android and iOS development, shadows occur when light sources are blocked by Material surfaces at various positions along the z-axis. On the web, shadows are depicted by manipulating the y-axis only.

In Material environment, you should always combined shadow from key and ambient lights.

Shadows in Material Design

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.

Material surfaces at different elevations cast shadows. As you can see from video, the smaller the elevation value, the more solid the shadow gets.

Shadows show the elevation of different Material surfaces.

Usage of Shadows

Because shadows express the degree of elevation between surfaces, they must be used consistently throughout your product.

Elevation is depicted by consistent use of shadow.
Shadow size reflects elevation. Surfaces at higher elevations have larger shadows, while those at lower elevations have smaller shadows.

Posted by Qi Chen

This entry was posted in Uncategorized. Bookmark the permalink.

2 Responses to Light and Shadows in Material Design System

  1. I’m now not sure where you’re getting your information, however great topic. I needs to spend a while studying more or understanding more. Thanks for wonderful information I used to be searching for this info for my mission.

  2. Everyone loves what you guys tend to be up too. Such clever work and exposure! Keep up the wonderful works guys I’ve added you guys to my own blogroll.

Leave a Reply

Your email address will not be published. Required fields are marked *