Articles

Customize Material Components for your product (Google I/O ’18)

August 15, 2019


[MUSIC PLAYING] RICHARD FULCHER:
Thanks for joining us. In the dev keynote,
we just announced a comprehensive update
to material design. I feel like I actually
recognize a few people from the dev keynote. So hopefully you enjoyed that. We are going to talk about
material theming, which is material designs new approach
to customizing apps powered by open source components, new
tools, and new design guidance. We’ve created all of this work
focused around two major goals. First, we wanted to do more
to improve the designer to developer workflow. And it was a big focus
for us in this work. We want to make it
faster and easier to build custom and
improved experiences. And, second, we wanted to make
material much more adaptable and much more flexible so that
more varieties of products and different styles of
brand can come to material and take the benefits of it. This talk today is
going to be focused on that aspect of customization,
how you move from customizing and design to realizing
that customization in code. So we’ll cover both
halves of that. We launched Material
Design in 2014 as a way of creating a
unified cross-platform set of experiences. It was a design system
not just for Google, not just for Android,
but for everyone. And we wanted it to be able
to span mobile, desktop, and other devices along the way. And since then, we’ve
seen an incredible amount of beautiful and usable
products produced by you, built on the
foundations of Material Design. As an example, we have these
winners of previous years Material Design Awards. So many of these great
experiences from the New York Times, to Airbnb,
to Blinkist succeed because they’re able to
bring their brand to bear. They bring the strength
of the identity they’ve already established
into the forefront of the experience. Without compromising [INAUDIBLE]
sense of predictability, we’re introducing
confusion for the user. With material theming, you
can create a custom theme of material which is
personalized for your product, expressing its brand through
color, type, and shape. For today’s talk,
we’re going to walk through three steps involved
in using material theming. First, Rachel is going to tell
us about the design system itself and how it’s expanded
to include material theming. We’ll go into a lot
more detail than we were able to cover
in the keynote there. Then Rachel I are
going to walk you through a set of different
examples of how you can create material themes for
different types of apps and different types of brands. And Josh is going to show us how
to realize all of this in code. So that’s the plan for today. RACHEL BEEN: OK, let’s talk
about the design system. So our updated
material guidelines help you understand the
foundations of good design and how to build an
app with material. So materiality, if
you guys remember, is still the
fundamental metaphor driving the design system. These tactile
surfaces still create a really predictable usable
environment for the user. Combined with things like a
clear elevation model, defining surface relationships,
the user intuitively understands how to
use your products. Fundamental guidelines, which
is layout, interaction, motion, and so much more still
provide the scaffolding to create these beautiful
and functional products. And components are still
the building blocks of great product experiences. We’ve expanded componentry
over the years as many of you might have noticed,
introducing things like the bottom
nav and this year the bottom app bar, which
you probably saw on stage and will see in
our presentation. We’ve also strengthened
the usability of many of our componentry
based on user research and the material community. For example, last year, we
released a new text field component to increase
usability and discoverability within this component. Starting today,
component articles in the material guidelines
will feature a theming section. These section showcase
how components can be easily customized from
the baseline material theme. After understanding the
customization possibilities within the guidelines, you
can use a very powerful tool, the Material Theme
Editor to execute. What this tool does is
it cascades customization decisions throughout
your design components creating a branded symbol
library within Sketch. Let’s talk about a few of these
customizations that really make your product come alive. In 2014, we launched a beautiful
color palette and a system to think about how to
apply color to your UI. But what if your brand color
wasn’t in this palette? How could you use the system? Today, we’re introducing
guidelines and tools bringing any color into
the Material Design system. A new tool in the
guidelines creates beautiful material palettes
generated from any color and gives you additional
options for harmonious colors to add to your palettes. You can also generate pellets
in the Material Theme Editor. The theme editor, though,
takes this a step further, applying colors to the
appropriate componentry across your symbol library. It also helps check
for accessibility, using the full palette to
provide alternative colors that meet accessibility standards. So let’s talk about type. We introduce the same
customization possibilities with typography. In 2014, we released a
comprehensive Roboto type scale that mapped to componentry. Today, with the
Material Theme Editor, we can create beautiful type
scales for any typeface, not just Roboto. These scales are optically
corrected to work in material components, mapping
again across your entire symbol library. And for shape, today, with the
launch of the theme editor, we are introducing the ability
to systematically customize shape so that rounder corners
or a custom cut detail on some of your surfaces
immediately apply across all of the surfaces
within your design. And, lastly,
iconography– we’ve been building our
comprehensive set of icons since 2014, resulting in a
collection of over 1,000 icons. Today, we’re announcing four
additional sets of icons, expanding the visual
range of the original set. Available on material.io
and in the theme editor, these sets allow for even
more visual expression and even the smallest details
of your product experience. And as you all know
design can only go so far if you can’t
realize it in code. So, today, we’re launching
Gallery, a collaborative tool, as Rich mentioned
in the talk, that helps bridge this
designer-developer workflow. Components exported using
the theme editor can use the inspect
feature in Gallery, allowing for this easy
transfer of design decisions into our open source components
for iOS, Android, web, and Flutter. So let’s go deeper with theming. We want to show you how
efficient customization can actually be. So just so you know,
we test material design by creating products studies
that showcase our thinking, making sure our system works for
a wide variety of experiences and products and brands. You’ll see these studies
used throughout our updated guidelines. Today, we’re going to
talk about three of them– Crane, a travel app, here
shown on desktop, Reply, an email app, and Shrine, a
retail app, shown on tablet. This visual shows how
they would originally appear pre-material theming. When we pull away
the content, you can see how similar the
structure and the visual design of these screens are– navigation on the top,
relying on color blocks to really create
a differentiation from each other. But these experiences
and brands are different. And that’s not coming out
in the user experience. Let’s use material theming to
better express these brands. I’m going to start with
an app called Crane. Crane is a travel app
that helps users book and find travel, lodging,
restaurant options. It’s both functional, using
components such as text fields, lists, selection controls
to book a trip, and really editorial, using beautiful image
lists to showcase and browse content. Cranes brand is refined
but not unfriendly. The brand needs to give
the user confidence that they can trust crane to
book travel and accept payment, but also lively
enough for vacation planning to still feel excited. A lot of that personality
starts with the color decisions. Crane’s primary color is purple. It uses variants of this color
to distinguish different UI elements and create contrast. And Crane’s secondary
color is bright red. This red is used for important
information and selection within this experience. The primary purple is the
main color of the buttons. And the secondary
color is really used, as I said before, for
selection controls and really important typographic
elements and prices. But if we use red for type
and selection controls, what about error states? It’s very observant
if you notice that. Material defines a
default color red, but you can define your own. So instead of red, Crane uses
orange as its error color. So this way the error
color calls attention, but isn’t associated
with the brand identity. Speaking of text fields,
Crane uses two styles that you’ll see here. This one is the lighter
weight outline text field that’s used for
longer scrolling forms. This other text field is used
for inputting search and user preferences. You can combine the two styles. They have a custom shape
with rounded corners and use the brand colors, the
iconography, and the typography as defined by Crane. And, lastly, we mentioned
Crane’s emphasis on editorial content. Crane uses a masonry style
grid list where photos maintain their aspect ratio. So they show as much
content as possible. The image list has
been customized to display text
labels with each item. Custom padding has been added
above and below the item. OK, Josh, your designer is
given you a beautiful design. Can you make it? [LAUGHING] JOSH ESTELLE: Well,
I’ll see what I can do. So as a developer, I
love a good challenge. And I love making beautiful
designs come to life and really putting them
in the hands of our users. Our engineering team
has been hard at work creating building
blocks for great design, complete with the
kind of flexibility necessary to construct
any app or any style. We’ve primarily done this
through material components, or MDC, or open source
libraries for UI development available for Android,
iOS, the web, and Flutter. For this particular
example, I’m going to walk you through how we
get started building this with MDC web. Using material
components, I can quickly drop in the basic structure of
an app, a top app bar, tabs, a few text fields,
and an image list. This is what it
looks like before I begin customizing anything. These baseline styles
will give your users a great user experience
right out of the box. But, today, we’re talking
about customizing materials for your brand specific needs. I’m going to show
you how easy that is. First, color. Rachel told you about
our new color system with tools and guidelines to
help create a dynamic color palette using your brand colors. From those tools,
you can easily pull in the colors
necessary into MDC web by defining these SAS variables. These variables are used
throughout the MDC components and can be used
anywhere within your app to make it easy to
have a semantic meaning and understanding to
how color is applied. While all MDC components
will automatically pick up and adapt those
colors we just defined, you can also customize
things whenever necessary. Tabs default to colors
that expect they’re on your default
background color. However, in this
app, the tabs are part of that top app bar,
which uses the primary color as your background. The default black the
tabs use is too dark to put on top of
that primary color. So here we show how we
override the ink color on tabs with our on primary color. That’s a color chosen
to specifically be high enough contrast
to put directly on top of a primary color. And this is what
that looks like. So our colors are clearly
applied across the top app bar, the tabs, and the text fields. Now let’s look at
the image list. MDC gives us a simple
standard grid very easily. But for this product, we wanted
that less regular masonry grid. This is how the standard
grid was defined– very easy, very simple. And here’s the only changes
necessary to turn it into a masonry column layout. So just a little bit, and you
get that different layout looks like this. And that’s it. That’s about 10 to
15 lines of code that went from our
baseline look to this. And then a few more tweaks, and
we’ll have the final design. All right, what
else can we build? RICHARD FULCHER: Thank you Josh. All right, let’s do another. Let’s go forward to
our email app, Reply. Reply’s promise to users
isn’t especially complex. It’s an email app. It wants to be
clearly organized. It wants to have
legible typography. It wants to have
straightforward navigation. But we still have customization
opportunities within that. Reply’s brand is focused on
friendliness, its competence, and maybe even a
hint of quirkiness. On mobile, Reply uses
the bottom app bar. The most obvious feature
that you see here is that floating action button,
that golden FAB in the center. It’s even been kind of nested
into the app bar itself with that nice little cut. Doing that increases
its prominence, is the key action as
our FABs often are. And this makes it a
very obvious target. Navigation is also
supported in the app bar. But it’s a little less
obvious, less prominent. It uses the Reply logo to access
a traditional navigation panel. You might also have noticed
something interesting going on with the icons themselves. They’re using one
of those new sets that Rachel described
earlier, in this case, the two-tone version. Now these icons are still
immediately recognizable. We haven’t changed kind of the
way that we draw the symbol. The user will still recognize
it from other experiences across the system. But we have stylised it. The entry chips for the
addressees in the middle of the screen here. Those also use custom
color and typography. And we’ve also adjusted
some of the layout elements. So instead of the avatar
being inset within the chip as it would be for the
baseline presentation, we’ve customized it to be a bit
larger, completing the rounded shape and giving you a slightly
better chance of actually being able to tell who that is. A key component of
Reply’s style is the way it employs typographic scale. It needs to cover a lot
of different use cases or tasks related to this
very text heavy application. So we’ve done
customization here as well. We’ve taken the default Roboto
and replaced it with Work Sans. We’ve updated the weights, using
the guidance that comes out of the Material Theme Editor
to optimize how we want to size them as well. With the bold headlines and less
emphasized captions and body text, we increase the
scanability of the content. And you can see
that really clearly in a view like the
messaging list here. There’s a clean
visual hierarchy. The user’s eye knows how to
jump kind of very rhythmically down the page to catch
the different titles that are there. On the cards themselves,
we’ve customized them to use sharp corners. And we’ve decreased the
padding between the cards so that there’s just more
space to get content in. Now even though there’s
no indication of elevation on the cards, you can still
see a clear separation between them. You’re getting a little bit of
that background color peeking through between the
cards, cuing that these are different surfaces and
that the user can reasonably expect they could perform swipe
gestures on it, in this case, to either star or delete
one of those messages. OK, that’s a lot
of customization. Can Josh build it? [LAUGHING] JOSH ESTELLE: All right, so
I already showed you MDC web. So for reply, I’m going to
bring you through MDC Android. One of the beauties
of material components is that no matter what platform
you’re building for, you have a consistent set of
components available, the same patterns, features,
theme ability, but still very much in line with
the platform specific paradigms that your users
are going to expect. So here on Android,
we have the same kind of material theming for color. We define our theme, inheriting
from the material components them, and define
our brand colors. This defines all
the colors that’ll flow through the app,
styling both the MDC Android components, but also lower
level UI elements provided by the Android framework. Now for Reply, we really
need to exercise our ability to customize typography and
use the material type scales. To do that on Android,
I want to tell you about Android downloadable
fonts and how with Google Fonts you have a great set of fonts
readily available to use. Work Sans is the
typeface for Reply. And this is all you need to
have that font downloaded on the fly whenever
necessary for your app. Once we have the font, we have
to apply our material type scales that our tooling
will help you determine. Here we redefine the
headline one text appearance to use Work Sans with
a light text style. We can redefine the
entire type scale and link it up
through our theme so that all of the text appearances
update across your app. So with those
changes to our theme, we see Reply’s colors
and typography permeate through the components and
the various views of the app. But now let’s look at a
couple of specific components. First, chips. Chips can be tremendously
versatile and useful, but also quite
complicated to implement well and in a consistent way. So we’ve done that for you. Pull in the MDC Android
chips like this– very simple. Drop it in your layout,
getting all the nuance behavior of a chip just right,
and completely pulling in your theme colors and type
definitions, and, of course, the new bottom app bar with
that special little place for the floating action button. This is one of the
really nice patterns that might seem like
it’d take forever to figure out how to build. It did take a while. But we got that for you too. Here’s the bottom app bar
and floating action button, where they would go in
a coordinator layout, automatically pulling in
your theme colors and type. It’s also worth
pointing out here we’re using our new
material two-tone icons. These icons are
available on material.io and are ready to drop
into any Android project. So that’s Reply. What else? RICHARD FULCHER: OK,
we’ll do just one more. You’re getting the
hang of it by now. But I want to show off a couple
of other aspects of the system. The final app that we’re going
to look at is called Shrine. So Shrine– it’s a retail app. It’s an online marketplace
that doesn’t just sell goods from one label. It shows them from a
variety of fashion providers and promoted labels. So because of this, a lot of
the emphasis in the design of Shrine is on imagery. The tonal color
palette that we use has fairly minimal
contrast in this case. OK, those are really key
choices because think about what a user coming to
this experience was looking for. They want to engage
with the content. They want to be excited
by the different wares that you have up
for sale and keep their attention focused there. But you also need to be
able to convert them. They need to be able to
find that add to cart button and hit it when it’s time for
them to make the purchase. So you’re balancing content
browsing and also this more specific task execution. So with that in
mind, Shrine’s brand actually recedes a little bit. Content and key
actions go forward. Where shrine does assert its
brand identity very strongly is in the way that
it uses shape. We use sharp cuts on
surfaces like the buttons and on larger
sheets of material. And those are all tied back to
that diamond logo, the product logo of Shrine itself. Those aren’t just
aesthetic choices. When we do those surface
cuts on the corner, we’re also communicating how the
different material surfaces are arranged in the space
and how the user might be able to interact with
them in different ways. So from front to back, you
have the backdrop back layer, which is where we have a custom
navigation menu for Shrine. In the middle, we have
the backdrop front layer, which is where the bulk of the
content the user is actually going to engage with
is going to reside. And then the
shopping cart sheet, which is actually tucked
almost entirely off screen, is foremost. And it just gets out of the
view when it’s not needed. On tablet and desktop,
Shrine’s primary navigation is through tabs. And in keeping with the emphasis
on storytelling through shape, we’re using a
highlight indicator that takes a custom
shape and draws it behind the active label. OK, last time, Josh, once more. JOSH ESTELLE: OK, so this
time let’s talk about iOS. Again, I’m going to show you how
colors are defined very simply and easily get
applied throughout all of our components. For each platform, you
define these colors and then trust that
we’ve applied them in the appropriate places
across all the UI elements. But for Shrine, I
really want to focus on the shape customizations. That’s one of the areas
I’m really excited about. It’s pretty tricky to
implement these things. But we aim at making
adjusting shape and applying it to
your components as simple as theming any other
aspect of your design. Here for Shrine we use this cut
on the corners of the buttons and on the top left corner
of that larger surface. On iOS, you can use our shape
generators and corner APIs to style the buttons. Here you see an
8-pixel cut applied to every corner of the button. And here you see a
bigger 32-pixel cut but only applied to that
top left corner of the card. This takes care of
a ton of complexity and making touch targets
behave correctly, ripples and shadows
appear in the right place. And with all of this, you get
a very easy interesting way to apply custom shapes
across everything you do. Now shape is still
a work in progress. I showed it to you here
applied to buttons and cards. But it’ll be coming to many
more of our components soon. With that, hopefully
I’ve gotten you excited about material
components, the benefits they provide, and the ease in
which they enable these very sophisticated customizations. RICHARD FULCHER: OK, so if we
revisit these three apps again with all the customizations
we just employed, they feel much more distinct. They feel much more like
themselves, which is the goal. We haven’t changed any of
the essential structuring of the information. It’s all the same content,
all the same navigation. But we’ve added a lot more
of the brand’s character in through this work. And everything that
you see is still entirely consistent with
the fundamental principles of material design. We’re not introducing
anything that’s going to be unfamiliar
to the user. There’s still going to be able
to work through these systems. Crane is still making
use of bold color. But it’s flexible enough to be
able to tell a selection state from an error state as we saw. Reply is using a
different style of icons, but they’re still recognizable
and familiar to the user. And Shrine is still giving the
user cleanly separated surfaces so they know where
they can touch and how the surfaces
might respond. That’s the power of
material theming. That’s the goal we’ve been
chasing over these last couple of years. And starting from the
foundation of material itself, that solid material
foundation of good design and customizing the experience
through key attributes, which have a wide ranging impact
throughout the experience– today, we’ve just
kind of concentrated on three of our example apps. There are actually four
more at material.io so you can see another
range of different product styles and different
customization options to get the sense of the full
capabilities of material theming. And while you’re
there, you can also see how other real brands
are using material theming. So you can read about how
we’ve applied the material theme, the Google material
theme specifically, to products like Gmail,
News, Pay, and Home. And over the last
year, we’ve partnered with the stellar design
teams from Genius, Lyft, NPR, Pocket Casts, and Zappos to
help them bring material design into their products. You can see the studies
of how these partners are thinking about material
on material.io as well. This is just the start. We will be adding more new
components and new material theming options, new
guidance, and new examples on a regular basis. We’re very excited to see what
you do with Material Design. Thank you for joining us today. [APPLAUSE] And if you’d like to
learn a little bit more, we have sessions coming
up, about four or five different sessions, that cover
different aspects of material throughout the
remaining couple of days of I/O. There is a session
later today on stage 4 that goes deep on how you use
material to design and build across platforms. I’ve seen that session. It’s a very good session. You will probably
enjoy it as well. And we also have just
outside this stage is the Design and
Accessibility Dome. And we will be there
throughout all of I/O. Come. I’m sure you will
have questions. We are happy to answer
them there at the Dome. Meet designers from
the materials team. You can see demos of Material
Gallery, Materials Theme Editor. You can also get a designer
review for your app. So you can get a 15 minute slot
to talk through what questions you might have about material
or design in general. And we also are
going to be doing a series of short 10-ish minute
talks, kind of small form, on different topics throughout
the next couple of days of I/O. So once
again, thank you. And have a good rest of I/O. [MUSIC PLAYING]

Leave a Reply

Your email address will not be published. Required fields are marked *