 What's up, guys? In today's episode, we're going to take a look at Google Material Design, how you can build beautiful products faster. I'm going to go over it as quick as I can, and don't forget to stick around to the end. I'm going to share you a tip that'll save you loads of time. Let's go. What's up, guys? In this episode, I'm going to give you the quickest overview of material.io that I possibly can. So let's get straight into it. Links in the description. What is it? Material Design is a design language created by Google. So we know in all these big companies at the moment, there's design languages going on. I helped develop the ones for Barclays. And what it is, as a designer, you'll go into these companies, and you won't be able to go in, change the buttons, make Barclays red, or an example of anything crazy like that. All this work's been done. It's been the zone to keep, I guess, the whole thing in sync. So you're going Android. It'll be a better user experience because everything will be the same. This is Google's version of it, heading over to material.io. That's the website. And it's good as a designer to understand all of these things and to understand what it's all about. On the website, they've gone through a lot of pain in creating really, it's the best documentation in class that I've seen. And what they do is they tell you everything about Material Design, what it is, and how you can get started. So you can go in, you can see what's new. So what's new this month is they've got a new dark theme. So if you're making an app, dark theme is the hottest thing at the moment. They talk about all of the different colors you can use, how they break it down, they talk about where your toggle should be. And a lot of these things, I get people coming to me show me designs, and they say, hey, can you check this out? And a lot of the time people waste time really in reinventing the wheel on things just to be a designer. But a lot of things are designed thinking rather than design application. So you should be thinking about the user flow thinking about how your app works. You need to understand material designers of designer. And then the outcome is actually quite quick. But all of that knowledge gain takes time by reading stuff like this. And you know, by you checking out this overview, it's a good introduction to it. So we can have a look at what the foundation is first for material design and how the whole thing is based is based on real world physics. So a lot of it is to do with depth. So there's different layers on the applications and those layers cast shadows. So it's not 3D, but it's it's more like drop shadow ish. If you go on here, you can see how when things are elevated and on layers above other things, the shadow acts like it does in real life, they did a lot of research into this. And it's something that you really need to understand all the dos and don'ts about how things are on in the physical life here. Then they talk about elevation and how you know, when something slides over something else like a menu slides in, all of the shadows come into play and it's it's kind of like science in a way. It's all the doing is it's trying to mimic the real life. And whenever you're designing something for Android, you should really check it out. And before I say that, if you want to develop for Android, check out Android Studio developer.Android.com. It's something that you can take these designs that you do in whatever format you put them in. It's got a visual editor in there. If you know a bit of code, it's something that you can it's something that you can definitely check out. So that's developer.Android.com. Then if we go in, we can have a look understanding the layout, how the grid works, how the pixel talks about pixel density on different, there's different resolutions or displays. It talks about how Android works all that out. So you can see if you design something, it's the same size on the different screens. That's something that Apple did quite cleverly. So I remember designing for the iPad one and then the iPad two came out and it was double the resolution of the iPad one. But that's something that Android have nailed here. Then they're talking about like responsive grids and how, you know, different, the same app can work for a tablet or a mobile, different sizes. So you've got your grids in here. Then Android talks about navigation. And, you know, you've got the slider menus, you've got bottom bar menus. Don't reinvent the wheel here because you just won't be able to use it anyway. So understand how all of these different menus come together and create a beautiful experience. Then we have color. So we talk about the different colors within Android Studio. There's different places you can go. So they've got this theme editor. As part of the resources, it's a plugin you can download for Sketch. So you can put it in, you can put your own colors in and it helps shape the identity of, you know, of material design. Like it's not, you're not all stuck to these greens and stuff that Google use. Like you can see here, changing the color palette changes the bottom and so on. Then you can check our components. So you can see things like all these top bars. You can see, you know, you can see cards, tables, you know, so much time I spend on figuring out tables, when I've been working in companies before, dialogue boxes, sliders. I mean, there's so much stuff for you to go in here and understand. And the fact that it's all been done for you is something that you should praise. You don't need to spend a year making something like this. But that is honestly the amount of time it takes figuring out things like menus and even simple things like lists, the amount of time that they've got into doing research for it, making sure it works, you know, buttons, they've got all the styles here. You know, there's little, it's quite cool the way you can, you can change it here so you can see what it looks like with an icon or not. That's all in material design. Then it's got its own whole type system. So whenever you're designed something for a digital device, you have type hierarchy. So H just means heading, you have heading one to six. And that's just your main headings on a website. So for this, you can see like these big titles are all probably H3 or H2. The main title on your page is a H1. And then you have body copy here, which is the main font. Then you'll have caption here, which is a smaller version and so on. You just need to learn all these, all these different styles, but you can download the fonts that Google use from here. They've also gone in, in this new release talking about sounds. So little nice little dink, so that might be a little bit of Zelda, but nice little dink sounds. So you can, you can understand when to use sound on a website. Never really use it as a background. It's a bit too intrusive of someone's in work. They don't want French rap to be blasting out over the speakers like I did for a university project once, which yeah, I'll never use sound again. But you know, if you add something to a cart, maybe you can have a sound, which is a bit reassuring. There's a whole, you know, there's a whole thing on designing little app icons, you know, a lot of work goes into them. So you might not think about looking on it, but look at how this mail icon was made. First, they actually did it in real life. Then they looked at the lighting of it, because a lot of this is a lot of material design is lighting. Then they did this prototype and then they added color onto it. And that's how they got, that's how they got that design. So you look at it and you think it looks simple, but it's actually not on a lot of folk goes into it. And then here you can talk about how you can make your own design different shapes to use, where to put it. It's something that you need to know when you when you're creating things like icons. Then, you know, there's all about how to work with shapes. You know, different shapes can be used for different things like this cut out here at the bottom. Then they have these, you know, just different shapes are used for different things like this around the corner might be used to indicate someone's been selected or not. And they have a whole philosophy around there. You know, there's iconography as well. So you've got all your system icons. So don't bother spending time making a shopping cart. Google have their own version of that like here. They just have really simplistic ones. Don't make it look like a fun make it look more geometric. A lot of this is basic shapes, basic geometry. Other things to think about is how motion is used. So sort of the think about when you're designing these tools, you can add motion in now. So maybe try and make it as realistic as possible. So it helps your developers out. But, you know, they can't work magic. They have to work with the animations that Android Studio allows of them. And as a designer, it's good to understand all of that by checking it out here. And and then the last thing that they have on here is about interaction. So pinch and zoom, gestures, what, what type of things to do. So they talk about what to do, not do. So don't delay it. Like we've seen on a lot of these websites now where someone follows you around with delay. It's something that I really, I really don't like. They talk about indicating gestures. So little hides and stuff on a website. I think it's just, if you're a designer, this is like a godsend. It's something that is an unreal resource for you. If I was designing for Android now, I would spend a whole day or a week learning this. And then what I make at the end, it might take me a few hours to make. But compared to like spending a week messing around with it and half the stuff I won't be able to do anyway, I think that's a better time. So work smart, not work, you know, doctors work for the sake of it. Spend your time doing this research. And now what I promised you, it's going to save you loads of time. If you're working under Adobe XD, it's also got this for Sketch and for Figma. Going over, going over to Adobe's XD page, heading over to UI kits, material design, click get the kit, then open it up in XD. And what the good people at Google have done, they've spent the time and they've made for us designers all of these interactive things, all with layers, all beautifully done. It's going to send you so much time making a page. So, you know, you can just click and drag it over there, put it on there, move this button bar in, you know, you can make a page so, so, so quickly. It's all been laid out properly. This is something I spend weeks and weeks and weeks designing for different clients for their own versions. But if someone comes to you for an app design, bang, you've got all this done, change a few colours, then spend your time as a designer, thinking about how the system works, thinking about the design, rather than spending time fumbling around, remaking all this stuff. Great for university students. It's going to look great when you put it together in your portfolio. Guys, I hope you enjoyed today's lesson. Let me know in the comments what you think. Are you going to be using Google Studio? If you haven't already, check our school.antonycomboy.com. I've got loads more in-depth tutorials like this. There's a little course on there that will get you up and running in UX and UI very, very quickly and you'll get a certificate at the end. There's even a growing community on there where you'll meet lots of designers like you. So, go over there and check it out at school.antonycomboy.com. Think about subscribing to the YouTube channel. I'm going to be putting out lots more content like this. Let me know your content ideas below and until next time, keep designing.