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 same space as we do. We're not flying through
some imagined space, or looking through a
window into another world. This material lives at the same
scale as the device itself, whether it's in
our hand, or we're looking at it on our desk. We don't move. The material does to
bring the content to us. You can see how this works as
transitions organize themselves around the object
as it's selected. The material moves, expands
to reveal the new content. And notice that even as the
content transforms in a way that maybe a physical
material like paper wouldn't, it's still
very clear what's happening because of the way
the material responds to light, and the way the shadows are
being rendered by the platform. So animation is crucial to
reinforcing this metaphor that Matias talked about. It's just in the same
way that shadow rendering helps us understand
what we're looking at. The way that things move
give cues about how they work and about their properties. So, for example, the
material animations naturally show continuity from
one state to another. When I select an item it
expands to the next state. It doesn't jump cut. It doesn't blink in and out. It moves naturally like
sliding a piece of paper across the table. If we teleport our users from
one state to another in a UI it can be confusing
and disorienting when they get to the
other side, almost like if we were to be
teleported in the real world. If I were to just appear on
the stage in front of everybody here, it'd take me a few
moments to get my bearings. It's the constraints that are
inherent in the material that make it clear for
people what can happen and lets them predict and
understand what has happened. So if it makes it easier
to understand what's changing, at the same time it
can show us what's important. So since our eyes are
naturally drawn to motion, if something moves, and
it's in our field of view, we're going to see it. It's a really strong tool
for us to help direct focus. If in a music screen
the player controls are the primary interaction, the
animation can point that out. Also, even noticing the
details, those small things that you might not even notice
overtly, like, for example, the small slide on the
control slider as it comes in. Wait for it. There it is. Even though people might not
notice it overly, they see it, and they know how things
work without having to think a lot about it. NICHOLAS JITKOF: So these
guys talked about many of our core
principles, primarily this sense of tangible
surfaces, which appeal to the primal
parts of our minds with dimension and shading. Bold and intentional
design, which provides a unified language that
allows brand and UI elements to stand out. And meaningful
motion, which fuses this design and the
surfaces together, and gives new affordances and life to UI. What we want to use
these for is to create a new unified
experience for users. We're surrounded by devices,
and people experience our work across all of these
different platforms. And for that reason we
want to treat every device as a window on the same content. We want to tailor the form
factor so that each one of them has commonalities, but
also can be unique. Color, type, and
spatial relationships help tie them together. In this example
email app the sizes are all related by
color and structure, but there's diversity in
the overall presentation. The larger ones use cards. The line length is
kept reasonable. And the small ones
end up being full bleed so they can take advantage
of the size the device. In this file's app there's
a drawer on the side, but on desktop it becomes
a persistent element. On tablets it's a
temporary overlay so it stays out of the
way, and on phones it's a persistent UI
that you drill into. In this calendar example there's
more variety between the views, but, again, typography and
color tie them together. So they feel like they're
a consistent experience. Immersive imagery also
plays a pretty big role. This is something we've seen on
mobile where people are doing things full bleed
that we actually want to take back to desktop. It looks great there as well. And in particular, when things
used to be sort of full bleed, we now can use things like
cards to keep that same sense, even though they're
now surrounded by other kinds of content. Beyond the platforms
we also care about working with
different disciplines. Interaction, motion, visual
design, and engineering are often not deeply associated. And so we've been using
this material metaphor as a way to bind the different
disciplines together and make them more collaborative. In interaction the materials
reinforce the overall sense of hierarchy. The scrolling and
layering give a good sense of how gestures
work, and emphasize how the user should
focus their attention. Visual design becomes
simpler because of this. The content itself can be
very graphic in its hierarchy, and rely on dimensionality
for higher level structures like toolbars
or other elements so they're not
considered together. And motion is in most
ways the most important. Materiality provides
the grounding for it. It makes it consistent
and intuitive. So it's obeying
realistic physics, and speaking better
to the user for that. More importantly,
it allows motion to be deeply tied into
interaction and visual design. We've got sessions tomorrow. And we'll talk a
lot more and more about the interaction between
these different elements, starting in the morning
with interaction design, and then in the afternoon
visual and motion design. If you're interested
in learning more now, you can take a look at
the initial spec preview that we've put up. There's probably
more than you're interested in seeing
in the moment. But you should come by
and listen to the talks. And we'll point out the
most important parts. And stay in touch with us. We put up a new site
for google.com/design, as well as a Plus community. So be sure and follow us there. We created these principles as
a tool for all your future work. We want to inspire and evolve
your designs and your apps. So in addition to
these sessions we'll have a number of
design sandbox events. You should come
by and talk to us. But thank you for joining us. [APPLAUSE] JON WILEY: So we've
left time for questions. And there's actually microphones
in the center aisle here. There's two. There's one in the back,
and there's one up here. So if you all have any
questions about this or design at Google, or-- Nobody has any questions. Everyone just wants to
play with Cardboard. By the way, if you've tried the
Google Earth on the Cardboard thing, it's just amazing. Here's a question. AUDIENCE: I apologize. I'm a developer, not a designer. So this is a silly question. I like design though. I see a lot of circles. What's up with the circles? I like them. I like them. Just could you speak about
where they're appropriate, what you see them conveying
to the users, stuff like that? MATIAS DUARTE: Who's going
to take the circle question? JON WILEY: Matias takes
the circle question. MATIAS DUARTE: Oh, OK. I'll take the circle question. I really would have thought
the circle question should have belonged to
the art directors. Well, there's a couple different
ways that we're using circles. Actually it's probably good to
step back and talk about one of the ways that
we've simplified, and we've tried to keep very
low level, and elemental, and primal what we're
doing in material design is everything is really
its most simple and basic geometric shape. So you'll see circles. You'll see squares. You'll see rectangles. You'll see basically
divisions of space. So when you want to have a
contained element the simplest way to do that is to
bring in the circle. So we used a circle
because it's naturally has contrast to a space
that you've divided up and that has blocks
of text, or areas that have been created by
cards, or divisions color. The circle is a great way to
draw your eye without motion to those elements that
you want to emphasize, whether that is the
floating action buttons that are indicating primary
actions, or it's the avatars of people
that are very important. Circles create
rhythms themselves that help you organize
and scan through the page, like when we have the
multiple messages in email. So what you should think
of the circle as is it is a geometric element
that is a visual design tool like any of
the other tools. It perhaps, in a very simplified
shape pallet, stands out. And that is it's attribute,
that it does stand out. And you want to use it in places
where you want to stand out or you want to create
rhythms by repeating it. Did you guys want to
add anything to that? JON WILEY: Yeah, I was
thinking about sort of where a lot of the
circles kind of came from, and in the early days when
we were thinking about this. So at the beginning I talked
a little bit about, you know, its material principles
and the underlying physics. And one of the things that
happens with any interface if you're interacting with it
is you're injecting energy. Right? There's events that are
happening where you're either interacting with it, you're
touching the interface, and as you're using it
you're injecting energy into the process so
things that are happening. And one of the most
fundamental things that happens within physics is
that whenever a signal happens, whether it's sound, or
light, or what have you, it propagates in a circle. It propagates from
its point of origin, at ideally at the same
velocity outwards, right? And that's generally in a
sphere in a constrained depth environment, that's
going to be in a circle. And so when you see
not only the circles in terms of the affordance
for interacting, but also as you tap on things
and that circle radiates, it's really about just conveying
the sense of the physicality of the energy going
into this system, and that that's
actually your actions are spreading forth
into communicating with the rest of the things
that are on the screen. Next question. AUDIENCE: Yes. My question is regarding
the form factor. It seems like it's apps now
with the material you'll be able to design one app, and
basically the app will adapt, it'll be responsive
to the screen size that the app is running on? Is this where this is going,
where with the material you'll be able to
create one code base and be able to run the
app on any screen size? MATIAS DUARTE: Want to talk to
that one Nicholas, or should I? NICHOLAS JITKOF: Yeah. There's two sides of this. One is we want to make it as
easy as possible to not just re-flow to different sizes, but
also to tailor the way that we re-flow in a unique way. So while the default
platform behavior will do the right thing
as far as allowing you to expand things
to different sizes, we do want more
thought and attention placed on how it should
actually accomplish that. Beyond that, a lot of
these design guidelines are intended to make that much
more seamless of a transition. Like the commonality of
iconography and typography, those, blend them
together, even as we introduce more differences. But our prime focus
right now is trying to get these things
to carry a design across those different
form factors. MATIAS DUARTE:
Yeah, I mean, I'll be a little more
explicit as well. I mean, for starters, we
do have two code bases, one if you're developing
native apps for Android, and one if you're developing
with Polymer for the web. There are framework
components in both apps which will make it easier for you to
scale between different screen sizes, but there is a lot
of intentionality and design thought that needs to go into
making some of those decisions. So we don't have
one automatic system that will take any application
and automatically scale it for you to any screen size. Maybe someday. But I think that would actually
require intelligence that's pretty close to that of a
developer and a designer combined. What we do have here
is a design system where you can create a coherent
app and use the same design, and have very straightforward
ways to adapt it if you understand also what
the purpose of the app is, and what is appropriate for
the different screen sizes. And that still requires a human. JON WILEY: Cool. Next. AUDIENCE: First
off, you guys rock. JON WILEY: Thank you. AUDIENCE: So I'm a big
fan of the animations, and giving cues to the
user and everything, but sometimes it can
be too much, right? So at what point
do you say, if I hit the play button it's going
to go around the screen three times, come back
in, and pop up-- JON WILEY: That happens on
every press every single time. AUDIENCE: So sometimes
users can see that as a bug, or it might slow them down to
whatever actions they're doing. So were there any
concerns around that? And if so, how do you
tackle that challenge? CHRISTIAN ROBERTSON: Yeah,
so I think one of the things to know about-- This isn't
just true of motion design. It's true of design
generally, that there's a lot that's going on
below what people notice. So we don't actually
want people all the time thinking about the
animations when they're going from
one state to another. We don't want them
to say, gee whiz, I just opened up that email,
and again I saw that animation. We want them thinking
about the email. So if you apply that
standard is how much do I want people thinking about
the animation themselves, what is it trying
to communicate, then you can kind of back it
down to the right level. NICHOLAS JITKOF:
One of the things that we considered consistently
throughout this process was how to use the animation
to sort of go along with user's intention. Because when you have touch
responses that sort of emanate outwards it's very easy to hide
details in there that reinforce what's happening without
feeling like you've added a bunch of
animation in there. So we're going to go into
this a bit more tomorrow, but having things
sort of move counter to the direction the
user's doing things, draw attention to them. And if you're
going to do so, you should do that intentionally. If you don't want
intention drawn to things, there's places to hide them. And it's really about
trying to figure out how you want to
balance it, and where you want to draw
people's attention. AUDIENCE: Hi. So I was wondering if
you could extrapolate on how you see new forms of
input with respect to motion. So in regards to
wearable devices, let's say a swipe left and a
swipe right with a wrist watch, or drawing a circle
in the air, how would that integrate with user
experience on an app level let's say, or on your desktop? And how that would
sort of integrate? JON WILEY: We've been given a
design challenge on the fly. How to design
gestural interfaces. I think a lot of this goes back
to the material as a metaphor. And part of what we're
trying to do is-- You know, you go and you watch some
summer blockbuster sci-fi movie. And sometimes it can be a
little bit of a let down because like they set up
the world in which they're operating, but then they
break some principle, right? And it just kind of falls flat. And why did that happen? And I think part of what we're
trying to do with a system like this is to set up a series
of sort of a world in which it functions, and ideally it's
grounded enough in the reality that we have here such that you
can bring your intuition of how objects function to
the system, and it fulfills those expectations,
and hopefully exceeds them, but then maybe we add in
additional magical things we can't quite do yet
with physical devices because we're rendering
with virtual devices. The bridging of gesture, and
other types of interfaces to me is actually just
another level, it's another additional
dimensionality in terms of interaction. And it's a progression. So when we started
with computers we basically had keyboard. And then eventually
we got a mouse. And so that was
like a little bit of interaction,
slightly removed. You know, here it's
happening up here, and I'm using these
things to control it. Then we get all the
way now to today where we have smartphones
with touch screen displays. And now we have this
additional dimensionality of being able to physically
touch the software. And now we're adding this other
layer in, hopefully over time, and hopefully do
it right, where we have wearable devices
that have gyros and stuff. I mean, even the
cardboard device actually is really fascinating because--
Again, it's really awesome. You play with it. But it's just like
doing, you know, basic head tracking
and things like that. And so as we continue
to sort of add in the dimensionality of
interaction with gestures it just makes it
so much more rich. And so we just want to make sure
that we're always grounding it into sort of these principles
that we set up initially. So it's always self consistent. You don't get to a moment
where you're like, oh, I did this thing, and
that didn't make sense. It was discontinuous
with all the principles that had been set up before it. One of things that I think is
really interesting about this, and we'll talk about this
more in tomorrow's sessions, is that there's actually
a fair amount of spectrum. Right? There's a lot of
different types of things that can be expressed, both in
terms of color, and content, and the animation that gives
you a pretty big pallet. It still feels like
it's part of a system, but it gives you a
very large pallet so you can express lots
of different things. So I think with the
addition of wearables I look forward to seeing how
people express their apps and their applications through
these additional different interface forms in
terms of manipulation. NICHOLAS JITKOF: One
of the other things that came up as we
were doing this, first as we are looking at just
desktop and mobile together, was unifying the overall
touch feedback through them. So having hover states
and tap states all be resolved together. And then we started to see
more and more of these. And treating it as energy was
a very nice metaphor for us, because we were able
to look at on touch these things are going
to move outwards. Voice, as you're speaking, you
have a similar response to it. As you use the D Pad
on the TV the movement of your focus through a
UI will be very similar. And one of the things
we didn't really touch on, but like tabbing
between controls using a keyboard can have
a very similar feel. It is your focus
moving through space, and then when you hit
Enter on something, that energy blast is very
similar to any other mode of input you might do. AUDIENCE: OK. Thanks. AUDIENCE: Thank you guys. Appreciate your time. So I work for a company where
we are both cross platform and our mobile apps are not
our primary money maker. So when it comes to
requesting time be allocated to working on this
it can be looked as a little bit of indulgence. What would you suggest
as some maybe priorities to focus on when
looking at implementing some of these things? NICHOLAS JITKOF:
For the most part the framework should be
supplying 90% of the animation and the richness in the UI. What we're asking
people to do is actually look at some of the new
APIs for shared element transitions between activities. Like there are moments that
make good places for polish, and brand in your app. So using the core elements,
using the core iconography, using the theming to make it
feel like it's your product, but then just
polishing one or two really critical things
usually has the best outcome. JON WILEY: Yeah, and Polymer
framework is actually going to be really great for all
kinds of different platforms, you know mobile platforms. NICHOLAS JITKOF: Yeah,
and part of the reason that we've done this for
ourselves, it's helpful for us to be able to have,
if we do a mobile web app and a native app, to create
a very similar structure there, so we don't have different
interaction designers thinking about different
ways of handling it. They should be treated as
pretty much the same app with small adjustment. JON WILEY: This is
probably a good opportunity to also mention that
after this some of us are going to be in the
design sandbox on level two. And as part of releasing
our spec, and design, and having all this
announced, we really want to talk to
designers and developers about kind of the problems they
have in terms of what they're trying to solve for their users,
and so that we can understand how material design
and the principles here can help support
that, or maybe there's some unique problems
out there that need a little bit of
a different twist. And we'd love to hear
feedback about that. AUDIENCE: Hey there. I'm Pierre. I'm a UX/UI designer. And my question is
regarding animations. For one, as you all
know, animations are something that kind of
make an app pop and stand out. And recently we had
a lot of trouble. I work in design
agencies and stuff. So where we make an app,
we create animations either in After
Effects, Origami, or we just animate
them manually. And I was wondering
if there's going to be a tool from Google that
will help us kind of animate our design, because that's the
hardest part of transferring it to a developer,
explaining to them how it's going to interact. And will there be an addition
to the design guidelines explaining what kind of default
animations you should focus on? Will there be like more of
a sandbox the designers can use so they can kind
of carry their points across to the developers? Because I usually
find that point where you kind of transfer all of
your work to the developers, that's the toughest bit. And if a tool were there,
like a native tool that would help us aid in that
process that would be great. But do you have
any tips for that? And is there anything
planed on improving that? CHRISTIAN ROBERTSON: So
even before the tool, one of the things
that we've noticed as we've been doing that
same process in designing things, and working with
engineering to make them happen is it having that
shared metaphor, and having engineering
kind of understand those same principles
gets us a lot closer from the very beginning that we
kind of know how things should move, and how
things should react. And I think that's a
good place to start. I don't know if anybody
else want to comment. NICHOLAS JITKOF: It's also
helped us to-- We actually define a number of
different animation curves. We're not using just sort of
simple ease in and ease out. But we got those sort
of built in, and worked with the engineers so
they understood those. And we tend to use
them everywhere, and we iterate on
them as needed. So tools aside, we
found it just helpful to stay in constant
communication with the engineers, and try to
get as much of this stuff baked in as logic into the system
rather than like as things we're handing over
that are one-offs. AUDIENCE: OK. And what's your
standard design process for like explaining
it to the developers? It's just like a case
of them sitting near you and you kind of cover the entire
animation process with them together? How do you get the
point across to them? NICHOLAS JITKOF:
It's fairly ad hoc. Depends on the situation. Sitting together is
always the best way to accomplish anything. AUDIENCE: OK. I was just wondering if you
had a standardized process for that. All right. Cool. Thanks. MATIAS DUARTE: I do want to
mention before you walk away that that kind of a request or
interest in tools or anything like that-- We don't have
any tools to announce today, but that's the kind of
feedback and pain point that you guys are
feeling that we'd love to hear about more so we
know how to focus our energy. And if you guys have more
of those kinds of questions or requests come by
the design sandbox. JON WILEY: One follow up. AUDIENCE: Where's
the design box? Sorry. JON WILEY: It's
the second floor. It's over by the
Distribute section. MATIAS DUARTE: It's kind of like
you look for the YouTube sign and follow the YouTube sign. JON WILEY: Yeah. Exactly. It's by the YouTube booth. It's a very clear design. Yeah. AUDIENCE: So my question
is really about color. And I see a lot of bright
colors these days everywhere. And even in the pictures
there some of you have a purple
background and a red. So very bright
colors, and they're all different combinations. So how do you pick these
bright color combinations in context of material
design so that it's actually appealing to the user, and
so it has meaning and is not bright enough to be
noisy or something. JON WILEY: We test 41 shades. I'm just kidding. Sorry. Too soon. Too soon. JONATHAN LEE: There's
two approaches to color. One is that we
intentionally wanted to take a very exuberant
approach to applying color to our applications. We felt that, like I was
kind of talking about in some of the slides where you should
really embrace your brand's product colors, or your icon
colors, and extend those things all the way through all
the series of screens that someone's going to see. And so we thought, why
not push it further? And on the reverse side
I think there's also some pretty extensive usability
and contrast ratio studies that we started to
standardize around. And I think that
that's the intention of the design guidelines
is to kind of help give guidance on being
exuberant while still being accessible and usable. MATIAS DUARTE: Yeah, so
to be super clear, if you go into the spec you'll find
a whole bunch of pallets, and they have a lot of guidance
on what kinds of colors you should put together in
order to get legible text on top of them, and stuff like that. But we are very
much in love with and excited with these
modern, bold colors. But the entire
system is designed to let different
approaches and philosophies to color feel just
as much at home. If you want your content to
pop more and your UI elements to be really muted
and subdued, you know, that's part of material
design as well. The idea is that it is
a material like paper, and you can print something
that's very exuberant on it, or you can print something
that's much more muted. We want to be a framework
where any brand can fully express itself and
feel at home, and not be overshadowed by the
platform's conventions. NICHOLAS JITKOF: Some of
the examples you actually can look at in the
preview will be like the Settings
app is quite muted. It's intended to be
very utilitarian. Calculator app is
also muted, but it uses a single pop of
color to draw attention to other functionality. So it's, again, about
management of where you want attention
and color that makes an app really unique. One other point
too, that the pallet library that we've
been working on, one of the reasons we were
so excited about it was it allows you to select colors that
can go alongside imagery that allow the image to feel like it
is covering the entire surface, rather than like an
arbitrarily chosen color that may contrast in
some unusual way. So you have the opportunity
to have it extend the image outwards into the system, or
even to contrast to that image if you want to draw
attention to an action. MATIAS DUARTE: And
it looks like we only have three minutes and
four questions left. So let's try to get
through them super quick. AUDIENCE: I'm sorry
to take the time, but actually I have two
questions, and it's tough. MATIAS DUARTE: All right. The crowd will vote on
which one we answer. No. I'm just joking. Go ahead. AUDIENCE: First of all, I heard
Jonathan is working for UXA, which is the Google design
guidelines for the Google Apps. So would you like to talk
about that a little bit, how are you working
across different apps to make the UX guidelines
consistent across Google Apps, and how you also make
sure all the apps will follow the guidelines
when you did that. That's the first question. And the second question
was Google always have a big push on
the left navigations. As a company we didn't
follow that rule, and unfortunately what happened
was right after our release from main screen navigation
to the left navigation we did see a lot of drop
for the user engagement. And also we see a big trend
in that for Facebook app, and on Google+ they changed from
left navigation into the main screen navigation. So do you guys like to share
some insights of that change, and how that will lead into a
lot of companies that develop social apps that could
get insights from this? Thank you. NICHOLAS JITKOF: OK, I'll answer
the second question first. MATIAS DUARTE: Super
quick second question. NICHOLAS JITKOF: Left nav is
appropriate for certain classes of apps. The places we've seen
them most successful is when it's
something like Gmail, or like a stream of content
where like 90% of your time is spent there, and the rest
of the time you need sometimes access to other labels,
or things like that. We'll go a lot more into this
in interaction design tomorrow morning, but left
nav is only one of a number of different
top level constructions. You can have tabs. You can have the
content area itself act as overall navigation. One of the things we are
trying to do in the guidelines is very specifically
calling out the benefits of each of those different ones. Left nav itself
isn't inherently bad, but when it's used for the
wrong type of application it can focus the user
in the wrong way. JON WILEY: And I'll
answer the question how do we coordinate
design across Google. We all talk to each
other all the time. That's it. We go up. That's it. MATIAS DUARTE: Lots of drinking. JON WILEY: Just
talking all the time. Just talking. All right, next question. AUDIENCE: I was thinking
about all the [INAUDIBLE] and the physicality
that you stressed out in the paper metaphor. And I was thinking about
Facebook's Paper app. And they go a step further
giving away all buttons, and making the motion the
clue to the interaction, like to close something. And I wanted to know
what you think of this. If you think that this
app would feel right in the next generation
of Android apps? NICHOLAS JITKOF: We
love using motion as an affordance for
things that can happen. We need to be careful about
being too reliant on it because there are maybe
people who can't perceive it, but it is a wonderful
way to give clues as to gestures
that can be taken, and even just to simplify the
way the UI looks through it. So we're excited about
the possibilities. MATIAS DUARTE: And you
can see in our Calculator app we have a side panel
of expanded options. There's no button for it. There's no little
textured drag handle. It's just a surface. AUDIENCE: And you close
it by sliding to it? MATIAS DUARTE: Yes. JON WILEY: All right. We can take one more question. MATIAS DUARTE: Oh no. Come on. JON WILEY: Just one. Sorry. They're telling us to go. AUDIENCE: Hi, I was wondering
if these design principles also apply to Google Glass? CHRISTIAN ROBERTSON:
To Google Glass? JON WILEY: Will the
design principles also apply to Google Glass? NICHOLAS JITKOF: As of right
now our design principles don't cover Google Glass. The information about color,
and brand, and iconography definitely do. And we're working very
closely with that team. Our primary focus for now
has been sort of the watch to television form factors,
but we're definitely considering it and working
to tie them together. JON WILEY: Awesome. Thank you everybody
for attending. Enjoy the rest of
your afternoon.
