Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Overview and Case Studies

3: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