Duration 27:45
16+
Play
Video

Customize Material Components for your product

Rachel Been
Creative Director, Material Design at Google
+ 2 speakers
  • Video
  • Table of contents
  • Video
2018 Google I/O
May 8, 2018, Mountain View, USA
2018 Google I/O
Video
Customize Material Components for your product
Available
In cart
Free
Free
Free
Free
Free
Free
Add to favorites
79.26 K
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About speakers

Rachel Been
Creative Director, Material Design at Google
Josh Estelle
Software Engineer at Google
Rich Fulcher
User Experience (UX) director at Google

Rich Fulcher is a User Experience (UX) director at Google. He leads the team responsible for the design, development, and tooling for Material Design. He previously worked on Android apps and framework, and has designed consumer experiences for TiVo, Sirius, Dell, and AOL.

View the profile

About the talk

Take advantage of Material’s new expressiveness and adaptability by learning how to customize Material Design Components and quickly build beautiful products for Android, iOS, web, and Flutter.

Share

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 Chucky. So, hopefully you enjoy that we are going to talk about material theming which is material designs new approach to customizing apps. Power bi 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 was a big Focus for us in this work. We want to make it faster and easier to

build custom and approved 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 will cover both halves of that. We launched material design in 2014 as a way of creating a unified cross-platform set of experiences. Was it design system? Not just for

Google not just for Android but for everyone and we wanted to be able to Span mobile desktop been 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 year's material Design Awards. So many of these great experiences from The New York Times to Airbnb to blinkist feed because the fair 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 experience. Without couch them without compromising a sense of predictability for 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 color type and shape. Today's talk we're going to walk through three steps involved in using material theming first. Rachel's going to tell us about the design system itself and how its expanded to include material theming will go a

lot more detail than we're able to cover in the keynote there. Then Rachel and I are going to walk you through a set of different examples of how you can save material themes for different types of apps in 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. Okay, let's talk about the design system. So are 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 surface is still create a really predictable usable environment the user. Combined with things like a clear elevation model to finding service relationships to use or intuitively understand 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 as you might have noticed. I'm introducing things like the bottom knobs and this year.

I bought at the bottom a part, but you probably saw on stage and we'll see in her presentation. Strengthen the usability of many of our componentry based on user research and material community example last year. We released a new text field component to this ability and discoverability within this component. Starting today in the material guidelines will feature a seeming section these section showcase how components can be easily customize 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 does is it Cascades customization 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. 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 were introducing guidelines and tools bring any color into the material design system a new tool in the guidelines create beautiful material

pallets generated from any color and gives you additional options for harmonious colors to add your Pilots. You can also generate pallets in the material theme editor better to know takes this a step further applying colors to the appropriate componentry across your symbol Library. It also helps check for accessibility using the full pallet to provide alternative colors that meet accessibility standards. So let's talk about type. We introduce the same customization possibilities ography in 2014. We released a comprehensive Roboto type scale that mount to componentry today

with the material theme editor. We can create beautiful type scales for any type face. Not just Roboto. These scales are optically corrected to work in material components mapping again across your entire symbol Library. Every shape today with the launch of the theme editor we're introducing the ability to systematically customize shape so that round or corners or custom cut detail on some of your services immediately apply across all of the services within your design. And lastly iconography. We've been building our comprehensive set of Icon since 2014 resulting in a collection of over a

thousand icons today. We're not asking for additional sets of icons expanding the visual range of the of the original set available on material that I owe more 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 school is Rich mentioned in the in the talk that helps Bridge 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 are open source components for iOS Android web and flutter. So let's go deeper with you make we want to show you how efficient customization can actually be. So just so you know, we test material design by creating but studies that showcase are sinking making sure our system works for a wide variety of experiences and products and Brands you'll see these studies used router updated guidelines a lot reply and email app and shine a

Shana Tova. These are this visual shows how they would originally appear free material payment. When we pull away the content, you can see how similar the structure and the visual design of the screens are navigation on the top relying on color blocks to really create a differentiation from each other cities experiences and brands are different coming out of the user experience. Let's use material theming to better Express East Grant. I'm going to start with an app called Crank travel app that helps users book and find travel lodging restaurant

options functional using components such as text Fields best selection controls to book a trip using beautiful image list to Showcase and browse content. Chris Brown 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 exciting. What's a personality starts with a color decisions cranes primary colors purple uses variance of discolored and distinguish different UI elements create contrast and cream secondary color is

a bright red. This red is used for important information and selection within this experience. The primary purpose of main color of the buttons and the secondary colors really used as I said before for selection controls and really important typographic elements and prices. What do we use bread for typing selection controls? What about air estate's very observant default color red. Are you going to find your own sew-in side of bread does orange as a favorite color to this way the Eric Holder called attention but isn't associated with a brand identity

crane uses to styles that you'll see here. This one is the lighter-weight outline text field that use for longer scrolling forms. This other text field is used for inputting search and user preferences. You can combine the two Styles save a custom shape with rounded corners and use the brand colors the iconography and the typography at the park. And lastly you mentioned cranes emphasis on editorial content crane uses a masonry style grid list or photos maintain their aspect ratio. So if they show as much content as possible, the image was customized to

display text labels with each item custom padding has been added above and below the item. Okay, Josh your designer is giving you a beautiful design. Can you make it Well, I'll see what I can do some 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 are 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 primarily done this through material components or MDC are 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 a nap a Top Hat Bar tabs a few text fields and an image list. This is what it looks like before. I begin customizing anyting these Baseline Styles will give her users a great user experience right out of the box. But today we were talking about customizing material 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 in the 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. Well all-mvc components will automatically pick up and adapt those colors. We just to find you can also customize

things whenever necessary. Default two colors that expect there on your default background color. However, in this app the tabs are part of that top at bar at what uses the primary color as your background the default black the Tams use is too dark to put on top of that time 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. Your colors are are are clearly applied across the top at bar at the tabs. And the text Fields image list MDC gives us a simple standard grid very easily. But for this product less regular masonry masonry grid This is how the standard grid was defined. Very easy, very simple. And there's the only changes necessary to turn it into a masonry call and Leon. So just a little bit and you get that that different layouts looks like this. And that's it. That's about 10 to 15 lines of code. That went from our Baseline book. To this

and then a few more tweaks and will have the final design. All right, what else can we build? But Josh, let's do another let's go forward to our e-mail app reply replies, Caesars isn't especially complex. It's an email app. It wants to be clearly organized and wants have legible. Typography. Once I'm straightforward navigation replies brand is focused on friendliness. It's confidence and maybe 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 and Sivan been kind of Nest it into the the app itself with that nice little cut. Doing that increases its prominence of the key action as are fads 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. But prominent uses the reply logo to access a traditional navigation panel. You might also notice 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. These icons are still immediately recognizable. We haven't changed kind of the way that would draw the symbol that user will still recognize it from other experiences across the system, but we have stylized it. The entry chips for the address. He's in the middle of the screen hear those also use custom color and typography of the layout elements instead of being insects within the chip as it would be for the Baseline presentation. We customize it to be a bit larger completing the rounded shape and give me a slightly better chance of

actually Bates Motel who that is. A key component of replies style is way it employs employs typographic scale. It needs to cover a lot of difference. Use cases are tasked related to this very text Heavy application. So we've done customization here as well. We've taken the default Roboto replaced it with works and 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 a bald head lines and less emphasized

captions and body text increase the scan ability of the content and you can see that really clearly and if you like the messaging list here is a clean visual hierarchy that users I knows how to jump a very rhythmically down the page to catch the different titles that are there. On the cards themselves with customize them to use sharp corners and we've decrease the padding between the card 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 hewing that these are different surfaces and that the user can reasonably expect they could could perform swipe gestures on it in this case either star or delete one of those messages. That's a lot of customization and just build it. All right. So I already showed UMBC web Surfer reply. I'm going to bring you through MVC Android one of the beauties of material components. Is that no matter what platform is building for you have a consistent set of components available the same patterns

features theme ability, but still very much in line with the pair that the platform specific paradigms that your users are going to expect. Here on Android wear the same kind of material theming for color. We Define our theme inheriting from the material components theme and Define our brand colors. This defines all the colors that will flow through the app styling both the MDC Android components, but also lower level UI elements provided by the Android framework. No 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 Sands is the typeface for reply. And this is all you need to have that fun downloaded on the fly whenever necessary for your app. Once we have the font, we have to apply our material type scales that are cooling will help you determine here. We redefined the headline one text appearance. To use work Sans with a a light textile. We can redefine the entire type scale and Link it up to our theme

so that all of the text appearances update across your app. Some of those changes to our theme we see replies colors in typography permeate through the components and the various views of the app specific components first chips chips can be tremendously versatile and useful but also quite complicated to implement well and consistent when he's 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 and type

definition. 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 take forever to figure out how to build it did take a while, but we got that for you, too. Here's the bottom at Barnes and floating action button where they would go in a coordinator lay on automatically pulling in your theme colors and type. It's also worth pointing out here. We're using our new material two-tone icons is icons are available on material. IO and are ready to drop into any Android project.

That's reply what else? Okay, will do just one more time. You're getting the hang of it by now, but I want to show off a couple of other aspects of this system the final app that we're going to look at is called trying so trying is 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 Muse has fairly minimal contrast in this case

cuz think about what a user coming to this experience is looking for they would engage with the content. They want to be excited by the different. Where's 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 buy that add to cart button and hit it when it's time for them to make the purchase. So you're balancing kind of content browsing and also this more specific task execution. So with that mind shrines brand actually receives a little bit content and key actions go forward.

Where Shrine does assert its brand identity very strongly is in the way that uses shape. Mute Sharp Cuts on surfaces like the buttons and on larger sheets of a 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 zspace and how the user might be able to interact with them in different ways. Tell 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 that users. Actually. I'm going to engage with his going to reside and then the shopping cart sheet, which is actually tough almost entirely off screen is foremost and it just gets out of the view when it's not needed. On tablet and desktop shrines primary navigation is through tabs and in keeping with the emphasis on storytelling through shape were using a highlight indicator that takes a custom shape and draws it

behind the active label. Okay, last time Josh once more. Okay. 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 to find these colors and trust that we've applied them in the appropriate places across all the UI elements. The first shrine I really want to focus on this shape customizations this one of the area's I'm really excited about pretty tricky to implement these things but we ain't making adjusting shape and

applying it to your components as simple as steaming any other aspect of your design. Gear for sure. I will 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. 8 pixel cut applied to every corner of the button. And here you see a bigger 32 pixel cut only but only apply to that top left corner of the card. This takes care of a ton of complexity and making such targets behave correctly Ripples and shadows. If you're in the right place and with all of this

you get a very easy interesting way to apply custom shape across everything you do. Shape is still a work-in-progress. I showed it to you. He replied the buttons and cards will be coming too many more of our components soon. Hopefully, I've got you excited about the benefits they provide and he's in which they enable these very sophisticated customizations. Okay. 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 all the same contents all the same navigation, but we've added a lot more of the Brand's character in through this work and everything you see is still entirely consistent with fundamental principles of material design. You were not interested in seeing anything that's going to be unfamiliar to the user. They're 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 us election state from an error State

as we saw replies using a different style icons, but they're still recognizable it to Miller to the user and Shrine is still giving the user clearly 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 experience three key attributes which have wide-ranging impact throughout the experience Today, we just kind of concentrated on

three of our example apps. They're actually for more at Material. IO and so you can see another range of different products 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 apply the material theme the Google material things specifically to products like Gmail news pay and home. And over the last year we've partnered with the Stellar designs games from genius lift 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 that I owe 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. And if you like to learn a little bit more we have sessions coming up about four or five different sessions to cover different aspects of material

throughout the remaining couple of days. If I owe that there's 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 very good session. You will probably enjoy it as well. And we also have just outside. This stage is the design and accessibility down. We will be there throughout all of Ayo come I'm sure you'll 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 material theme editor. You can

also get a design review for your app so you can get 15 minutes lot to talk through what questions you might have about material or design in And we also are going to be doing a series of short tennis minute talks can a small form on different topics throughout the next couple of days if I owe? So once again, thank you and have a good rest of my life.

Cackle comments for the website

Buy this talk

Access to the talk “Customize Material Components for your product”
Available
In cart
Free
Free
Free
Free
Free
Free

Access to all the recordings of the event

Get access to all videos “2018 Google I/O”
Available
In cart
Free
Free
Free
Free
Free
Free
Ticket

Interested in topic “Software development”?

You might be interested in videos from this event

September 28, 2018
Moscow
16
159
app store, apps, development, google play, mobile, soft

Similar talks

Nick Butcher
Android designer and developer at Google
+ 2 speakers
Will Larche
Software Engineer at Google
+ 2 speakers
Jonathan Chung
UX Lead at Google
+ 2 speakers
Available
In cart
Free
Free
Free
Free
Free
Free
Jen Devins
UX Lead Google Accessibility at Google
+ 3 speakers
Bethany Fong
UX Lead at Google
+ 3 speakers
Catherine Idylle
Interaction Designer at Google
+ 3 speakers
Andrea Wong
UX researcher at Google
+ 3 speakers
Available
In cart
Free
Free
Free
Free
Free
Free

Buy this video

Video

Access to the talk “Customize Material Components for your product”
Available
In cart
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
558 conferences
22059 speakers
8245 hours of content