1
00:00:00,600 --> 00:00:05,060
Material Design lists five
guiding design principles

2
00:00:05,060 --> 00:00:08,390
in the introduction to its
visual language documentation.

3
00:00:09,760 --> 00:00:14,100
The first principle, Material is
the Metaphor, we've covered already.

4
00:00:16,010 --> 00:00:21,300
The second principle, Bold,
Graphic, Intentional, means that

5
00:00:21,300 --> 00:00:27,840
Material Design provides visual guidelines
you'd expect to find in any design system.

6
00:00:27,840 --> 00:00:33,396
Rules about typography, grids,

7
00:00:33,396 --> 00:00:39,722
space, scale, color, and imagery.

8
00:00:40,800 --> 00:00:44,170
When it comes to colors,
the bolder the better,

9
00:00:44,170 --> 00:00:49,230
as long as your colors are compatible
with the brand you're designing for and

10
00:00:49,230 --> 00:00:53,000
applied consistently and intentionally,

11
00:00:53,000 --> 00:00:58,160
creating distinctions between elements and
suggesting interactivity.

12
00:00:59,850 --> 00:01:04,480
The third principle, Motion Provides
Meaning, indicates that animation

13
00:01:04,480 --> 00:01:09,720
exists in Material Design to focus
attention on what content is important.

14
00:01:10,780 --> 00:01:13,940
Motion that doesn't help
the user understand or

15
00:01:13,940 --> 00:01:17,920
interact with an interface
is discarded as superficial.

16
00:01:19,530 --> 00:01:24,280
In these examples from the Material Design
documentation, we see motion

17
00:01:24,280 --> 00:01:28,840
doesn't happen independently, but
is triggered by user interaction.

18
00:01:29,910 --> 00:01:34,836
Motion can be used to illustrate
relationships between navigation and

19
00:01:34,836 --> 00:01:41,995
content, to react to user input,

20
00:01:45,160 --> 00:01:48,480
to indicate the type of
content being loaded,

21
00:01:51,485 --> 00:01:55,982
or to suggest how an interface
can be interacted with.

22
00:01:59,916 --> 00:02:02,936
The fourth principle, Flexible Foundation,

23
00:02:02,936 --> 00:02:07,845
speaks to Material Design's customizable
code base, intended to simplify

24
00:02:07,845 --> 00:02:14,060
the designer-developer handoff and enable
both teams to speak the same language.

25
00:02:14,060 --> 00:02:19,750
That way, designers and developers can
seamlessly implement new design elements,

26
00:02:19,750 --> 00:02:22,230
components, and plugins.

27
00:02:22,230 --> 00:02:25,220
The final principle, Cross Platform,

28
00:02:25,220 --> 00:02:29,730
speaks to Material Design's
responsive design philosophy.

29
00:02:29,730 --> 00:02:35,340
Material Design encourages consistency
across platforms, environments,

30
00:02:35,340 --> 00:02:42,510
and screen sizes by using uniform UI
elements and a flexible, responsive grid.

31
00:02:43,990 --> 00:02:48,340
That's a quick overview of
Material Design's foundations.

32
00:02:48,340 --> 00:02:52,100
If you're part of a team that's
decided to embrace Material Design's

33
00:02:52,100 --> 00:02:56,950
visual design language to inform
your app design, you can use

34
00:02:56,950 --> 00:03:01,240
this documentation to investigate
each of these principles more fully.

35
00:03:02,740 --> 00:03:07,110
However, if you're working with
an established brand with its own design

36
00:03:07,110 --> 00:03:12,260
system, looking to Material Design to
guide the application of color and

37
00:03:12,260 --> 00:03:15,360
typography might not be appropriate.

38
00:03:15,360 --> 00:03:20,470
Perhaps you're just looking to implement
common Android interface patterns and

39
00:03:20,470 --> 00:03:26,350
wish to use the documentation to better
understand Android user expectations and

40
00:03:26,350 --> 00:03:27,040
behaviors.

41
00:03:28,150 --> 00:03:32,220
In our next stage, we'll examine some
of the better-known Material Design

42
00:03:32,220 --> 00:03:37,900
components and build a wireframe
of a demo Android app in Adobe XD.