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.