Welcome.

So during the keynote you heard a little bit

about material design, and we hope

to give you a little bit more detail about that today

and in the sessions that follow tomorrow.

But first I want to tell you a little bit

about our inspiration around material design.

Every object in this room owes its origin

to a few people throughout the millennia who

paid careful attention to their environment.

They sought out the very best materials,

and they learned their properties.

And they used this knowledge to make things.

And when you consider making things, the design

and the manufacture of things, we

inherit thousands of years of expertise.

In contrast, relatively, software design

is just getting started.

Much of interface design concerns itself

with what people see.

But with modern high resolution displays

coupled with the ability to physically interact

with the software your expectations are much greater.

In fact, there's thousands of years of expectations.

And so we took a step back.

We looked at all of this software

and we asked what is this made of?

We challenged ourselves to define the underlying

physics of our interfaces, and craft a visual language which

unifies the classic concepts of good design

with a solid understanding of the most

fundamental physical properties.

At first we thought like designers.

How should it appear?

How should it look?

But then we thought like scientists.

Why does it behave this way?

And after many experiments and many observations

we wrote down everything that we'd learned.

These are our material principles.

MATIAS DUARTE: Hello.

In Android 4.0, Ice Cream Sandwich,

we introduced a typographic magazines style UI,

and a lot of people liked it.

We were pretty happy with it.

But design is continually evolving.

Users are getting more sophisticated.

The design landscape is more sophisticated.

In particular, motion has become incredibly important

over the last few years.

We wanted something that was taking

the very best of graphic design clarity,

and the innovations in motion graphics,

and motion communication, but that still

taped into those elements of tangibility, of physicality

that industrial designers themselves use.

So this led us to a question of how do we do this?

And the very first principle in material design

is metaphor, which seems a little random.

Why metaphor?

Metaphor is basically a very, very short story.

And like stories, metaphors are really powerful because they

are deep and dense in meaning.

They communicate more richly than verbal language can.

If I'm writing a play or if I'm telling you

about a character or a person in real life,

if I say she was a hurricane, I don't

have to tell you about her force of will

or her indomitable spirit.

I don't have to tell an actor that averting her gaze

would be inappropriate.

The metaphor is a form of knowledge transfer

that depends on shared experience.

And in fact, this capacity to transfer knowledge

and to transfer learning is one of the things

that defines humanity, and, in fact, defines intelligence.

So for us the idea of metaphor is a backstory for the design.

It unifies and grounds the design,

and it has two functions.

It works for our audience.

We want to present a metaphor that they can understand,

that they can connect with, that they can use to move faster

into understanding how to use things.

But it's also a metaphor for ourselves,

for the designers, and the developers, and the PMs,

and the QA people, everybody working together,

because when you have a metaphor that everybody understands,

intuitively understands, you don't

have to explain how they violated subsection C, clause

2 of your style guideline.

They just know it feels wrong.

They know it's out of place.

So why this particular metaphor?

Why did we imagine a material that

was a form of paper sufficiently advanced

as to be indistinguishable from magic?

Well, one part of it is of course

that we do have a lot of experience

as humanity communicating with paper.

Paper is just rich in a history across all our cultures

of conveying information, and it naturally

affords so many different ways of interacting with it.

But the other aspect of paper is that it is a physical thing.

It exists in the world.

And this idea that surfaces because they

are tangible are a metaphor that we can use to accelerate

understanding of our UI is really important.

You have this perception of objects and surfaces

that's happening in the more primitive parts of your brain.

It's happening in these visual cortexes that

are in the back and lower parts of your brain.

And that means they're simply easier than language.

They are more natural than language.

You have this inherent understanding

about the separation of things and the relationships of things

that allow us to look at this and have it make sense,

even though we know there is no material in the world that

could possibly do this.

It is irrational and yet feels completely natural.

And that's what we want when we're

creating digital, magical interfaces.

Right?

Because we are not constrained by the laws

of the real world in our user interfaces.

Surfaces are intuitive.

And that's why we use them as the foundation.

They organize space and rationalize the interaction.

And it matters that you preserve this inherent sense

of what's right.

Not for the sake of artifice, but in order to make the mind

work less.

One of the things you'll discover in our material design

documents is that our buttons rise to the surface in response

to touch instead of syncing into a surface,

like a fake, plastic button would.

And we do this because we want this illusion to be consistent.

The idea that when your finger touches

that glass on your phone that surface

is coming up and meeting your finger

at the point where it touches.

JONATHAN LEE: Content is bold, graphic, and intentional.

We pushed ourselves when we were thinking about material design

to make clear and deliberate design decisions regarding

color and topography.

So embracing these classic visual design

principles Jon and Matias have both

spoken about in our new framework.

With Ice Cream Sandwich Android introduced

a new system font, Roboto.

And today we're updating Roboto to go beyond phones

and tablets, and be the default typeface for the material UI.

Here you can see the current version of Roboto.

And Roboto is now slightly rounder, friendlier,

and most importantly, redrawn to perform on desktop and beyond.

And I can tell you from personal experience

that it handles really well.

We also developed and documented our design guidelines

for typographic scale.

By using one typeface and a handful of weights for emphasis

we believe that it delivers consistent and clear

hierarchies in your products.

Using scale and appropriate display sizes

you can create dynamic, print like layouts

with using white space and contrasts.

This focuses your users on the content that really matters.

Using vertical key lines and baseline grids content

is bold, elegant, and graphically clear.

We also developed a complete color palette

with intentional color decisions for shades, tints, and accent

pops.

These are not just adding white and black to a color,

or using alpha.

We actually looked at each of these shades

and decided what they should be.

So strong and intelligent application of color

gives life to your UIs.

And it connects users with your brand.

It also can create very strong hierarchy

and liven up some pretty standard UIs.

As you can see in this example, it's

essentially some kind of form that you're filling out.

And there's a clear area for your title,

and that's what we want people to focus on.

Dynamic color is also really exciting.

Earlier today Matias announced a new API in the L preview

called Pallete.

This system really makes it easy to color things,

dynamically select, and extract color for use.

One of the things that you could use color for

is contrast accent colors.

Contrast colors make this floating action button,

which is the play/pause button really pop.

Brand, color, and icons are accelerators

that guide users through your design.

When think about app icons we looked at real life studies

in lighting and shadow.

We started by defining a universal grid

for app icons, one that supports primary geometric shapes.

A product icon is the first literal touch

point of your user's experience.

We looked at extracting those attributes from your icon,

and from your brand, and intelligently applying those

to the surfaces within your UI.

The top toolbar and the floating action button,

again, are accelerators for those actions.

Here's just another example of how

to connect those services to the product icon.

And finally, we took the same modern, bold, geometric

approach from app icons and applied it to the UI icons

you see in your app.

Our design teams are now using one common set

of icons between Android L, Polymer, and the web.

This means one trash can across all devices.

And we'll be releasing these icons later this summer

through our design guidelines, available for use

on both Android and the web.

CHRISTIAN ROBERTSON: All right.

So even if we're doing all this, and we've got great typography,

as an industry we're leveling up when we start using baseline

grids, we've got amazing color, it's

not enough just to draw the static states and stop there.

We can do more to show people how the states are changing,

letting them focus on the content that matters.

So when you think about it, almost all state changes

in the UI start with user input.

And this is why material UI puts that user input

at the center of the animation story.

So when I touch the screen immediately

the surface responds.

I can see exactly where I touched,

and the intersection of the object that's responding.

This does two things.

First, it tells people that they've been heard.

They feel powerful.

They feel like they're in control.

Apps feel responsive.

Second, it confirms to them that the UI

is going to do the thing that they expected,

that it's working.

This animated touch feedback is now

built into the platforms for both Android and Polymer,

and it's being used by all of the relevant components.

So it's not just the immediate feedback

though that's centered on user input.

The material itself transforms to bring in new content.

And all this happens on a shared stage.

When I say I shared stage, I'm talking about the environment

where this material lives.

It's important to know as we're looking at the material

that it lives in the same scale and in the same space as we do.