3.4 Designing The Sidebar
Now that you have the basis covered, it’s time to move on to more complex elements. One of the central pieces of this project is the sidebar, so in this lesson you’ll learn how to design two versions of it: an expanded and a collapsed version.Related Links
1.Introduction1 lesson, 01:12
2.The Basics of Sketch4 lessons, 35:10
3.Design a Simple UI With Sketch7 lessons, 1:03:59
4.Conclusion2 lessons, 07:09
3.4 Designing The Sidebar
Hi, welcome back to Practical UI Design with Sketch. Now that you have the basis covered, it's time to move on to more complex elements. One of the essential pieces of this project is the sidebar. So in this lesson, you'll learn how to build two versions of it, an expanded one and a collapsed one. So let's get started. First thing you gotta do is create a new artboard. So I'm gonna grab the artboard tool, rename it Sidebar Expanded. And I'm gonna make it a bit bigger and then I'm gonna start with a rectangle that's about 300 pixels in width. Okay, I'm gonna align it to left and top of the artboard. Now let's actually zoom in here so we can see what we're doing a bit better. I'm gonna call this Sidebar BG. I'm gonna remove the border and the fill color will be this 283138. And now I'm gonna actually create a new swatch here. So copy this. Call it Sidebar BG. Paste that same color, Sidebar BG. Okay, perfect. Now let's come back here. Now on the sidebar, the first thing the user's gonna see is the logo. So I'm gonna grab a quick logo here. We can simply drag and drop from the finder window or you can simply go to Insert Image and then you got to browse it on your computer. But this is probably faster, simply drag and drop. For size, I'm gonna make this about 70 by 70. So make sure you have this little lock here, so it's gonna use the same proportion. And we're going do 70 by 71, actually, okay. So select these two and align them like that. Now let's position this at 50 pixels from the top. Okay, great. This one is the logo. Next, we're gonna have some welcoming text. So let's do that, say Welcome Adi for example. And this will be Helvetica New, regular. Let's make it about 22 in size. Align it in the center, and then align it with the background. And also, I'm gonna put it at 50 pixels from the logo. Okay, next we need the button for log out. So I'm gonna go to my buttons, I'm gonna get a primary one, and small, paste it here. This one is gonna be a bit closer to the text, about 30 pixels, like that. And inside I'm going to say LOGOUT, actually make it uppercase. BTN Logout. And actually, we can make this a bit smaller. So holding down Alt, we can actually resize this from the center, so both sides are resized at the same time. And I'm gonna keep it at about 70 pixels from the edges, like that. Okay, now let's see about the main menu. I'm gonna build a menu here that's gonna be vertical. It's gonna have five menu items and it's gonna look something like this. Start with the rectangle tool and draw a rectangle that's 300 by 50. Then, remove the border. Let's position this in the center, like that. And position it 50 pixels from the button above it. For the color we're gonna use a darker version of this background color. So, actually, we can copy the heading text color cuz that's very close to what we're looking for. So simply Ctrl+C on the heading text and you can see this also changed. Now inside we're gonna have an icon and a menu item title. So for the icon I will use Font Awesome. So I'm gonna search for a dashboard icon. This one, simply copy it from here, paste it. Color's gonna be white. The font is going to be Font Awesome, and let's see exactly where is that icon. Oh, there it is. It got pasted way over there for some reason. Okay, so I'm gonna place it here. I'm gonna use 22 pixels as the font size and I will align it with this darker background like that. And then I'm gonna position it 20 pixels from the left side, so 20 pixels, there we go. Now I'm gonna select that and the background. I'm gonna call it Menu Item 1. Okay, now inside I'm gonna put a text that says Dashboard. That is Helvetica New, it should be regular. 16 pixels, gonna align this as well. And we're gonna put it at about 15 pixels from the icon. So let's see, 10, 15, there we go. Okay, and that's the first menu item. Now what I'm gonna do is select this, go to Make Grid. I need five rows in total with a one pixel margin between them and a single column, and then Make Grid. Now this will duplicate that menu item. And actually this is Menu Item 1 here. Two, three, four, and five. Good. Now for these I'm gonna change the text to Posts, Settings, Profile and Statistics. And then following the same logic we're gonna copy some icons from Font Awesome, paste them in and give them the same style. So, let's search for pencil, for example. We're gonna grab this one and we're gonna paste it in here. Okay, 22 Font Awesome. Just like that. And with all of these icons actually, let's set a text alignment to center. Okay, next is the Settings, so let's search for cog. Yeah, paste it in. 22. Like that. Next is the profile. So, let's search for a user icon. 22 there as well. And finally, for statistics, let's see, maybe for this chart right here. That's probably better. So those are our five menu items. Now, we need a style for an active menu item. So, let's do this one as the active one and what I'll do is add an inner shadow color, I'm gonna use the same color as my button here. And then for X is going to be minus 5 pixels. Zero here, zero blur, and that makes sure that I only have like this active indicator on the right side of my menu item. Okay, now I did mention that we need an expanded and a collapsed version of the sidebar. And that's because we need to add a small button here that when clicked will reduce the width of the whole sidebar and will only show icons instead of icons and text. So let's do that button really quick. Grab the rectangle tool, and I'm gonna make it 50 by 50, get rid of the border. And also for the background here, let's see, let's go to our color scheme here. Let's go for the Btn default, actually, and see how that looks like. So that looks pretty good. I'm gonna position it like this, I'm gonna copy this bit, gonna paste it here. And together they will be Btn Toggle Sidebar. Align everything and then we'll get a chevron left. Paste it in, white, 22 pixels. And then do another alignment, and that is our collapse button. So let's see what we've got. We have this sidebar expanded artboard, which I'm actually gonna reduce in size. Maybe something like this. And then I'm going to duplicate it. It's gonna be called Sidebar Collapsed, and inside this one, I'm gonna do the following. I'm gonna change the total width of this from 300 to 125, and then I'm gonna take the logo, align it like that. Remove the text, since there is no more space for it. This button, we're actually going to transform it. So the easy way we can do that, delete the text first and then remove the border radius. And make it 125 like that. Okay, and inside I'm gonna place a logout icon. So, sign, yep, that's it. Sign out, this one. Paste it in, Font Awesome, white, 22, align to center. Align these two and that is the logout button. Now for these elements, I'm gonna delete the text. I'm gonna take all of these and reduce them to 125. And I'm gonna take these icons and align them to the center like that. Okay? Now this button will be the toggle sidebar button, and what I'll do is rotate it. Yeah. Put it there and that's basically it for the collapsed sidebar. Now one finishing touch here. Select the sidebar background and add an inner shadow. So I want an inner shadow that goes on the right side. And that will give it a very nice effect. So for color I'm gonna use black 50%. For X I'm gonna use minus 4. So it starts on the right side, right here, and let me actually just zoom in here so you can see the effect a bit better. Okay. So minus 4 here, 0 for Y. So we only want it on one side and about eight for blur. Okay? So this is how it currently looks like. Take this, Copy Style, and then paste it to the collapsed sidebar. And now the only thing left to do is copy all of this. Create a symbol called Expanded Sidebar or Sidebar Expanded and then copy this. Create a symbol called Sidebar Collapsed. Okay, and that's it for the sidebar. Now, you can grab this symbol, place it in any other page and if you decide to change something on the sidebar, you change it once here and the other instances of this object will be updated as well. Now, next time on Practical UI Design With Sketch, you'll build the first page of the project, the dashboard. So, I'll see you there.