Placeholder Image

Subtitles section Play video

  • JON WILEY: Hi everybody.

  • 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