"Animations and Transitions " was retired on December 9, 2019.
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
Getting to know Material Design starts with understanding the virtual materials, paper, and ink, that inform the appearance and behavior of Google’s design language.
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
If you have a smartphone handy,
hold it flat in the palm of your hand.
0:00
Imagine that the apps on your phone
contain layered sheets of paper
0:05
pressed between the device in your palm
and the glass covering the screen.
0:09
Tapping onscreen buttons might
cause these layers to rearrange
0:15
or summon new layers of
paper from offscreen.
0:19
Each layer of paper contains content:
text, images, videos, and more.
0:23
Material Design imagines
this content as virtual ink
0:30
decorating each sheet of virtual paper.
0:35
Keep that visual in mind as
we explore the appearance and
0:38
behavior of Material Design content,
0:42
made of virtual materials inspired
by real-world paper and ink.
0:45
Every layer of content
in a Material Design app
0:51
exists on a sheet of virtual paper.
0:55
Each sheet of paper is exactly one dp
(or "dip") thick.
0:58
Dp is short for
density-independent pixels.
1:03
Some devices have high-resolution screens
1:08
with more pixels per inch
than a low-resolution screen.
1:11
Dps are flexible units that scale to
have uniform dimensions on any screen,
1:15
which allows for consistent designs
across a variety of devices.
1:21
So, for example, a 48 by 48 dp button,
the minimum acceptable size for
1:26
a tappable interface element
according to the Material Design specs,
1:32
would appear to the user to occupy
48 square pixels on the screen,
1:37
no matter how high the resolution.
1:42
Virtual paper can be as small as a button
or grow large enough to fill the screen.
1:47
Paper can split apart into smaller shapes.
1:53
And the smaller shapes can
heal into one large paper.
1:57
Otherwise, virtual paper
behaves a lot like physical paper.
2:02
One sheet can be behind another or
in front of it.
2:07
But two sheets of paper cannot
occupy the same physical space and
2:10
one sheet of paper cannot
pass through another.
2:14
Virtual paper can move forward
towards the user on the z-axis.
2:19
And in fact,
2:24
interactive elements in Material Design
appear to rise to meet the user's finger.
2:26
Or they can recede away from the user.
2:32
But a sheet of paper cannot flip or
fold, as movements are limited
2:35
to the space between the device in
the user's hand and the glass screen.
2:41
Virtual paper casts shadows.
2:47
Shadows suggest depth.
2:50
A sheet of paper closer to the user
2:52
than another on the z-axis
should cast a longer shadow.
2:55
If you were making a paper prototype for
an Android app,
3:00
you could use layers of paper
to explore depth and shadows.
3:04
I've included a link to
a video in the teacher's notes
3:09
that demonstrates this
concept in more detail.
3:12
[SOUND] The content decorating
virtual paper is called ink.
3:15
Ink is the content found in your app.
3:21
In my example of a recipe app for
a cooking magazine,
3:24
this would mean a search interface and
a list of recipes but
3:28
ink can be any combination of text,
image and video content.
3:32
Ink can move independently within a sheet
of paper, forming any shape imaginable.
3:39
Or it can move and scale with the paper.
3:47
But ink cannot leave the paper.
3:52
Ink has no depth and
doesn't impact the shadows cast by paper.
3:55
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