Material Design

Introduction to

By Shehan Tissera

Outline

What is Material Design?
Goals
Principles & Properties
- Material Properties
- Environment
- Light & Shadow
- Objects in 3D space
- Authentic Motion
- Animation
- Color
- Imagery & Text
Sample Applications
Resources

What is Material Design?

Material Design in a Nutshell

Material Design's Goals

Google's high level concept was to create :

A Visual language that synthesizes

Classic principles of good design (UI/UX)
Possibility of technology and science

Material Design's Goals

Google's high level concept was to create :

A single underlying system that allows a unified experience across platforms and devices.

First Class input methods

Touch
Voice
Mouse
Keyboard

Material Design's Principles

Motion provides meaning

Bold, Graphic, intentional

Material is the metaphor

Material is a metaphor

Rational space & motion
Grounded in tactile reality
Inspired by paper & ink
Surfaces & edges provides visual cues
Light surfaces & movement convey how objects move, intent & exist in space in relation to each other
Should appear technologically advanced
Open to imagination & magic

Bold, graphic, intentional

Foundation in print
- typography, grids, space, scale, color & imagery
Create hierarchy, meaning and focus
- edge to edge imagery
- large scale typography
- intentional white space
Core functionality should be immedately apparent
- Emphasis on user actions
- Immerse the user in the experience

Motion provides meaning

User actions initiate motion
- Reinforce the user as the prime mover
- User motion can transform the whole design
All actions take place in a single environment
Objects have continuity as they transform
Motion
- focuses attention
- maintains continuity
Feedback is subtle yet clear
Transitions: efficient & coherent

Material can

change shape / elevate
cast shadows
display content
join together / split apart / heal
be spontaneously generated & destroyed
move along any axis

Material cannot

pass through other materials
cannot occupy same space as another material object
bend
change thickness

Material Properties

Environment

Flat design in a 3D world
All objects are rendered on sheets
All sheets have a z-axis 1dp think (dp = device independent pixel)
z-axis is always perpendicular to plane of display

Light & Shadow

Key light creates directional shadows
Ambient light creates soft shadows from all angles

Shadow cast by key light

Shadow cast by ambient light

Combined shadow from key and ambient lights

Link

Objects in 3D space

All material objects have a resting elevation
Elevation usually changes from user interaction
Objects should return to resting elevation
Elevation is responsive
Shadows provide visual cues about arrangement
Every object has a single parent
- May also have children or siblings
- Children inherit properties from their parents
  - Rotation
  - scale
  - elevation

Link

Authentic Motion

Observing an object's motion tells us whether it is light or heavy, flexible or rigid, small or large.

Accelerate objects swiftly and decelerate them slowly to avoid abrupt changers in velocity.
When an enters the frame, ensure that it's moving at its peak velocity.

Link

Animation

Upon input, instantaneous visual feedback
- Touch ripple is core visual to express contact
New material could originate from point of origin
When element is activated it should lift on touch
- and should quickly return to its rest elevation
Meaningful Transactions
- Should have a visual continuity
- Hierarchical timing
- Consistent choreography

Link

Color: Palettes & Themes

Color Palettes
Limit selection to two palettes: primary & accent
- 3 color hues from primary palette
- 1 color from accent with possible fallback options
- Use alpha values of black for grey text, icons & dividers
- Tool-bars should use the primary 500 color
- Status bar should use the darker primary 700 color
- Use accent color for primary action & components