2.1 Design the Master Layout
Our website is going to be for a small bed and breakfast business. We’ll begin by designing the elements of the site that will be present on each of our five pages, including the main layout, header, nav menu, and footer.
This initial master layout will be at its maximum width.
To ensure you have access to the design software required for this course, we’ll be using the free web-based software Gravit Designer.
1.Introduction1 lesson, 00:43
2.The Design Phase9 lessons, 1:07:27
3.The Coding Phase6 lessons, 59:12
4.Conclusion1 lesson, 04:35
2.1 Design the Master Layout
Hey I'm Kezz with Tuts+. Welcome to build a classic five page website. We're gonna be creating a little five page website that's designed for a bed and breakfast, and we're gonna be breaking this into two phases. We're gonna start with the design phase, which is really gonna be more of, just a concept phase, getting all your ideas down, which makes them easier to carry it out. Then when that's all done, we'll move into the coding phase. I wanted to use graphic design software that I absolutely knew that you'd have access to, so we're gonna be working with Gravit Designer. Which is totally free, and it's online, so all you need is a browser to access this software. So head to designer.io, and then up in this top left corner use it online and then that will take you to this interface here. The way we're gonna approach this design phase is first we're gonna design the master layout, so that will be the elements that are coming to every one of our pages. So like the header, the footer, the nav menu. Then we'll design the content for each of our five pages. All right, so let's begin. Here we can set up a width and height for our layout. So we're gonna fill this in to be 2,000 pixels wide and 1,600 high, that should give us ample space and we'll hit Create. Now, if this is the first time you've used Designer, and you have a purple interface, and you don't want a purple interface, you can jump up here to edit Settings, and from here you can choose either the dark theme or light theme. And to make things a little bit easier to work with, we're also going to show the rulers. So this would give us some measurements along the top here. And we're going to show guidelines. We haven't added any yet, but we will as we go along. So just make sure that this is tipped. Now, over here on the top left, this is your pages window and it shows you have many different pages you've created within this document. And we're gonna have a separate page to represent each of the pages in our I saw it. And we’re also gonna have a couple of different pages representing different aspects of our layout. So I’m gonna call this first page master, and you’ll see why we’re giving it the name a little bit later, so just for now double-click on there and fill in master. Over here are the properties of our page and we wanna change the background in color. We don't want it to be white, instead, we want it to be this color here. So I've got F9FBFD, so you can just type that in there and hit enter. And let's just change that to soft light blue. Now, we're gonna start creating the actual website by ad itself. So this space that we just set up represents the entire browser view point now, we're gonna start designing the actual website itself. The first thing that we're gonna do is create a a site wrapper, so we're gonna make basically just a box and this box is gonna contain our entire website. So we're gonna grab the rectangle tool up here, we're just gonna draw out a rectangle. This doesn't have to be precise because we gonna adjust it after we draw it, and we can change the background color to white by just dragging up to this top left corner here. Now, you can't see it to clearly in this background right now. So we're also gonna give it a border, so hit this little plus button here. Leave that to one to represent a one pixel border and then we're gonna change the color by clicking on this color here. And then, we're gonna change it to another shade of blue. So that's eight four B D F zero. All right, so there's a site wrap, now we're gonna change its size and its position. So we're gonna set its width to be 1,200 wide. And that is the widest that our website layout is ever gonna get to. We'll give it a height of 1,300 pixels. Now, we want it centered so we're gonna hit this button here. And we want it to be 32 pixels from the top of the browser of people. So this y position represents the vertical position of this box. So we're just gonna add 32 in it and hit Enter and now, that's 32 pixels from the top of our layer. Now, by the way, if you want to pan around your document, what you can do is make sure nothing is selected, and then hold down space. And then you can pan around the document and see things a little bit more clearly. Now, right now, because I'm working in a fairly small browser window, I have the zoom set just to 33%. You can control that zoom by clicking on the value here, and choosing a different level of zoom. So if we go to 100%, Now, we can see a bit more clearly the style that we just laid out with our background color and our site wrapper. All right, so I'm just gonna make that all visible again by choosing fit all. And I'm actually gonna zoom in just a little bit We're seeing just this portion here by holding Ctrl and then scrolling my mouse wheel. All right, now we're gonna start adding in some rulers that are gonna help us as we're laying out the rest of our design. First, we're gonna drag one out that's just going to snap right onto the left side of this box. We'll do the same thing on the right side. And we're gonna have some spacing down either side of our layer so that when we start adding in text and menus, there's a little gap done either side, we want that to be a 50 pixel wide gap. Now, we could drag out a ruler, and try to get it exactly at the right position but that can be a little tricky. So one of the things that I like to do there is to just grab a rectangle, draw it out, set it to be the width that I need which is 50 pixels. Now, I've got something that a ruler can snap onto. So now, I'm just gonna drag out another ruler. So there's one ruler with a 50 pixel gap between the other ruler. Now, I can drag the square over and keep using it as a measuring block, and I'm gonna drag out this other ruler. So now, when we start to put things in, we can make sure that our spacing is setup correctly. All right, so we're done with that rectangle, so just make sure it's selected, and we'll hit delete to get rid of it. Now, we can add in the header. Actually, I'm just gonna hide those rulers for now, make it a bit easy to see the header as we're laying it out. To do that, the keyboard shortcut is Ctrl+comma, or that would be command comma if you're on Mac. So I'm gonna grab the rectangle tool again and wanna draw a rectangle. That's flush with the top of our site wrapper, so I'm just gonna drag that out, and that's automatically just snapping itself to the site wrapper. And if you wanna make sure that this rectangle's in the right spot it should be at the x position 400, and the y position 32. We want it to be 1,200 wide, the same with that as the site wrapper. And we're gonna give it a height of 176. We wanted to have a white background. And then we're gonna give another border here. So hit this plus button, leave that as a one pixel border. And we're gonna give the color, 7bffb. Right now, as we've just added that header in, it's sitting on top of the site wrapper. But because the header is contained by our site wrapper, we wanna sort of represent that in the way that our document is organized. So what we're gonna do is some nesting and some renaming. So over here in our layers panel, first we're gonna select that first rectangle that we added, double-click it. We're gonna rename it to site_wrapper. Now, our second rectangle we're gonna rename that to header and then we're gonna drag it down and drop it on top of the site_wrapper in the Layers panel here, and what that's gonna do is nest it. So now, we're showing that a header should always be encapsulated by a site wrapper. And that's really handy for doing things like being able to drag out the width of an item, but have it still not be visible outside of its parent. And with the way that we've set this up, we've been able to draw something out in our document that shows how high our header should be. And that it should have a border that's blue along the bottom but the fact that we are nesting a rectangle is hiding the top, left and right borders of our header rectangle. All right, so I'm just going to fit all again. That's all we really need to do to lay out our header. We're gonna add some content to that in just a little bit. But first, we're gonna do the same process to add a footer. So we'll grab the rectangle tool. Just align your mouse at the bottom left of the sight wrapper. And the we're just gonna drag out a rectangle here. And we want this want to have a height of 100 pixels so you can see the height field up in the top right changes as I drag this out. So we're gonna try to get it right to 100 and then release. So now, I've got a 100 pixel height footer set up. And we'll just need to change the fill color. This is gonna be to a darker blue, this is 1C3B81, and then we're gonna give it the same border color as our header. So I'm just gonna copy this color code onto the footer, add a border, and then we'll paste in that color code. And then we're just gonna do the same thing that we did with the header and we're gonna rename and nest this rectangle. So rename that to footer. And we'll nest it inside the site wrapper. And we'll put it down below the header so that the sequence of our layers matches the order that you see them from top to bottom in the layout. All right now, let's start adding some content into our header. Just gonna zoom in a little bit up to the top left of this header. We're gonna grab the text tool. We're gonna turn our rulers back on with Ctrl comma. Now, we wanna draw out a text box starting at this second inset ruler that we added before. So we're just going to click and drag until we get a text box that's the same height as our header. Now that might need a little adjustment, so I'm just gonna hit this arrow tool. Click away from the text box to give us these transformation rectangles, and just make sure that we're getting that 176 pixel height, the same as our header. Double-click in that to edit, and we're gonna change this so it reads Our BNB. Now, click outside of that again, and we're gonnachange the font here to a font named Poiret One. So that's P-O-I, Poiret One. Now the cool thing about working with graphic designer is you have instant access to all of the fonts that are on google fonts. So you know that if you choose any of these web fonts here, you're definitely gonna be able to use them in your live website by just pulling in a Google font. Reselect that. Now I'm gonna change the font size up to 80 pixels and then we want this text to be vertically aligned in the middle. So we're gonna hit this align middle button here. We're gonna change that to a softer color. So we'll change this code here to 595c5e, and now that is our site title ready to go. On the other side of our heading, we're gonna add a navigation menu in here. And we've actually got a fair bit of excess spaces, so I'm just gonna Move that over here. Now we're gonna do the same thing again, we're gonna grab this text tool and we're gonna draw out a box just like we did before but this time aligned with the right side of our header. And once again offset by 50 pixels while using the ruler that we added before. And now we're just gonna add our menu items in as text. So what we've got here is the words home, accommodation, guest comments, rates, and contact. So that represents each one of the five pages that we're gonna be creating. And there's just six spaces in between each of these words. So now we'll click off the text box to give us a different set of tools over here. We want this lot of text to be right aligned, so we're gonna hit this button here. We want it to be vertically aligned in the middle so we'll hit this button, and this time we want to use a different font. We wanna use a font named Raleway, so that's R-A-L-E, Raleway. And we're gonna use a different color again, so we're gonna change that to 595c5e, and now that is the basics of our menu in place. I'm just gonna bring this up to 100% so you get a clearer view of how this should look. And I'll turn off those guides, we don't need them right now. So there's our title, and there's our navigation menu. So just keeping it nice and simple. The next thing we're gonna need to do to finish off our menu design is create a style for the active menu items. So let's say you're on the accommodation page. You wanna let the visitor know that they're on the accommodation page by highlighting There's a combination of menu item. So we'll double-click in here so that we can edit this text. We'll highlight accommodation and we're gonna change its text color. We're gonna change that text color to 4793d5. So that's the first part of the process. And the next thing that we wanna do is put an underline that's going to line itself up with the bottom of this header. So hit this little drop down here. I'm gonna choose the line tool. Now we're just gonna make a horizontal line under this word accommodation. So you can hold down shift to make sure that the line is perfectly straight horizontally, and this already has a border applied to it automatically. The line that we just created, you can see that here, you wanna increase that border with 2.4 pixels. We'll wanna change the color of the border to 7bbffb so that's gonna give us a nice blue. And now we can see that this is not quite perfectly aligned here. So to fix that, we're just gonna drag this shape around, or use our arrow keys to get this until it looks like it's in the right spot. This is an example of something where when you know that you're gonna be doing the coding yourself, you don't need to be too absolutely 100%. Precise with how you lay things out, because this line is actually gonna be created by CSS when we come to coding up the theme. And then CSS is gonna take care of making sure this line is the same width as the menu that it's being applied to. And that it has the exact same vertical position. If you're creating a design that you're gonna give to someone else to code, then you can't assume that they know what you're trying to create. And in that case, you do need to be perfect and spot on with how you lay things out. But when you know you're just trying to get down your ideas, your visual ideas in order for you to then code things up yourself You don't need to worry always about being too precise with things. So let's take that back to 100% zoom, and that takes care of our active menu style. And that's also going to double as our hover style, so when we hover over each one of these menu items. We're gonna give it that same color of blue and that underline. And then the last thing that we're gonna do for our master layout is just add a little bit of text inside the footer here. Now before we do that actually, we're just gonna rename and nest these layers. So this one is our site title, site_title We're gonna nest that inside the header. Here we've got our nav menu. We'll nest that inside the header as well, And then we've our active Style. So it's just a good idea to keep all of your layers organized so that you know what represents which part of your design. All right so finally we're gonna add a little text into this footer here. Just grab the text tool you're just gonna click. And then we're gonna add this text in here. So we've just got a copyright symbol, and then we're just saying Copyright 2018, Our B and B. You can copy and paste this copyright symbol from anywhere that you find it in plain text online. So in the notes below this video, you'll find a link to the copyright page on Wikipedia or the page 4, the copyright symbol. You can just copy the symbol from that page, and then paste it into your own footer text, and then type in the extra text yourself. Now I'm just gonna click somewhere else on the canvas to deselect that text box. Now that allows us to switch the color to white. We're gonna change this Also to Raleway font, we'll set its font size to 14, we're gonna set it to be center aligned. And now we're gonna stretch out the left and right sides of this text box, To either edge of the footer. And we're gonna nest this inside photo so we keep everything organized. Now we want to vertically align this box which we can do by hitting this button here and that has a line that takes automatically to it's parent which is this photo box here. And now what we're gonna do is add in a couple of anchors. So what we're doing right now is we're designing how the layout is gonna work when we have a large monitor and lots of space. And then in the next lesson, we're going to be designing how the layout is going to work when there is the minimum amount of space. So we're gonna have a maximum width layout and minimum width layout. And we're gonna make that process easier by ensuring that this text is gonna remain centered vertically and horizontally when we shrink this whole layer down. So what we're gonna do is, with the text selected, go up here to this Anchors section. And we're gonna hit this button, Anchor Center, and this button, Anchor Middle. And you'll see how that helps out in a little bit. All right, so that is all we need to do for our master layout. When we start creating the pages, all the page content is gonna happen inside this white space here. But every one of our pages is going to have this header, this title, navigation menu, and this footer. So as I mentioned, that takes care of the layout at the maximum width. So in the next lesson we're gonna create a thinner version of this layout, that's gonna work on the smallest possible screen sizes. So I will see you in the next lesson.Back to the top