Lessons

Lesson Info

Designing the Main Section

So, one thing you might find rather quickly when we start designing content, especially for websites, the more content we add the taller the page needs to get. When we went into the art boards and added these, we had specific sizes which not only included a width but a height. However in Sketch, we can increase the height as we need it. So, if I come down here and click on the desktop HD art board, by selecting this we will get modification arrows on that art board. Which means I can come in here and grab the bottom-center for example, and just make this as tall as I need it to be. So hit the space-bar, drag this up, grab the center modification point, and just drag this down. As I do this, over on the inspector panel, we'll see that my new height is 2,219 pixels. So again, you can just quickly come in here and just make this as tall as you need it to be. So now let's go back to our content file. Let's scroll down. We're going to create our define section. So we'll copy our headline fi...

rst, go back over to Sketch, now to the insert menu choose text, and for this one, we are going to center the headlines, but I'll make the width of the text block the full width of all 12 columns. With that in place, I'll hit paste, I have now pasted in that text, let's come over to our typeface, we'll choose lobster for this. For the color we are going to use the brown color. So let's scroll over a little bit, click on the color swatch. Eye dropper will choose brown. We're going to set the size to 48. And it really helps if you select everything before you start assigning your colors. Alright, so 48. Set this to centered, we'll set this back to lobster. And when I have all of these items in place, we'll come over here and choose a new text style. So create new text, and we're going to name this "H2", and the press return. So when we're developing our webpage tomorrow, all of these items in our webpage will be "H2" tags in our HTML. So now, I'll just arrow this up a little bit, just move it into place. Get this where I like it. Switch back over to our text. Let's come in here and choose "What is a spice?" Let's go back over to Sketch. If you have different type treatments that are applied either to paragraph styles, or even some of the styling options like underline and bold for example, you do have to have each of those text blocks be it's own text item. This may be something that changes later in Sketch, in a different version. We're using version 44 here and we still need to have separate text blocks. So that heading is a separate text block. So, I'll come down and choose insert text, and here I am going to click and drag and I want to have the text blocks be half the width, because we will create columns out of this tomorrow, but I don't want it to be the full half. So, I am going to come in here and just drag this so that it is five and a half columns wide. So I am not going to go to the full six, I'll just come in here to about halfway. Let's paste in our, what is it, spice? And then we'll change this content to match the style that we are after here. So that's going to be oswald. We are going to set the size of this to 22. We are going to use oswald bold. And new text style, create a new text style, and these are going to be our "H3's". Then I'll press return. Now to replicate this, I am going to hold, actually we need some room for eye console, I'll move this down a little bit. To replicate this, I am going to hold the option key, click and drag. And I am going to drag a second copy of this heading, so that the right-hand side of that text block matches the right-hand side of the 12th column. And instead of "What is the spice?" let's come in here and change this to "What is an herb?" Press escape. Let's go back and get our contents. So, come in here, select this. This is the text for "What is a spice?" Let's come back. Going to select the "What is a spice?" headline, again, I am going to option drag this down a little bit, give ourselves about a 20 pixel space between those, double-click in here, do a select-all paste, command-V, and with this, we are going to come in here and take off the bold, we are going to set the font size to 18 point, we are going to keep this brown. And now as I mentioned before, every different sort of set of content that is saved, or it's styling content for text block, needs to have it's own text block. So what we're going to do, is we are going to assign this a body style, but we're going to call this "body-centered", because we can't change the alignment without breaking the link to the particular style. So let's come in here, and let's create a new text style, and we'll name this body, and then I like to put a hyphen, then we'll type centered, and then press return. Hit the escape key and then, space bar to move, option drag, we'll get going a little faster now, and let's come in and select our text for herbs, switch back to Sketch, double-click command+A to select all, command+V to paste, and then escape to come out of here. So once you get the hang of Sketch, you can start to see how quickly you can really start just creating these layouts and working with all of your content. So, the next section we want to create is going to have a color in the background. We are going to bring the little jars of spices that we have in our exercise files, and we'll just look at sort of styling a different section a little bit differently. So we'll start by coming down, actually before we do that, I made all that hubbub about being organized, so let's come in here and organize this content here. So from "What is an herb?" down to "Let's define before we dine", let's select all of these items and hit command+G, and let's call this our define section, and then I'll press return. So typically when you're doing layouts, especially in ad agencies and design firms, you'll start to name sections of your layouts, so you can use that to present to your clients and talk to your design teams about these different areas. So we'll call this the define section and the header section. So now that all of these are grouped, let's come back to the insert menu, let's come down to shape, let's draw a rectangle. And the section here we are going to create we are going to call the choices section, and this particular piece of content is going to go the full width, the color in the background here. We'll have parts of our design that will stretch the full width of the browser, and we'll have other parts of the design that will conform to the 1,200 pixels. So again, anything that's content, things people need to read, we don't want that to be the full width of the browser, it's just going to get too long to read. However, we don't want the design to feel like it's floating in the browser either. So we'll have areas of the design that will actually stretch to the browser, and other areas like the content that will conform to a certain width. So this background area here, we want to make sure that this yellow color that we are going to assign, will go the full width of the whole browser. So we'll come down here and turn off the color. Let's grab our color swatches. We'll turn off the border rather. Let's come in here to the fill, let's click on our swatch, eye dropper tool, let's come over here and sample the yellow color. Oh, this is showing now that I zoomed down. We do have a document colors option here. If you are on a larger screen, you'll see document colors. Now that I can see this, I'll come down here and click on the plus sign. So that will let me add all of my custom colors to Sketch. And since I can see this now, because I have scrolled up, let's quickly go add a few other ones. Click on the eye dropper tool, let's go grab the darker green color, click on the plus sign, let's go back to the eye dropper tool, let's grab the red color, hit the plus sign, and let's go grab our brown color and click the plus sign. Great. So now I have my document colors in here, let's go back and assign this to be yellow. And then again, just like before, we'll go back to the exercise files, we're going to grab the spices.png file, let's drag and drop this right inside of our layout. Use my arrow keys and just arrow this around a little bit. And what I want to do is conform this to the size of the rectangle. So, it was in the layers panel. Here's the spices hold the shift key select rectangle, you're going to right-click, come down and choose mask. So just like we masked the counter top in the header, we're going to do the same thing here. This will allow us to toggle open the group, and then we can change the crop of this, if we hold the option key and grab the corners I can size this from the center, and then we can just create a crop that we like for the layout. For the height of this rectangle, let's come in here and set this to 400 pixels. Oops, I went in on the rectangle, so let's grab mask. We'll set this to 400 pixels tall. Then the spices artwork inside. Then, I'll use my arrow keys and just arrow this down. I want to create a little negative space on the top of these pieces here. The white bowls will sort of mesh into the white background. So we'll just scale this up a little bit, I want the negative space to look nice on all of these. And I'll arrow this over a little bit. Great. With that in place, we are going to add our content on top of here. And I want to add the content on top of a semi-transparent white box. So back to rectangles, back to the insert menu. And this, we're going to make this 10 columns wide, or 8 columns wide rather, I am going to leave two on the sides. Let's come into the borders, turn those off. Let's come into the fill, we'll set this to white. For the alpha setting, we'll set this to and then press return, giving us the semi-transparent white. Now let's add in our header. And so, instead of drawing another text block, I'll come up here and select the "Let's define" text block we have in the other group, hold the option key, just click and drag, and let's drag this down so that it's over top of the white box here. And now in the layers panel, here's our copy. Let's drag this up so it's inside the next group here, so it's right under, right above rectangle three rather. Now let's go back to our copy document and we'll come in here and select "So many choices", that's going to be the headline for this new section, and let's go and get some of our content. Copy that, switch back. So, I'll option drag this down here, do a select-all, let's paste this, and now let's come over here and reassign the style to body-centered. So now we are starting to see how quickly we can assign these styles for all the content we have in our document. We'll just arrow this up. Let's come up to the group up here, we created a group for our button. So, in the layers panel, I come down here, grab the button, instead of option-drag, I am going to hit copy. I'll come up here and select the text that we just pasted, I'll hit paste again, and this will now be part of this group. Let's bring this down. It's two columns wide, so now we can zoom up. Now inside of this group, we'll come down here, select the rectangle, and let's assign this our green color. Hit the escape key, and now we can move this up. So now with these three things selected, we can just move these around, figure out the exact sort of composition that we want, and if we don't need as much room as we had before, then we can come in and start making adjustments to the height for example. So the mask, maybe I just want to bring this up a little bit. Same thing for the rectangle, bring this up, and again real quickly we can come in here and really start to change the way this content is starting to be aligned.