Thank you all for joining us today.

We'll just start with a couple of introductions and then dive

right into the material.

So I'm Rich Fulcher.

DAVE CHIU: I'm Dave Chiu.

ZACH GIBSON: Zach Gibson.

BETHANY FONG: And I'm Bethany Fong.

RICH FULCHER: And we're all designers

working from across Google, from Android to Chrome,

concentrating on bringing Material Design to Google's

apps.

And just personally, we're really

thrilled to be here this morning to really get

to show off this work that we've been working on

for quite a while now.

So thanks for coming.

Yesterday's keynote introduced Material Design,

which is a new visual language focused

on creating bold, graphic interfaces.

It takes the principles of typography, position, scale,

and color, and uses those to build

really wonderful interfaces.

Material Design combines these classic print design principles

with the kind of innovation that you

can achieve through the application of technology.

It takes elements that were formerly static and makes

them reactive and responsive.

It receives energy from the user, from the user's finger,

from their mouse click, and it directs that energy

to power transformation and animation

of the material itself.

Material Design is also one adaptive design.

So it's a single design system that

covers handheld and web devices.

It covers a variety of different form factors.

Now, this is important because it enables the user

to leverage the mastery they gain in one context

and apply it to another to get that sense of intuitiveness

that comes from being able to do that.

In this session, we're going to discuss

how Material Design affects the way you design

the interaction of your applications.

We're going to cover three major topics today.

We're going to start by talking about the materials themselves

and the properties of those materials

that guide how you use them.

That will lead into a discussion of structure, which

will cover both the level of how do I structure

individual scenes or views within my application,

and then up to how do I structure my entire app.

And finally, we'll end by looking

at some of the standard components that

are kind of novel for Material Design

and go into a bit of detail about how you can apply them

that are particularly important.

So since Material is the metaphor that

powers this entire system, let's start by talking about two

of the fundamental ones-- paper and ink.

DAVE CHIU: In Material Design, every pixel drawn by an app

is a dot of ink on a piece of paper.

Paper is, on its own, colorless.

Ink can be any color.

Each piece of paper wants to be a simple shape with rounded

corners-- a rectangle, a square, or a circle, which

is, after all, just a square with extremely rounded corners.

Paper does not want to be a star or a triangle

or the shape of your app icon.

Ink is much less restricted.

It can flow into any shape.

Measured in the x- and y-axes, both paper and ink

can have any size.

Paper can fill the entire display such

that you can't see the edges, or it

can be the size of a single button.

The size of ink is limited only by its need to stay on paper.

But paper has an absolute fixed thickness

equal to one DIP, or Density Independent Pixel.

Now, why is that important?

Because we must now consider the z-axis when laying out content.

As a quick refresher, the z-axis is perpendicular to both the x-

and y-axes, allowing us to position surfaces in front

of or behind other surfaces.

Paper surfaces are intuitive and natural.

But to maintain that materiality, we layer

and move them in ways that could plausibly

fit within these devices.

This means we constrain paper's behavior

based on the perceived z depth of the device.

So for a phone, that's the distance

between your thumb on the screen to the back

of the phone against the palm of your hand.

Monitors and television support perceived

z depth greater than their physical dimensions in part

because we don't physically handle the devices.

The position of a piece of paper gives the user

hints about how it relates to other paper.

The dimensionality invites interaction.

When the user sees a realistic shadow,

they think there is a gap-- we call it a step-- between two

pieces of paper, and they will behave and move independently.

When there is no shadow between two coplanar pieces of paper,

the edge they share is instead a seam.

And the movement of those pieces of paper

will be linked together.

Paper always occupies a single z position.

It is always flat, never tilted so that one edge is

closer than another to the user, and it does not

flip over to show the other side.

The z position of paper is also a reflection

of content hierarchy.

Paper with a z position closer to the user

typically contains content you want the user to focus on,

such as a dialog box, or when you

select a date in the calendar and it expands

and moves forward from the grid.

Paper with a z position that's higher

also tends to affect underlying content.

An obvious example is a navigation drawer,

which appears above everything else

because it changes the displayed content.

App bars are another obvious example.

With Material Design, rather than

thinking of depth as ornament-- so adding a few drop

shadows here and there and calling it a day--

use depth to help users understand how your app works,

how content is organized, and the scope of actions.

So let's talk about layout.

How do we take all the possibilities of this system

and present them in a coherent and consistent fashion?

ZACH GIBSON: In all of our Material Design layouts,

we strive for consistency, a cohesive experience

across all of our apps.

This starts with the fundamental structure

of how we build our applications and layouts.

The history of graphic design has given us

tools like key lines, baseline grids, aspect ratios,

and the use of incremental spatial relationships

in our designs.

These tools are the building blocks that we use

and we need to create consistency in our designs

across mobile tablet and desktop.

Historically, the best graphic design work

has come from a deep understanding of a grid

structure, so that when it's used to its full potential

or even when something breaks this grid structure,

it can be done in exciting and innovative and delightful ways.

So there's a visual design talk that's happening later today.

And it's going to cover a bit more details about the grid

structure.

But for this presentation, it's just

important to note that our grid system is

based on an 8-DIP increment.

So it's nothing new, really.

If you've been working for the web,

these are very familiar and friendly numbers.

You'll find that our headers, icons, paper elements, padding,

margins, buttons, et cetera are all numbers like 16, 24, 32,

96, 960, 1,024.

You get the idea.

They're all familiar and friendly numbers to us.

We're just baking this into the system

for the sake of consistency and visual harmony across all

of our screens.

So with our grid now in place, I think

we're ready to start designing some apps.

RICH FULCHER: OK, so how do the properties of paper and ink

affect the way that you actually structure your app?

So when you construct any particular screen,

we've found it best to start from paper.

That's the material that's really

going to define the architecture of any scene

or view that you're going to construct.

And it's going to call out what elements

are surfaced above or below or can move independently.

You can always come back and do ink as kind of a second pass.

You've got your paper laid out.

Then you can fill in as you would just kind of draw it in,

all of the controls, all of the content, as a later action.

We've spent a lot of time actually

cutting out pieces of paper and layering them and moving them

till we came up, within the system,

with views that made sense.

I really got to hone my scissor and glue

skills working on this project.

We even used things like little wooden discs

here to track the Floating Action Button, which

is a highlight component within Material Design

that Bethany will go into more detail

about in just a couple of minutes.

So playing with paper is a great practice

for just getting a sense of how this design system works.

It really gives you a feel for how

the surfaces will interact with each other.

When they approach each other, does one

lift to get out of the way of the other?

Do they move together as a group?

And just kind of shuffling the paper around physically

helps you just very quickly get an understanding of that.

It's a really fast, really cheap, even kind

of fun way of designing.

So when we're talking about just the structural possibilities

for your app at the high level, all of the possibilities

that you're used to seeing are still there.

If your app wants to use tabs, that's great.

We support that.

No worries.

If you occasionally indulge in using a left side navigation

drawer, that's covered, too.

That pattern's there.

If your app is all about search, we like search, too.

That's a pattern that you can support, as well.

As a designer or developer of your application,

you are responsible for picking the most appropriate pattern

that's going to best serve your users and their goals.

So be sure to consider all the possibilities.

Now, each of those will have its own set

of advantages and disadvantages.

I'll pick on the left navigation drawer for just a moment here.

This is a really suitable pattern

if you have a large number of high-level views.

It becomes, effectively, this very convenient table

of contents to your application that the user can quickly

access and scan and jump to a section.

It can also be really valuable if your app has deep paths

through its hierarchy, where the user can go down,

down, down to deeper levels, because they

can use the drawer as a rapid mechanism

for pivoting back and going to a different top level

without having to go up, up, up first to do that.

On the other hand, there are drawbacks to the drawer.

It's clearly not as obvious as something

like tabs, which are immediately visible on the screen all

of the time.

It also may not be ideal if the contents of the drawer

are heterogeneous, if it's not a standard list of categories

or labels, because, in that case,

the user is going to need to spend a little bit more

time using your app to familiarize themselves

with what the content of that drawer

is, because they're not seeing it all of the time.

On the other other hand, that could be valuable

if you're trying to demote some of that content,

if those are less frequently visited destinations

that you want to politely steer the user away from,