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!
You have completed Getting Started With Material Design!
Preview
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