Hi, I'm Rich Fulcher, a designer and manager
on the Android design team here at Google.
At this year's Google I/O conference
we introduced material design.
A new visual language for creating
bold graphic interfaces driven by typography, scale, color,
and position.
For me, one of the most exciting things about material design
is how it takes these classic principles of print design
and brings them to life.
The materials take energy from the user, from their finger,
from their mouse click, their touch and they take that energy
and use it to transform and to animate.
Today, I'm going to talk about how
these virtual materials of paper and ink
pack much more power than their real world
meatspace counterparts.
Now every pixel drawn by an app is
a dot of ink on a piece of paper.
Paper has no color, but ink can be any color,
and ink coloring is how all content is displayed,
whether that's the controls of your app,
an image, or even a video that's playing.
Paper can be a variety of widths, the x-axis,
and heights, the y-axis.
It can even fill the entire display, such
that you can't see the edges of that paper,
or it could shrink down to just be the size of a single button,
you know, no larger than a 48 by 48 dpi square touch target
or standard target sizes.
Ink doesn't have any of those restrictions.
It can be any size, so long as it fits within that paper.
You've got to have something to actually apply that ink to
so that it can be seen.
Paper has an absolute fixed thickness of 1 dpi.
That's equivalent to a 35 pound weight piece of paper,
so kind of a light card stock.
Now when you add ink, you're not changing that thickness.
This isn't a kind of paint that's
building up layer and layer and layer and making it
thicker and thicker.
The paper itself is always that 1 dpi thick, it's never zero.
That would be a hologram.
And this isn't hollow, this is material.
That sense of tactility is vitally
important to the system.
In terms of shapes, paper wants to be a rounded rectangle,
whether that's a rectangle, or a square,
or even a circle, which is just a really, really,
really rounded rectangle.
It doesn't want to be a triangle.
It doesn't want to be a concave shape, like a star,
or the shape of your app icon.
Now ink doesn't have these restrictions.
It can be any shape and it can cover
all those things you want it to be.
Those are the basic principles, but how
do all these materials live and move
within a more complex structure.
Well, we need to start by talking about depth,
and that means embracing the z-axis.
Now every device has a physical z-depth.
For a handheld device, it's that distance
between the glass on the front and the back of the device
that rests on the palm of your hand.
Now that depth controls how paper can behave,
so paper wants to respect that devices depth.
It doesn't want to be able to flip over
because if it were to do a move like that well,
that paper is going to start to move
it's going to bonk against that glass on the front
of the device or against the metal on the back.
You can't execute that move and maintain that sense
for the user that it's inside that device.
Just between those front back slots.
That's why we don't do paper flips.
When we have paper it casts a shadow
and that shadow is based on its position within z.
Now paper is generally presented as square to the user.
Just like I'm moving my hand back and forth in front
the camera here.
Paper moves to the users eye in the same fashion.
Now paper will cast a shadow when two pieces of paper
slightly overlap, like that.
One in front has a light source in front of it,
the paper behind it isn't getting all of that,
so it's getting a shadow on the back.
We like to keep the paper square.
We like to make sure that the shadow isn't something that's
being drawn as ink, that's being printed on the paper.
It comes about because of the physical relationship,
because of the lighting model that the system gives you.
When we have paper, it's solid.
When the user reaches out and touches it,
the user can never press through the paper.
It just kind of makes contact and it's there.
Now we do respond to the user in a couple of ways though.
One is that as the user approaches the paper
and they make that touch, the paper
will rise to kind of meet them.
So there's this illusion of the glass here, your finger comes
down on the glass and the paper completes that motion by coming
forward to meet the user's finger.
You might think about it as imagine your finger
kind of pointing down on a reflecting surface of water
and as you get closer and closer it sees it's reflection,
and those two touch together.
The way that ink responds is like the ripples that
would happen on the water, as I hit
that surface I break the surface tension of the water,
I get this pleasant circular rippling that occurs out of it.
That's what we do in the ink to kind of communicate that
not just that you've made contact with the paper,
but which of the particular elements, ink elements
on the paper you've touched.
Now motion is all about establishing and emphasizing
the continuity of important elements,
and the paper to move across any of those three axes.
We can move along x, it can move along y, even along the z.
Now material can do more than move.
Part of the magic of the experience comes from a way
that materials can change.
The ways that they're not bound by these boring physical laws
of the known universe.
So paper can change its size in both the x and y position.
And ink can do its own thing, it doesn't
have to do exactly what the papers doing.
So you can do things like to have a piece of paper resize,
and have the ink remain the same size but just re-flow to take
advantage of that new spacious real estate.
Or you could expand and have the ink expand at the same rate.
Or you could leave the paper at a fixed size
and have the ink just grow or shrink within that.
They're completely independent.
Now you can change the width and height of paper differently.
They don't have to be symmetric, they can be asymmetric.
And that's really important for when we do transformations.
We strongly encourage this.
So in the example over here that you're seeing,
you are seeing tall objects be made to feel taller.
Your seeing wide objects made more broad.
Now why is this asymmetry important?
Well it helps the user understand
the difference between something that's resizing and staying
in that place, and something that's moving within z.
If I move within z, that's kind of the same as symmetric scale,
as you get closer is growing in both aspects at the same rate.
By doing re-sizes asymmetrically,
we're letting the user know OK, that content is actually
staying up at that same z level.
The movement is a different signal to them.
Now paper can change between its shapes,
but it does like to kind of start at and return
to those core shapes we talked about
before, those rounded rectangles.
And like some kind of x mutant paper,
paper can split or can join, those materials can
heal together, they can regenerate,
they can kind of connect back up.
Creating or destroying paper is always associated with motion.
Now paper can enter and exit in different ways.
Those can be independent.
There's three main styles.
You could just kind of create paper in place
and destroy it in place, you can have it enter one way
and exit a different way, or you can actually
have paper kind of clone, so there's
one piece of paper clones and creates a second one which
can then move, and then it can rest back down
and heal and just become one piece of paper again.
So how do multiple pieces of paper interact with each other?
There's two key types of arrangements.
The first are seams, which are created
when two pieces of paper share the full width of an edge.
It's like they're stitched together at a common side.
Now when papers meet at a seam and joins in that way,
it moves together.
They're actually connected so they'll move as one.
The other is a step.
When we have two pieces of paper with different z positions that
overlap and you get that shadow we talked about, then
you've created a step.
These two papers don't have a relationship to each other.
So they can move independently one of the other.
A very common way that we'll see a step
is for a toolbar, where you have a step above a larger, usually
a larger, sheet of paper the can slide under it.
Now there are variants to this.
You might start with the toolbar and the other piece of paper
seamed together and have the toolbar just rise within z,
just as it needs to accommodate the motion underneath,
so it could lift to make room.
Or you can reverse that, it could move backwards in z
and the other piece of paper could come up and cover it.
Or finally, you could just kind of leave them seamed together.
The other piece of paper pushes a toolbar up
and it just pops off and then you only
see the other piece of paper present.
When paper passes over a toolbar,
it's important that you not split
any of the actions the toolbar might
contain with a piece of paper.
You want to make sure that the actions are
on one side or the other.
And one last note about toolbars,
just like any piece of paper, they can resize.
So they can start tall and as the user
scrolls they can shrink up, or you can reverse that motion
as they move the other way.
The one thing you'll want to keep in mind
is that it's best have the toolbar snap between those two
positions.
Instead of just getting stuck in that middle ground
between them, you want to kind of crisply move
to the smaller or larger sizes.
Another signature element in paper
is the floating action button.
We nickname it the FAB.
A FAB can straddle a seam if it relates to the content of both
of the pieces of paper that are meeting at that seam,
or it can straddle a step if it relates to the piece of paper
that's creating the step, the one that's more forward in z.
Now, you don't have to put in a FAB,
a straddle point like that, it doesn't
have to be on a seam or step.
It could just be on a piece of paper,
conveniently tucked away in a corner, or really anywhere
within that paper surface.
And you want to avoid doing things like,
artificially creating a seam or step,
just to give your FAB a place to live.
Those seam and step relationships
should be about the structure in the inner-relationship
of those pieces of material.
Not about just having a decorative point.
If you want to learn more, our guidelines
are a great place to start.
If you go to www.google.com/design
or specifically /spec, you can read about all of our material
design guidelines, and you'll see a bunch of examples that
can help you get started with this.
There are also a ton of resources there waiting
for you to download them, sticker sheets, templates,
icons, even fonts are available for you from that side.
Thanks for watching and I hope you
have a lot of fun designing with material.