Environment4:47 with Nick Pettit
Material design is composed of surfaces, and this is generally where the design system gets its name.
This course is meant to serve as an overview, so 0:00 we won't investigate every aspect of material design. 0:03 We're also going to move fairly quickly and 0:06 skip some sections, so don't worry about trying to memorize everything. 0:09 I just want you to get a better idea of what kinds of 0:13 rules you should refer back to when creating designs yourself. 0:16 Later in this course, when we're designing the photo app, 0:20 we'll refer back to this documentation to make sure that we're following the rules. 0:23 But before we can get started, we need to review a few 0:27 key areas of the documentation, environment, layout, and navigation. 0:30 Let's get started with environment. 0:35 Environment can be found under Material Foundation, Environment, and 0:38 let's take a look at the first section called Surfaces. 0:42 Generally speaking, this is where material design gets its name. 0:47 It says, in the physical world, objects can be stacked or 0:51 attached to one another, but cannot pass through each other. 0:55 They cast shadows and reflect light. 0:59 Understanding these core ideas will help you follow the rules of material design 1:02 using your own intuition rather than memorizing them all. 1:06 First you should understand that the material design UI exists in 3D space. 1:11 There's the X and Y, or left and right axis on your device's screen. 1:17 But in the real world, there's also the Z axis, 1:22 which in this case can be thought of as moving into or away from the screen. 1:25 This concept of 3D space in the interface leverages the user's experience with 1:30 the real world to help them navigate digital environment, let's keep scrolling. 1:35 Next you should know that each material can have a different height or width but 1:42 they should not have their own thickness. 1:46 They should feel like stacks of papers rather than wholly 3D objects. 1:49 That said, materials can appear at different heights. 1:57 To illustrate this to the user, 2:00 materials at different elevations cast shadows onto the layers below them. 2:03 Content in material should not appear as a separate layer. 2:11 Rather, content should be inside of a shape. 2:16 That's said, content can appear to behave independently or 2:20 dependently of the surface. 2:24 Some other things to keep in mind is the physical metaphor of material. 2:28 Just like paper, two stacked layers can't occupy the same point in space. 2:34 So you would expect some elevation difference represented by scale and 2:39 shadowing. 2:44 Furthermore, two materials can't pass through one another. 2:48 They can, however, change in opacity, size, or position. 2:52 Those are some of the most important surface properties of materials but 2:57 if you'd like to read more of the finer points, 3:01 I encourage you to continue reading. 3:04 But let's move on to elevation. 3:06 And let's scroll down to the section that says Depicting elevation. 3:13 This section shows you the dos and don'ts of how materials can stack on top of one 3:22 another and demonstrate the layering of surfaces to the user. 3:26 In this first example, 3:31 when two materials are the same color, it's hard to tell which is on top. 3:34 But contrasting surfaces can provide more context. 3:38 However, if two surfaces have the same color, 3:43 they can be distinguished using elevation and shadows. 3:47 And furthermore, a shadow's size and 3:54 blur radius can indicate the degree of elevation. 3:57 Larger and 4:02 softer shadows make page elements look like they are higher in the Z axis. 4:03 One limitation, however, is that you should not use shadows stylistically. 4:12 Down at the bottom of the page, there is a default list of elevations that can 4:17 help you sort out the hierarchy of elevations for different page elements. 4:23 I know we said this at the beginning, but it bears repeating. 4:29 This is just an overview and we're moving really quickly, 4:32 but we'll put these ideas to use soon by creating a design of our own. 4:35 If you'd like to take some time before moving on 4:40 to browse the environment section at your own pace, feel free to do so. 4:43
You need to sign up for Treehouse in order to download course files.Sign up