7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 14Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.5 The Dashboard

In this lesson you’ll learn how to build the first page of the project: the dashboard. It has a sidebar, an area for statistics, an area for quick post and a list of recent activity.

3.5 The Dashboard

Hey, welcome back to Practical UI Design With Sketch. In this lesson you will learn how to build the first page of the project, the dashboard. This is pretty straight forward. It has a side bar, an area for statistics, an area for a quick post, and a list of recently added posts. So let's get started. The first thing your wanna do is create a new page for it. So going here, putting them in your page called dashboard. Grab the Artboard tool and draw an Artboard that's about 1300 in width and about 1500 in height and we're gonna call this Dashboard. Okay, now first thing you wanna do is add the sidebar. So go Insert > Symbol > Sidebar > Expand it. Okay, and this will insert the sidebar we created in the previous lesson. Okay, now I'll zoom out here, and let's make this a bit taller. Now you'll notice that when we update this one and Save, if we go back to our assets folder, you'll notice that this sidebar is also changed. So, let's actually increase the size of this Artboard. Okay, great. Now apart from this, we need an area for statistics. So grab the rectangle tool and draw a rectangle like that. And let's make this about 900 pixels in width. And let's position it about 50 pixels from the top and 50 from the sidebar, like that. Now let's make it about 200 pixels in height. For the fill, you will want to get this color FBFBFB, and let's do a quick check on our color scheme here. Notice that we don't have it added yet so let's go ahead and do that right now, so color scheme. I'm gonna increase the size of this to 1200 pixels. I'm gonna duplicate this bits right here, call it Light BG, paste in that color. Light BG here as well and we use black. Okay, great, so now we have a new swatch with that color. Now for the border and the outer border, we're gonna grab the same style as the form elements. So, select Form input here, and then No Shared Style, so if we change something to this it won't effect the form inputs. And I'll just redo my fill, like that. Okay, great. So now I'm gonna create a new style called Content Box. Now inside we need some statistics so I'm gonna do something like this 24 posts, for example. And get both of these aligned into the center. And align then together, and then this, let's take the shape of the H1, and this, smaller one, let's make it like an H6. No, maybe like an H5, that's a bit better. And make it uppercase, like that. Okay, align them again. And let's see what we got. Let's do about ten pixels of distance between these two. Okay, and that is the first statistic, so stat one. This one is actually stat BG and then I'm gonna copy this. Create a new stat, make this upper case as well. Aligned on the center and this is stat 2. And finally, do another Copy and Paste, make this upper case again and align both of these. Now, I'm gonna select these three groups and I'm going to distribute them evenly. So, maybe something like this, let's do a bit of math here. So, 70 pixels, let's go with 50 on this side. And let's go with 50 on this side, and I will distribute again like this. So that can be used for statistics. Now, let's see about the quick posts. I'm gonna group these together as Stats and then for quick posts, I'm going to say quick post. Okay like that, let's do an H5 here. Let's do about 50 pixels from the box above it. Then we're gonna copy actually this bit and I copy it here. I'm gonna place it at about 30 pixels from the quick post text or maybe even 20 pixels like that, okay. Group these together as quick posts, gonna resize this just a tiny bit. And then for the quick post, we need an input with post title, a text area for post content and then two buttons. Publish and save draft. So I'm gonna make this a tiny bit bigger. And then I'm gonna head to the forms here. And I'm gonna get the input place holder and the text area. So, copy these, paste them in, let's do about 20 pixels or maybe even 30 pixels, let's see how it looks like. Okay, so 30 pixels from the top and from the left. Okay, so quick post, let's rename these and this is gonna be, post content, and this is gonna be, post title. We'll keep place holders for both. And then post content, let's see, we're gonna use 20 pixel distance between these two elements, and then under those we're gonna have two buttons, so we're gonna copy some small buttons. Yeah, it's gonna be one small primary and a small default, so copy these and I'm gonna paste them right here and we're gonna bring them forward. Okay, so the first button we'll say something like publish and the other one is gonna say save draft. We're gonna use 20 pixels from the element above it. And save draft will be placed there and 20 pixel distance between them. Okay, perfect. Now let's rename them. BTM publish and save drafts. Now, lets resize this back, so it's 35 there. So it needs 5 more pixels, so 400 there. Now for the final piece from this page, we need like a table that displays recently published posts. So over here I'm gonna say recently published posts, again using the H5 and making the text upper-cased, 50 pixels from the top which is equal with the 50 pixels from the top here. Group this as recent posts. And then we need a table, right? Let's see how wide this container is, it is 900 pixels. So in here, I'm gonna grab the line tool and draw a line that's 900 pixels in length and that alignment properly. And then, let's see how much space I have left here, 17 pixels that's not exactly good. So, let's see a quick post, we're gonna get all of these. Gonna move them down and also move this down, 3 pixels. Okay, so now we're 20 pixels from the title, One, two, three. 50 pixels there and 20 pixels there and I just saw something quick post. This is actually called, Quick post BG. All right, now. In here, this is actually the heading of a table. So actually it has to be placed further down because we will have some text. Right here, I'm gonna choose, I was gonna choose a simple Paragraph texts, but it seems I don't have any. So, let me go back to typography here and see what happened. Okay, so for some reason we don't have any style for this, which is really weird. Okay, so Create a new style paragraph. There we go. Going back to the dashboard and we have this date here, I'm gonna use the paragraph style and then I'm actually gonna reset it and use like, bold. And I'm gonna use like 20 pixels there, perfect. This one, thickness is gonna be a bit bigger, like 5. And for the color actually, lets go for a very dark color, like maybe the one used on these buttons. So Ctrl+C choose that one. And I'm gonna use the same for the text, actually. Make this medium like that, and make this about four pixels in thickness, or maybe even three. Okay, so that looks pretty good. Now, let's see if we got the measurements done, great. Now Copy this, Paste it. It's gonna be post title and another table column for author. So now the only thing left to do is create the actually table rows. So for that, let's do this. Recently published posts, I'm gonna call it table. Table heading and then I'm gonna take these three. Copy them, Paste them in and group them as a row. We're gonna remove the medium and we're gonna use the actual paragraph style for these. So the date should be something like this. And then this one, this is a post title. And then for author I'm just going to say Adi. Now I'm gonna get this line make it one pixel in height. For the border color, I'm gonna get the usual border color which is this, and then I'm gonna make sure it's positioned at the same distance. So, we're going for roughly 20 pixels. So, I'm gonna move this up, I'm gonna select these. Say, 23 one, two, three there and 26. So I'm gonna grab this line. One, two, three, four, five, six, and now I have one row. Now what I can so is simply get this and duplicate it maybe 5 times, 1 column, 0 pixels for margin, make grid, actually it should be 20 pixels for margin my mistake. Like that, okay. And that is the published posts table. So what I'm gonna do now is actually move this up so we have about 30 pixels distance from it to the title. And with that the dashboard is complete. So as you can see, a very simple structure, but hopefully it gave you an idea of how easy it is to build something like this with Sketch. Now, next time on Practical UI Design With Sketch, you'll build the post page. This will be used for displaying a list of all the existing posts. See you soon.

Back to the top