1 00:00:00,000 --> 00:00:04,809 [MUSIC] 2 00:00:04,809 --> 00:00:08,994 Before we start building an app, let's get familiar with Google's Material Design 3 00:00:08,994 --> 00:00:13,200 system by looking at case studies and reviewing the contents of the system. 4 00:00:13,200 --> 00:00:16,470 You can find a link to Google's Material Design website in the notes 5 00:00:16,470 --> 00:00:17,740 associated with this video. 6 00:00:19,340 --> 00:00:23,110 Material Design is based on the principles of art and design, but 7 00:00:23,110 --> 00:00:25,700 it's backed up scientific research. 8 00:00:25,700 --> 00:00:28,820 Material Design is inspired by physical textures, 9 00:00:28,820 --> 00:00:31,410 which is where the name material comes from. 10 00:00:31,410 --> 00:00:36,770 It communicates using print design methods, like typography, grids, space, 11 00:00:36,770 --> 00:00:42,670 scale, color, and imagery, and it also communicates using motion. 12 00:00:42,670 --> 00:00:45,940 We won't be animating anything in our design as that's a slightly more 13 00:00:45,940 --> 00:00:46,810 advanced topic. 14 00:00:46,810 --> 00:00:49,130 But if you'd like to learn more about that, 15 00:00:49,130 --> 00:00:52,250 check out the notes associated with this video. 16 00:00:52,250 --> 00:00:57,150 Material is meant to be cross-platform, so although we're using material to focus on 17 00:00:57,150 --> 00:01:01,040 a web interface, you could also use it for mobile devices. 18 00:01:01,040 --> 00:01:05,090 You should see a menu on the left side of the site, and 19 00:01:05,090 --> 00:01:09,290 if you don't, click the menu icon in the upper left. 20 00:01:09,290 --> 00:01:14,360 The site is divided into several sections and subsections. 21 00:01:14,360 --> 00:01:19,200 There's an overview of the Material Design systems, which we're looking at now. 22 00:01:19,200 --> 00:01:25,180 Then the Material Foundation contains most of the contents of the design system and 23 00:01:25,180 --> 00:01:28,150 describes its approach to common design concepts, 24 00:01:28,150 --> 00:01:30,930 like typography, color, and shape. 25 00:01:30,930 --> 00:01:34,850 And then finally, at the bottom, there's the Material Guidelines, which builds 26 00:01:34,850 --> 00:01:39,759 on the Foundation section with concepts like theming and common components. 27 00:01:40,950 --> 00:01:45,450 Let's start back at the top by looking at a case study. 28 00:01:45,450 --> 00:01:50,570 And the first one in the list is an app called Basil 29 00:01:50,570 --> 00:01:56,040 that allows users to browse recipes curated by chefs and bartenders. 30 00:01:57,160 --> 00:02:03,510 If we scroll down to the Product architecture section, it says that 31 00:02:03,510 --> 00:02:10,790 Basil has four top-level sections that are organized using the Tabs component. 32 00:02:10,790 --> 00:02:15,990 And if we scroll down a bit more, we can click the Tabs 33 00:02:15,990 --> 00:02:21,570 component, and it will take us to a related article 34 00:02:21,570 --> 00:02:27,610 in the Material Guidelines section of the site that details the Tabs component. 35 00:02:27,610 --> 00:02:29,120 For now, I'm going to go back. 36 00:02:29,120 --> 00:02:33,730 But what I want you to notice is that as you look through these case studies, 37 00:02:33,730 --> 00:02:37,620 if you see something you like, there's usually an associated link 38 00:02:37,620 --> 00:02:41,300 that can tell you more about the concept being demonstrated. 39 00:02:42,520 --> 00:02:47,420 If we go to the Layout section, we can see how the site uses Material's responsive 40 00:02:47,420 --> 00:02:52,930 grid layout system and other components, like an image list. 41 00:02:52,930 --> 00:02:57,940 And scrolling down a little further to the Color section, 42 00:02:57,940 --> 00:03:02,400 you can investigate how this case study utilizes the Material Design color system. 43 00:03:03,770 --> 00:03:08,000 We could continue looking at the case studies, but I'm going to stop here. 44 00:03:08,000 --> 00:03:12,440 However, I strongly encourage you to explore the case studies on your own and 45 00:03:12,440 --> 00:03:14,910 spend some time reading how they were put together. 46 00:03:14,910 --> 00:03:19,130 Because it gives you a good overview of features that are available to you 47 00:03:19,130 --> 00:03:21,700 as a part of Material Design. 48 00:03:21,700 --> 00:03:27,320 The idea I want you to take away here is that Material Design has a large scope and 49 00:03:27,320 --> 00:03:31,540 covers a lot of concepts, but at the same time allows for 50 00:03:31,540 --> 00:03:33,820 a wide variety of visual expression.