Layout and Navigation4:38 with Nick Pettit
Material design uses a comprehensive layout system that includes resolution independence and a grid system. Material also has a few different types of navigation, which describes how the user moves between different screens or contexts of an application.
Let's move on to the layout section, and 0:00 first we'll check out density and resolution. 0:05 Material is designed to be resolution independent. 0:11 So instead of using units like pixels, material design uses what's called density 0:14 independent pixels which is written as DP and pronounced as dips. 0:20 So you might say that something has 12 or 14 dips. 0:27 This is something that is platform dependent. 0:32 So on iOS, Android, and 0:35 on the web using CSS, you would have different ways to calculate this. 0:37 We won't worry about it too much for 0:42 our mockup in Adobe XD, but it's important to know. 0:43 The next section is the responsive layout grid. 0:48 Like many grid systems found in front end frameworks and in traditional graphic 0:51 design, material also uses columns and gutters between each column. 0:55 And then margins on the left and right sides of the page. 1:00 Generally speaking, your content should align with the edges of columns. 1:05 So let's take a look. 1:10 Here on a screen that's 365 dips across, four columns are used. 1:13 And you can see some material cards that span two columns. 1:18 The number of columns varies with screen size. 1:24 On a tablet that's 600 dips across, there are eight columns and four boxes can fit. 1:27 The number of columns should vary with screen size as needed. 1:33 And while you can set the width of gutters and margins however you like, 1:36 the gutters should all be the same size for each responsive break point. 1:41 Material design also permits the use of horizontal grids where the height 1:48 of the screen determines the number of columns in the grid. 1:52 Generally speaking, 1:56 the horizontal gutters should be the same size as the vertical gutters. 1:57 We'll use this type of layout for our photo app. 2:02 And finally, there are break points. 2:07 This is a concept in responsive design where 2:10 different screen widths require a different number of columns. 2:13 We already looked at this earlier but down here, there's 2:18 a handy reference table to help you figure out the appropriate number of columns for 2:21 each breakpoint range as measured in dips. 2:26 There's a lot more to check out in the layout section but that covers the basics. 2:30 The components we will use in our mobile prototype 2:35 will already have guidelines that will help us follow a grid layout by default. 2:38 But it's still important to be aware of the grid 2:42 when creating more complex designs. 2:45 Now, we're going to skip ahead a bit to navigation. 2:47 So from the menu here, we'll collapse Layout, click on Navigation, 2:53 and let's just go to the first section here. 2:58 Material has a few different types of navigation which describes how 3:01 the user moves between different screens or context of an application. 3:07 First is lateral which is when you move between 3:12 screens at the same level of hierarchy. 3:16 So in their example here of a music app, this might be a button 3:20 bar of your library, recently played, and search. 3:25 Then, there's forward navigation which you can think of as either drilling 3:31 in deeper to a particular area of the hierarchy, like Library album and song. 3:36 Or you can also think of it as jumping forward through several layers 3:42 of hierarchy such as when a user searches for a song. 3:46 Finally there is reverse navigation. 3:51 You can think of this like your browser's back button. 3:54 It's a way for users to back out of the hierarchy and move to higher levels. 3:58 Further down in the documentation, 4:04 they provide examples of components that help facilitate each method of navigation. 4:06 For lateral navigation, 4:11 where users are moving between the same level of hierarchy, you can see things 4:13 like a navigation drawer, a bottom navigation bar, or tabs. 4:18 And if you want to take a look at those components in more detail, 4:23 I have links to each. 4:27 I'm going to leave it there but I encourage you to check out the components 4:29 suggestions for forward navigation and reverse navigation as well. 4:33
You need to sign up for Treehouse in order to download course files.Sign up