Overview and Case Studies3:34 with Nick Pettit
Before we start building an app, let's get familiar with Google's Material Design system by looking at case studies and reviewing the contents of the system.
[MUSIC] 0:00 Before we start building an app, let's get familiar with Google's Material Design 0:04 system by looking at case studies and reviewing the contents of the system. 0:08 You can find a link to Google's Material Design website in the notes 0:13 associated with this video. 0:16 Material Design is based on the principles of art and design, but 0:19 it's backed up scientific research. 0:23 Material Design is inspired by physical textures, 0:25 which is where the name material comes from. 0:28 It communicates using print design methods, like typography, grids, space, 0:31 scale, color, and imagery, and it also communicates using motion. 0:36 We won't be animating anything in our design as that's a slightly more 0:42 advanced topic. 0:45 But if you'd like to learn more about that, 0:46 check out the notes associated with this video. 0:49 Material is meant to be cross-platform, so although we're using material to focus on 0:52 a web interface, you could also use it for mobile devices. 0:57 You should see a menu on the left side of the site, and 1:01 if you don't, click the menu icon in the upper left. 1:05 The site is divided into several sections and subsections. 1:09 There's an overview of the Material Design systems, which we're looking at now. 1:14 Then the Material Foundation contains most of the contents of the design system and 1:19 describes its approach to common design concepts, 1:25 like typography, color, and shape. 1:28 And then finally, at the bottom, there's the Material Guidelines, which builds 1:30 on the Foundation section with concepts like theming and common components. 1:34 Let's start back at the top by looking at a case study. 1:40 And the first one in the list is an app called Basil 1:45 that allows users to browse recipes curated by chefs and bartenders. 1:50 If we scroll down to the Product architecture section, it says that 1:57 Basil has four top-level sections that are organized using the Tabs component. 2:03 And if we scroll down a bit more, we can click the Tabs 2:10 component, and it will take us to a related article 2:15 in the Material Guidelines section of the site that details the Tabs component. 2:21 For now, I'm going to go back. 2:27 But what I want you to notice is that as you look through these case studies, 2:29 if you see something you like, there's usually an associated link 2:33 that can tell you more about the concept being demonstrated. 2:37 If we go to the Layout section, we can see how the site uses Material's responsive 2:42 grid layout system and other components, like an image list. 2:47 And scrolling down a little further to the Color section, 2:52 you can investigate how this case study utilizes the Material Design color system. 2:57 We could continue looking at the case studies, but I'm going to stop here. 3:03 However, I strongly encourage you to explore the case studies on your own and 3:08 spend some time reading how they were put together. 3:12 Because it gives you a good overview of features that are available to you 3:14 as a part of Material Design. 3:19 The idea I want you to take away here is that Material Design has a large scope and 3:21 covers a lot of concepts, but at the same time allows for 3:27 a wide variety of visual expression. 3:31
You need to sign up for Treehouse in order to download course files.Sign up