3. 3
Goals:
1. Create: visual language to synthesizes classic principles of good
design with the innovation and possibility of technology and
science.
2. Unify: develop a single underlying system that unifies the user
experience across platforms, devices, and input methods.
3. Customize: expand Material’s visual language and provide a
flexible foundation for innovation and brand expression.
4. Surfaces
4
Material Design has three-dimensional qualities
that are reflected in its use of surfaces, depth, and
shadows.
5. 5
Properties:
Surfaces are communicated in ways that resemble how they move in the physical world.
1. Dimensions and a uniform thickness 1dp
2. Shadows: which indicates elevations
3. Resolution: material has infinite resolution
4. Content is displayed in any shape and color on Material. Content
does not add thickness to Material.
5. Material is solid. User input and interaction cannot pass through
material.
7. 7
Materials cannot:
● occupy the same point in space simultaneously
● pass through other Material
● behave like a gas, liquid or gel
Materials can:
● change shape, opacity, grow and shrink only along its plane
● join together to become a single Material surface
● be spontaneously generated or dismissed anywhere in the
environment
● move along any axis
9. 9
● allow surfaces to move in front of and behind other surfaces
(such as content scrolling behind app bars)
● reflect spatial relationships
(such as how a floating action button’s shadow indicates it is
separate from a card collection)
● focus attention on the highest elevation
(such as a dialog temporarily appearing in front of other surfaces)
Surfaces at different elevations do the following:
10. 10
Resting elevation:
starting elevation values given to components by default.
● The resting elevations on mobile are designed to provide visual
cues, to indicate when components are interactive
● For desktop they are shallower because other cues, like hover
states, communicate when a component is interactive.
12. 12
Dynamic elevation offset:
change elevation in response to user input or system events.
! When a component moves between its resting elevation and dynamic
elevation offset, it shouldn’t collide with other components.
Depicting elevation:
● Surface edges, contrasting the surface from its surroundings
● Overlap with other surfaces, either at rest or in motion
● Distance from other surfaces
14. 14
Surface overlap:
1. Shadows show surface
edges, surface overlap, and
the degree of elevation.
2. Different surface colors show
surface edges and overlap,
but not the degree of
elevation.
3. Opacity shows surface edges
and overlap, but not the
degree of elevation.
15. 15
Distance:
The degree of elevation difference between surfaces can be
expressed using scrimmed backgrounds, or using shadows.
16. 16
Motion and elevation
Motion can emphasize elevation using the following methods:
● Changes in shadows
● Displaying overlap
● Pushing
● Scaling
● Parallax
17. 17
Elevation hierarchy
Content relates to other content depending on whether they are at similar or different elevations.
Surfaces in front of other surfaces typically:
● Contain more important content
● Focus attention, such as a dialog
● Control the surfaces behind it, such as actions in an app bar
Content on coplanar surfaces
Positioning surfaces at the same elevation makes them coplanar, and
may indicate they contain content of equal importance as one another.
For example, all cards in a collection have equal importance.
18. 18
Front (1) and side (2) views of a desktop
interface demonstrate how more
important content that is of primary focus
(B) appears in front of content that is of
secondary focus, like footnotes (A).
19. 19
On a dashboard with coplanar
surfaces, detail content is placed
next to parent content.
21. 21
Shadow cast by a key
light
Shadow cast by
ambient light
Combined shadow from
key and ambient lights
22. 22
Shadows:
Shadow size reflects elevation. Surfaces at higher elevations have
larger shadows, while those at lower elevations have smaller shadows.
23. 23
Shadows & Motion
● Shadows provide useful cues about an surface’s direction of
movement and whether the distance between surfaces is
increasing or decreasing.
● When a surface changes shape or scale, but its elevation remains
the same, its shadow should not change.
24. Understanding layout
24
Material Design layouts encourage consistency
across platforms, environments, and screen sizes
by using uniform elements and spacing.
25. 25
Principles:
● Predictable: UIs should use intuitive and predictable layouts, with
consistent UI regions and spatial organization.
● Consistent: Layouts should use a consistent grid, keylines, and
padding.
● Responsive: Layouts are adaptive and react to input from the user,
device, and screen elements.
26. 26
Responsive layout grid:
The Material Design layout grid is made up of three elements: columns, gutters, and margins.
1. Columns
2. Gutters
3. Margins
27. 27
Columns:
width is defined using percentages, rather than fixed values, to allow
content to flexibly adapt to any screen size.
Gutters:
widths are fixed values at each breakpoint range.
Margins:
are the space between content and the left and right edges of the
screen. Widths are defined as fixed values at each breakpoint range.
28. 28
Grid behavior
Fluid grids use columns that scale and
resize content
Fixed grids use columns of a fixed size,
with fluid margins
29. 29
UI Regions
a layout is made up of several UI regions, such as side navigation, content areas, and app bars.
To increase familiarity across devices, UI elements designed for desktop
should be organized in a way that’s consistent with the mobile UI.
30. 30
Permanent UI Regions
are regions that can be displayed outside of the responsive grid. These regions cannot be collapsed.
When screen space is
available, a permanent UI
region exposes content.
31. 31
Persistent UI Regions
are regions that can be displayed upon command at any time, or they can remain visible.
When open, this persistent
navigation drawer causes the
grid (and its content) to
condense.
32. 32
Spacing methods:
use baseline grids, keylines, padding, and incremental spacing to affect ratios, containers, and touch
targets.
Baseline:
All components
align to an 8dp
square baseline
grid for mobile,
tablet, and
desktop.
33. 33
Keylines
They are vertical lines that show where
elements are placed in a design that doesn’t
align to the grid.
They are adjustable per breakpoint range.
1. Layout Grid
2. Keyline
34. 34
Padding
refers to the space between UI
elements.
It’s an alternative spacing method to
keylines.
Padding can be measured both
vertically and horizontally. Unlike
keylines, padding does not need to
span the whole height of a layout.
1. Layout Grid
2. Padding
35. 35
Vertical spacing
refers to the height of a standard element, such as an app bar or list item. The
heights of these elements should align to the 8dp grid.
1. Status bar: 24dp
2. App bar: 56dp
3. List item: 88dp
36. 36
Containers:
is a shape used to represent an enclosed area. Containers can hold various UI elements such as an
image, icon, or surface.
1. Rigid image
container that
crops original
image size.
2. Flexible image
container that
scales to hold the
original image size.
37. 37
Aspect ratios:
is the proportion of an element’s width to its height.
Use a consistent aspect ratio on elements like images, surfaces, and screen size.
The following aspect ratios are recommended for use across your UI
39. 39
Responsive cropping:
To display images responsively, define how an image will be cropped
at different breakpoint ranges.
At different breakpoint ranges cropping can:
● Maintain one fixed ratio
● Adapt to different ratios
● Fix image heights
41. 41
Adapt to different ratios
Image sizing can change to different a ratio per breakpoint range.
42. 42
Fix image heights
Image sizing can maintain a fixed height and fluid width across and within
breakpoint ranges.
43. 43
Touch targets:
Touch target apply to any device that receives both touch and non-touch input.
(should be at least 48 x 48 dp with at least 8dp of space between them)
48. 48
Reveal
Parts of the UI hidden by smaller
screens can be revealed when
additional space becomes
available at a designated
breakpoint.
A simple UI may reveal more
robust or complex options.
49. 49
Transform
A component can transform from
one format to another at a
designated breakpoint.
Side navigation can transform
into tabs on a larger screen.
50. 50
Divide
UIs with multiple layers can
display all of those layers at once
when more screen space is
available.
Tabbed sibling content is divided
within the same view on a larger
screen.
51. 51
Reflow
A UI may change its layout to
reflow across newly available
space.
Elements from a single-column
format can reflow to fill the
content area in various
combinations on a larger screen.
53. 53
Position
A floating action button (FAB) can
move to a more visible location
relative to other UI elements on a
larger screen.
54. 54
Applying density
Material Design uses low-density space by default (with large tap targets and
margins) but offers high-density space when it improves the user experience.
56. 56
Grid and component density
To create more scannable groups of content, use a less-dense grid layout with
high-density components.
The higher the density of components, the larger their margins and gutter
widths should be.
61. 61
Navigational directions:
● Lateral navigation refers to moving between screens at the same
level of hierarchy
● Forward navigation refers to moving between screens at
consecutive levels of hierarchy
● Reverse navigation refers to moving backwards through screens
either chronologically or hierarchically
63. 63
Forward navigation
Types of movement:
● Downward from a parent to a child
● Sequentially through flow (like checkout)
● Directly from one screen to any other in the app
64. 64
Forward navigation can be implemented using:
● Content containers such as cards, lists, or image lists
● Buttons that advance to another screen
● In-app search on one or more screens
● Links within content
Forward navigation is often embedded into a screen’s content
through a variety of components
65. 65
The cards on the home screen (parent) provide a preview of each note’s content
and can be tapped to navigate to the full note (child).
67. The color system
67
The Material Design color system can help you
create a color theme that reflects your brand or
style.
68. 68
Colors and theming
Your app’s primary and secondary colors, and their variants, help create a
color theme that is harmonious, ensures accessible text, and distinguishes UI
elements and surfaces from one another.
1. Primary color
indicator
2. Secondary color
indicator
3. Light and dark
variants
69. 69
Principles:
● Hierarchical: color indicates which elements are interactive, how
they relate to other elements, and their level of prominence.
● Legible: text and important elements, like icons, should meet
legibility standards when appearing on colored backgrounds,
across all screen and device types.
● Expressive: reinforce your brand by showing brand colors at
memorable moments that reinforce your brand’s style.
70. 70
The baseline Material color theme
This includes default colors for
primary, secondary, and their
variants.
This baseline theme also
includes additional colors that
define your UI, such as the
colors for backgrounds,
surfaces, errors, typography,
and iconography.
71. 71
Primary color is the color
displayed most frequently across
your app’s screens and
components.
This UI uses a primary color and
two primary variants.
72. 72
A secondary color provides more
ways to accent and distinguish
your product.
This UI uses a color theme with a
primary color, a primary variant,
and a secondary color.
73. 73
Surface, background, and
error colors typically don’t
represent brand:
● Surface colors affect
surfaces of components,
such as cards, sheets, and
menus.
● The background color
appears behind scrollable
content.
● Error color indicates errors
in components, such as
invalid text in a text field.
74. 74
“On” colors are the colors which
are used by elements, such as text
or icons to appear in front of
surfaces.
75. 75
These check marks indicate
if white or black text is
accessible against various
background color
swatches.
76. 76
Alternative colors which are colors
used as alternatives to your
brand’s primary and secondary
colors.
Distinct themes are used in
different parts of the app, allowing
users to better locate themselves
within it.
77. 77
Additional colors for data
visualization
1. The Accounts section uses
green
2. The Bills section uses
orange and yellow
3. The Budget section uses
purple and blue
78. 78
Applying color to UI
Principles:
● Consistent: color should be applied throughout a UI consistently
and be compatible with the brand it represents.
● Distinct: color should create distinction between elements, with
sufficient contrast between them.
● Intentional: сolor should be applied purposefully as it can convey
meaning in multiple ways, such as relationships between elements
and degrees of hierarchy.
80. 80
Consistency and context
Color should be used consistently in a
product, so that certain colors always
mean the same thing, even if the context
changes.
81. 81
Dark theme
It’s designed to be a supplemental mode to a default (or light) theme.
It helps improve visual ergonomics by reducing eye strain and adjusting
brightness to current lighting conditions – all while conserving battery power.
Principles:
● Darken with grey: Use dark grey – rather than black – to express
elevation and space in an environment with a wider range of depth.
● Color with accents: Apply limited color accents in dark theme UIs
● Conserve energy: conserve battery life by reducing the use of light pixels
● Enhance accessibility: Accommodate regular dark theme users
82. 82
Emit low levels of light while maintaining a
high standard of usability.
1. Background (0dp elevation
surface overlay)
2. Surface (with 1dp elevation
surface overlay)
3. Primary
4. Secondary
5. On background
6. On Surface
7. On Primary
8. On Secondary
83. 83
Default themes use shadows to
express elevation, while a dark
theme also expresses elevation
by adjusting the surface color.
Elevation overlay transparencies
range from 0% for the lowest
level to 16% for the highest level.
84. 84
It’s recommended to use lighter
tones (200-50) in dark theme,
rather than your default color
theme (saturated tones ranging
from 900-500).
85. The type system
85
Use typography to present your design and
content as clearly and efficiently as possible.
87. 87
Subtitles
Subtitles are typically used for medium-emphasis text that is shorter in length. Serif or
sans serif typefaces work well for subtitles.
88. 88
Body
A serif or sans serif typeface is recommended.
Don’t use expressive fonts for body text.
89. 89
Caption and overline
Caption and overline text are the smallest font sizes. They are used sparingly to
annotate imagery or to introduce a headline.
91. 91
Readability
Letter-spacing
Larger type sizes, such as headlines, use
tighter letter-spacing to improve readability.
For smaller type sizes, looser letter spacing can
improve readability as more space between
letters increases contrast between each letter
shape.
92. 92
Tabular figures
Use tabular figures (also known as monospaced numbers), rather than proportional digits, in
tables or places where values may change often.
94. 94
Line height
A text’s line height is proportional to its
type size.
Paragraph spacing
Keep paragraph spacing in the range
between .75x and 1.25x of the type size.
98. 98
The lighter stroke weight of these outlined icons mimics the thin lines of the app’s
brand.
1. Brand logo
2. Outlined icons
3. Outlined icons in the app
99. 99
The 0dp corner radius of the sharp icon set echoes this app’s rectangular design
details.
1. Brand logo
2. Sharp icons
3. Sharp icons in the app
100. 100
This app uses rounded buttons and a line-drawn logo.
1. Brand logo
2. Rounded icons
3. Rounded icons in the app
102. 102
Usage:
Emphasis: Because unique shapes stand out, they can direct attention to different
parts of a screen.
This combination of a round floating action
button and curved bottom app bar stands
out from the rectangular shapes
elsewhere on screen.
103. 103
Identity: Shape provides a way for users to recognize components and identify
different Material surfaces.
These entry chips can be identified by their
consistent use of shape.
104. 104
State: You can communicate an element’s change of state by using a different shape
from the rest of the elements or surfaces in that group.
This card changes shape upon selection
to indicate it’s been selected.
105. 105
Shape and brand expression:
Consistent use of shape throughout a product contributes to a brand’s visual
language. This product’s components use a shape based on its logo.
108. 108
Principles:
● Informative: motion shows spatial and hierarchical relationships
between elements, which actions are available, and what will
happen if an action is taken.
● Focused: motion focuses attention on what's important
● Expressive: motion adds character to common interactions, and
expresses a brand’s personality and style.
109. 109
Usage
Hierarchy
Motion helps orient users by showing how elements are related to one another.
hierarchy
Feedback & status
Motion provides timely feedback and the status of user actions. feedback and status
User education
Motion indicates how to perform actions and offers helpful suggestions. user education
Character
Motion adds character and appeal to interactions. character
112. 112
Properties:
● Provide realistic responses: UI responds to gestures in real-time to
express direct user control over touch interactions. Do Don't
● Indicate gestures: how elements look and behave should indicate
if gestures can be performed on them. Visual cues indicate that a
gesture can be performed, such as showing the edge of a card to
suggest it may be pulled into view. Indicate
● Show what gestures do: as a user performs a gesture, elements
should move in a way that demonstrates the gesture’s purpose.
Show
114. 114
Touch devices
On touch devices, select items using:
● A long-press touch or two-finger touch
● A selection shortcut, if available, such as tapping an avatar
Selection on mobile
Selecting items (desktop)
To make a selection, hover over an item to reveal a checkbox. The checkbox can
then be clicked.
Selection on desktop
115. States
115
States are visual representations used to
communicate the status of a component or
interactive element.
117. 117
Principles:
● Distinct: states must have clear affordances distinguishing them
from one other and the surrounding UI, emphasized according to
their priority levels.
● Additive: when multiple states occur at once, such as selection and
hover, both state indicators should be displayed.
● Consistent: states should be applied consistently across
components in order to increase usability.
120. 120
Overlay
An overlay is a semi-transparent covering on an element, indicating state. Overlays provide a
systematic approach to visualizing states using opacity.
121. 121
Overlay opacity values
1. Overlay opacity values on
#FFFFFF on a white surface
2. Overlay opacity values on
#6200EE on a surface colored
with a primary color
126. 126
Onboarding
Your onboarding should have specific goals suited to the user’s level of
familiarity with the app.
There are three onboarding models: self-select, quickstart, and top user
benefits.
130. 130
Offline states
Principles:
● Adapt to connection: adapt how your feature or app behaves when the
user has a slow, intermittent, or no connection at all.
● Illustrate functionality: use the UI design to illustrate how an offline feature
works and communicate its intended purpose.
● Display available content: load available content when the connection is
limited, rather than not loading any content.
