Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Getting Started With Material Design!
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
Material Design lists five guiding design principles in the introduction to its visual language documentation.
Further reading
- Material Design: Design > Introduction > Principles - Do note that this video and this link are for Material 2, which is still applicable today!
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Material Design lists five
guiding design principles
0:00
in the introduction to its
visual language documentation.
0:05
The first principle, Material is
the Metaphor, we've covered already.
0:09
The second principle, Bold,
Graphic, Intentional, means that
0:16
Material Design provides visual guidelines
you'd expect to find in any design system.
0:21
Rules about typography, grids,
0:27
space, scale, color, and imagery.
0:33
When it comes to colors,
the bolder the better,
0:40
as long as your colors are compatible
with the brand you're designing for and
0:44
applied consistently and intentionally,
0:49
creating distinctions between elements and
suggesting interactivity.
0:53
The third principle, Motion Provides
Meaning, indicates that animation
0:59
exists in Material Design to focus
attention on what content is important.
1:04
Motion that doesn't help
the user understand or
1:10
interact with an interface
is discarded as superficial.
1:13
In these examples from the Material Design
documentation, we see motion
1:19
doesn't happen independently, but
is triggered by user interaction.
1:24
Motion can be used to illustrate
relationships between navigation and
1:29
content, to react to user input,
1:34
to indicate the type of
content being loaded,
1:45
or to suggest how an interface
can be interacted with.
1:51
The fourth principle, Flexible Foundation,
1:59
speaks to Material Design's customizable
code base, intended to simplify
2:02
the designer-developer handoff and enable
both teams to speak the same language.
2:07
That way, designers and developers can
seamlessly implement new design elements,
2:14
components, and plugins.
2:19
The final principle, Cross Platform,
2:22
speaks to Material Design's
responsive design philosophy.
2:25
Material Design encourages consistency
across platforms, environments,
2:29
and screen sizes by using uniform UI
elements and a flexible, responsive grid.
2:35
That's a quick overview of
Material Design's foundations.
2:43
If you're part of a team that's
decided to embrace Material Design's
2:48
visual design language to inform
your app design, you can use
2:52
this documentation to investigate
each of these principles more fully.
2:56
However, if you're working with
an established brand with its own design
3:02
system, looking to Material Design to
guide the application of color and
3:07
typography might not be appropriate.
3:12
Perhaps you're just looking to implement
common Android interface patterns and
3:15
wish to use the documentation to better
understand Android user expectations and
3:20
behaviors.
3:26
In our next stage, we'll examine some
of the better-known Material Design
3:28
components and build a wireframe
of a demo Android app in Adobe XD.
3:32
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up