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

Cancel
  • Overview
  • Transcript

3.6 The Posts and “Add Post” Pages

In this lesson you’ll build the other pages we need—the posts and “add post page”. These are used to display a list of all posts, as well as options for creating new posts.

3.6 The Posts and “Add Post” Pages

Hi, welcome to Practical UI Design With Sketch. In this lesson, you'll build the second page of this project, the post page. This is used for displaying a list of all the posts, as well as options for creating new ones. So, let's get started. First thing you've gotta do is duplicate this dashboard page because there are few common elements. So go ahead here. Right-click, Duplicate. And call it posts. Now for this we won't need the quick posts. So go ahead and delete that. And also, we won't need these two stats. So we only wanna see how many posts we have. And also, we need a button here for adding a new post. So for that, go back to your assets file, grab a large primary button like this, Copy it, go back here, Paste it in. Make sure you align it about 50 pixels and then for text, I'm gonna say add new, or add new post like that. Okay, now, the only thing left on this page is a list of all the posts. So these recent posts, I'm actually gonna rename to Posts and I'm gonna bring it up. And make sure it's set at the correct distance from the box above it. And actually I'm gonna delete this H5, so I'll just have the table. And then we're gonna have the date, the post title, and also the author will be changed here to categories. Or, actually if you want, you can keep the author yeah, maybe something like this. And then add another section for categories. Yeah, and in here, we can do something like web design, in here you can do something else like CSS, and so on. Okay, and that's basically the Post Page. Now since we have time in this lesson, let's go ahead and create the Add New Post Page. So for that, Duplicate this one. And call it Add Posts. We will have some elements in common, but this table is not one of them. Let's zoom in, I'm gonna delete this, and instead of this, I'm gonna say, Add New Post. I'm gonna center these, and then for this button. Yeah, this will also disappear, and this, well, we can just ungroup since we only have one element. This can be called header BG, and this is a bit big, so let's do an H2 here. And let's go to our buttons. Grab a small default. And I just realized I forgot to change the text on these, so let me just do that real quick. So these should say default, okay. So grab a small default, Copy it. Bring it back, Paste it in, align it in the center like that and let's do 50 pixels from the right side. Okay, this will say something like back to posts and I'm gonna increase this a little bit. I'm gonna Copy this bit, this arrow, Paste it here. I'm gonna do about 20 pixels from the text there, I'm gonna align it, reduce the width just a tiny bit. So that is the Back to Posts button. Now in here, we have a couple things. First of all, it's the post title and the post content, so two fields. And then on the right side, we're gonna have a mini sidebar with a button for adding media. And then some check boxes for selecting categories. And then of course under the fields, we need a publish and save draft button. Now, some of these elements are already present here. So, I'm actually gonna grab this quick post, the entire group, Copy it. Yeah, and I'm gonna paste it here. Now couple changes here. First of all, ungroup everything. Yeah, I'm gonna delete the title. This bit will be used for the sidebar so make it smaller. Maybe make it about 250 width, okay. And maybe about 50 pixels from the top. Okay, and this will be side bar BG. Okay the post title, make this a bit bigger let's get both of these and place them on the left side. Yeah, maybe something like this, let's see 31 pixels there, maybe nudge this to the right by one pixel. 20 pixels there. 20 pixels there, also make this about 620 in width. Okay, and let's actually make this a bit taller. Yeah, maybe something like this. Also make this taller to match. Okay, 20 pixels there. Great, so this first area is done. Now let's see about this area. So we need a button for adding media. So, oops, we're gonna go to the Assets and grab a tiny default button. Yeah, I'm gonna Paste it here, I'm gonna bring it forward. Yeah, position it to center, 20 pixels maybe from the top. Add media, BTN add media. And then under this I'm gonna draw a line, that's about 250. I'm gonna use the traditional line color, let's zoom in here a tiny bit. Let's see, 250, okay, perfect. And then 20 pixels from that. Finally, here I'm gonna have a text that says something like Select Categories. Okay, for this I will use the paragraph, okay, but I will make it a bit bolder, so medium. And for color we're gonna use this one. And actually I'm gonna make it a tiny bit smaller like 14, yeah, like that. Okay, 20 pixels from the left, 20 from that. And inside here we're gonna draw a rectangle that has a white fill. And for border, use the same border color. Let's see, 12, 20 pixels from there, 20 from there. Oops, I need to increase the size a little bit. Okay, perfect. Now, inside we need a check mark to represent a check box. So let's grab one from Font Awesome. I'm gonna use this one, check square. Okay, Paste that in, Font Awesome, color is correct. Font, lets do 16. Lets bring this up. Call it check box. This one will be categories BG. Categories there, and the check box will be inside it like that. Now, let's do 20 there, 20 from the top, and the text maybe something like web design. And let's do a smaller font like 14 maybe. Okay, 10 pixels from the check mark on the left. So, actually this is a row. Let's do that and call it category. Now lets make a grid, six rows with 20 pixels between them. And one column. Okay, and 20 pixels I think is a bit too much. So let's do only 10 Okay, so something like that. And here, you can just change these categories. So, let's have a final look on the Add New Post page. We have a title here, button here, the form for adding a new post, a button for adding media, and then categories. The other page, the post page, we have the number of posts, a button that will take us to this newly created page, and then a list of all the existing posts. And that's pretty much it. Now, we won't build the rest of these pages the Settings, Profile, and Statistics, that will be, actually, your homework. But the course isn't done here, there are still a few things I would like to show you, so join me in the next lesson where you'll learn about the exporting feature in Sketch. And this is a real timesaver if you need to export lots of images. As an added bonus you can also explore SVGs. So I'll see you soon.

Back to the top