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