[MUSIC PLAYING] JOHNATHAN CHUNG: Hello. Welcome to our talk. My name is Jonathan Chung. And I'm a UX lead on the
Material Design team. NICK BUTCHER: Hello. My name is Nick Butcher. And I'm a designer and engineer
on the Design Relations team. WILL LARCHE: And I'm Will. I'm an engineer on
Material Design. JOHNATHAN CHUNG:
Please have a seat. All right, today. We're really excited
to talk about how to build great Material Design
products across platforms. So to begin, what is
Material Design, given all the new announcements
that we just made? How has it evolved from
what we know before? Material Design is now an
adaptable design system, backed by open source
code, that helps teams create high quality
digital experiences. In other words,
Material helps you to build beautiful and
usable products really fast. In 2014, when we first
launched, we had zero customers. Now we have over 1.5 million
apps using Material Design. That is incredible. And based on this huge
number of customers, we've really listened
and continued to improve our system. So today, we launched Material
Theming, our end-to-end product capability that makes it easy
to make Material Design yours. Now, I'm sure some of you
are very eager to learn more. But maybe some of you
are still wondering if Material Design is
appropriate for you and for your company. So I'm going to start off
by walking through the newly designed Material.io site. Then, Nick will demo our
suite of Material Tools that we built to make
collaboration and customization really easy and effortless. Then, Will is going to talk
about the Material Components, a library of open
source code, that can be used across all platforms. So let me give you three
reasons on why you should really consider using Material Design. First, Materials Design
is also for developers. You've given us
a lot of feedback that it hasn't been easy for
you to apply and build apps using Material Design. Now, with Material Theming,
and all of the tools that we've built to support
this new capability, we're now empowering
desires to create with an eye towards a code
that you will be developing. Material Design is a truly
cross-platform framework. We understand how critical it
is to create a consistent user experience that works
across platforms. So using Material Design
will benefit your users using multiple devices. We also understand that
building high quality products takes a long time. So not only we're encouraging
cross-platform consistency, but also we're
providing the code to start developing on
Android, iOS, web, and Flutter. Now, we're going to
put that to the test. So imagine building
a screen like this. And probably, all of you
are experts and pros, but in my experience,
building a screen like this, and to do it right,
will likely take some time. With the power of
material design, we're now making
it easier than ever to design and build screens
like this across platforms. And all that magic starts right
here with this redesigned site. The new site is now broken into
Design, Develop, and Tools. And in each of
those sections, you will find all of
the great resources that our team has
created for you. Design guidelines,
tools, research insights, open source code, you
name it, it's all there. We're going to spend
some time checking out the site in greater detail now. The Design section still
has everything that you loved about Material Design. It's all there. Nothing is gone. In addition, we're now featuring
some of the most read articles on the top of the page to
help you find content faster. We're still very much
focused on helping you design products
that are beautiful, without background in design. So here, you can
see the articles that we provided for you,
and learn about system icons, generate your own
custom color palette, pick a typeface that
works for your brand, and really harness the
power of shapes in your UI. The last section talks about
materials studies, which we showcase all of the
flexibility of Material Design, regardless if you're
building for retail, for communication,
or even something as complex as a travel app. It's all there. And we've tested it. And it's all there
for you to check out. The Material Design guidance has
also been expanded and enhanced into Material System, Material
Foundation, and Material Guidelines. Starting with the
Material System section, we're giving you the general
overview of Material Metaphors. Then, the Foundation
section dives into the foundational practices. So it'll mention
structural things, like color, typography,
iconography, shape, layout, and more. Now, the Guidelines section
gives tactical guidance on how to create a
material product. And the best thing about this is
that all of these great design guidelines are closely
linked with engineering. Now, let's take a look at
some of the other features on the site that's going
to be helpful for you when you're building
your product. We know how having
a detailed spec makes the engineering
process 10 times faster. And that's why we're
providing this view called Spec Viewer in the articles. In this spec viewer,
we're now exposing all of the useful
information about this image. Clicking through the
menu on the right, you'll have access to all of
the different types of layers about this image, such as you
can just view the image only, see the measurements, text,
color, shape, and elevation, see the different components
that are used in this UI, or even additional notes
that we might have added. Let's take a look at
this text annotation. So in this annotation,
you will not only see the font name,
size, and color, but also link to a Google font
site that our team has built. We really wanted to surface
these kind of useful resources to you in the context
of your workflow, so that everything that
you need is right there. Now, when you navigate
to the Google fonts site, you will be able
to download and use any of the fonts that
are used in our mocks. We also conducted research
on the most effective ways to deliver the guidelines. And we found out that
interactive content increased the level of
understanding for our readers. So we're starting to
introduce content that is interactive in our articles. Here's an example of
material palette generator that is placed in line
in the color article. Through interacting
with this tool, you'll be able to learn about
the improved color system. So those are some of the
new features that we're adding to the design section. But how do you build all this? That's what you're
here for, right? The Develop section now
features and has access to all of the open source for
Android, iOS, web, and Flutter. So while respecting the
platform conventions, we wanted to make sure
that our components works across platforms and
not just on Android. And you'll be able to
play with these components in our catalogs. If you scroll down,
you'll see the section called Developer Resources. So similar to the
Design section, we wanted to provide
the resources that you can use to build your product. And let's say you're not as
familiar with any of this, scroll to the bottom
even more and you'll find tutorials to
get started on this. Switching gears to
the Tools section. So the Tools section has links
to all of the great resources that we built for you,
starting with Gallery, which is a part that I love and have
been using to share designs with my team. I love this product-- Gallery. Gallery makes collaboration
so easy and so seamless. Nick will give you more details
about gallery in a minute. On the right, you
will have access to the five full sets
of stylized icons available in range of
format, sizes, and densities. In the bottom, you will
see the Material Theme Editor for Sketch. What is a Theme Editor? If you haven't heard
from other talks already, the Theme Editor
is a plug-in that lets you express your
brand systematically through elements like
color, iconography, typography, and shape. And through the
Theme Editor, you will be able to take the
themes that we provided for you and customize it
to make it yours. These sets of components
can be used in your designs right away. Also what's great
about the Theme Editor is that all of guidances that
are mentioned in our guidelines is directly integrated
into the tool. Now, what if you want to
change something later on? No problem. Here's an example of choosing
a color from the Interior Color Palette and applying it to the
entire library of components. I find this to be so useful. And this makes my job so easy. Now, I'm going to hand it
off to my colleague, Nick, to talk more in-depth about
using the Theme Editor. Thank you. NICK BUTCHER: Thanks, Johnny. Thank you, Johnny. So we've seen how the
Material System, Foundation, and Guidelines makes it easier
to bring your unique brands into your apps. I'm going to walk you
through an example of how you do this to really
demonstrate how easy it is to do, and especially
show you how the new material tooling makes this
process from design through to development
much faster. So I was part of an
awesome team this year who designed and built
the Google I/O app. Maybe some of you have used it. You may have noticed that
we've put some new componentry in there, like we're using
the bottom app bar here with the inset fab. But we didn't want to use all
of the new Material Theming capabilities, because
we didn't want to spoil the show for
the big launch today. So what we're going to
do today is walk you through some possibilities
of how Material Theming could be applied to bring the brand
of Google I/O much deeper into this application. So Google I/O, it's a
developer conference. We like to think of it as a
developer festival almost. There's a lot of kind of
playfulness in this brand. I especially love
the playfulness in the kind of the motion style. It's also expressed
through the color palette, which you, hopefully, see
everywhere around you. And it also picks up on
metaphors from the software engineering world, things
like layering and stacks. And we use that to inspire
the illustration style, as a kind of mark of the brand. So how can we apply these
elements into the app design? So here I am in Sketch. This is my design file,
generated by the Theme Editor that Johnny just showed you. We can see that Theme Editor
has generated a bunch of stuff for us. It's created a bunch of
components, a typography, scale, color palettes,
elevation settings, and icons, and so on and so forth. If I switch over into
the Components View here, you can see that
there's basically a one-to-one from all the
components in the material guidelines, generated for
me in this sticker sheet here, ready to
use in my designs. There's everything in
here from the app bars to backdrops to fabs to cards. You name it, it's in here. The better thing
about these components is that they're aware of
the Material Theming system. Let me show you
what I mean by that. If I switch back to
the theme and open up the Theme Editor from
the Sketch Plug-ins menu, we can see that this
theme is currently set up using the I/O,
kind of indigo primary, and kind of teal accent color. If I go into the Color
Settings and just by clicking on the Primary
Color section here, and I were to change this
primary color, either by dragging it around or
inputting a hex code directly, it's going to have
a number of effects. Let me walk you through them. The first thing is you notice
this kind of tonal palette. It's generated these 10
different tones of color just from that one color I chose. This is pretty cool. I'm going to geek out
on this little bit. It's not just being naive here. It's not just taking
the hue I selected and altering the
brightness and giving kind of a palette that way,
the algorithm behind this is trying to imitate how
designers pick colors, and it's using that to pick
a nice color palette, which hopefully will work great
throughout your applications. So by selecting
that, you can see that the entire color
palette here in the theme is being updated. And if I switch back to the
components, this sticker sheet, you can see that all
of these elements are aware of that
change in theme color. And that change is rippled
out into all the elements. So you can see app bars pick up
the primary color and a darker tone for the status
bar and so forth, which is pretty powerful. So how do we use this
library we generated? So switching over into
my app design file, this is some screens
from the I/O app, which I designed using those
components in the library that Theme Editor
generated for me. If you haven't used
Sketch's Library feature, it's pretty cool. It's basically a way
to share components between different design
files or amongst your team. It's very powerful. So you access the Library using
the standard Sketch Insert menu. And I scroll down to this
Library, which I generated. And you can see right here,
all of those components that we just saw in the
sticker sheet nicely kind of arranged into this
kind of tree structure. So we can choose the
component that we want, the different
variants of the component, even down to different states
that the component can be in. So if I want to add
a fab to my design, I can just grab
one from the menu and drop it into my design. And over on the
right Inspector pane, you can see it offers
overrides, allowing you to change things, like the
icon, and so on and so forth. So just by generating
through Theme Editor, we've got a huge array of
components available to use. So we understand the
Library it's generated and how to use it
in your design. Let's start customizing
some of these parameters. So I go back into my library,
open up Theme Editor. And one of the first
parameters I think might be interesting for
the I/O brand is shape. I want to take some
inspiration from the I/O logo. You've got I-- this kind of
prominent slash in between. I think we could do something
interesting kind of the surface shape treatment. So by default, in
the baseline, we have this kind of rounded
corner surface shape. I'm going to switch over
to the Angle setting instead, deselect
three of these corners, and then crank up the corner
radius on the top left. So here, I'm trying to take
inspiration from that I/O logo and embed that deeply into
the components in my product. So if I hit Save in the
library and switch over to my design file, Sketch
pops this little purple bar in the corner, letting me know
that the underlying Library has been updated. If I click on this, it's going
to give me a diff almost. These are all the
components that are going to be affected
by these changes. So I can choose whether
to select them or not. I'm just going to take
all these changes. So now, any component which
is aware of the shape system is going to be updated. So if I zoom in on this bottom
sheet here, for example, you can see it picked
up on that cut corner. And likewise, on this
raised button down here, it's shape aware. Some of the components in
the system offer different variants, which can or cannot
pick up on the parameter system. So for example,
here's a fab which is using the standard
circular presentation. But if I go into
the Symbol settings, I can go down to
where I selected and select a
different alternative, if I want it to be aware
of the parameter or not. For example, I can pick up
on a diamond or squircle type shapes, which will pick up on
the different shape parameters. Or I can choose just to keep
it the circular if I want, so it won't pick up
on their parameters. Speaking about variations,
we've introduced a new variance of text fields,
which have been seen to be performing really well,
which we'll come back to soon. So right from my design,
I can go in and select what was the standard kind
of underlying text field, and I can switch it out
to a different variant from those available
in my sticker sheet. So there we go. We've got a different
variant of the text field right there, using this outline,
which is much more obvious. The next parameter I want
to look at is typography. So currently, the I/O
app is using Google Sans, which is Google's
brand's typeface, paired with Roboto for body copy. I think we might be able to
take some inspiration from-- it's a developer event. So I'm going to take some
inspiration from development environments and try
using a monospaced font and see how that works
with the Google brand. If I go into the Typography
settings in the Theme Editor, you can see it's got this scale
in here, which Theme Editor has generated for me, giving me
these kind of semantic styles I can apply
throughout my design. If I select the Google
Sans I had here and search for a monospace, I'm going
to use Roboto Mono on here, one of my favorites, it's
going to swap out everywhere that that other font was used. All the different
places where I'm using a different variant of
Google Sans here, I can go in and I can manually change it. And it's going to do
something interesting. So watch here, you can see
while it's set to Google Sans, it had a particular font
size and tracking and weight. And when I switched it out to a
different font, to Roboto Mono, the font size, tracking, and
weight changed for that style. So what's going on here
is that Theme Editor is pretty smart about fonts. It looks at the
font's characteristics and optically correct
for them in order to create a harmonious scale. So what that means is if
your font you're choosing has a different x
height or stroke weight or something like this,
it'll look at that, and it'll adjust
the sizes it uses for the different
types in the scale in order to produce this
harmonious typescale for you. All just by selecting a font,
it generates a scale for me, which is pretty amazing. So I save that out and switch
back to my app designs. Again, it notifies me that
the Library's been updated. I can take all those changes. And everywhere
throughout my design that I was using the
other font finally before, you can see has been updated to
my new typeface just like that. [APPLAUSE] Go, Theme Editor. So these changes are
looking pretty good to me. I want to share them with
the rest of the team. Using the Material
Plug-in, you can not only get really tight integration
with Theme Editor, but you also get really great
integration with Gallery, our tool for collaborating. So right from the plug-in, I
can choose to upload to Gallery. I can set the project
or the subcollection in which to put it and
upload it straightaway. So once that's upload
it, it's ready to be shared with the team. So I get a unique URL, which
I can share with our team. So in Gallery, I can get
overview of my design work. I can update new
iterations, so I can see how my design work has evolved. I can comment. So you can share
this with people and have a discussion about
different design features. But I'm going to show you one of
my absolute favorite features, which is the Inspect Mode. Now, Inspect Mode makes it
really easy for designers to hand-off off to
developers and for developers to get all the information
that we need out of a design. So when I enable Inspect
Mode, I get this Inspector on the right. And then, when I hover or
select any item in the design, it'll give me spec work. It'll red line it for me
automatically, essentially. So it gives me size,
position information. It gives me the body and the
copy in the selection and all the typeface information. It'll also pick up on any
icons you use from them the Material Themes. So any Material Icons
will link you out to the Material Icon site. So you can grab the
assets that you need and straight away from there. Best of all, Gallery
understands the components that the Theme Editor creates. So if I select this fab here,
it's not just going to say, hey, this is a blue circle. It's going to say, hey, I
recognize that that is a fab. So you can see it picks
up that it's a fab. And best of all, it'll
offer per platform links to reference documentation,
so developers can go directly to the component
that they need to implement. And they'll be
given any parameter changes that you've changed
on the component as well. I can't emphasize this enough. No longer is design handing
over a picture and saying, hey, I really hope you
can implement this. The tight coupling
between the components offered between Theme Editor
and Material Design components mean they're the same
components, which means that you're saying
use this component with these parameter
changes to it. So no longer is it kind
of a guessing game. So these changes
look good to me. I'm going to open up the
Comment feature for @Will. Let him know that
these changes have been uploaded into
gallery, and they're ready for implementation. So over to you, Will. WILL LARCHE: Thanks, Nick. Isn't he great? [APPLAUSE] So I'm an engineer. And Nick has just shared
with me this Gallery project. I've gotten the link. And I click on it. And I get to come in here. And it'll send me to
the Material Components documentation. Now, what is Material
Components or MDC? Material Components are
an open source framework for implementing
Material Design. There is an MDC for Android,
for iOS, web, and Flutter. It's the same code
Google uses in its apps. Each has dozens of
components, and they can all do the cool things that Nick
was talking about earlier. And since they're open
source, there's no mystery. They're not magic boxes. Everything is available to
you to look at or customize. And we invite you to
please contribute code. So let's look at these new text
fields in Material Components. How do I get them? Well, adding MDC to your
code base is pretty easy. If you are an Android, you'll
access the Design Support Library through Maven, using the
standard support Library setup. On web, you'll just
install a node module. On Flutter, you're done. Material Components come
built-in to Flutter. And on iOS, you
can use CocoaPods. You add it to your pod file. Let's look a little
bit closer at iOS and how we implement
the new text fields. So every text field in MDC
iOS has two parts, an input and a controller. We're going to add MDC text
field and an outline controller to our app. We can lay it out using
its intrinsic content size and maybe set the UI
text field delegate. And the placeholder will
float across the border. If you're already using MDC,
upgrading is pretty easy to get these new designs. If you're using
CocoaPods, you just run pod update
MaterialComponents. Then, you go in and change
the controller class from the old class to one of the
new fancy ones, like outlined. And you're done. By the way, these text fields
are much better and much more performant than the
previous designs. We did a huge amount
of research in order to come up with these optimized
designs, a lot of research. And it turns out
that in long forms, your users are much more
likely to see and interact with these text fields
than the previous design. If you want to learn more about
the new text fields or material research, you can watch the talk
"Measuring Material," Thursday at 12:30. So doing this on
iOS is a breeze. But what about Android? Well, you set the outline box
style on the text input layout element in your layout. On web, you just
replace an element with class MDC line ripple,
with an element with class MDC notched outline, with an
SVG with a path of class MDC notched outline path,
and an element of MDC notched outline idle. And don't forget the modifier
class MDC text field outline. It couldn't be simpler. And on Flutter, you change
the border to outline. Now, I'm a little biased
because I work on MDC Flutter. But I think Flutter
is the perfect way to implement material
design across platforms. You do it once, and then you
get both iOS and Android. And MDC is baked right in. It is the default UI
framework for Flutter. And whenever you create a new
project, it's already linked. I love it. So now you know that
the material text fields can be added to your code. But there's a lot more. You can find almost all of the
Material Guidelines components in Material Components. So that's app bars, buttons,
cards, chips, dialogs, navigation, tabs, ink ripples. There are dozens of them now. And they're all available to you
today at Material.io/develop. And since design is never done,
more are added all the time. So today, we've shown
you the design resources available to you
today on Material.io, how Theme Editor, Gallery,
and the Material Tools Suite help you customize your
designs for your brand, and how Material
Components make it easy to implement those
designs across four platforms with precision and ease. So if you are here at
I/O, what else can you do? You can go to our
design dome, where you can get design
reviews and demos and listen to some Box Talks. And you can also go see the talk
"Code Beautiful UI with Flutter and Material Design." We have 30 code labs
for Material Components in the Code Lab. And on Wednesday
at 2:30, there's a session, "Ask
Flutter and Material," where you can come to
us to ask questions about how to implement material
design in your Flutter apps. Thank you. [MUSIC PLAYING]
