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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Designing the Navbar

All right, let's design a nav bar. Now based on the notes that we wrote in the planning stage, the nav bar should contain a logo and it should contain a navigation, a menu. So I'm gonna start with an art board, and that's gonna be for a desktop. So we're gonna call this Desktop, I'm gonna call this the Start page. And we're gonna need to make it longer than this, so I might as well just do that from the very beginning. So for the nav bar, we're gonna start with a rectangle that's gonna expand the entire width. And for the fill, I'm gonna use this one, our black 85. And I'm also going to create the new shared style, it's gonna say Container- Black 85. Now inside, I'm gonna paste my logo, and it's a logo that I quickly created. This is a simple icon and I did a hexagon around it. So this will be my kind of official logo for the documentation template, if you want. So what I'm gonna do with this is I'm gonna create a symbol. And I'm gonna call it a logo. Now please excuse the mess in the layers panel. I'm not gonna spend time just naming layers correctly. You should do this yourself because it's just gonna give you a much cleaner, and better organized sketch file. But because we're on a time constraint here, I'm gonna work as fast as possible and not worry about the naming of the layers. So this I'm gonna position at 15 pixels from the top. And I'm gonna reduce the height of this, so we have a 15 pixel gap on the bottom, basically setting a padding of 15 pixels. Next, I'm gonna position this 60 pixels from the left edge. Now there's a reason I'm doing this, these measurements are not random. I'm using a multiple of 15. And the reason I'm doing that is I'm kind of thinking about 16 pixels, that's one rem, and the closest value that I can get to that, that will be easier for me to use, is 15 pixels. That way, whenever I'm writing the CSS for this, for a 15 pixel gap, I can just say one rem. Of course, that's gonna be equal to 16 pixels, but that's not important. One pixel here and there is not gonna make a difference. So I'm using 15 pixels and multiples of 15 pixels. So 15, 30, 60, 90, 45 120, you get the picture. So again 15 pixel padding for this top bar. And a margin or padding left of 60 pixels. Next, let's go ahead and create the navigation menu. Now for the navigation menu, we need only the top level pages. So the content that you see here, this is just for documentation. So it's gonna be in its own documentation page. This is a new page. This is a new page, also these three. And I'm also going to add another one that's called Start. That is basically our homepage. Let's start with a simple text. I'm gonna say Start, and this will be set to PT Sans, bold, 14 pixels, and the color will be just white with no opacity whatsoever. So for this I'm gonna actually create a new textile, I'm gonna call it Menu Item /, I'm using this to better organize these styles in Sketch. I'll show you in a little bit. So I'm gonna say, Menu Item / Inactive. Also, I wanna create a style for the menu item active. So this, Create New Style, we'll say Active, and the only thing that I'm gonna do here is change the color. And I'm going to use, let's see, I'm going to use a color that I actually forgot to add in my main colors. My apologies for that. So in the main colors we also have these two. And this will be our primary, that's gonna be used for links and all that stuff. And this will be used a secondary, or an accent color. So the hex color, the hex values for these are d0793f, and 93cdcf. And I'm also going to add these to our document colors, just like that. Now, this start item is actually the active one, so I'm gonna set its color to this. And also, I'm going to create a rectangle that's four pixels in height, that's the exact same width as my menu item here. And in this case it's 30, and I am gonna set it to the exact same color. And I am gonna create a new style and I am gonna call it container primary, and now that I think about it. I also need to use a / here. So if you're wondering what these /'s are all about, well, it's very simple. When you want to insert a style text from here, they get organized into menu items for example. So we have Menu Item / Active and / Inactive. So this is a very nice trick that allows you to better organize your styles and sketch. Okay, next what I'm gonna do is simply move this to the bottom. And I'm gonna select these three, and I'm gonna line them on the middle vertically. And then I'm gonna leave a gap of 45 pixels between each menu item. Okay, now let's enter the rest of the items. One of them is documentation. The next one is let's put support. The other one is FAQ. And you can very easily duplicate these by hitting Cmd+D. That's gonna create a copy of in the exact same place. And then I just hold shift and drag and sketch will automatically snap into place so it keeps the distance relative to the other menu items. Then I'm gonna say Changelog, and then Credits and then what else do we have? Tutorials, right, was another one, and I think we can put in another page. I actually forgot to put it there. That's get in touch, basically a contact page. So now what I'm gonna do is simply grab all of these, I'm gonna group them together as Menu. And then simply push them to the left so we have a 60 pixel paving on the right side. Let's actually group this together as top bar, and there we have it, this is the top bar. Now, let's do a little bit more work on this home page by creating the main header. And for the main header, I wanna keep things super simple. I'm gonna use a title, a subtitle and a separator from the rest of the content. So for the title, I'm gonna say Avalanche. Avalanche is a just a random name I chose for the fictional theme this documentation is for. So we're gonna use the h1 style, so h1, it's gonna be this, you can simply right-click, Copy Style and then right-click Paste Style, like this. So that's gonna be h1. Let's create heading h1. Let's align this to the center. I'm gonna position it 120 pixels from the element above, like this. And then underneath I'm gonna say Theme Documentation. This should be PT Sans, Regular, 16 pixels. And let's use, let's see, this, yeah, the 50% opacity or the black 50 color. Now it's also aligned to the center, and I'm gonna create a new style. I'm gonna call it Paragraph muted center, muted is for the color basically. Normal paragraphs will have this, the black-65 color. But this one since it has a letter color, I'm gonna call it muted, and center because the text is center aligned. And then I'm gonna place this at 15 pixels from the element above, and that part of the header is done. Now all we have to do is create a separator. So for the separator, we can do some interesting math, so for the width, we have 1440 which is the width of our entire art board. But we do know that we have 60 pixels gap or padding on the sides. So I can say, minus 120 and that's gonna give me the final width. I am gonna set this to, not four, maybe double that, eight. I'm gonna position it in the center. I am gonna round off the corners, right here. And finally, I'm gonna change its color to this one, Dark 5. So I wanna create new shared style container, Black 5. Great, also position this 120 pixels, from the element above. And that is our page header. Now it's time to put some content in this page. But we're going to do that in the next lesson. I will see you there.

Back to the top