Iconography and Sheets10:26 with Nick Pettit
Material Design has its own iconography that can help add detail and familiarity to your user experience. In this video, we'll also learn about sheets, which can be used to present contextual controls and information.
Resources and Documentation
- Google Material Design - Icons
- Google Material Design - The Color System
- Google Material Design - Side Sheets
- Material Design UI Kit for Adobe XD - This compressed zip file contains a UI kit for Google Material Design created in Adobe XD. It also includes the initial wireframe created in Adobe XD as well as sample photos that are used in the project.
We've got the basics of our app in place, but 0:00 now we need to start adding some detail. 0:02 We need to start getting some of the features and 0:05 menu items from our wireframe into this mobile app. 0:08 There's a lot of different ways we could approach this, but 0:11 my general plan is to use the FAB in the middle to take photos. 0:16 On the right side, the heart button will become a button for filtering photos. 0:22 Then on the left side, we'll keep the menu icon for things like settings, 0:28 signing out, and maybe looking at higher level categorizations like albums, 0:34 people, and photos in the trash. 0:39 So let's start by swapping this heart icon with an icon 0:42 that looks more like it might be for filtering photos. 0:47 Going back to the UI kits, I'm going to zoom out, and 0:52 let's find the system icons toward a top. 0:58 And then let's go to this first set here, and 1:04 let's copy this one that looks like three little slider controls. 1:08 So I'm gong to double-click into that, there we go, 1:14 and I'll copy this to my clipboard. 1:18 Go back to my layout and paste it. 1:24 Now, we're going to need to adjust some layers here, 1:28 so we should unlink these from the UI kit. 1:33 In the Layers panel, right click on the App Bar, and choose Unlink Symbol. 1:37 And then same thing for this tune icon, 1:45 right-click it and unlink the symbol. 1:48 So this will unlink it from the UI kit so that we can make our own edits. 1:53 Now, let's rearrange the layers so 1:59 that the tune icon is in the same place in a stack, 2:01 As the favorites icon, which is the heart. 2:08 And now, in the canvas, we can reposition this so 2:13 that it's in the same spot as the heart. 2:18 And I'll just zoom in here so you can see what we're doing. 2:22 There we go, so that's lined up perfectly. 2:27 And then in the Layers panel, 2:29 we can select the favorite icon and delete it. 2:33 And then finally, we need to set the opacity of 2:38 this tune icon to 100%, and then change the fill 2:43 to white so that it matches the other icons. 2:49 So let's zoom back out. 2:56 And now for this photo button, we're going to use a camera icon. 2:59 So let's go back to the UI kit, and the camera button is down 3:06 at the bottom of this first artboard. 3:11 So just to show you where this is in the UI kit, 3:15 it's the second row of artboards and the second one from the right. 3:20 And then down here at the very bottom we have this little camera icon. 3:27 So I'm going to copy that, switch over to my design here, and paste it. 3:34 And then I'll move it into place. 3:42 And again, we may need to adjust some layers here, so 3:46 I'm going to open up the FAB, Put it inside there. 3:49 And let's zoom in just to make sure we get this alignment. 3:55 Looking really good, that's perfect, it's right in the center of the circle. 4:00 Then we'll delete this favorites icon, And finally, 4:06 we'll change the opacity of the camera icon to 100%. 4:12 From here, 4:18 we could start adjusting the colors of the app to better suit our needs. 4:19 But in these videos, we're going to keep our focus 4:24 on user experience prototyping rather than visual design. 4:27 So I'm going to use these default colors. 4:31 If you'd like to learn more about the color system in Material, or 4:34 if you'd like to learn more about color in general, 4:38 check out the notes associated with this video. 4:40 Instead of adjusting colors, we should start working on prototyping interactions. 4:44 In Adobe XD, we can represent different application states with new artboards and 4:48 then link them together. 4:53 However, even a fairly simple app like this could have a lot of different states. 4:55 For example, you might open a sidebar menu, and then tap settings, and 5:01 then start changing settings, 5:06 then you might expect to see those changes reflected in the app and so forth. 5:08 That's impractical to model in a simple interactive prototype. 5:12 So instead, we'll just prototype this to one level of depth. 5:16 We'll create a state for when the sidebar menu is open 5:21 when the photo FAB is active and 5:26 when the filter controls are visible, and that's it. 5:31 In the interest of time and avoiding repetitive steps, 5:35 we're not going to prototype search, but you're welcome to do so on your own. 5:37 So let's start by copying this entire artboard, 5:43 just click on the title of the artboard and copy it to your clipboard. 5:48 And then paste it, and it should paste it to the side here. 5:53 And because we have a few artboards now, we should start naming these. 5:59 So I'll double-click the title of the first artboard, and 6:03 we'll call it Mobile- Default for the default state. 6:07 And then on the next one, I'll call it Mobile- Filters 6:14 because this is where we're going to create the filters panel. 6:20 Specifically, we're going to use what's called a sheet. 6:24 Let's check that out in the docs. 6:28 As always, there's a link in the teacher notes. 6:30 So in the documentation, I'll go down to 6:34 Material Guidelines > Components, and 6:39 I am looking for a side sheet. 6:44 There are a few different types of sheets, but 6:47 we're going to use a side sheet because it's best suited for listing filters. 6:51 I would like to mention that according to the bottom app bar documentation, 6:57 menus generated by a bottom app bar should generally open as bottom sheets. 7:01 However, we might have a longer list of locations in our 7:07 filters that might be appropriate for a bottom sheet. 7:10 Even though it does allow for scrolling, 7:13 I think it would just work better on the side, particularly on mobile. 7:15 So let's scroll down to Usage for this side sheet. 7:20 Side sheets like this should be primarily used on mobile, and 7:25 here it details a few use cases. 7:29 The standard side sheet displays content that complements the primary screen 7:32 content, so both the primary content and the sheet can remain interactive. 7:38 Modal sheets put a darkened scrim over the main content to indicate that 7:45 they must be dismissed before interacting with the primary content again. 7:51 This can be useful on mobile, 7:57 particularly in our case, where we want to bring up some 7:59 filters because those filters are going to modify the primary screen content. 8:02 So it doesn't really make sense to interact with both at the same time. 8:07 So here is what that modal side sheet looks like, 8:15 it has a scrim that darkens background, and this is what we're going to go with. 8:18 So let's go back to the UI kit, 8:24 and I'll zoom back out. 8:29 And let's zoom into the area with sheets, and 8:33 particularly we are looking for a side sheet here. 8:38 So I'm going to use the right side sheet, so 8:45 click that, copy it to your clipboard, go back to 8:49 this second Mobile- Filters artboard, and paste it. 8:55 And then we'll align it to the right side of the app, just like that. 9:01 And in the Layers panel, this should appear above everything else, 9:06 including the app bar. 9:11 Now, because this is a modal side sheet, 9:13 we need to add a darkened scrim behind it to gray out other content, 9:17 indicating that the side sheet must be dismissed before moving forward. 9:21 For the scrim, I'm just going to draw a box. 9:26 I'll use the Smart Guides here to make sure I'm starting in the upper right 9:31 corner, and go all the way to the bottom left corner, just like that. 9:36 And you can even check in the inspector here, the width and 9:42 height is the exact same as the artboard. 9:45 Now, let's name this Scrim in the Layers panel, 9:50 and I'll move this below the side sheet. 9:56 And then I'll change the fill color to black and remove the border. 10:00 And then we're going to change the opacity to 35%. 10:10 Great, when you're done, save your work. 10:17 There's still more to do for this artboard, but this is a good start. 10:21
You need to sign up for Treehouse in order to download course files.Sign up