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
While Material Design could be called a design system, it’s a bit different from others you might have seen.
Further reading
Treehouse courses
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
While Material Design could
be called a design system,
0:00
it's a bit different from
others you might have seen.
0:04
If you're building an app for
Adobe, it's expected that you'll
0:08
strictly follow the guidelines from
Adobe's Spectrum design system.
0:12
You'll use the specified fonts, colors,
0:16
spacing, and usability cues.
0:28
It's critical that your app
reflect Adobe's branding, and
0:31
the app contents must speak in a manner
consistent with Adobe's voice and tone.
0:36
If you're unfamiliar with how design
systems traditionally work, check out
0:42
our Introduction to Design Systems
course linked in the teacher's notes.
0:47
Material Design doesn't
work in quite the same way.
0:53
Let's say you're designing a mobile app
to be sold in the Google Play app store.
0:57
Perhaps it's a recipe app for
a cooking magazine.
1:02
While it's possible you'll make
a reference to certain aspects of Material
1:04
Design, you wouldn't necessarily
follow it as a visual style guide.
1:09
After all, the design of
the recipe app should reflect
1:14
the brand of the cooking magazine,
not Google.
1:18
Here are a few apps selected by Google
as 2019 Material Design Award winners.
1:22
A stress and
anxiety management app called Reflectly.
1:30
An app for learning letter forms in
a variety of international languages,
1:35
called Scripts.
1:40
And a travel planning application
belonging to the website Trip.com.
1:41
And while these apps share
certain design traits and
1:47
behaviors, they also look relatively
unique compared to one another.
1:50
In 2018, Google added a term called
Flexible Foundation to its list
1:57
of design principles to reinforce the idea
that the number one goal of Material
2:03
Design is creating predictable user
experiences with predictable interactions.
2:08
It's not about making
Android apps look identical.
2:15
Unlike design systems that
specify brand guidelines,
2:20
using Material Design is optional.
2:24
The Google Play Store
won't reject a design for
2:27
failing to apply the Material
Design visual language.
2:30
The store will reject an app, however,
2:34
if certain usability
expectations are not met.
2:36
For example, the Back button in
an Android app allows users to
2:41
navigate recently viewed screens
in reverse chronological order.
2:46
Assigning unexpected actions to
this button would be confusing
2:51
to Android users anticipating
one predictable behavior.
2:56
I've included a link in the teacher's
notes to a list of core app quality
3:01
requirements, listing usability guidelines
that must be followed in any Android app.
3:06
Thinking about usability brings us to
the key benefit of using the Material
3:13
Design documentation:
understanding user expectations.
3:18
The apps built into an Android phone,
such as Gmail and
3:24
the Photo Viewer,
follow Material Design specifications.
3:28
And a good percentage of the apps in
the Google Play Store do as well.
3:33
As a result, Android users feel
familiar with interactive components
3:37
native to Material Design.
3:42
Let's look at the Gmail app as an example.
3:45
The most prominent interactive
element is the Floating Action Button
3:48
in the lower right-hand corner.
3:52
Which, from this screen,
allows me to compose a new message.
3:54
Tapping the menu icon in the upper
left opens a navigation drawer,
3:59
from which I can navigate
to different email folders.
4:04
Everything about these components,
their structure and
4:08
design, the shadows they cast,
the speed of their animations,
4:11
follows principles outlined in
the Material Design documentation.
4:16
If you're building an app to be
sold in the Google Play Store,
4:21
it's not expected that you make
an app that looks like Gmail.
4:25
However, you should study
the Material Design docs
4:29
to get a sense of what behavior and
interactions Android users are used to.
4:33
And if an interactive pattern
like a Floating Action Button or
4:38
navigation drawer is right for
your content,
4:42
you need to understand the dos and
don'ts for implementing each pattern.
4:45
Getting to know Material Design starts
with understanding the virtual materials
4:50
that inform the appearance and
behavior of Google's design language.
4:56
We'll examine these
materials in our next video.
5:01
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