Nick is an Android designer & developer who helps other designers and developers to understand and create beautiful material design apps.View the profile
Will is a software engineer on the Material Design team working on Material Components for Flutter and iOS. He earned his bachelor of fine arts from the Boston Conservatory ('08) and was previously the chief product officer of a startup in fashion and e-commerce. His husband is also a mobile engineer.View the profile
Jonathan is a User Experience design lead on the Google’s Material Design team. He focuses on creating a sustainable library of products, tools, demos, and documentations to significantly improve the way digital products are designed and built. Prior to joining the Material Design team, Jonathan worked on many different products across Google including Google Play, Android, and more. Jonathan earned a Bachelor’s degree in Graphic Design from Rhode Island School of Design.View the profile
About the talk
Come learn how to streamline your cross-platform development with Material Design’s new tools and open-source code—for Android, iOS, web, and Flutter.
00:05 Introduction to Material Design
02:11 Why choose Material Design?
04:13 Material Design website demo
08:05 Developer and Tools sections
10:49 Theme Editor live demo
22:16 More about Material Components
Hello, welcome to our talk. My name is Jonathan Chang and I'm a ux lead on the material design team. Hello, my name is Natasha and I'm a designer and engineer on the design relations team. And I'm well, I'm an engineer on material design. 370Z All right today. We're really excited to talk about how to build great material design products across platforms. Certificate what is material design given all the new announcements that we just made. How is it evolved through mobile before?
Material design is now an adoptable design system back 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 is really in listen and continue 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. No, I'm sure some of your very eager to learn more but maybe some of your still wondering if enteral 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. The Nichols demo or Suite of material tools that we built to make collaboration and customisation really easy and effortless. Then we'll 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 the troll the side. First material design is also for Developers. You've given us a lot of feedback. It hasn't been easy for you to apply and build apps using the trail design. Now it's material see me and all of the tools that we built to support this new capability. We're not on par and designers to create with an eye towards the 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 were supposed to talk forum. So using the toll design will benefit your users using multiple devices. We also understand that building high-quality products takes a long time. So not only were encouraging cross-platform consistency. But also we're providing a code to start developing on Android iOS web in Florida. Now we're going to put that to the test. So imagine building a screen like this
and probably all of your experts and prose 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 not making it easier than ever to design and build screens like this across platforms. And all that magic starts right here with a redesign site. The new site is now broken into design development tools. And each of those sections you will find all of the great resources that our team has created for you cuz I ain't guidelines tools research insights
open source code you name it. It's it's all there. We're going to spend some time checking out the site in Greater detail down. The design section still has everything that you loved about material design. It's all there. Nothing is fine. Inhibition, we're not 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 back on InDesign. So here you can see the articles that we provided for you and learn about system icons
generate your own custom color palette. Pick up Pie Face that works for your brand and really harness the power of shapes in your UI. The last section talks about material 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 retail as a travel app, sorry, 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 enhance into material system material foundation and material guy dies. Starting with the material system section. We're giving you the general overview of material metaphors. Turn 2 Foundation section dives into the foundation of UI practices, so it'll mention things structural things like color typography iconography shape. They are amor now the guy that is section gives tactical guidance on how to create a material product and the best thing about this is that all of his great design
guidelines guidelines or closely linked with engineering Now, let's take a look at some of the other features on the side that's going to be helpful for you when you're building your product. We know how having a detail spec makes the Engineering Process 10 times faster. And that's why we're providing this view called Speck fewer in the articles. Inspect your where now exposing all of the useful information about this image. Cutting 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 be the image only see the measurements text color shape and elevation see the different components that are used in this year why or even additional notes that we might have added? Let's take a look at this text annotation. Send this annotation. You will not only see the font name size and color but also a link to a Google fonts 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. Not when you
navigate to the Google fonts site, you'll be able to download and use any of the fonts that are used in her mouth. We also conducted research on the most effective ways to deliver the guidelines and we found out that interactive content increase the level of understanding for readers. So we're starting to introduce content that is interactive in our articles. Here's an example of material palette generator that is a place in line in the color article. Who interacted with this tool? You'll be able to learn about the improved color system?
So those are some of the new features that were adding to the design section, but how do you build all this? That's what you're here for, right? Does it all the section now Futures and has provide access to all of the open source code for Android iOS web and flutter. So while respecting the platform conventions, we wanted to make sure that are components Works across platforms and not just on Android. And you'll be able to play with these components in her 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 I say you don't you're not as familiar with any of this scroll to the bottom even more and you'll find tutorial to get started on this. Switching gears to the tool section. So the tool section has linked 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. The gallery gallery Mesa collaboration so easy and so
seamless nickel give you more details about Gallery in a minute. On the right you'll have an access to the five full sets of style ice icons available in range of formats 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 possible ready, the female leader is a plug-in that lets you express your brand systemically through elements eye color iconography typography and shape. And through the theme
editor you'll be able to take the themes that we provided for you and customize it to make it yours. The set of components can be used in your designs right away. Also, what's great about the theme editor is that Oliver guidance has that are mentioned in our guidelines is directly integrated into the stool. Know 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 and death about using the theme editor. Thank you, and shy. Thank you. Johnny. Joey seeing how the material system foundation and guidelines makes it easier to bring you a unique brand into your apps. I'm going to walk you through an example of how you do this to really demonstrate and how easy it is to do and I'm especially show you how the new material tooling makes this process from design crew 2 development much that stuff. So I was on the team of an Olsen team this year who designed and built the
Google app, maybe some of used it as you may have noticed that we put some you can plant a tree in that like will using the ultimate power. Hey with the inset Bob but we didn't want to use all of the new material theming capabilities cuz we didn't want to let you know it's will the show for the big lunch today. So what I'm going to do today is walking through some possibility that have material theming could be applied to bring the brands of Google IO much deeper into this application. So Google it said
that with you everywhere around you. I also picked up on metaphors from the software engineering. Well, it seems like layering and stacks and when you talk to inspire the illustration style as a kind of so how do we apply these elements into the app design? So here I am in sketch. This is my design file generated by the FEMA to the we can see the team that it has generated a bunch of stuff for us. It's a great a bunch of components a typography and scale color palettes elevation settings and icons and someone if I switch
over into the components do you hear? You can see that that face be a one-to-one from all the components in the material guidelines and generated for me and is sticky she had ready to use in my designs. Does everything in hair unit from the app has to pack drops tooth obstacles? You name it fits in there? The best thing about these components is that they're aware of the material feeding system. Let me show you what I mean by that. Asus Maximus V Gene and open up the phenotype from the sketch plugins menu. We can see that is being County set up using the io, the
Indigo primary and a teal accent color. If I go into the color settings on the primary color correction hair and I want to change its primary color either by dragging around or like in putting a hex tie directly affects. Tell me what you've written. Possession is United terminal pilot. It generated these ten different times of color just from that one color. I chose. This is pretty cool. And it's not just you know, you taking the cue I selected an ultra in the brightness and getting kind of a pot of that way is that keep trying
to the algorithm behind this is trying to imitate how designers pick colors using by to pick a nice color palette, which hopefully will work great for either applications. Cybex lights in that you can see that are in the same as being updated and if I switch back to the complainants to stick a sheet, you can see that all of these elements are aware of that change in the theme color and it changes rippled out into all the elements. You can see pick up the primary color and a Talkatone for the status bar on sorry for which is pretty powerful. How to use a Smith Library generated
by design using those components in the liability medicine generation for me. If you haven't used sketches Library checks, it's pretty cool. It's basically a way to share component between different design files or amongst your team is very powerful. Do you access the library using the sound of sketching set menu and Ikes go down to this lyrics are generated and you can see right here that we just saw in the sticker nicely arranged in a tree struck so we can choose the component that we want a different there
into the complainant even down two different states. We can find it can be in so they want to add a stop to my design. I can just grab one from the menu and drop it into my design a note on the right infect the pain you can see office over lights allow you to change things I be like on and so on her cycle. So just by generating three somatic cells huge array of component available to use. Goes against X and the library generated and how to use Music ly let's talk like customizing somebody promises to
be interesting to the iom brand is shape. I want to take some inspiration from the dead body found in Baseline. We have to turn around a corner sofa shape switch over to the angle setting is dead deselect free of these corners and I crank up the corner radius on the top left the hair on my take inspiration from Atlanta to go to bed that deeply into the component in my product. So if I hit save in the library and switch over to my design file, and I letting you know that the underlying library is being updated as going to give me a
distal. Most of these are all the components going to be affected by the changes so I can choose whether or not so now any component which is aware of the shape system is going to be updated. And likewise on this right thumb down here. It's check away. Some of the components in the system of a different variants which can or cannot pick up on the tram system example is a 5 which is using the standard circular presentation settings. I can go down to a
different alternative if I want it to be aware that I can pick up on the diamond which will pick up on the different check to see if I want to pick up on the Promises. Speaking about variations. We've introduced a new variants of an text bills, which is going to be performing really well. We'll come back to see him. So what's my design I can go in and slight what was this sounded kind of underlying I can switch out to a different variant from those available in my sexy outline.
Rick Braun I think we might just take some inspiration from your developer developer event some types of inspiration from development environment and try using ammonia Spice 1 and see how that works with a Google brand. If I go into the typography settings in a few minutes, so you can see it's time to meditate generation for me throughout my design if I knew he was on to hide hair and such for money spacing to use Ivory bucks a month ahead one of my favorite. It's a smoker out everywhere. The other plant was used all the different places, but I'm using a different change it
you can pick it up on sides and tracking white. I want to switch to out to a different pump to change. So that's all. What's going on? Here is a viennetta is pretty smart about fun. It looks at the fungus characteristics and optically correct for them. In order to create a minor scale the what it means if your phone if using has a different X light or straight white or something like that and it'll look at that and it will adjust the size that uses for the difference in the scale scale
for you. Oh death by selecting upon a generator scale for me, which is pretty amazing. So he has been updated throughout my design. I was using the other fun and family before you can see it being updated to my new typeface. and three changes looking pretty good to me. I want to share them with the rest of the team using the material plug-in gallery and collaborating so I can the plug-in I can upload to apply to Gallery collection. Someone says uploaded and is ready to be shaved it seemed so I got to meet you around which I can share with my team.
In gallery I can get overview of my design what I can update new iteration so I can see how my does my wife is a vole I can come in so we can share this with people and have a discussion about different design features a brother show you one of my favorite pictures, which is the inspect mode now inspect mode makes it really easy for a design has to hand off to developers developers get all the information that we need out of a design landscape mode. I got its impact on the right and then when I found out was select any item in the design will give me
body and the puppy am in this election and all the type Base information. It'll save pick up on any icons to use from the material things that any material icons will link you out to the material iPhone site so you can grab the access that you need from there. Festival diary understands of the components that material the definitive to create so it's not just going to say that is a 5 so it will you can see a picture of a lynx a reference documentation component that they need to be
given any promises changes that you've changed only to find it is well enough you can implement this between the components of food between be medicine and material design components mean you open the same components which means that you're saying used this component with these trying to change it to a guessing game. So the changes look good to me. I'm getting to open up the hill and let him know that he changes if you will. Thanks, Nick. Is he great? So I'm an
engineer and Nick has just shared with me this Gallery project. I've gotten a 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 MDC material components are an open-source framework for implementing material design. There's an empty seat for Android for iOS web and flutter. It's the same code Google uses in its apps dozens of components and they can also do the cool things that Nick was talking about earlier.
And since they're open source, there's no mystery there not magic boxes. Everything is available to you to look at her customized. And we invite you to please contribute code. So let's look at these new text field and material components. How do I get them Will adding MDC to your code bases 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 endowed module on flutter. You're done material components come built into flutter
and on iOS you can use cocoa pods added to your pod file. Let's look a little bit closer in iOS and how we implement the new text fields. So every text field in MVC iOS is two parts and input and the controller. We're going to add MDC text field and an outline controller to our that We can lay it out using its intrinsic content size. And maybe set the uitextfield delegate. As a 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 material components.
When you go in to change the controller class from the old class to one of the new fancy ones like outline and you're done. By the way, these text fields are much better and much more performance than the previous designs. We did a huge amount of research in order to come up with these optimize designs. A lot of research and it turns out that in long form 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 said 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 not Stout line with an SVG with a path of class MDC not outline pass and an element of in DC knocks out line idle, and don't forget the modifier class MDC text field outlined it couldn't be simpler.
I don't flatter you change the outline to border of the border to Allied now. I'm a little biased because I work on a flutter but I think flutter is the perfect way to implement material design 2 cross-platform you do it once and then you get both IOS and Android and NBC's baked Ridin. 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 buttons card shifts dialogues navigation tabs in cripples. There are dozens of them now. And they're all available to you today at Material. IO / develop. And since designs never done more added all the time. So today we've shown you the design resources available to you today on material. IO. a house theme editor Gallery in the material tool Suite help you customize your designs for your brand and how material components make it easy to implement those designs across for platforms with precision and use
so if you're here at iao, what else can you do? You can go to Art design Zone where you can get design reviews and demos and listen to some box talks. And you can also go see the talk cold Beauty code beautiful. You are white 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 review can come to us to ask questions about how to implement material design in your flutter app. Thank you.
Buy this talk
Access to all the recordings of the event
Buy this video
With ConferenceCast.tv, you get access to our library of the world's best conference talks.