Material Theming: Build Expressively with Material Components (Google I/O’19)

[ MUSIC PLAYING] YASMINE EVJEN: We’regoing to be talking about Material Theming, BuildingExpressively with Material Components. Oh, and I have the clicker. And I’m Yasmine Evjen. I’m a motif propose at Google. MICHELLE ALVAREZ: AndI’m Michelle Alvarez. I’m a decorator on the MaterialDesign Team at Google. YASMINE EVJEN: And in 2014, we feed Material Design as a plan for creatingbeautiful, forceful, and consistent digital produces. And with the system cameprinciples and guidelines. We use paper as ametaphor, something that everyone ispretty familiar with. Paper is something you interactwith typically on a daily basis. It moves when you touch itas well as casting shadows. And we kind of wanted tobuild upon this reality that was footed thatyou would understand. And we use shade surfaces andtypography to create emphasis to really give clearsignals to the user what they could do in a make. And with that, we hadsome style decisions. We used Roboto, which provideda great sans serif for Android to really build greatuser knowledge that were easy to scan.And we too supplied somecolor palette alternatives that really allowed reallygood pairings that seemed great in your UI. And with the Roboto typescale, and all the surfaces, and determine, and ourguidance around that, and our specified colorpalettes, “weve been” developed this unifieddesign organisation, that is actually unifiedall apps across Google, whether it was on mobile, the web, or desktop, as well as Android. And beyond unifyingall the apps at Google, we too amalgamated millionsof external apps that had launched working MaterialDesign on Android, iOS, and the web. And the compatibility wasgreat for usability. It allowed usersto easily navigate an app across programmes. And it was justreally easy to use. You looked at it, youcould recognize it, and you knew whatyou were make. But it also left littleroom for showing. In this example, wehave our Gmail app, which is a Google product. And on the other side isa competitor email client, and they look prettysimilar, right? Besides changing the colour, itlooked pretty much the same.So we queried ourselves, how mightwe allow for brand expression while maintaining theusability of Material Design? And that’s when last year, weannounced Material Theming. It supported moreflexibility for labels to express theirdifferent styles. MICHELLE ALVAREZ: So in orderto create Material Theming, we needed a playgroundfor these opinions. We knew that thirdparties were coming from all different contenttypes and contexts. And we wanted to be ableto support their needs. So what we did was createdeight hypothetical products, everything fromfinance to editorial. And we didn’t precisely createthis idea of a product. We developed a brandstyle navigate and a badge. And these really helped usdrive our pattern decisions. So we knew why we were makingcertain decisions in our UI. And when we firstly startedMaterial Theming, the relevant recommendations, we started with reallybroad journeys. This was probably themost fun I’ve ever had wants to play with UI. We explored the waysthat we could really push Material Design to its limits.We looked at bigbold typography. We explored this ideaof total color palettes and applying them towhole faces of the UI. We even look back someof that face allegory that Yasmine mentioned inthe beginning of the talk. And here you can see we’rechanging the different z-index of these faces. But “weve had to” reelthings in a little and look at there’sthree core areas in order to make sure that whatwe were delivering would be consumable andable to be used by everyone. So we had to look atour material principles. Were we still stayingtrue to our core the notions of Material Design? We had to think aboutcontent and context. And that was thinkingabout these labels and how people use these incontext of their concoction needs. And then lastly, andprobably most importantly, we needed to thinkabout the user needs. Not just what theproduct needs, but what your user needs when they’reengaging with that make. So this is one ofour case studies. This is Fortnightly, and thisis our editorial product. And we didn’t justcreate hero screens for these hypothetical products.What we did wascreate totality spurts, and we even exploredinformation architecture across all of thesehypothetical brands. This acces, we knewall of our ingredients were aligning to all oftheir sailing needs. So something that makessense for editorial, like a navigationdrawer, might not make sense for anotherproduct or another IA. Now we have Rally, which is our finance app. And you can seehow the UI changes to adapt for this content. So here, when the useris trying to engage with quantities andlots of content, we have more of a dense UIusing a dashboard and more abbreviated schedules. Recalling about the userwas super important to us when we were thinkingabout Material Theming. So when we created these brandslike Basil, a recipe app, we thought about, how is the user engaging with this content? And we anticipated, well, theBasil users are just looking for lean back browse content. So the component that wefelt was the most appropriate was the portrait list. It’s super likenes forward. The users can justscroll through and take in content ina really visual model. But then when we thoughtabout some of our other apps– this is our hospitality app–when the user’s objective was actually to drive deepdown and find the highest price for a flight, we abused amore practicality located factor, like a inventory or a poster wherethe user can examine the prices. And we did this all whileexploring visual meanings. So we looked atshape, and shade, and typography, and iconographythrough all of these labels. And we didn’t only do thisfor our hypothetical commodities. We did this for Google. And this is ourGoogle Material Theme that uses our proprietarytypeface Google Sans, our Google colorpalette, and our Google icons. YASMINE EVJEN: And we hadall these speeches, but we needed to createa nature to enable anyone to create their own styleswhile still maintaining that consistency thatMaterial Design supported. So we needed astarting point, a route to determine idiom accessible. We informed thebaseline constituents on the basis of the original systemand included brand-new components and expanded state information. And we also needed code. We hear you. We wanted a place to start wheredesigners and developers could be on the same page forenabling theming abilities. So we releasedMaterial Components, which are open source codeavailable on web, iOS, Android, and Flutter. And we recognized three ways tosystematically express style– typography, determine, and shade. MICHELLE ALVAREZ: So we’veidentified these three areas, but we have this component set.And we needed to find waysto inject these styles into our factors. So we took a look atour simplest component we have here, our button. It’s made up of a verse string. We can change that verse string. We can change thattypography and allow it to express your firebrand. The button componentalso has a container. When you start with thebaseline components, like Yasmine mentionedearlier, you’re starting with thisfour plunge area radii.But we want toallow third parties to be more expressivewith their button so they can change the condition. So this button text andthis button container can also change its color. And you are eligible to have thisreflect whatever label hue you’d like. So the button is apretty simple example of one of ourcomponents, but we have lots of components, lotsof more complex components. And we did this exercisepretty intensively. And it was reallyimportant not only to get all the designerson the same page around what the differentelements of the components were and how we could changethose parameters in order to express theming.It was also super importantthat we shared the present document across all of our studies sothat decorators, designers, PMs were all on the same pagearound what we were designing. YASMINE EVJEN: Weneeded a arrangement for both designersand makes to express and controlbrand at a global level. So we created asimple architecture. So we had this ideaof infusing modes, but we wanted a road toreally simply explain it. So we createdthese three ranks. The first tier is aset of the categories. Those categories eachhave a named of features, and those attributeshave appraises. And this was ourabstraction that we’ve created for MaterialTheming, something that we knew wouldbe abstract enough for decorators to understandand abstract enough to be applied to all of thedifferent programme thinking.But let’s look at thisa little less abstractly through our category organization. So the MaterialDesign type system is made up of a form magnitude. The nature flake are all ofthese different categories that you can useto create hierarchy with your sort in your UI, so everything from headline 1 to headline 6 and caption. And all of these categories mapto the same adjusted of properties and Material Theming. And these were intentionaldesign decisions that we’ve chosen as ways tobe express with typography. So we wanted to allowyou to be able to change the font house, length, load, character spacing, and text change in order to beexpressive with the type. So if we look at time onecategory, let’s say button, you’ll see that it startswith a set of values. These are the baseline appraises. You’ll get these valueswith the baseline components in Material Design. And here’s our button again. So we can see here, we haveRoboto Medium 14 point.This is what you’regoing to start with. But you can change those valuesfor your button category. And what we’re changinghere to Raleway Medium 14, quite same to Roboto, it has a good feel. And when I changethat button category, it is not simply changesin the one instance. It’s also going to changeacross all the categories that delineate to buttonin our constituent placed. This ensures thatyour typography is really consistent acrossall of your constituents. So we knew with these newMaterial Theming abilities, we would need to expandour recommendations in order to give more granulardetails around how to theme. So what we did was addedsome more form guidance.One speciman that wefound was a good place to be more expressive in UIis with big headlines. So here’s a place where you canuse funkier more display form typefaces. And it was better retains thatlegibility and readability because they areat larger sizes. We do have some don’tsin our specifications. Don’t use these reallyexpressive typefaces as really small sizes, because your readers won’t be able to read any of your UI. We have some moregranular details like urges in our spec. And this one, I judge, is important to call out. So I mentionedearlier that you’re able to change the occasion in yourcategories of your form flake, which is either sentence, upper/ lower, or all ceilings. And button often isan all caps category. And we do thisintentionally in order to really drive the user thatthis is an interactive factor that they can touch, and something’s going to happen when they do that.So if you are to change thattext case to upper/ lower or decision, makesure that you likewise render other visual cues– like here, we’reproviding color– to indicate that it’s still aninteractive part in our UI. YASMINE EVJEN: And we also wantto provide some resources you can start theming right away. And with Google Fonts, it is thelargest open root storehouse of typefaces on theinternet that you can easily embed into your weband Android products. And with that, let’s lookat building our own Material Theme, and let’s take a step atlooking at through typography. MICHELLE ALVAREZ: Cool.YASMINE EVJEN: So we founda typeface that we liked. MICHELLE ALVAREZ: Great. YASMINE EVJEN: Google Fonts. MICHELLE ALVAREZ: Off Google Fonts. YASMINE EVJEN: OffGoogle Fonts available. Tell us more aboutthis font time. MICHELLE ALVAREZ: Great. This is Raleway, whichI mentioned earlier. It’s pretty same to Roboto. It has a good utility feel, butit’s a little bit more playful, has some of those rounded curvesthat Roboto doesn’t quite have. It also is a little bit wider. So it was actuallyoriginally described as a flaunt faceused for larger sizes but then was expanded to smallersizes and have more values. So this is a pretty goodtypeface to use in your UI. YASMINE EVJEN: All liberty. But I actually wantto see this in action. We keep on talking about codeand that we obliged it is accessible. But I haven’t seen anything yet. So lucky for allof you, “were having”, starting today, two brand-new projections, interactive programmes on theweb, as well as on Android. And I’m going to give youa demo on how to use that. If you go to, onTools that Build a Material Theme– do it afterwards, after thetalk, after you watch it– you can go ahead and starttheming and customizing it through all of our componentsso you can visualize your them.And the two interactiveprojects on the web is built on Glitch, whichallows us to easily insure all of our changesthat we reached, and then on Android Studio, which is something that a lot of Android developersare already familiar with. So let’s actually take a look. So if we were to implementthis typography in the web, you would change yourmy-theme.SAS file. And you would import this, the Raleway typeface, as well as changingthe typeface clas across all of your factors. MICHELLE ALVAREZ: Are wegoing to go for the demo? YASMINE EVJEN: I think we’regoing to go for the demo here now. One second. Oh, yeah. Let me go back to theslide for a second. Where is it? Oh, come on. OK. All freedom, huge. Let’s go back to the demo. So we have this Build aMaterial Theme project that’s available on Glitch. And you can easily remix it. So it’s essentially forkingit and creating a copy that you can use and change. Lucky for us, I alreadywent through that process, and we have it all set up.So as “youre seeing” onyour right-hand side, you have the baseline appraises. And all of the components, they’re built with code. So you can actually go inhere and interact with them. It’s the real life code. So the changes thatyou make are actually going to be what yousee in your product. So let’s implementour brand-new type base. So we’re just going to commenthere, the Raleway, and scrutiny as our typeface pedigree. And you can instantlysee that now Raleway has been applied throughoutall of our factors. Now let’s go back to the slip. So we can also do thison Android very easily. And that’s by settingyour font family and then changingyour text image. So if we go backto the demo, you can quickly seethat we’ve already modified our textappearance and added Raleway for our typeface lineage. And we can see that we have allof our ingredients observable here.So let’s run it again tosee our alterations come about. And now you can instant seethat Raleway has been applied to all of the components. And again, all ofthese are interactive. So you can play withthem and know what your app is going to feel like. Let’s go back to the slithers. So this is alsoavailable on Flutter, and this is how you wouldimplement using Dart. And since we also have MaterialComponents available on iOS, this is how you would applyyour brand-new nature magnitude on iOS. MICHELLE ALVAREZ: Great. So now, I’m going to takeyou through that same system of categories, attributes, and costs and how we applied that to theMaterial Design Shape System. So our Shape Systemis pretty simple. It’s made up of what wecall our figure intrigue, and it’s made up ofthese three categories– small components, medium constituents, and huge components.And similarly to typography, all of these categories in the Shape System will mapto the same rectified of dimensions. And here in the ShapeSystem, we allow you to nip both the shapesize and the influence category. So here we haveour button again. Our typography isalready exerted. That’s Raleway there. And we can see the buttonmaps to the category small in our chassis scheme. And the values, whatyou’re going to start with, are those baseline values. So when you start withmaterial baseline, you’re going to be startingwith the figure sizing of four, and you’ll have thatnice rounded corner. But this firebrand and this themeis a little bit more mischievous and wants to be alittle bit more rounded. So here we change the values ofthe category of small constituent to be round and 20 dip.And again, when youchange that one category, it’s not that youhave to go into all of your other components andchange those specific determines. That vary will get appliedto all of the two categories that inherit that big list. We too supported someShape System Guidance, since this is sort of anew seeming capability for Material. But a good deal of the principleswere still existing in the core of Material Design. So strong differencesin shape we find certainly drive the user’s look. And this was the original intentof the move war button. So this is acircular button that lives in a world of rectangles. When you lookthrough a UI, there’s lots of squares, and appbars, and posters, and likeness. But then you investigate the FAB, and it’s this big circle in the bottom corner. And it truly drawsthe user’s attention, and they know that it’san interactive point. We likewise explored thisidea of asymmetric determines. These can be usedto draw emphasis. They should be usedpretty subtly in the UI.But when you do usethem, make sure you’re using them intentionally. Now this app is using ashape in the top reces to draw the user’s eyeto the navigation drawer. We also found that shape canbe used to communicate state. So this theme is using ashaped area of their poster to indicate that the user hasgesturally swiped and favorited this item. And it not onlygives a visual cue of the iconographyand the coloring; we’re too yielding that smallaffordance of the rounded condition in order to really drivethat country to the user. We do have somedon’ts for determine. This is one of them. Don’t be too literal withyour molds in your UI. This are likely to be confusingfor your consumers. They won’t understand that thisis supposed to be a button. I’m not sure whatthey’ll think it is. YASMINE EVJEN: But whatabout if my label is a truck? Don’t do it? MICHELLE ALVAREZ 😀 on’t make love, Yasmine. YASMINE EVJEN: And wealso provided some tools to help you start withdeveloping your influence scheme.And we have a in linecustomization tool available on material.iothat allows you to customize your radius as wellas your families, so if that’s cutcorners or rounded. And you can see how it getsapplied to the small, medium, and sizable ingredients. So you can really go in thereand change your figure planned. All claim. So let’s go, actually, andbuild this Material Theme employ contour. Let’s go to the demo. All title. In the brand-new interactiveproject, we can see that we havea theme summary view. And that tells uswhat our appearance arrangement is as well as ourtypographic flake and shade. And we have some handy linksthat join out to the tools that we just talked about.So let’s develop ourshape scheme, Michelle. I’m thinking for small-scale. What do “youve got in” sentiment? MICHELLE ALVAREZ: I think wewere thinking about 20 dip. YASMINE EVJEN: 20? OK. That’s a lot. But I kind of like it. It’s very friendly, round, congenial. Now let’s see whatthat was like? OK. That’s how it’s going to looklike applied to our factors. Let’s look at ourmedium factors. What do you think? MICHELLE ALVAREZ: Maybe more like 16. YASMINE EVJEN: 16, OK. No? 24 maybe? MICHELLE ALVAREZ: Hmm. YASMINE EVJEN: 16? OK. So let’s go to 16, and wesee how that gets applied to the medium constituents. And last but not least, let’scheck out the great factors, which is going to be moreof the piloting drawer that gets appliedon bottom or area. So what are we remembering now? MICHELLE ALVAREZ: Maybebump it back up to 20. YASMINE EVJEN: No, 36, 0, 20? OK. All right. Oh, look at that. 20. Perfect. So are we comfortablewith the figure scheme? You believed to be like it? We’re good? MICHELLE ALVAREZ: Yeah, looking good. YASMINE EVJEN: So we’ve got2 0 for small-time, 16 for medium, and 20 for huge. All freedom. Let’s go exploit it toour interactive campaign now and see how it looks. Oh, look at that. We have the codealready written. But let’s look at the slide togo back and look at our contour intrigue. As you can see, we decided to our 20 trough for small, and our medium components 16 trough, and our gigantic 20 plunge, which really obligates it a bitmore friendly and affable. And if we would applythis on the web, we would go intoour SAS variables. And you can easilysee that they’re grouped under small-minded, medium, huge ingredients that you can easily change. So let’s go back to the demo. Since we have allthat code written, let’s just uncomment it now. And just like magic, thunder, our condition planned has been applied toall of our ingredients. So you can see thatit’s already varied the radius for the button. Let’s go back to our slides. So if we’re going to applyour influence strategy on Android, you would go intoa shape.xml file.And here, you setthe shape image for your small-time, medium, and gigantic components as well as choosingyour angle pedigree. In this case, it’s rounded. So we’re going tochoose rounded. And then we chooseour area width. And let’s stay on thatslide for a second. All title. Let’s go back to the demo. So in the demo, you can seethat the code is available here, again adopting our cornerfamily and corner size. And let’s hit run to actuallysee these changes take place. All right. And now we seethat shape has gone through all of ourcomponents, and I’m feeling pretty good with this theme.I like it. All right. Let’s go back to the slithers. And Flutter is going tointroduce shape theming. It’s going to be coming soon. But this is how you woulddo this on Flutter and Dart. And we also have thiscapability on iOS through our Material Components. And this is how you wouldapply your contour arrangement on iOS. MICHELLE ALVAREZ: Cool. So lastly, we’re going totalk through our emblazon method. And again, our colour organisation isstructured in these same courses with the system of lists, attributes, and qualities. So our complexion method ismade up of a color scheme. These are the colorsthat get applied across all of your componentsin the UI, everything from primary, secondary, tosurfaces and backgrounds.The attributes ofthese categories are container-hexand content-hex. This is to ensure accessibilityand contrast fractions are congregating theaccessibility standards. So here’s our button again. We have our topic typography. We have our topic mold. But we’re still withour baseline colourings. So this is, again, theMaterial Design baseline. You’ll start with thispurple, but you can go in and reform these shades. So button delineates to ourcategories primary. And here we’re going tochange the coloring to more of a deep richer purple butkeep that typography white and ensure thataccessibility contrast ratio.So when you alter yourprimary in one residence at the global level, that gets applied across all of your ingredients. And we likewise included somenew colouring plan steering to our Material Design spec. So I mentioned primaryand secondary dyes. We find that theseare the best ways to inject bright, bold, branded colourings into your UI. This app here is using abranded hue posterior app disallow. And it’s using a secondarycolor as this sound of yellowed to differ against that off-color. One of the main principlesof color in Material Design is to ensure thatyou’re allocating semantic “ve been meaning to” your complexion. So in this theme, theprimary and secondary color are this nice deep purple. And the secondary coloris this pop of red “whos working” neatly together. But we also have a categoryin our color scheme that is allocated for error. And generally, an errorstate will be a red color.This is that visualcue to your used that something has gonewrong, and that red really reinforces that. But in this app’suse contingency, the blood-red is in relation to their brand storey. And they don’t want to conflatethe idea of inaccuracy and red. So what they did was selected analternate delightful orange coloring to indicate an errorstate in the UI. One of the last principlesof colouring that we really want to drive throughwith Material Design is ensuring accessibilityin distinguish rates. YASMINE EVJEN: And wealso added some implements to help you pickyour hue palette. We have a Materialcolor palette generator that allows you topick a primary colour, and if you don’t havea secondary colouring, renders some optionsfor you to choose from. But it also createsthis tonal palette that you can usethroughout your UI. So let’s build a materialtheme squandering shade. Sorry. Let’s go back to the slide.Lucky for us, wealready have a brand that we’re goingto be working with. MICHELLE ALVAREZ: Yeah. So this label, you can seethat its logo type is made up of this late violet background. That’s most of thecolor in this logo. And then it hasthis nice pop of red that’s on the top of the crane.So we’re going to use thosecolors that exist in this brand to apply to the color scheme. So the primary colorwill be this violet, and the secondarycolor will be this red. And again, theerror coloring is going to be somethingcontrasting, so it’s not contravene with thebrand expres. YASMINE EVJEN: And this is howyou would apply those dye deepens on the web usingMaterial Components for Web. So you have your themeprimary, theme secondary, as well as your theme error.Now let’s look at the demo. So we’ve already addeda lot of these values that we can quicklyjust comment out. And we’re going to instantlysee the changes come about. Oh. It’s starting to lookpretty good, Michelle. I feel like it’s missingsomething, though. MICHELLE ALVAREZ: Maybea background color? YASMINE EVJEN: Maybea background color. Let’s look at ourwonderful topic summary. And it relates out to ourwonderful palette, my Material palette generator tool. Lucky for us, wealready have a primary “that were going” just copyfrom here and insert into the tool, which providesa wonderful tonal palette. But we also have the secondary. So let’s just add that there. Great. Now we can see that this is ourtonal palette that we created. What about if we converted it to alighter colour, a lighter colour? What do you think? MICHELLE ALVAREZ: Ithink that’s great. The tonal 50 importance is the lowestin the Material Design tonal palette. And it’s great to be usedfor bigger splashings of color, like backgrounds.YASMINE EVJEN: All claim. Let’s try it out. Oh! So you can see, justby changing some emblazon, it certainly changesthe whole interface. And all of this is easilydone with just some few indications of system on the web. Oh, this is looking nice. I kind of want to usethis now in my produce. MICHELLE ALVAREZ: Yeah? YASMINE EVJEN: All freedom. Let’s go back to the move. And you would do thesame process on Android through your color.xml enter. You would determine your colorprimary, color secondary, your colour error, andyour emblazon background. So let’s go to the demoto look at this in action. Again, we’ve alreadyset our values. So we can quickly justoutrun it again and receive all of the changes take place. Just like occult, you havethe consistent theme that’s available on Android web. Look at that. That’s nice.[ APPLAUSE] And all of these projectsprovide a topic summing-up look. So you can quickly look at it, and look at all of your complexions as well as your chassis systemand your typographic proportion both on Android and on the web. This manufactures it really easy to, at a glance, look at your theme and say, hey, I think we wantto maybe reform some things. And you can do it in code. And you know that whateveryou as the designer see the developer isgoing to implement as well, because you’reworking off the same code base. Let’s go to the slithers. So again, you canimplement this on Flutter by changing the color schemeand changing all of your values for primary and secondary, surface, background, et cetera, as well as iOS. And both of these projectsthat we demoed today on the web using Glitch and within AndroidStudio are all available on tools/ builda material theme. Precisely go to You’ll witnes a attach in there. But all of this isavailable for you to start themingand playing with. And we’re really excited tosee what you all do with it. We’ll wait some time foryou to get that URL picture. But we’ve wanted to reallyenable makes and designers to have a great starting point. And through this project, what you see in the changes that you make are actuallyrepresented in code so that it’s actuallywhat you’re going to be seeing in your produces. And we really can’t see allthe wonderful cloth themes that you’ll bebuilding with today. So satisfy again, go to Check out the projects thatare available on Android Studio as well as the web using Glitch. And you can really seeyour topics come to life. And we can’t wait tosee what you build. MICHELLE ALVAREZ: Thank you.[ APPLAUSE] We’re too demoing the Build aMaterial Theme in our Sandbox. YASMINE EVJEN: Yes. In our Sandbox, which isright there, Sandbox E, we’re going to be demoingthe Build a Material Theme. And you can actually printit out, which is pretty fun. And we’re alsogoing to be asking– sorry , not asking questions. You’re going to beasking questions, and we’re going tobe answering them. So we’re going to have Q& A inSandbox E in the Boxtalk Q& A area.And thank you allso much for coming. You can go to material.ioto find the most recent as well as following @materialdesign toget the latest updates from us. And again, don’tforget to try out those implements and share with us. We’d love to see whatyou come up with. Again, thanks so much, everyone, for connect.[ MUSIC PLAYING].

As found on YouTube

Share this article

Leave a comment

Related Posts