LIAM SPRADLIN: --to
everybody that's coming here for some Material Design
Live Hangout time. To introduce the stream
today, basically what we're going to be working
on is Material theming. So some of you, if you've
followed along for a while, you might already be familiar
with some of these concepts, or you might not. Either way, we're going to walk
through the basics of theming. We'll talk about things
like color, type, and shape and how to actually put
those things into a theme. But also something else
that I want to focus on is all the decisions that
you can make as a designer or as a developer when you're
creating a theme for your app. So it's easy enough to say
you can pick some colors and put them in your app,
and suddenly your buttons are blue, or something like
that, but how do you arrive at that color? What does that color do for you? Things like that. So if you have an app where
you're creating a Material theme, whether you have
a corporate brand book or not, whether you have brand
colors, brand type, any of that stuff, hopefully by the
end of the stream today, you will have a good idea of
how to translate those things into a Material theme that
is beautiful and usable and meaningful as well. I don't know how
many folks are here from having followed
my streams in the past. Sometimes I stream
other design stuff, like type design and
things like that. If you are here
from that, make sure that you subscribe to the
Material YouTube channel, because we are testing
out this format, and we want to do
a lot more of these and just create a space where
we can hang out and work on Material design-related stuff
together and answer questions and just have a chill time. So hopefully that is
what we are going to do. So I guess I'll get started. My setup today is going
to be pretty basic. We're just going to
be going over some of the really simple things that
you can do to create a Material theme right off the bat. So I've set up a
special Figma file here. In the description
of this stream, you'll find a link to
our Figma Community Page, and there you can make a
copy of our Design Kit, which is basically like a huge
sticker sheet and theme with all of the Material
components and everything all hooked up to the
theming parameters that we're going to be
talking about today, so you can see how the choices
that you're going to make today will ripple throughout
all of these components. But for this file,
I'm just working with a subset of those things. So I've got some
basic systems here. I have the color
page, typography, and then we'll be tweaking
some shapes as well. And then to get an idea of
how these decisions manifest, I made a super simple
sample layout for a music player, some pretty
common components that you might see, along with
a couple of custom things, so that we can just see the
changes that we're making reflected on something tangible. [LAUGHS] Nomer says,
"Chilling time. It's only missing
the low-fi hip hop." Yes. We had some music in
the waiting room scene, but music for this
scene is still something we're working on. Privately, I have a very
quiet Spotify stream happening in my headphones that I wish
I could share with you all, but you know how that goes. Rohith is asking,
how do you decide the text size for each
typography component beforehand. We are going to get to
that really soon when we talk about the type scale. I will explain all of that. Actually, let's just
start with the type scale. Typography is probably my
favorite system in theming, just because I'm a type nerd,
an amateur type designer. I think the last time I
did a livestream, actually, I was working on
one of my own fonts. So let's talk about that. To do that, I'm going to
open up Chrome, actually. And I don't want this
stream to be me scrolling through the spec, but there
are some really good examples in here. So this will help illustrate
what I'm talking about. This is our Type Scale. I'm sure that people in
the chat have probably seen this already. But basically, the
thing that I wanted to explain about
the Type Scale is that it's a set of
12 reuseable styles that you can use
throughout your app. And these styles
are the things that are applied to all
of the components that you see in
the sticker sheet. So if we go to the
design kit, here, which I already
have open, you'll see the simplest thing is
the button style that you see on all these buttons. There are certain specs for
what size a button should be, and those baseline
specs for the button determine how big the buttons
style in the Type Scale should be, just because
that's what it accommodates. The button style, in particular,
is 14 scale independent pixels. And it's a medium weight. And it has a 1.25
letter spacing value. And there's reasons for
all of those things. So it's 14 SP, which,
as I said, is just to accommodate the component
that it's sitting in, which includes things like
buttons, dialogues, tab labels, all of those things that
function as a button, that's where this type style appears. It has a medium font weight
and an all-caps transformation, both of which you can
change, but these are just baseline values. It has those two
things to indicate that it's a button, because
we have a variant that's just a text button. So if you have something that
appears alongside a lot of text and itself is only
a piece of text, then you want some kind
of typographic means to separate that from the
rest of the content around it. And then the 1.25
letter spacing is just a result of using that
heavier font weight. So when you increase
the weight of a font, it's a good practice,
especially in these small sizes, to increase the
spacing a little bit, just so that you are
evening out the relationship between the ink of the font, how
much positive space there is, and how much negative
space is inside and outside of the letters. That helps it not only
visually, but also helps increase readability as well. PrintElf in the chat
is asking, what is the duration of this session. We have two hours blocked
off for this session, but I'm not sure if we'll
use the whole two hours. My guess is that we'll probably
be here for about an hour, hour and a half, just for your
own planning purposes. Hello from Spain. Hello. We have Google
Fonts for Flutter. Yeah, that's super cool. And we're going to be
looking at Google Fonts as well when we make
our own type scale. Just to continue the
discussion about type styles, let me go to one of
our case studies here. So a lot of you might know this
already, some of you might not. On material.io, in
the Design section, we have this selection of
Material study apps, which are basically fully realized
product designs that we came up with in order to both create
and test Material Design itself and also Material theming
as a system capability. So we have a bunch
of those, and we'll be looking at those
throughout the stream too. This one is called Fortnightly. The reason that I bring this
up is because a lot of people ask-- when it comes to type,
there's a question about why do we have two body
styles, Body 1 and Body 2. And all of these styles
are customizable. So why are there two
styles for body text? And Fortnightly is a really
good example of that. If I can find-- yeah, right here. This screenshot kind of
illustrates that a little bit. Fortnightly has two body styles
because there are situations where you will have
two components or two pieces of content on screen that
require the same size of type, just because of the
amount of content that they need to portray. But it helps to have a
stylistic differentiation because the two types of content
are serving different roles or communicating different
things to the user. So in this case, what
we have is the article uses one body style
that's the serif font, and that's because
articles are typically long passages of text. So you need something
that's super readable, and that helps a lot with
the word shapes and things like that. But then if you click on
this name within the article, it's providing you some
contextual information. And this is a situation where
you need a body style text, but because it's portraying
different information, you might want a
different style. So this is a second body style
that's with the sans serif. The size is slightly different. The color is slightly different. So hopefully that
explains a little bit of how these
decisions were made. It has a lot to do with what
purpose the text is serving and the specific component
as well as the size and context of the
component itself, as well as what you're trying
to communicate with the thing that you're making. Will this Live be viewable
on demand on this channel? Yes, it will. It'll be on the
Material Design channel as a Material Live video. Simon asks, hello,
is there any plan to update the text
field component design. I can't really comment on that. But I can say that with the
introduction of theming, we updated the text
fields to include a bunch of different variants
that we found through research to be a lot more performant,
especially when you're using a bunch of
text fields together. So I can't speak to any
future plans, but in general, yes, we've made the text
field a lot more flexible. And if there's specific feedback
that you have about the text field, drop it in the
chat, and I can pass it on. OK, cool. So hopefully that answers some
of the questions about type. I think let's dig in and start
making our theme, shall we? So I have a type scale here. Someone in the
chat is asking how to start Material
Design for students. I think you're in the
right place, hopefully. [LAUGHS] Hopefully these
streams are a good place to engage and start
with some basics. Otherwise, we have a
whole bunch of code labs. If you go to g.co/codelabs-- I think that's the URL-- you
can find tons of code labs to get started. We are also working on putting
a lot of that introductory content into the blog,
the material.io/blog. So I would say check
those things out and then start reading through
the spec and also just come to these streams and
ask your questions or tweet at us on Twitter. And we can-- we love
to get questions, and we love to answer questions. So send them our way. Here in my sample file, I have
a Material theme page setup, like I said. Here is our sample type scale. So we can start thinking
about what kind of choices we want to make for the type. I've put together a
few of our study apps here as examples that
we can walk through, just to see what
kind of decisions those products are
making, theoretically. So the first one
that I've put here-- and we can go through this
for each of the systems that we're going to
talk about today, like color, type, and shape. But since we're
starting with type, since we've talked a lot
about type by this point, we'll start with Rally,
which is a finance app. Here's a screenshot
from Rally on desktop. You can see that Rally has
this dashboard kind of view, where you're seeing a bunch of
different types of information. There are a bunch of
different colored indicators. Like, a lot of information is
being presented to you here. It's really dense,
and that means that it's super
important to have a way to differentiate between
all of these different types of information, so
that the user knows at a glance what
purpose all of this is serving, which things they
should look at in which order, and all of that. So you can see right off
the bat a few of the styles that we have here. Like, here, we have
a navigation rail, which is like a compact
navigation component. You want to save space
in a layout like this, because you already
have so much going on. So they're using
a navigation rail. Inside of that, we can see this
label is clearly a button style that we talked about before. Then moving over, we have
these dashboard modules. This one is for an
overview of your accounts. You can see that here we
probably have a body style, I would say, a body style here
for each of the account names, maybe a subtitle, as well as
this big display style, which is showing you the balance
of each of these modules. Like the balance of
all your accounts here is in this
big display style. And then we have
another style that's similar to the
display style here that's showing you the balance
of individual accounts. So what's going on here? What's going on is this smaller
body style here is telling you the title of the module. The thing that you're going
to look at first as the user is this big display style. Your eye is going to gravitate
towards that, because there's more positive space,
because it's a bigger style, it's bolder, it has a
lot more visual interest. And then from there
what's happening is that these individual balance
styles are all connecting back to this. So all of these
things are telling you the same sort of information. They're all telling
you a balance. Then you have the style for
each of the account names. And of course, knowing what we
know about this relationship, we know that these have
a similar relationship. All of these are the same style,
because they're telling you the same kind of information. The same with these
account numbers. They're like the smaller,
lighter style again, but they're all telling you
the same kind of information. It's the same with these
button styles as well. These are navigational
in nature. So See All, Overview, all
of those things are related. And the same thing is
happening over here in this alerts module, which
is different from these. But the alerts module is not
telling you a specific balance, so it doesn't include this
really funky, interesting serif style anywhere. It just has the sans
serif body style repeated across all
of these alerts, with different icons to tell
you what's up in your accounts. What app am I working
in, Peter asks. I'm working in Figma right now. So like I said
earlier, you can go to Figma,
figma.com/@materialdesign, and you'll find
our Community Page, where you can grab
the Baseline Design Kit if you want to create
your own theme along with me. But in my file over
here, I've just set up a few example
screens that we're going to walk through. So OK. So now that we know what's
going on typographically here on Rally's screen,
we can walk over to the type scale for Rally. And you see all of
this stuff manifested. So that big, bold
account balance style that we were seeing before
is this H3 headline. We have that repeated
in Body 1, which is used for the individual
account balances. We have Subtitle 1, which is
used for the account names. And then I believe
Body 2 is what's being used for the module titles. And the Button style is being
used for navigational elements. Is it available for Adobe XD? Yes, there is a design kit
available for Adobe XD. If you go to the Resources
section on material.io, you'll find a link to
all of those things. Yes. So that's what's
happening in Rally. It's serving a super
utilitarian purpose while also having these
graphical flourishes with this H3 headline style. Also shout out to Louise, who
is in the chat tossing out links for all of this stuff. So the other thing that I
want to look at is Reply. This is another app
with another use case. The same principles
apply here though. So what we're seeing
here is an email inbox, which is obviously
something that is built for quickly
perceiving and digesting a whole bunch of information. And similar to the
way Rally is set up, it does that by creating
these shared styles. But Reply is a
little bit different, and we'll get into
that in a second. But at a base level,
what we're seeing here is a very limited
number of styles applied in very consistent ways. So you have this metadata
about each message, who it's from, when it came in. That's one style. Another style is the
title of the message. That's heavier. It lets you know this is the
important piece of information. That's probably what
you'll look at first. And then the next thing
you'll probably look at is this preview text from the
body of the message, which is a little bit larger,
but a little bit lighter, to help keep it easy to read. Similar to Rally also,
we have this style, that's used for
navigational components. Here what's happening,
because this is kind of a drawer
component, there's a transformation on
the active item too. So you have a slightly
heavier weight on Inbox, because that's where we are now. The reason we do that,
even though it's yellow, which indicates
that it's selected, is that for
accessibility reasons, it helps to have two visual
indicators when something is selected. So changing the
font weight helps accomplish that in this case. So again, we have shared
styles across these types of information. They're used really
consistently. But what's different
about Reply is that it actually
only uses one type family for its entire scale. It uses Work Sans. And Work Sans is a
really big family, so you have a really
big stylistic range. But even so, it's only using,
I think, three weights, four weights. Yes. It's using light, regular,
medium, semi-bold, and bold. So five weights, but
only one type face. So it's a really nuanced
application of type. Lindy says, Work
Sans is my favorite. It's my favorite too. It's actually the font that we
use for Design Notes cover art as well. We use Work Sans extra bold. Rohith is asking, "Should
H1's weight always be light?" That's an awesome
question, and I'm really glad you asked, because
I love talking about this stuff. In my view, when I'm
designing something, I will often make
larger headline display styles lighter. And the reason for that is that
you can much more easily create a headline style at
a large size that's very readable at a light weight,
because the overall stroke width will be increased by
the overall size of the font, if that makes sense. Basically, at larger sizes, you
can get away with a lot more. It also gives you a chance to
space it a little more tightly. So you can just kind of add some
really nice graphical touches on top of whatever you're
working with by doing that. So does it always
have to be light? No, certainly not. But it's a good opportunity
to use a lighter weight. Someone in the
chat is also noting that the font
weights in Work Sans have been updated recently. So this asset, this naming
scheme, might be out of date. But the principles of how Reply
is using these font weights still applies. The relationship
still stays the same. But all of that is to
say you can get away with using one typeface for
your type scale if you want, but we'll also talk
about strategies for how to pair fonts as well. The next example that
I want to look at is Owl, which is an even more
streamlined and simplified application. But I find that the more you
reduce this, the more nuanced it tends to get, if
that makes sense. So in Owl, Owl is a
really interesting app, because it's an
education app, but it has a somewhat
unconventional interface for doing that and a ton
of different components and a lot of customization. So it's a really interesting
one to talk about, especially once we get to color. You can see again here what
I was talking about before. All of these class titles
have the same style. All of the class categories
have the same style. The view counts
have the same style. And that carries
through the entire app. So this kind of relationship
between type and information carries through. I'm a big believer that type
is interface, because so many of the things that we
interact with, so much of the information
that we perceive is based on text, even on a
screen like this, when you're focused on a video class. I'd love to take a close
look at these simple app files in Figma. Will you be sharing these
in the Figma community. That's a great question. I've already shared
some screens from Reply, if you want to look at those. I believe those are
in the community, under the Dark Theme Design Lab. The other ones I would
love to share as well, I think they just need
a little more prep work. So that's definitely
something to keep in mind. So if we want to look at Owl's
type scale, it's mostly bold. It's using Rubik, in
mostly bold weights. And then it starts to get
down to medium and regular, down towards the
smaller styles, going back up to bold for
buttons for the reasons that I said earlier. Buttons are interactive
pieces of text that might appear alongside
other pieces of text without a discrete container. So it helps to have a text
transformation to indicate that they're interactive. Helena says, "For defining
type styles as a beginner UI designer, would you say
the less the better?" I'm not sure. That's a really
interesting question. I think the most
important place to start is just to understand the role
and the structure of a type scale. And then once you understand
that and understand the purpose of reusable styles-- which is something
you can also do just by playing around with the
design that you're making. For instance, if I was
designing Fortnightly-- this is a newspaper app, so
it's a super text rich app. There's tons of opportunities
to explore how type is going to look in this context. I would go through,
find the type styles that make the most sense
in each of these contexts, like the Article
screen, the front page, all of those things. Then I would collect
those repeated instances and see what I had and see if
they plug into this type scale structure. If they do, great. If not, I need to go
back and do some editing. I think that's a
really great way to get a handle on how
the type system works, like how to create a type
scale, like the one we're looking at here. But would I say the
less the better? Not necessarily. If there's one type
family that you find is a big family
and works really well functionally for the
thing that you're building, I think that's great. But you can also
easily pair fonts too. It's all about what
you find to work, what works in specific
contexts, the purposes that you're trying to achieve. All of that stuff
comes into play. But for a beginner
UI designer, I would say get a really good
handle on the type scale. And also because it's a type
scale, look to print design. And there's so much information
out there about print design and how people make
these decisions that I think that would be
super helpful in UI as well. I could go on for a long time
about the metaphors of print in UI design, but I won't. [LAUGHS] We'll move on for now. But if you have more
questions, ask in the chat. OK. So where were we? Let's see. Looking at these examples. So that's great. And now we understand
how to form these relationships between
different type styles in the UI. Great. How do you pick a font, right? And I'm going to switch back to
this scene just for a second. There are a lot of techniques
for choosing fonts. The ones that I
want to look at here are mostly what these
are doing for the brand and the expression of
this app's personality. Because a big thing about-- I don't know, about
design generally, is even if you're
making something very utilitarian and very
serious, like a banking app, the app will have an aesthetic
and a personality that's going to come
through, regardless of whether or not it's intentional. So we might as well
make it intentional and make these decisions. So Rally is a banking app. Like I said, super
utilitarian, super serious. Not necessarily
an app that you're going to open and have a
ton of fun in, necessarily. So they're using type to
really serve utilitarian goals, presenting information in a
really straightforward way. You really grasp
the relationship between these types of
information really quickly. But on the other hand, they're
keeping it from being boring. Like this H3 style is a super
expressive, really interesting style to look at, but it's still
serving the functional goal that it sets out to
serve, which is grabbing your attention to these key
pieces of information super fast. In other cases, like
Reply-- and this is also all about efficiency. But Reply's aesthetic
is also very pared down. It's very restrained. We'll talk about this
more when we get to color. But it's a very
restrained aesthetic. It's almost monochromatic. The logo is monoline. It's very super simple. So they've chosen Work Sans,
which is very straightforward. Does it have some
interesting little details if you really get into it? Yes. But it's very functional. Super functional. Big family. Pretty restrained in terms
of expressive choices being made here. Owl similarly. They chose one type family
that's pretty straight forward. The detail that I would want
to call out on Owl's approach to type is that you
can also take cues about the type of
fonts that you're choosing from the brand that
may or may not already exist. So if you have any
aspect of your brand defined, especially
if you have a logo-- like Owl's logo is very focused
on this round bird shape, this kind of eyeball
in the O. Those things which mesh really well
with Rubik, because it's a typeface that has these
slightly rounded terminals that give it a little more of a
softer aesthetic, a little more round, a little
closer to the logo. We'll also talk about that a
lot when we get into shape. But you can take influences
from those things. Like, what are
some things that I would recommend if we're
looking at Google Fonts? If you have a logo, great. You can take a look at that
and see what it's like. If you have a color
theme, fantastic. You can take some
cues from that. And we'll talk more about
how all these things tie together later. But think about two
things, the aesthetic that you're trying to create-- which is a really vague word. Interpret it how you want. The aesthetic or the
vibe that you want, the personality
that your app has, and how the person using
it is relating to it. So those are three
super important factors that I think can permeate
all of these systems to help you make
informed choices. So yeah, if you were trying to
create an app that was relaxing for the user, like the user
is going to open this app and they're going to
feel relaxed and peaceful and at ease, I would take
that into consideration. What does the logo look like? Perhaps a logo for such an
app would itself be round. Maybe you would
also want to explore a font with rounded terminals. If not completely rounded, than
at least with the soft corners that Rubik has. That would also permeate
your color theme, which we'll talk about in a second. You might also make some
decisions about letter spacing. Like, you might want to
create a little bit more of a breezy aesthetic
by spacing out the characters in some of
these more functional styles. Yeah, Nomer also notes, "If
you're using Google Fonts, you can load them straight into
Android Studio for your app and do all the theming
there," which is awesome. Same as what we said
before about Flutter. So let's go back to our example
app that we're working on. These super simple layouts that
I have are for a music playing app. But do I want to imbue a
certain kind of feeling through this app, like a
certain personality the app has that helps the user relate
to it in a specific way? Maybe so. Maybe I want this
to be a music app that people use when they want
to listen to music to focus, like be super focused on work. First of all, that
has implications on how we even think about
the design of the app. Because if they're
focused on work, they probably aren't wanting
to look at this app super frequently, right? I'm really drawn to Poppins
for this, for a few reasons. First of all, I'm just
a fan of the typeface. But also it's a super
geometric sans serif type face. There's really not a
lot of interpretation to be made when
you're looking at it. It's very straightforward. It has sharp terminals. These are the
characteristics that I think I would like to
include in the app. And it's a really large
type family as well. So I might try using
Poppins as our Body style and some of the smaller type
styles, if that makes sense. So I also have
pulled up here a tool that's on material.io under the
Typography section in Design. So if you're in the Design
section, you go to Typography, and you'll find this tool. It's embedded right
here in the page. And you can manipulate
the body and caption styles and the headline
style separately. So this has all the Google
Fonts preloaded in this menu. So I'm going to type in Poppins
for the Body and Caption styles. And you can see those update. I'll zoom in case
it's hard to see. But you can see Body,
Button, Caption, Overline, all of those
things have updated. And now I can find
headline styles. I want to talk a little
bit about font pairing. There are a couple of
ways you can do this. I like to think about
fonts in terms of colors, if that makes sense. Maybe it'll make
sense in a second. What I mean by that is think
about all the fonts that exist and their characteristics. It's a lot of information,
very big thought. But you can think about these
as existing on a color wheel. So if you're pairing
fonts, you can pick a complementary
scheme, where you have two fonts whose
characteristics are opposite to each other or
complementary to one another. Like one font is doing the thing
that the other font doesn't. Maybe one font has
round terminals, and one has square terminals. Maybe one is geometric,
and one is more humanist. Think about things like that. The other approach
you can take is one where the colors
are a bit closer to each other on
the color wheel, and you have a scheme where
some of the characteristics are shared, but
one of the styles really plays up those
characteristics, some of the characteristics that
you like about the font. And I think that's the approach
that I want to take here, because I want to
really emphasize some of the characteristics
that Poppins might have in my own theme. So we know Poppins. We know it's geometric. We know it has these
sharp terminals. I think those are things-- I think the sharp terminals and
the roundness of the geometry are things that I
probably want to play up. So I'm going to stick
with sans serif. I'm going to look for
display fonts if I can. We'll see what I find. I would also like something
with at least two styles, so that I can differentiate
a little bit in the headline styles. So one example would be
if I looked at Montserrat. This is also a really
huge font, but I think it's not
doing exactly what I want in terms of playing up
the characteristics of Poppins. The characteristics are
a little too close, even. Also something else that I
want to say about fonts is-- never mind. There's a lot I could
say about fonts, but I'll save it, maybe
for another stream. I'm intrigued by
Railway, because it shares some of those
characteristics that I talked about, but it
also has these little graphical touches, like this
cool overlapping W that I really like. But let's keep looking. I want something probably
with a heavy style as well. This might be really strange,
but let's try Josefin Sans. Because it's a big family,
and it has a heavy style, and I feel like it exaggerates
some of the characteristics that I want. So let's try it and
see if it works. The conclusion is it might work. [LAUGHS] You'll notice one of
the main differences here-- it still has a very strong
geometric influence, but you'll notice that
the way that it's drawn, the tapering of the
stroke widths and things like that really suggests
to me a more humanist touch. Like it's a little more
influenced by the stylus that you might be
using to create these letters in real life. Not that digital fonts
are not part of real life, but you know what I mean--
if you were actually writing with a tool in physical space. I'm kind of into that. So I'm going to go
over to our Figma file. Something really
cool about this tool is that it gives you all
of these little pieces of information
about these styles, so you can get a really
good starting point. I'm going to go to
our Material theme. I've talked about type
for like 40 minutes now. I hope you all
are still [LAUGHS] enjoying this type discussion. I will change this
to Josefin Sans. I'm going to be flipping back
and forth between these two screens a lot. I'm going to use the
lightweight, 122 pixels. The spacing is minus 1.5 pixels. Again, because with
these display styles, you can get really close,
especially when the weight of the font is lighter. So I'm going to
leave that how it is. We will look at Headline 2. That is a slightly
smaller style, but the same font weight. You'll notice the letter
spacing is a little less, just because we're getting smaller. So you need to compensate
for that, to make sure that everything stays readable. So we will adjust
that style to you. If you're not
familiar with Figma, you can see the theme here. Like, this piece
of text is lined up with our Headline 2 style,
which is built into the file that I'm working with. It's also built into
the baseline design kit that I mentioned earlier. So all of these
things are hooked up to their respective styles. And to edit that, you can
either go to the Styles here, or you can select each piece and
go to the little Settings icon. For speed's sake, I
might do it this way. Is the Figma file
available elsewhere? Like I said, there should
be some Reply screens in the Dark Themed Design Lab. The other Material study
apps are not available as Figma files publicly
yet, but it's something that I would like to do. So that's good feedback. So I'll change that
also to Josefin Sans. The size on that
one was 76 points, at minus 0.5 letter spacing. Headline 3. Again, we're getting
the sizes smaller. The letter spacing is less. We're also switching to
the normal weight, here. The letter spacing,
although it's still less than
the H2 style, it's still going to be a bit
more than we might normally use, just because the
weight is getting heavier, if that makes sense. So we will put in those values. 60. Regular. Headline 4, we're going
down to 43 pixels. And you'll see now
that we're smaller, this relationship with
the letter spacing is kind of flipping. So as we are getting
smaller, the letter spacing is actually increasing,
because the perceived weight of the font is getting
heavier as it gets smaller, the weight of the
font in relationship to its actual size,
if that makes sense. So the letter spacing
is going up to 0.25. Do you usually scale
the headline styles down for mobile? No. I don't. You could adjust the type
scale if you were just working on something for mobile. I think it's pretty
rare that I would be working on something that's
only for mobile displays. And I would encourage everyone
to think about all the contexts in which their
product might exist. So you could make a type
scale that's only for mobile, but I don't do it for
a couple of reasons. One is, like I said,
I'm usually not working on things that
are only for mobile. And the second reason is
that I think the type scale that I usually work
with is big enough to accommodate mobile without
sacrificing some of the larger styles. And I also love having
the larger styles around, because sometimes
it's fun to make interesting graphic statements
by using these bigger styles on smaller screens. Not all the time, but sometimes
they can come in handy. So I would recommend
not splitting your type scale that way. But you can do what you want. So for Headline 5,
we're going down to 31. And our letter spacing is zero. And the weight is normal. And we're in Josefin Sans still. Headline 6 is a big one. This applies to a
lot of components, particularly at
bars use Headline 6, so this is a really
good style to focus on. This one is actually
switching to a medium weight, and you'll see the letter
spacing is going back up again because of that. So we are going to medium. And what was the size on that? 25 with the 0.15 spacing. The subtitles often will also
adopt this headline typeface, just because of the
size that they're at, and the way that
they're used is often used in the same
way as headlines. Work or Railway? I'm not using either
in this theme, but if I had to choose
between the two, I would choose Work
Sans, only because I'm more familiar with Work Sans. I've used Work Sans
a lot more, so I feel more comfortable with
it in terms of how it works. But I think Railway
is great too. I've seen Railway
used really well. Sorry. These values are
escaping my mind. Normally I would have
these in split screen, so I could just type in
the values super quick. But I want to make sure that
you all can see everything, so I'm trying to keep the
windows as big as I can. This is done. OK. Subtitle 2 is kind of the
same, but a little bit smaller. So we're going to 18 pixels,
which will translate into 18 SP if you're working on Android. This is also slightly
heavier weight, but we're going to keep the
letter spacing at a 0.1. And then we get into
the body styles, which again, are Poppins. Because Poppins has some
of the same characteristics but is a little less
exaggerated, I think. The reason I say exaggerated
is just because, as I said, Josefin plays up some of
those characteristics that I like about Poppins, and it also
has this super low x-height. If you look at the
D, here, the x-height is somewhere around
here, which means you have these super
long extenders that even go above the caps height. And then you have
a little touches like this E that just make it
really interesting for display styles. So anyway, for Body 1,
we're going to Poppins, normal weight, at 15 pixels. Great. Regular at 15 pixels. What is the letter spacing? It's 0.5. Perfect. Body 2. Yes, that's right. Cremi in the chat says,
"Poppins' higher x-height makes it easier to read body sizes." That's absolutely correct. Body 2 is 13 with 0.25. Great. Button. The button style is interesting. I almost want to make
this Josefin as well, just because it is a heavier
weight, and it has an all caps transformation, so a lot of
the readability issues that you might run into are
mitigated by those things. So I'm going to make it
Josefin, just for fun. And like I said before, the
letter spacing on this is more, just because A, we're relying
on text transformations to tell us that this is
something interactive, and also it has a
heavier font weight, which means that you need
a little more space to keep it readable. We'll go down to Caption,
which is back to Poppins at 12 and 0.4. Perfect. And finally, the Overline
is Poppins at 10, 1.5. And we'll talk about
that in a second too, because there's also some
stuff to talk about there. And what weight is
it recommending? Yes. I'm going to do a regular
weight for the Overline. Just because often, you
would see medium weight here, but I like using a
regular weight, just because it really-- I don't know. Aesthetically, it calls to me
as an opportunity for that, so that's what
we're going to do. So here's our type theme. Cool? Is anybody else in the chat
working on this alongside me, making your own theme
with the Design Kit or with whatever file you
happen to be working in? If so, I would love
to know what fonts you're choosing in your theme. Or if you've already
made a theme, what fonts did you choose and why. And also we're posting
in the chat occasionally, but absolutely tweet
this stuff to us. Because if there's
another thing that I love doing on the Material
Twitter besides answering questions, it's seeing
what you all are working on in the community. Because people come up with
such cool stuff with Material, like new libraries,
new designs, new apps. And we really want to see that
stuff, because it's super cool, and it's also super
motivational for us to keep working on this stuff. Lindy says they made a theme
for a finance app using Rubik. Awesome. I'm a big fan of Rubik. I think it's-- it's a
very opinionated font, but it's also super flexible,
if that makes sense. So we have a type theme. That's great. In a second, I'm going to switch
it over to our sample app, and we'll see how it
applies to those screens. OK, cool. So here's the sample screens
that we looked at before. You can see how
all of our styles have populated throughout here. This is what I was talking
about with the Overlines. The reason the Overlines
look like this, again, we have a caps
transformation and also more spacing, because
the Overlines are serving a really specific purpose. But they are pretty close
to body size styles, so it's good to have these
differentiating aspects that allow us to make sure
that the user knows that this is conveying some
other kind of information. In this case,
Overlines are often used for the title
of specific sections or modules or things like
that within the interface. Yes. So you can see how
those are populated. You can see Josefin is going
through some of these styles. Like I said, it applies in
the App Bar really well, also at some of these smaller styles,
like the song name, here. And also this is a good place
to see how this is pairing up with Poppins. And I think it actually comes
off pretty well, I think. So I think we did
a good pairing. [LAUGHS] Sergio says, I was
using Quicksand fonts, but migrated to Railway
because it has more weights. I think that's super important. I've seen a lot of
really good apps that use one or
two families that just have a huge amount
of stylistic range. And I think that's
super great, especially if you're establishing a
design system for a really big product. It gives you a ton of
stylistic flexibility as your system
continues to grow, and you find yourself building
for more devices in more contexts and all of that. Cremi says, didn't
like Josefin at first, but might reconsider it again. I think it's pretty good. I think if you have
the right context for it and the
right application, it could be really nice. I think also something
that's interesting about it is that it has these
super pointy areas that are, I think, very hard to render
correctly, if that makes sense. Like, in print,
I think you would run into issues
with the interaction of the ink and the paper,
and in digital applications, it's something really
technologically powerful, if that makes
sense, because you need a really high density
display to actually render these little, pointy,
jagged touches. So I think that's kind of cool. So yes. Now our type theme is
applied to all this stuff, and we have gone through
the whole journey of creating a type theme. Now, let's go back to
color, because there is an equally enormous
amount to say about color. I'm going to go back
to our examples, but I'm also going to go
through a little bit about how color works in material. Because it's also quite
nuanced, but we've tried to break it down
into a few systems. Poppins is lovely
and versatile too when pairing it with a different
typeface with two straight A's, just to enable the
stylistic alternate. That's a really good tip. I think that could be
an interesting touch too, like using these
alternate styles to make a little more of a difference
between the families that you're choosing, when
they're as close as Josefin and Poppins are. Cool. So what we're looking at here-- and again, I'm not going
to spend too much time on this spec, but there
are a few things in here that I really want to focus on. What we're looking at here is
a color scheme in Material. And basically, what
we've tried to do here is set up color slots that
account for all of the places where you'll need to apply color
in your app, which is literally everywhere, because the entire
app is made out of colors. [LAUGHS] But how does this work. So you can see that
we have two slots each for Primary and Secondary. We have Background, Surface,
Error, on Primary on Secondary, et cetera, et cetera. The primary and secondary colors
we'll get into in a second. Those are two of the
main things that we're going to be looking at. The background color
is like the background of your app, the canvas on which
you're putting everything else. In baseline and also in Google's
own Material theme, it's white. The Surface is the color
of any elevated components that don't already have
a color assigned to them. So cards, for instance,
would use the Surface color. In this case, a card in this
baseline theoretical app would appear as white. The Error color is
a semantic color. You can also add some
other semantic colors for things like Success,
Warning, et cetera. But they're not
included in this scheme. And then these five colors
down here in this bottom block are the On colors. And the On colors correspond to
whatever word comes after On. So we have On Primary. So if you have a component
like the App Bar, that adopts the primary
color by default, then the On Primary color is
the color of all the things that are on top of that component. So that's things like
the title of the App Bar, the Menu icon, any
of the action icons that you have on the
trailing edge of the screen. On Secondary works
exactly the same way. So for us in this
scheme, the On Secondary is black, because
the secondary color is this really light teal. So we use black to maintain
contrast between the Secondary and the On Secondary. On Background
works the same way. That's anything that
appears directly on the background of the
app, which is kind of rare. But we have an example of
that in our sample app. On Surface is the
color of things that appear on top of
those elevated components, and On Error is
something that appears on top of a component that
adopts the Error color, which, again, is also pretty rare. Normally, the Error color would
come in internal elements. Like a text field might
turn to the Error color if you have an invalid input
or something like that. Sergio says, "I have a
hard work with my theme, because the Primary
color is close to red. So with the Error
colors and other colors that represent errors or
warnings, it does not fit. So I have to use
complementary as Primary and use red outside theming. It's something crazy." OK. That is an interesting case. I think semantic
colors are super fascinating for this exact
reason, because, first of all, you run into all of these issues
where if your brand color is red, what do you
do about errors, but also because semantic
colors are going to be different depending on cultural factors. So the colors that
you're using semantically might not always
mean the same thing to every user that's
using your app. And that's a good thing
to think about, especially when you're thinking about who's
going to be using your app, where they're going
to be using it, and what kinds of information
are critical for them to understand. But anyway, Sergio,
to address your point, we have one of our studies,
which you might have already seen, it's called Crane. It's a travel app. And it has straight-up red, just
a really primary bright red, as one of its colors. It's the secondary, but this
might still apply to you. So it has this red color. The way that Crane
approaches this is basically to choose another
color for an Error color. They chose this
orange-yellow color. And the key thing
about this is not just choosing another
color, but also choosing a color that has a
somewhat neutral presentation but comes close enough to
having semantic meaning that you can use that. But the other key thing here
is that you're not just relying on color for the warning. So in this case, we're
using a trailing icon in these text fields. The email text field
has a valid input, so you have this
trailing icon that's the check mark in a circle. And the phone text field
has an invalid input, so you have this
trailing icon that's a little exclamation
mark that's like, hey, whoa, this is an error. So it's kind of twofold,
choosing another color that is a little bit removed
from the semantic meaning but is used in a consistent
way, and then also having some kind of
other visual indicator that helps people associate
that color with the error. And this is just good
practice for all types of issues like
this, basically not to rely solely on changing
the color as an indicator. Because also, not everyone
perceives colors the same way at a physiological level. So if you're using
that kind of treatment, try to have some other visual
indicator, like an icon or some indicator like that. And also consider something
like changing the contrast as well to supplement
that color change. OK. So we just talked
about the color scheme. Where do these colors come from? These primary and secondary
and their variant colors all come from tonal palettes. Sorry, there's so many
emojis in the chat. And I'm really amused
by how cute they are, so I keep getting distracted. But anyway, the primary
and secondary colors come from a tonal palette. What's a tonal palette? It's a palette that's
made up of tones. So you can see, this
is our color tool. It's the same as the type
tool that we just used before. It's embedded in the typography
guidance on material.io. And Nomer has posted a
bagel emoji and a sun emoji. And I don't understand
the meaning, but I appreciate it anyway. [LAUGHS] Basically
what happens when you choose a Primary or a
Secondary color in Material is we generate this
10-tone palette. Why do we do this? Why do we have all
these different tones? They exist to help two
things, to establish context, specifically thinking about the
visual hierarchy of components on screen. So if we look at
our sample app, you can see the most important
components on screen are the App Bar,
because it serves for navigational purposes,
like getting you around inside the app. And then the other thing
that we use the primary color for is this little bottom sheet
that has the song information. So what's currently
happening in the app. And that also carries over
to the Now Playing screen as well, where you have not only
the information about what's happening, but also
ways to augment what's happening by
pressing Play or Pause or Fast-Forward,
Rewind, all that stuff. So it establishes context that
way, through visual hierarchy. But the other thing it does is
it establishes various levels of meaning with the same color. So you can remain
stylistically consistent while expressing
things like states. And buttons are a
fantastic example of that. So we've labeled
all of these states. In the Outline
one, for instance, you can see that
Enabled is simply the label is the Primary color. That's it. Hovered, you start getting
into the tonal palette, where you have these super light
shades of the Primary color. Focused, use another one. Pressed, you get this visual
feedback with the ripple. That's one of the tonal colors. Dragged, Disabled, all of that. So these tonal colors
also serve to let the user know about the
interaction that they're making and provide meaning to
some of these mechanisms. That's why it's important
to have so many variations of the color. So we generate 10. If you put a color into
the color tool here, like let's go ahead and
pick a Primary color. So in the chat, in YouTube, does
anybody have a preferred color that they would like
to use for a music app? Keeping in mind that the
music app we're making is supposed to be something
for people that are focusing while they listen to music. This is an app for
discovering music that you can use while you're working. I know there's a little
bit of a stream delay, so I'm going to wait for people
to toss out some color ideas. In the meantime,
Sergio is saying that one thing that
doesn't fit in the design is the darker status bar color. Hate it. Yeah. I mean, that's fair. Often, you'll see the
Primary Variant Color is used for the status bar. And I don't know the
technical aspects of this. Nick, my teammate who
focuses on Android, would probably have the
answer to that for you. But it's a good question
for us to write down. Asheesh is saying dark cyan. Isabel is saying blue or
purple or just a cooler mix. Louise is saying pink with
a super cute heart emoji. It's like a heart emoji
with Wi-Fi coming out. I've never seen this. [LAUGHS] Oh, we're getting a
very specific color value from Behati. Let's see what that looks like. It looks like an orange color. That's interesting. But I kind of want
to explore dark cyan, because I think
that's interesting. I think a little bit
of a darker color would be really
interesting for this. Oh, Sergio says,
"We use Flutter, so it was easy to
get rid of it." That's great. Flutter's super flexible. It's great for stuff like that. Oh, these emojis are only
available in the YouTube chat. That makes sense. I'm going to do something
dark without going a full on dark theme, because
that's a whole other thing that we could talk about. That's a different stream. But I want to find just
the right kind of blue, with a little bit of green. Firaaq says blue is a
good color to focus, but we could go on an
adventure with orange. We can. Maybe let's do this. Let's do cyan for the Primary
colors, And let's do-- we'll try orange for the
Accent colors in a second and see how that works. Asheesh posted the
hand sanitizer and hand washing emojis in the chat. Thank you for the reminder. [LAUGHS] OK. So let's go back over
to our Material theme. The color tool is cool
also because you can just click on the swatch,
and it gives you the HEX code in your clipboard
immediately, which is great. It will also-- you'll
notice that it'll pick a value to be your
default Primary color. You can modulate this by like
choosing your own up here. But by default, it
will choose one for you that works with the default
On colors, I believe. So for this, I'm going to
go all the way to the 900. And that means we will
have to make an adjustment to our components,
which I'll show you how to do in just a sec. But basically, I'm just going
to paste these values in here. And hopefully, if I have
everything hooked up correctly, you'll see some
updates beginning to populate very soon. So we'll go to 700. And again, you can do this just
like all in a row right here. But also, this is going
to get really confusing, because the default secondary
is already this cyan-teal color. Nomer says a light orange. Yes. I'm excited to get
to that so that we can see what this
is going to look like if we put orange in here. This is a 500 color, which
is the default Primary color. You'll notice on
Primary, everything changed when we did that,
because that's just the default baseline Primary swatch. But we will continue
populating these with the 400. Oh, there's a plug-in
for Figma that generates the color palette. That's cool. If you have the name,
drop it in the chat, so people can check it out. I am all about faster ways
of accomplishing a sick color palette. Oh, we are down to 100. And 50. OK. So now we have our
Primary colors. We'll take a break to
look at how that applied. It's again, as I said, very
confusing, because the colors are not that far apart. But you can see. You get a little sample here of
the emphasis levels of the On colors. That's something
else to note too. The On colors are separated
into emphasis levels. Philip says that palette
is sick in a good way. High Emphasis is always
going to be 100% opacity, and then Medium
Emphasis and Disabled are going to step down
gradually from there. And if it's not
self-explanatory, what's happening there
is when you're applying these colors to text and
information like that, you might want to
prioritize them. Like in our sample app-- let's see, in the
example app, Reply-- it's not present
in the screenshot, but what Reply will
do will actually switch the metadata, the email
title, and the body preview to a lower emphasis level,
so like 74% opacity. And that lets you know that the
message that is in the line-up here has already been read. Asheesh asked, "What are these
numbers, 900, 800, et cetera?" Those numbers are basically-- they're the numbers that we
assign to each of the swatches based on their value,
how bright or dark they are compared to
the original color that we're starting with. And the reason that
we use those colors is essentially just to
organize the swatches. You could use any colors
you want for that, but we decided to
go for that scale. So if you're working on your
own separate design system, you can make up
names for the colors. You can have numeric
values, like we do. But that's what it's for. It's just like a way to
organize your colors. Going over here
to our sample app, you can see that all of
these colors have updated. But what you will notice is
that our On colors have not been updated, because it's
still set to the baseline white. And there's an issue
with that, because when you have white on top
of this bright blue, it's going to be not accessible. It's not meeting
accessibility standards that we try to aim
for to make sure that everybody
who's using the app is able to read these labels. So there's two ways that
you can approach that. The first way,
the simplest way-- well, not the simplest way. They're equally simple. But one way you can do
that is go into a component like the App Bar, for
instance, and choose the swatch that the color
tool chose for us, which is 900, which is the darkest one. That is compatible and
accessible with white text. So we could change that. Our Tab Label has a sneaky
little color as well. So since we're going for a dark
cyan theme, we might do that. But just for the sake
of demonstration, I'll show you the
other way to do this, which would be to
change the On Primary color. We would just--
all we need to do is change the On Primary
color, something like black. You can make it
whatever you want, as long as it's accessible. And then you'll see that that
applies this, which actually, I know we said that we were going
for a dark cyan Primary color, but I kind of dig this
aesthetic a little more. So maybe we'll keep this. And we also need to make sure
that these icons are also using our On Primary color. So we'll switch those as well. Our button, because
of the font change. We have to change that
horizontal size a little bit. But otherwise, let's make
sure that these are the same. On Primary. Great. So we have our cyan theme
going pretty strong. We have a custom font. We have a custom Primary color. Now, for the adventure, we will
go for the secondary color. Sergio posted a
good tool in chat for color contrast calculations. I love these. There's another
contrast checker that I use that I can't
remember right now, but it's really good
to check those values against the recommended
values for accessibility, just to make sure that
what you're building is as accessible as possible. And it would be great, I
think, to do another stream on accessibility
tips, because it's a topic that we could go
really deep on to make sure that you're building
for everyone. OK. So back over here. One thing that you'll notice
is that the color tool-- if you just put in one color,
it will give you a bunch of different
options based on just color theory
and the color wheel, like I was talking
about earlier, but now we're actually
talking about color for real. So it will give you
a Complimentary one, which as I said before
is like opposite from your Primary
color on the wheel. You'll also get Analogous,
which are on either side. So the cyan is a mix
between green and blue, so we're getting both
of those split out in this Analogous theme. And then you get Triadic, which
is equally spaced three ways on the wheel. So those are some really
good starting points, depending on your
preference, depending on what you're trying to do. And again, if you're
choosing these colors, it's the same as with type. If you're making an
app, think about how someone is experiencing
that app, what they're going to be feeling while
they're doing that, what you hope they'll be feeling,
what the purpose of the app is, what the aesthetic
of the brand already is. Like I said, here we're
going for something that's all about music for
when you need to focus, so we've gone with a
dark color, that's cyan. It still has a lot
of visual interest, but it's also not distracting. And the way that
we've applied it in the app with
these different tones also makes sure that it's super
consistent and predictable. So that being said, our
Complementary color, because we chose a
blue-green, is already this kind of orangey-brown,
really warm color. So, chat, do you think that
we should stick with that, or do you think that we
should choose a different, more saturated, vibrant orange? And I'm going to
wait a little bit. In the meantime, I'll
read out some chats. So Behati is saying,
"The color generator plugin that was
mentioned earlier is called Color Scale Generator. It's by Elena Borisova. There are so many
other plug-ins as well, but this one works for me. It's for Figma, by the way." Cool. Appreciate those tips. Also don't forget, if you want
to share what you're working on on Twitter, don't forget to
tag @materialdesign or use the hashtag #materialtheme. It would be super cool to see
what you all are working on. And I know that's a super-- I don't know. [LAUGHS] What I'm saying
is I really mean it. I really do want to see
what y'all are working on. Cool. I am waiting for some
answers to roll in in chat. Do you like this orange color? Do you hate it? Do you want another
orange color? What is the vibe? What are you feeling? I will take another
sip of this coffee. Don't worry. I also have a glass of
water to stay hydrated. Asheesh is wishing
us Happy Christmas, with a snowman emoji. Thank you. Annie is saying brighter orange. I'm going to jump on that
and go for a bright orange. Here we go. Orange is a super fun
color to work with. I really dig these like kind
of peachy, super light orange shades. I might stick
somewhere around here, but I might even make
it a little bit lighter. And these palettes are
mathematically generated. So one thing-- I'm going to copy this value,
because I love this color. Brighter orange plus 1. Simon says, I love orange. Excellent. So we made the
right choice here. I'm going to copy this color,
because I really like it. But one thing that
I want to point out that's super cool about
the color tool-- and this is really nerdy,
but one thing that I love about it is that if
you choose a yellow color, it's smart enough to know that
when you choose a yellow color, if you're modulating that into
different tones, the smartest thing to do is not
necessarily to go strictly with the color space
of yellow and go into this kind of
muddy brown area, but instead to slowly shift the
yellow towards a warmer, more orange hue. I think that's
such a nice touch. I think it really-- that's why I really
trust the color tool to help me make good decisions. I have the HEX value
here, so I will plug that in to get our
peachy orange back again. And I'll start
with the 200 shade, just because that's
going to be our default variant of the secondary color. So here we go. Our adventure begins. And I'll start from the
bottom, with the 50. I also love the 50 shades. I'll show you something with
the 50 shades in a second. But I'm a super huge fan
of them, because I love-- and I know this is
really trendy right now, but I love these super
subtle color treatments that are really popular
right now, where it's almost imperceptible
that there's even a color happening at all. I think it's so nice. I think there's so many
ways to do that that's really restrained and nice. Anyway. Color is something else that
I could talk about forever. If you all want a really
interesting book about color, check out the "Interaction
of Color," by Josef Albers. It's a really famous book. You might have
heard of it already. But it's such a good
book for understanding not only some of the
principles of color, but also, as the
title would suggest, how colors interact with
each other, the ways that our perception can change
based on how we view colors in the world, how
colors are presented next to each other,
how they interact, all the implications that that
has for design and perception, anyway. And Sergio posted something
with hashtag #materialdesign on Twitter. Awesome. We're going to-- I mean, I can't pull it
up right now on stream, but I will definitely
look at Twitter afterwards and check the hashtags. And hopefully we can
get some retweets and support on that stuff. Book added to cart, thanks. [LAUGHS] I'm not
getting commissioned for selling Josef Albers'
very famous old book on color. But it's such a good book. That and roster and grid systems
are two of my top design books that are so cliche, but they're
cliche because they're so good. They're so good. Understanding layout
grids and grid systems in general and color are two
huge foundational building blocks. To the person who was asking
earlier about how to get started if you're a beginner
UI designer, if you're still in the chat, get those books. [LAUGHS] There's so
much that we can learn. I know that design systems feel
like a very new space in tech design, but there are
so many practitioners who have been using
design systems for decades that we can learn from. And personally, my work
has been hugely informed by those people. I do believe that design,
being an intentional creation, is a type of art. And the same principles
that apply there we can learn from in our own work. I have a whole essay about it. Anyway, back to our sample file. Let's look at our
sample app and see where those colors populated. So the Secondary color
is super subtle here, like super, super subtle. It only applies in
a couple of places. One place that it
applies here is in this slider for the music. Super subtle. Again, this is something
that is very small, so it's super important to have
a color that contrasts really well with our cyan. And I think we have that
with the peachy color. A really super subtle
touch is that we use an opacity treatment on
the track for the slider. So the part of the song
that hasn't been played yet is colored with the
same secondary color, but at a lower opacity. So you can see where
it's going, but you know that it hasn't
gotten there yet. But if we want to, we can also
re-color these and try out how would it look if we
customized that to Secondary 400 or something. Does this have more contrast? Yes. But-- actually, no. I don't even think it does. It's close enough
in value to the cyan that when you look at it-- I don't know if you all
get the same visual effect on your screens. But if you look
at this, the term that we use internally
for this is vibration. It visually vibrates
because the two colors are so contrasty in a
purely hue-oriented way that it just feels very
sharp and uncomfortable. So I'm going to switch
them back to the 200 value. But it was a
worthwhile experiment. The other place this
applies is checkboxes. This one I will customize. I will customize this one,
because this light 200 color that we've chosen
doesn't have enough contrast against the white. And I can tell that
just from eyeballing it. But again, use
one of those tools that we talked about
earlier to check your contrast as you work,
because it's super important. I'm going to change it to the
500 value, which does look like it has enough contrast. Again, if I were working
on this as a real design, I would double check that. But just from eyeballing it,
we can continue from there. So OK. Now we have our Primary
and our Secondary colors. They're all set. We even have the Secondary
color on this little thing here. I'm going to change this
track, because it's not mapped for some reason, to the 200. But it is a
low-priority opacity. Perfect. OK. Great. Now, back to what I was
saying with the 50 shades. And actually, you know what? I am going to-- because we changed
these other components, I'm going to change the-- I'm going to customize the
label in this drawer to the 700, just to give it more contrast
against that selected state. And Louise says,
getstark.co is also useful. Yes, absolutely. Cool. So now I'm going to
go back to the thing that I mentioned earlier
about the 50 level shades of these colors,
because there's some really cool stuff you can do. And I hope that-- aha. I'm glad that I checked if
these things are mapped, because they aren't. I'm going to change these
two Background and Surface colors really quick, because
I want to customize those. And that's exactly what we're
going to do in a second. I'm going to change that
to the Background style. I'm going to change this to
the Background style and this to the Surface style. There's something
interesting happening here. Oh, here. Surface style. Great. And the Background style. Cool. OK. So you can probably already
guess what I'm doing here. [LAUGHS] But basically, I
want to change the Background and Surface styles
to be something a little more interesting. So I want to change the
Background color to be one of our Primary colors. I'm going to change
it to Primary 100, this really light cyan shade. I'm not sure how this is going
to look, so hold your breath with me as I click over here. You know what? I did it wrong. This is the fun part about
streaming is when you do stuff wrong on stream,
because that's-- you know. The stream has way
more production value than my independent streams. If you've followed
me for a while, you've probably seen
my other streams. But they still can't prevent
me from making mistakes. Let's change the
Background style, which is what I intended to do. Now hold your breath as we click
back over to the sample app. Check it out. We have this-- this
feels very aquatic to me. [LAUGHS] But you know what? I'm going to keep going, because
I want to show you something else too. The 50 shade is this
thing I was talking about, where you get this super
subtle color treatment. And I think because we
changed the Background color to this 100 shade,
we could probably get a really interesting effect
if we change the Surface color to a 50 shade. Because A, we're getting a
subtle surface treatment, but we're also kind of
suggesting the elevation by making the color lighter,
which might be interesting. I don't know. I think it is interesting. You have this
color, here but then as a surface slides over it,
you get this slightly lighter color. You can really see that here. This screen has a wild-- I'm changing this back
to 200, because wow. Maybe even-- you know what? I have to go even darker. Wow. OK. So this is not going to
work, because now it's on top of the Primary. So I'm just going to
change it to On Primary. We lived that dream
for a moment, but no. It's time to wake up. OK. That's pretty cool, right? [LAUGHS] Nomer says
"It's very aquatic, and the orange
accents are goldfish." Exactly right. Exactly right. Is this focused? I think aquariums can
be very meditative. I'm going to keep this. Keep in mind the
goals of our app, but I'm going to keep this. And we're going to
move on to shape. If anybody has more questions
about colors, please ask them. But I am going to
move on to shape. Let's see. Where to begin with shape. Shape. Shape is another thing. Like, remember how I said
earlier in the stream that your app or the thing
that you're designing always has a personality and always
has an aesthetic no matter what, intentional or otherwise,
so we might as well be intentional about it? All of the things that you're
drawing on screen, just by nature of being visual
objects and elements in space, have shape. Choosing which shapes
are in your components and systematizing
that is something that is pretty new to the
platforms on which Material operates, I think. So it's worth discussing a
little bit what that means. I see a shape as an
expressive system. I think it serves
a really great role in expressing the
thing that you want to say with your
app and the feeling that you want to create. However, we also have
clues that shape can serve functional roles as well. So one of the best examples
I can think of is Shrine. I mean, let's look at the
shape theme of Shrine. A lot of things have these
clipped, sharp corners, and that's a stylistic choice. Their logo, as you might
know, is this diamond shape, which is very angular and
obviously has the same-- it kind of echoes this
approach to shape. One sec. Rohith is asking, "How do you go
about adding shadows/elevation for these colors?" The elevation system
in Material is always going to work the same,
regardless of what color the Surface or
the Background is, but you can play up that
effect by changing the Surface and Background colors
the way that I just did, by using a darker Background
and a lighter Surface. This is especially
true in dark theme, because dark backgrounds are-- it's harder to accurately
portray shadows on a dark background,
so the surface colors, the elevation system actually
changes the surface color slightly as you move
up in elevation, so it becomes lighter
as it gets closer to our theoretical light source. Hopefully that helps. So Shrine's shape theme
heavily echoes its logo, which is something
that you can do in your app as well, if that's
an expressive element you want to include. But the reason I'm
showing you Shrine is that it uses shape for
functional purposes as well. What do I mean by that? The most important example
of that is the backdrop. So the backdrop in Shrine-- let me find a screen
where that appears. Here. So you can see it
here on the homepage. All of the products
in Shrine, which is-- if you're not familiar
with this case study, it's like a shopping app,
where you can scroll sideways through all of
these designer home goods and clothes
and stuff like that. And the front page
of the app uses this component or this
pattern called Backdrop. And what a backdrop is
is, essentially, you have a background. So Shrine uses its primary
color as the background color in the app. It's this peachy
pink kind of tone. And then the surface
color is white. And the backdrop-- I don't know. Can you see this on the camera? Here's the background. Here's the backdrop. The backdrop is an
elevated surface. The surface color
in Shrine is white. So the backdrop is resting here. And what the backdrop
basically does is when you interact with
it, it can slide down to reveal the background. And behind there in Shrine,
there's navigational options. You can access some
settings, stuff like that. So why am I talking so
much about the backdrop? OK. I'm talking about it because
otherwise, because it's a vertical surface that's
close to the top of the screen, I don't even know if you
can see this on the stream, but there is elevation there,
but it's very hard to see, because the theoretical
light source inside of your
phone on Android is coming in from the top of the
screen at a 45 degree angle. And as such, the
umbra and penumbra of the shadow, the
ambient shadows that creates, it's really
tough for them to reach the top of the
component, unless it's really, really elevated, and the
shadow becomes very diffuse. So how do we take
the backdrop and let people know that it's a
differentiated surface from the background? How do we let them know that
this is in a relationship where this pink thing is an app bar,
and this is the background, and they should expect
the background to scroll underneath the app bar? We can do that with shape. So in Shrine, the backdrop
has an asymmetric cut corner. One corner is cut, and it's
done very intentionally to show you that
there's something different about this surface,
that you can interact with it. Because if one
corner is cut, you might want to interact
with that and tap it, which would send the
sheet down, or drag it, or something like that. Basically what I'm
saying is that shape can convey meaning that way. Another thing that
shape can do, if we look at a component page-- like I'm going to go to
the Floating Action Button. And let's see if we have
a good example here. So here's a good example. And this is animated, but
it's still a good example. The FAB here is-- actually, you know what? This might be better portrayed
in the shape article. Let's see if we have
this screenshot. Yeah. OK. So another thing shape can do is
give prominence to components, even more so than color. Because if you look
here, the screenshot has cards, which are
generally rectangular, and app bar, which is
literally rectangular. And this FAB is situated on top. The FAB is black,
which contrasts with the colors on
screen, but it's also circular, which contrasts with
the other shapes on the screen. So the FAB is way
more prominent. If you were to arrange
an app like this-- first of all, don't. But if you were, and
you created an app that has all these
circular thumbnails, the FAB is going to lose its
meaning as a circular element, because now it matches
all of these things and gets lost with
the image thumbnails. So is this an image? Is it interactive? Yes, it's elevated, but it
still gets really confusing. So overusing shape can
really hurt your app. Using shape as a contrast
can really help you. So all of that being
said, what I'm saying is shape is reliably a very
aesthetically functional tool for expressing things in
an app, but it can also have certain implications
for functionality and how users perceive your app. Also, as a side note, users
form mental models of your app really quickly, based on all of
the visual elements that we've talked about so far and their
experiences outside your app, and those mental models are
not necessarily based on fact. So it's really important
to be aware of how all of these systems
contribute to that perception. If you have
questions about that, I'll be happy to talk about
it, but it's a really important note to think about. Behati is asking,
"Slightly off topic, what do you think about
the new Google Logos redesign and color schemes?" I think that's a super
interesting topic that I could talk about for
a really long time, because I saw a lot of the work that
happened behind the scenes on that. What I will say is that I think
that the shift in the color palette, especially
with blue to be slightly darker than the old version, is
really important, because what it did was allow us to use that
blue color as a primary color on components and
things that is now more accessible against
the white backgrounds that are so prominent in
Google's Material theme. But talking about
that whole thing is a completely other video. [LAUGHS] Sergio's asking, "Material
does only use black and all those values for shadows and
not other colors, right?" Yes. That's true. Are there probably some fancy
ways that you can customize that, particularly in Flutter? Sure. You can probably get
tonal shadows in Flutter. But that's a whole
other topic on its own in terms of how you
communicate elevation. There are some ideas about
that in the spec if you read through the elevation article. There are some
other ways that you could try to do that, either
through color contrast or opacity or just using
straight up shadows, like we normally do. So check that out if
you're interested. Do it at your own
risk, because that's something that is not developed
as a system within Material. But anyway, back to shape. Now that we know what
purpose shape serves and how we should use
it very intentionally to create an aesthetic
and meaning, functionally, how does it work
within the system? The most important
thing to know is that all of the
components and material are split up into
these size buckets. So small, medium, and large. This is because if you apply
the same exact shape treatment to every component-- like say
you apply a 24 DIP rounded corner to a button. That's going to make the
button entirely round. Essentially, 24
DIPS is going to be half of the vertical area
of the button, right? On a dialogue, which is
much taller than a button, a 24 DIP radius is going to
be a much smaller percentage of the vertical
space that you have. So that's why we would want
to differentiate the corner radius, because it's going
to look very different. Four pixels on a button is
like 12% of its vertical space, whereas on a dialogue, it's
a couple percent, maybe, depending on how tall
your dialogue is. So what I'm saying is, the
shape that you give to a button is going to have a lot less
impact on larger components. The bigger you get, the
less dramatic effect it's going to have. So it's important
to have the ability to create different values
for each size of component to consistently communicate
the meaning that you're trying to do. There are some really
interesting applications of this. If you look at
Chrome, for instance, they took a really super
considered look at shape during the redesign a
couple of years ago, in the time shapes
went from this to this. If you pay attention
to that, you'll notice that the way
that they use shape has a lot to do not only
with component size, but also with component
prominence and the meaning and the importance
of the component. So something like a tab has
a very small rounded corner. The omnibox is
completely rounded. And dialogues and overlays
will have different values, depending on what they are. So you can also
use shape that way. You can establish a
theme that is also implying these other
things about the importance of components in a really
restrained, subtle way. Sergio says, "We can break
Material Design in Flutter, but I respect
Material Design rules and try not to break it because
I respect the Google designers. They have more experience
than one or two persons." Yeah, I mean, thanks. [LAUGHS] I would say when
you're designing something, you can absolutely
do whatever you want. But yeah, I mean,
part of the reason for establishing a system
like this is that we do have a really big team. We have amazing
visual designers, interaction designers,
motion designers, some really
incredible researchers doing really amazing
work that you'll see a lot more of on the blog soon. We have all of these
people that come together to make Material this big
system that's backed by research and has all of these nuanced
characteristics for you to use. OK. I'm getting the cue that
we have 15 minutes left. Remember how earlier I said
that the stream would not take two hours, and now
it's taking fully two hours? That's cool. Anyway, [LAUGHS] let's
go back over to Figma, because we've got
to make our theme. So back to Rally. You'll see that everything
in Rally, small, medium, and large, all perfectly
square, because this is super utilitarian. You're talking about
banking information. The components are very
flat against the surface. You really don't see
many elevated components in Rally, period. So the perfectly square
shape works fine for that. Reply takes a little bit
more of a branded approach. They do have a FAB that's
nestled in this really super cute little cutout. I am a huge fan of this. They have that. It's a key moment. It's one of the only
moments in the app that you'll see that
uses this yellow color-- one of the only
things in the app. Their approach to
color is so restrained. And then they have some
rounded elements as well. And I think these
rounded corners are really nice, because they
also echo the round accents that its logo has. Owl, similarly. We talked earlier about how Owl
has this super circular logo. There's a big focus
on this eyeball thing. Their approach to color,
which we didn't get into too much, but they actually have
three separate color schemes, so three separate primary
colors for different areas of their app, which is
something you can do too. You can create multiple
color themes for your app. They do that to separate
different areas. So the Catalog page
versus the Class page versus the Onboarding
Discovery area. But their shape theme
is also very round. So they have these
super rounded moments in the small components. Then medium changes to square. And then the large brings
back some of that roundness, but in a slightly
more subtle way. It's actually a smaller corner
than the smallest components, because they use that roundness
on this kind of half-sheet down here. I also threw Shrine
in here, just because I knew that I would
want to talk about it. And we did. So great. For our theme, because it's
focus-oriented, I don't know. It could go either way. A lot of these components
are linear, though. A lot of them are full
width or full height. Like the Nav Drawer
is full height. The App Bar and the little
bottom sheet are full width. The same with the
Now Playing screen. So there's very
few opportunities to play with shape in here. So I think I do want to take the
opportunities that I do have. And I'll do a demonstration
of the Shape tool, which is another tool that we
have in our shape guidance, just like the color tool,
just like the type tool. You can actually go into small,
medium, and large components here and see what it's
going to look like. So you can toggle between angled
corners and round corners. You can play with the sliders. What I want to
do, because I know that our medium and large
components have no grounding, we could round the Nav Drawer. Maybe we will. I don't know. But because we have so many
linear, rectangular components, I want to play with a
little bit of an accent for the small components,
like the button that we have in the Playlist view. So I'm going to turn that up. I'm going to turn
it up all the way-- not all the way. I'm going to do 24. So that's what our button
is going to look like. And I'll just go ahead and
do that directly, here. So we have a round button. I think that really fits with
our teal, cyan, aquatic theme with the goldfish accents. I think that's cool. And then I also want
to play with the Nav Drawer a little bit. I would like to play with
this surface if we can. But I want to make it a
little more restrained. Maybe a tasteful eight DIPS,
eight Density Independent Pixels. So if we apply that
to all the corners, obviously, that's
not going to work. We don't apply the
shape treatment to the leading edge of
full-canvas components like this, because
the implication is that the component is
coming in from off-screen. So what we'd want to do
instead is do an asymmetric-- let me see if I remember
what order these go in-- an asymmetric
application of the corners. And to do this,
I'm actually going to just dig into this
layer directly, just for the sake of time, and
adjust these trailing corners. If you're wondering what
I'm talking about when I say leading and trailing,
I'm talking about, in this case, because this
app is set in Latin text, it's read from left to
right, top to bottom. So I consider the left to be
the leading edge and the right to be the trailing edge. Basically, which edge
do you start with and which do you end with? In Android, they are
called start and end, but I'm using
leading and trailing because it makes it a little
more of a universal term. Like if you're setting an
app in a language that's read from right to left,
then your leading edge would be the right,
and your trailing edge would be the left. So by abstracting
it a little bit, we can talk about these
things in a way that's a bit more neutral. So I have applied the
corners to our Nav Drawer. I think that's a nice touch. You can also customize
these things a little bit. Like if you're using an
image list for the album art, for example, you can also apply
our small components shape treatment to that. So in that case, we
would apply 24 DIPS. And then you get these
bubbly kind of things. Yes. And then you can see
how that populates through the app, what
kind of difference that brings to the aesthetic
that we're creating here. And with that, we've
created a material theme. And hopefully-- my goal
here in this stream was really to introduce
Material theming both as a technical concept
and also as a design concept, to introduce you to some of the
decisions that you can make. Because Material
theming does ask you to make a lot more
decisions than just using the baseline theme. And I think that that
can be challenging, but it can also be a
really great opportunity for creating
something that's not only expressive and
beautiful but also meaningful and functional. So hopefully you feel
a little more confident in your theming skills. I hope that some of you were
following along with me, and that you'll share those
themes on Twitter, using hashtag #materialtheme. Even if you weren't
following along, if you've created
something with Material, whether it's a design
or an app or some code or something like that, if
it's just a concept you have, we would love to see that too. So please tweet at us. Ask more questions. Yeah. Let's chat. I'm going to end the
stream here for now. Make sure you're
subscribed to the channel if you want to see more. If you all liked this,
we will absolutely do more design streams. And yeah, I'll
talk to you later. Thanks, everybody,
for tuning in. Thanks to the production
team behind this. Thanks to Phil, Louise,
Helen, Amanda, Shawn, Lauren. All of the people
who are in the chat. All of the people who helped
me get this really ridiculously good stream setup going. Everybody who tested
all this stuff. Everybody who approved the
existence of this YouTube channel. Thanks. I will see you next time. Bye. [MUSIC PLAYING]
