Material Design Principles3:38 with Anwar Montasir
Material Design lists five guiding design principles in the introduction to its visual language documentation.
Material Design lists five guiding design principles 0:00 in the introduction to its visual language documentation. 0:05 The first principle, Material is the Metaphor, we've covered already. 0:09 The second principle, Bold, Graphic, Intentional, means that 0:16 Material Design provides visual guidelines you'd expect to find in any design system. 0:21 Rules about typography, grids, 0:27 space, scale, color, and imagery. 0:33 When it comes to colors, the bolder the better, 0:40 as long as your colors are compatible with the brand you're designing for and 0:44 applied consistently and intentionally, 0:49 creating distinctions between elements and suggesting interactivity. 0:53 The third principle, Motion Provides Meaning, indicates that animation 0:59 exists in Material Design to focus attention on what content is important. 1:04 Motion that doesn't help the user understand or 1:10 interact with an interface is discarded as superficial. 1:13 In these examples from the Material Design documentation, we see motion 1:19 doesn't happen independently, but is triggered by user interaction. 1:24 Motion can be used to illustrate relationships between navigation and 1:29 content, to react to user input, 1:34 to indicate the type of content being loaded, 1:45 or to suggest how an interface can be interacted with. 1:51 The fourth principle, Flexible Foundation, 1:59 speaks to Material Design's customizable code base, intended to simplify 2:02 the designer-developer handoff and enable both teams to speak the same language. 2:07 That way, designers and developers can seamlessly implement new design elements, 2:14 components, and plugins. 2:19 The final principle, Cross Platform, 2:22 speaks to Material Design's responsive design philosophy. 2:25 Material Design encourages consistency across platforms, environments, 2:29 and screen sizes by using uniform UI elements and a flexible, responsive grid. 2:35 That's a quick overview of Material Design's foundations. 2:43 If you're part of a team that's decided to embrace Material Design's 2:48 visual design language to inform your app design, you can use 2:52 this documentation to investigate each of these principles more fully. 2:56 However, if you're working with an established brand with its own design 3:02 system, looking to Material Design to guide the application of color and 3:07 typography might not be appropriate. 3:12 Perhaps you're just looking to implement common Android interface patterns and 3:15 wish to use the documentation to better understand Android user expectations and 3:20 behaviors. 3:26 In our next stage, we'll examine some of the better-known Material Design 3:28 components and build a wireframe of a demo Android app in Adobe XD. 3:32
You need to sign up for Treehouse in order to download course files.Sign up