[MUSIC PLAYING] YASMINE EVJEN: We're
going to be talking about Material Theming, Building
Expressively with Material Components. Oh, and I have the clicker. And I'm Yasmine Evjen. I'm a design advocate at Google. MICHELLE ALVAREZ: And
I'm Michelle Alvarez. I'm a designer on the Material
Design Team at Google. YASMINE EVJEN: And in 2014,
we introduced Material Design as a system for creating
beautiful, bold, and consistent digital products. And with the system came
principles and guidelines. We use paper as a
metaphor, something that everyone is
pretty familiar with. Paper is something you interact
with usually on a daily basis. It moves when you touch it
as well as casting shadows. And we kind of wanted to
build upon this reality that was grounded that
you would understand. And we use color surfaces and
typography to create emphasis to really give clear
signals to the user what they could do in a product. And with that, we had
some style decisions. We used Roboto, which provided
a great sans serif for Android to really build great
user experiences that were easy to scan. And we also provided some
color palette options that really allowed really
good pairings that looked great in your UI. And with the Roboto type
scale, and all the surfaces, and shape, and our
guidance around that, and our fixed color
palettes, we really created this unified
design system, which really unified
all apps across Google, whether it was on mobile,
the web, or desktop, as well as Android. And beyond unifying
all the apps at Google, we also unified millions
of external apps that had launched using Material
Design on Android, iOS, and the web. And the consistency was
great for usability. It allowed users
to easily navigate an app across platforms. And it was just
really easy to use. You looked at it, you
could recognize it, and you knew what
you were doing. But it also left little
room for expression. In this example, we
have our Gmail app, which is a Google product. And on the other side is
a competitor email client, and they look pretty
similar, right? Besides changing the color, it
looked pretty much the same. So we asked ourselves, how might
we allow for brand expression while maintaining the
usability of Material Design? And that's when last year, we
announced Material Theming. It provided more
flexibility for brands to express their
different styles. MICHELLE ALVAREZ: So in order
to create Material Theming, we needed a playground
for these ideas. We knew that third
parties were coming from all different content
types and contexts. And we wanted to be able
to support their needs. So what we did was created
eight hypothetical products, everything from
finance to editorial. And we didn't just create
this idea of a product. We created a brand
style guide and a logo. And these really helped us
drive our design decisions. So we knew why we were making
certain decisions in our UI. And when we first started
Material Theming, the idea, we started with really
broad explorations. This was probably the
most fun I've ever had playing around with UI. We explored the ways
that we could really push Material Design to its limits. We looked at big
bold typography. We explored this idea
of total color palettes and applying them to
whole surfaces of the UI. We even looked at some
of that surface metaphor that Yasmine mentioned in
the beginning of the talk. And here you can see we're
changing the different z-index of these surfaces. But we had to reel
things in a little bit and look at there's
three core areas in order to make sure that what
we were delivering would be consumable and
able to be used by everyone. So we had to look at
our material principles. Were we still staying
true to our core ideas of Material Design? We had to think about
content and context. And that was thinking
about these brands and how people use these in
context of their product needs. And then lastly, and
probably most importantly, we needed to think
about the user needs. Not just what the
product needs, but what your user needs when they're
engaging with that product. So this is one of
our case studies. This is Fortnightly, and this
is our editorial product. And we didn't just
create hero screens for these hypothetical products. What we did was
create whole flows, and we even explored
information architecture across all of these
hypothetical brands. This way, we knew
all of our components were aligning to all of
their navigation needs. So something that makes
sense for editorial, like a navigation
drawer, might not make sense for another
product or another IA. Here we have Rally,
which is our finance app. And you can see
how the UI changes to adapt for this content. So here, when the user
is trying to engage with numbers and
lots of content, we have more of a dense UI
using a dashboard and more condensed lists. Thinking about the user
was super important to us when we were thinking
about Material Theming. So when we created these brands
like Basil, a recipe app, we thought about,
how is the user engaging with this content? And we thought, well, the
Basil users are just looking for lean back browse content. So the component that we
felt was the most appropriate was the image list. It's super image forward. The users can just
scroll through and take in content in
a really visual form. But then when we thought
about some of our other apps-- this is our hospitality app--
when the user's intention was really to drive deep
down and find the best price for a flight, we used a
more utility based component, like a list or a card where
the user can scan the prices. And we did this all while
exploring visual ideas. So we looked at
shape, and color, and typography, and iconography
through all of these brands. And we didn't just do this
for our hypothetical products. We did this for Google. And this is our
Google Material Theme that uses our proprietary
typeface Google Sans, our Google color
palette, and our Google icons. YASMINE EVJEN: And we had
all these expressions, but we needed to create
a way to enable anyone to create their own styles
while still maintaining that consistency that
Material Design provided. So we needed a
starting point, a way to make expression accessible. We updated the
baseline components based on the original system
and included new components and expanded state information. And we also needed code. We hear you. We wanted a place to start where
designers and developers could be on the same page for
enabling theming capabilities. So we released
Material Components, which are open source code
available on web, iOS, Android, and Flutter. And we identified three ways to
systematically express style-- typography, shape, and color. MICHELLE ALVAREZ: So we've
identified these three areas, but we have this component set. And we needed to find ways
to inject these styles into our components. So we took a look at
our simplest component we have here, our button. It's made up of a text string. We can change that text string. We can change that
typography and allow it to express your brand. The button component
also has a container. When you start with the
baseline components, like Yasmine mentioned
earlier, you're starting with this
four dip corner radii. But we want to
allow third parties to be more expressive
with their button so they can change the shape. So this button text and
this button container can also change its color. And you can have this
reflect whatever brand color you'd like. So the button is a
pretty simple example of one of our
components, but we have lots of components, lots
of more complex components. And we did this exercise
pretty exhaustively. And it was really
important not only to get all the designers
on the same page around what the different
elements of the components were and how we could change
those parameters in order to express theming. It was also super important
that we shared this document across all of our disciplines so
that designers, engineers, PMs were all on the same page
around what we were designing. YASMINE EVJEN: We
needed a system for both designers
and developers to express and control
brand at a global level. So we created a
simple architecture. So we had this idea
of injecting styles, but we wanted a way to
really simply explain it. So we created
these three levels. The first level is a
set of the categories. Those categories each
have a set of attributes, and those attributes
have values. And this was our
abstraction that we've created for Material
Theming, something that we knew would
be abstract enough for designers to understand
and abstract enough to be applied to all of the
different platform thinking. But let's look at this
a little less abstractly through our type system. So the Material
Design type system is made up of a type scale. The type scale are all of
these different categories that you can use
to create hierarchy with your type in your UI,
so everything from headline 1 to headline 6 and caption. And all of these categories map
to the same set of attributes and Material Theming. And these were intentional
design decisions that we've chosen as ways to
be expressive with typography. So we wanted to allow
you to be able to change the font family, size, weight,
letter spacing, and text transform in order to be
expressive with the type. So if we look at just one
category, let's say button, you'll see that it starts
with a set of values. These are the baseline values. You'll get these values
with the baseline components in Material Design. And here's our button again. So we can see here, we have
Roboto Medium 14 point. This is what you're
going to start with. But you can change those values
for your button category. And what we're changing
here to Raleway Medium 14, pretty similar to Roboto,
it has a good feel. And when I change
that button category, it not only changes
in the one instance. It's also going to change
across all the categories that map to button
in our component set. This ensures that
your typography is really consistent across
all of your components. So we knew with these new
Material Theming capabilities, we would need to expand
our guidelines in order to give more granular
details around how to theme. So what we did was added
some more type guidance. One example that we
found was a good place to be more expressive in UI
is with larger headlines. So here's a place where you can
use funkier more display type typefaces. And it still retains that
legibility and readability because they are
at larger sizes. We do have some don'ts
in our guidelines. Don't use these really
expressive typefaces as really small sizes,
because your readers won't be able to read any of your UI. We have some more
granular details like cautions in our spec. And this one, I think,
is important to call out. So I mentioned
earlier that you're able to change the case in your
categories of your type scale, which is either sentence,
upper/lower, or all caps. And button typically is
an all caps category. And we do this
intentionally in order to really drive the user that
this is an interactive element that they can touch,
and something's going to happen when they do that. So if you are to change that
text case to upper/lower or sentence, make
sure that you also provide other visual cues-- like here, we're
providing color-- to indicate that it's still an
interactive element in our UI. YASMINE EVJEN: And we also want
to provide some resources you can start theming right away. And with Google Fonts, it is the
largest open source repository of typefaces on the
internet that you can easily embed into your web
and Android products. And with that, let's look
at building our own Material Theme, and let's take a step at
looking at through typography. MICHELLE ALVAREZ: Cool. YASMINE EVJEN: So we found
a font that we liked. MICHELLE ALVAREZ: Great. YASMINE EVJEN: Google Fonts. MICHELLE ALVAREZ:
Off Google Fonts. YASMINE EVJEN: Off
Google Fonts available. Tell us more about
this font phase. MICHELLE ALVAREZ: Great. This is Raleway, which
I mentioned earlier. It's pretty similar to Roboto. It has a good utility feel, but
it's a little bit more playful, has some of those rounded curves
that Roboto doesn't quite have. It also is a little bit wider. So it was actually
originally drawn as a display face
used for larger sizes but then was expanded to smaller
sizes and have more weights. So this is a pretty good
typeface to use in your UI. YASMINE EVJEN: All right. But I actually want
to see this in action. We keep on talking about code
and that we made it available. But I haven't seen anything yet. So lucky for all
of you, we have, starting today,
two new projects, interactive projects on the
web, as well as on Android. And I'm going to give you
a demo on how to use that. If you go to material.io, on
Tools that Build a Material Theme-- do it afterwards, after the
talk, after you watch it-- you can go ahead and start
theming and customizing it through all of our components
so you can visualize your them. And the two interactive
projects on the web is built on Glitch, which
allows us to easily see all of our changes
that we made, and then on Android Studio,
which is something that a lot of Android developers
are already familiar with. So let's actually take a look. So if we were to implement
this typography in the web, you would change your
my-theme.SAS file. And you would import this,
the Raleway typeface, as well as changing
the font family across all of your components. MICHELLE ALVAREZ: Are we
going to go for the demo? YASMINE EVJEN: I think we're
going to go for the demo here now. One second. Oh, yeah. Let me go back to the
slide for a second. Where is it? Oh, come on. OK. All right, great. Let's go back to the demo. So we have this Build a
Material Theme project that's available on Glitch. And you can easily remix it. So it's essentially forking
it and creating a copy that you can use and change. Lucky for us, I already
went through that process, and we have it all set up. So as you can see on
your right-hand side, you have the baseline values. And all of the components,
they're built with code. So you can actually go in
here and interact with them. It's the real life code. So the changes that
you make are actually going to be what you
see in your product. So let's implement
our new type base. So we're just going to comment
here, the Raleway, and audit as our font family. And you can instantly
see that now Raleway has been applied throughout
all of our components. Now let's go back to the slide. So we can also do this
on Android very easily. And that's by setting
your font family and then changing
your text appearance. So if we go back
to the demo, you can quickly see
that we've already changed our text
appearance and added Raleway for our font family. And we can see that we have all
of our components visible here. So let's run it again to
see our changes take place. And now you can instantly see
that Raleway has been applied to all of the components. And again, all of
these are interactive. So you can play with
them and know what your app is going to feel like. Let's go back to the slides. So this is also
available on Flutter, and this is how you would
implement using Dart. And since we also have Material
Components available on iOS, this is how you would apply
your new type scale on iOS. MICHELLE ALVAREZ: Great. So now, I'm going to take
you through that same system of categories,
attributes, and values and how we applied that to the
Material Design Shape System. So our Shape System
is pretty simple. It's made up of what we
call our shape scheme, and it's made up of
these three categories-- small components,
medium components, and large components. And similarly to typography,
all of these categories in the Shape System will map
to the same set of attributes. And here in the Shape
System, we allow you to tweak both the shape
size and the shape family. So here we have
our button again. Our typography is
already applied. That's Raleway there. And we can see the button
maps to the category small in our shape scheme. And the values, what
you're going to start with, are those baseline values. So when you start with
material baseline, you're going to be starting
with the shape size of four, and you'll have that
nice rounded corner. But this brand and this theme
is a little bit more playful and wants to be a
little bit more rounded. So here we change the values of
the category of small component to be round and 20 dip. And again, when you
change that one category, it's not that you
have to go into all of your other components and
change those specific shapes. That change will get applied
to all of the categories that inherit that small category. We also provided some
Shape System Guidance, since this is sort of a
new seeming capability for Material. But a lot of the principles
were still existing in the core of Material Design. So strong differences
in shape we find really drive the user's eye. And this was the original intent
of the floating action button. So this is a
circular button that lives in a world of rectangles. When you look
through a UI, there's lots of squares, and app
bars, and cards, and images. But then you see the FAB,
and it's this big circle in the bottom corner. And it really draws
the user's eye, and they know that it's
an interactive element. We also explored this
idea of asymmetric shapes. These can be used
to draw emphasis. They should be used
pretty subtly in the UI. But when you do use
them, make sure you're using them intentionally. Here this app is using a
shape in the top corner to draw the user's eye
to the navigation drawer. We also found that shape can
be used to communicate state. So this theme is using a
shaped corner of their card to indicate that the user has
gesturally swiped and favorited this item. And it not only
gives a visual cue of the iconography
and the color; we're also giving that small
affordance of the rounded shape in order to really drive
that state to the user. We do have some
don'ts for shape. This is one of them. Don't be too literal with
your shapes in your UI. This will be confusing
for your users. They won't understand that this
is supposed to be a button. I'm not sure what
they'll think it is. YASMINE EVJEN: But what
about if my brand is a truck? Don't do it? MICHELLE ALVAREZ:
Don't do it, Yasmine. YASMINE EVJEN: And we
also provided some tools to help you start with
developing your shape scheme. And we have a in line
customization tool available on material.io
that allows you to customize your radius as well
as your families, so if that's cut
corners or rounded. And you can see how it gets
applied to the small, medium, and large components. So you can really go in there
and change your shape scheme. All right. So let's go, actually, and
build this Material Theme using shape. Let's go to the demo. All right. In the new interactive
project, we can see that we have
a theme summary view. And that tells us
what our shape system is as well as our
typographic scale and color. And we have some handy links
that link out to the tools that we just talked about. So let's develop our
shape scheme, Michelle. I'm thinking for small. What do you have in mind? MICHELLE ALVAREZ: I think we
were thinking about 20 dip. YASMINE EVJEN: 20? OK. That's a lot. But I kind of like it. It's very friendly,
round, approachable. Now let's see what
that looks like? OK. That's how it's going to look
like applied to our components. Let's look at our
medium components. What do you think? MICHELLE ALVAREZ:
Maybe more like 16. YASMINE EVJEN: 16, OK. No? 24 maybe? MICHELLE ALVAREZ: Hmm. YASMINE EVJEN: 16? OK. So let's go to 16, and we
see how that gets applied to the medium components. And last but not least, let's
check out the large components, which is going to be more
of the navigation drawer that gets applied
on bottom or side. So what are we thinking here? MICHELLE ALVAREZ: Maybe
bump it back up to 20. YASMINE EVJEN: No, 36, 0, 20? OK. All right. Oh, look at that. 20. Perfect. So are we comfortable
with the shape scheme? You think you like it? We're good? MICHELLE ALVAREZ:
Yeah, looking good. YASMINE EVJEN: So we've got
20 for small, 16 for medium, and 20 for large. All right. Let's go apply it to
our interactive project here and see how it looks. Oh, look at that. We have the code
already written. But let's look at the slide to
go back and look at our shape scheme. As you can see, we chose our 20
dip for small, and our medium components 16 dip,
and our large 20 dip, which really makes it a bit
more friendly and approachable. And if we would apply
this on the web, we would go into
our SAS variables. And you can easily
see that they're grouped by small,
medium, large components that you can easily change. So let's go back to the demo. Since we have all
that code written, let's just uncomment it here. And just like magic,
boom, our shape scheme has been applied to
all of our components. So you can see that
it's already changed the radius for the button. Let's go back to our slides. So if we're going to apply
our shape scheme on Android, you would go into
a shape.xml file. And here, you set
the shape appearance for your small, medium,
and large components as well as choosing
your corner family. In this case, it's rounded. So we're going to
choose rounded. And then we choose
our corner size. And let's stay on that
slide for a second. All right. Let's go back to the demo. So in the demo, you can see
that the code is available here, again selecting our corner
family and corner size. And let's hit run to actually
see these changes take place. All right. And now we see
that shape has gone through all of our
components, and I'm feeling pretty good with this theme. I like it. All right. Let's go back to the slides. And Flutter is going to
introduce shape theming. It's going to be coming soon. But this is how you would
do this on Flutter and Dart. And we also have this
capability on iOS through our Material Components. And this is how you would
apply your shape scheme on iOS. MICHELLE ALVAREZ: Cool. So lastly, we're going to
talk through our color system. And again, our color system is
structured in these same ways with the system of categories,
attributes, and values. So our color system is
made up of a color scheme. These are the colors
that get applied across all of your components
in the UI, everything from primary, secondary, to
surfaces and backgrounds. The attributes of
these categories are container-hex
and content-hex. This is to ensure accessibility
and contrast ratios are meeting the
accessibility standards. So here's our button again. We have our theme typography. We have our theme shape. But we're still with
our baseline colors. So this is, again, the
Material Design baseline. You'll start with this
purple, but you can go in and change these colors. So button maps to our
categories primary. And here we're going to
change the color to more of a deep richer purple but
keep that typography white and ensure that
accessibility contrast ratio. So when you change your
primary in one place at the global level,
that gets applied across all of your components. And we also added some
new color system guidance to our Material Design spec. So I mentioned primary
and secondary colors. We find that these
are the best ways to inject bright, bold,
branded colors into your UI. This app here is using a
branded color bottom app bar. And it's using a secondary
color as this pop of yellow to contrast against that blue. One of the main principles
of color in Material Design is to ensure that
you're allocating semantic meaning to your color. So in this theme, the
primary and secondary color are this nice deep purple. And the secondary color
is this pop of red that works nicely together. But we also have a category
in our color scheme that is allocated for error. And typically, an error
state will be a red color. This is that visual
cue to your user that something has gone
wrong, and that red really reinforces that. But in this app's
use case, the red is part of their brand story. And they don't want to conflate
the idea of error and red. So what they did was chose an
alternate nice orange color to indicate an error
state in the UI. One of the last principles
of color that we really want to drive through
with Material Design is ensuring accessibility
in contrast ratios. YASMINE EVJEN: And we
also provided some tools to help you pick
your color palette. We have a Material
color palette generator that allows you to
pick a primary color, and if you don't have
a secondary color, provides some options
for you to choose from. But it also creates
this tonal palette that you can use
throughout your UI. So let's build a material
theme using color. Sorry. Let's go back to the slide. Lucky for us, we
already have a brand that we're going
to be working with. MICHELLE ALVAREZ: Yeah. So this brand, you can see
that its logo type is made up of this deep purple background. That's most of the
color in this logo. And then it has
this nice pop of red that's on the top of the crane. So we're going to use those
colors that exist in this brand to apply to the color scheme. So the primary color
will be this purple, and the secondary
color will be this red. And again, the
error color is going to be something
contrasting, so it's not conflicting with the
brand expression. YASMINE EVJEN: And this is how
you would apply those color changes on the web using
Material Components for Web. So you have your theme
primary, theme secondary, as well as your theme error. Now let's look at the demo. So we've already added
a lot of these values that we can quickly
just comment out. And we're going to instantly
see the changes take place. Oh. It's starting to look
pretty good, Michelle. I feel like it's missing
something, though. MICHELLE ALVAREZ: Maybe
a background color? YASMINE EVJEN: Maybe
a background color. Let's look at our
wonderful theme summary. And it links out to our
wonderful palette, my Material palette generator tool. Lucky for us, we
already have a primary that we can just copy
from here and insert into the tool, which provides
a wonderful tonal palette. But we also have the secondary. So let's just add that there. Great. Now we can see that this is our
tonal palette that we created. What about if we changed it to a
lighter color, a lighter shade? What do you think? MICHELLE ALVAREZ: I
think that's great. The tonal 50 value is the lowest
in the Material Design tonal palette. And it's great to be used
for bigger splashes of color, like backgrounds. YASMINE EVJEN: All right. Let's try it out. Oh! So you can see, just
by changing some color, it really changes
the whole interface. And all of this is easily
done with just some few lines of code on the web. Oh, this is looking nice. I kind of want to use
this now in my product. MICHELLE ALVAREZ: Yeah? YASMINE EVJEN: All right. Let's go back to the slide. And you would do the
same process on Android through your color.xml file. You would set your color
primary, color secondary, your color error, and
your color background. So let's go to the demo
to look at this in action. Again, we've already
set our values. So we can quickly just
outrun it again and see all of the changes take place. Just like magic, you have
the consistent theme that's available on Android web. Look at that. That's nice. [APPLAUSE] And all of these projects
provide a theme summary view. So you can quickly look at it,
and look at all of your colors as well as your shape system
and your typographic scale both on Android and on the web. This makes it really easy to,
at a glance, look at your theme and say, hey, I think we want
to maybe change some things. And you can do it in code. And you know that whatever
you as the designer see the developer is
going to implement as well, because you're
working off the same code base. Let's go to the slides. So again, you can
implement this on Flutter by changing the color scheme
and changing all of your values for primary and secondary,
surface, background, et cetera, as well as iOS. And both of these projects
that we demoed today on the web using Glitch and within Android
Studio are all available on material.io/tools/build
a material theme. Just go to material.io. You'll find a link in there. But all of this is
available for you to start theming
and playing with. And we're really excited to
see what you all do with it. We'll wait some time for
you to get that URL picture. But we've wanted to really
enable developers and designers to have a great starting point. And through this project,
what you see in the changes that you make are actually
represented in code so that it's actually
what you're going to be seeing in your products. And we really can't see all
the wonderful material themes that you'll be
building with today. So please again,
go to material.io. Check out the projects that
are available on Android Studio as well as the web using Glitch. And you can really see
your themes come to life. And we can't wait to
see what you build. MICHELLE ALVAREZ: Thank you. [APPLAUSE] We're also demoing the Build a
Material Theme in our Sandbox. YASMINE EVJEN: Yes. In our Sandbox, which is
right there, Sandbox E, we're going to be demoing
the Build a Material Theme. And you can actually print
it out, which is pretty fun. And we're also
going to be asking-- sorry, not asking questions. You're going to be
asking questions, and we're going to
be answering them. So we're going to have Q&A in
Sandbox E in the Boxtalk Q&A area. And thank you all
so much for coming. You can go to material.io
to find the latest as well as following @materialdesign to
get the latest updates from us. And again, don't
forget to try out those tools and share with us. We'd love to see what
you come up with. Again, thanks so much,
everyone, for joining. [MUSIC PLAYING]
