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.