Build great Material Design products across platforms (Google I/O '18)

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
[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]
Info
Channel: Google Developers
Views: 61,063
Rating: undefined out of 5
Keywords: type: Conference Talk (Full production);, pr_pr: Google I/O, purpose: Educate
Id: Ty6VjgVHiko
Channel Id: undefined
Length: 28min 11sec (1691 seconds)
Published: Tue May 08 2018
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.