Lessons

Lesson Info

How to Replicate Layouts to Other Art Boards

So now let's take some of this content and let's move this over to another art board. So, we have our nine inch tablet over here on the right hand side. I'm gonna select this and just make this a little bit taller. So, we're gonna have a few different design challenges here. As we work on our responsive web design, we need to look at not only the size of all of the content, but the relationship of the content to the artwork, and the relationship of that content to the rest of the page, especially with things like our page width. So, what I'll typically do is I'll grab an entire group, paste it over into another art board, and then start making the adjustments. So, in the large art board, let's select that whole group we just created. Click command G and we'll call this Choices, and then press return. So, to begin, let's grab the header group. I'm gonna hold the option key, click and drag the entire group, and now I'm gonna drop it onto the tablet nine inch. By doing that, you'll notice...

that all of the artwork that was in the header group is now being replicated in the tablet screen, and the orientation is being set to the upper left hand corner. So, I didn't have to worry about copying and pasting it in the exact same spot. By doing an option drag in the layers panel, it's going to replicate that artwork in that next area, giving me a much quicker way to start making some of the adjustments that I need to make as we move this content over. So, I'll zoom up here a little bit. If I hover over the header, we can see on the art board, the blue bar, the blue lines that are indicating how much room that header content is taking, because that is the size of all of the artwork from the large screen. And the cutting board and the countertop are very large graphics, because they're gonna take up the full width of that heading area when we create our layouts. So, we're seeing that entire area showing up on the right hand side. So, let's zoom up here. I wanna make sure I can see a little bit on the right hand side, and let's come in here and start making some adjustments. So, the first adjustment I wanna make is gonna be the height of the countertop. So, on a tablet screen, I don't want the countertop to take up quite that much height. 400 is gonna look good on a 1080p monitor, which would be anywhere from a to a 30 inch monitor. But when we start getting down to these small screens, we wanna make sure that we don't take up too much room for the top. So, let's come in here and change the height of the rectangle to 300 pixels. So, I'll open up the countertop group, come down and select the mask, and then we'll come in here and set this to 300. Hit the tab key, and that's going to conform the height of that. So now with that conformed, let's zoom up here. Hit the escape key. Now let's come in here and start adjusting the rest of the content. So, the cutting board is way off here to the left, or to the right, rather, so I can come in here and just move this into place. Once we get this sort of close, what we're gonna do is change the width of the cutting board. So, width is selected. We still have it rotated. We're gonna set the size down to just 400. The lock is turned on, I'll hit the tab key, and that's gonna lock this into place, so we can move this over to the right here to crop this out. We set up our grids earlier as well, so we're gonna wanna conform the grid. On the larger art board, we have all of this negative space here because, again, we wanted to represent the fact that, on a large screen, we're gonna have all this extra real estate on the right and left of our content. So again, we want the design to fill the area, but not the content. When we start looking at smaller screens, people who are on tablets or phones, we're not gonna have that sort of extra space. We're gonna use all that available space on these individual devices. So, by setting up our grid with just a couple of pixels on the right and left, we're gonna make more use of that space. So, let's come down and let's select the navigation element first. We'll toggle this group open. So, what I like to do is come in and select the logo first. Let's drag this over. Again, these are kinda sticky, so this will stick into place. Let's grab our navigation. I'm gonna move this over as well. Now we'll select the entire navigation group, and using my arrow keys, I'm a big arrow key fan, I'm gonna just move the entire group up. So, I can hold the shift key and move this up really quick. And we're just gonna bring this up to the top here. And we wanna make sure that the navigation is above the cutting board. So, I'll grab the cutting board and just move this down a little bit. Command option down arrow just to move this down. We wanna make sure that the navigation is in front of the cutting board. And then we'll come in here and just make some of our other changes that we were making before. If you double click inside a sketch, you can double click down inside of a group, so I can grab this heading, hold the shift key, grab the text. We'll move this over. Sometimes I will take something like a heading here, for example, that has a little bit of a left edge, and I'll just sort of do an optical character alignment here. When we're doing our HTML, we can actually use a negative margin in CSS to sort of simulate this. So, I'll just scoot this over a little bit. Browsers don't have optical margin alignment, but again, with some CSS properties, we can sort of simulate that a little bit. And so, let's select all these items, and we just sort of play with the space that we have now. And lastly, let's come down and grab the button, and we'll move this up into place as well. And for the button, since we're on a smaller screen, we can come in here and make this a little wider if we want so it's easier for somebody to tap this with their fingers. So, these are adjustments we would make for a smaller screen. So, this will just be a little easier to tap this with your fingers. And again, we'll just come in here and just tweak this a little bit. When we zoom out, the last thing we'll do is come into the navigation. I'm gonna come down and select this rectangle. The rectangle's really large, so I'll just space bar, pan over, and I'll just bring these down so that they just snap into place. And do the same thing for the countertop mask. So, pretty quickly, we were able to take all that content from the header that we created for the large screen, option drag it over into the art board for the tablet screen, and really quickly come in here and just start making some of our adjustments. Since right now, in the define section, we just have text blocks, this is gonna be really quick. This will show you how powerful it is to modify, just like the button, different blocks of text, because as we transform one item, instead of scaling the type inside, it scales the container boxes and everything flows inside. So, option key, click on define, let's drag this into the tablet nine inch. We'll pan over, we'll see this showing up here. So now here's what we're gonna do. All of these items are selected, the entire group is selected. Let's click and drag, let's align all of the text blocks to the left hand side of the first column. Now I'm simply gonna come over here and resize all of these options together. Huh, how cool is that? So now all of these items are now resizing, and since we have a consistent grid, we can see everything is sort of snapping into place. So, notice that we're not getting a resize of the type, but rather, all of the text blocks are being resized as we move this across. So now we can come in here and get these items here. So, we'll select these four text blocks. I'll use my arrow keys and just move these up a little bit. And then finally, let's come into spices, we'll do the same thing. Hold the option key, click and drag spices, drag this up into this area here. All the content shows up here like we saw before, and we'll do the same thing. Sometimes you'll have to zoom out to start making these modifications. So, on the spices, we'll just drag this down. Grab the artwork inside, hold the shift key, and move this into place. Set the height, so we'll come in here and set this to about 220 pixels. And then we'll go back and grab all of the choices text, option drag this into place, and just like we saw before, we're gonna come in here and just drag this down. So notice as I drag this, not only is the type moving, but the buttons are moving. The Watch Now button is changing size as well. Get this into place. We're gonna make this about all of the center columns here. So, right about here. Again, my columns got a little messed up. We'll fix it in a moment. And let's toggle this open and just move these items around as well. So, we'll move our button down. We'll grab our text, we'll make the text a little wider so we don't get a text wrap. So many choices. Move this down, and then we'll come in here and grab the rectangle, and just bring this down. Great. Okay, so again, pretty quickly we can come in and just get our layout working across different areas here. So, to finish up the world section at the bottom, let's go one more time back to our content section. So, we have this area here called "Where in the world." So, we'll copy this first. Let's come back to Sketch, and just like we did before, I'm gonna come in here and grab one of these text blocks. I'll grab "So many choices" and option drag this down. Use my arrow keys. I'm on the large HD board now, so we'll just drag this outside of the choices area. Let me close up some of these here so you can see it. There we go. Come in here, select that, and paste. So, we've got "Where in the world." I'll zoom up so we can see it. And now, to demonstrate this, I mentioned earlier, if I came in here and wanted the "Where in the world" heading to be flushed left, I will come in here and change the alignment, so I'll set left. As soon as I do that, you'll notice in the paragraph styles here, we now get this little arrow. It's the same symbol that we see for symbols. If I toggle open the header and look at the logo, for example, it's the same icon that we're seeing here, which is an indication inside of Sketch that this is hooked to something else. Now, we only made a change on the alignment. However, Sketch does need each paragraph style to have none of the internal contents changed of those properties. So, if we wanna have a second heading style, we're gonna come in here and come down and choose create new heading style, and what I'll do is do something like H2 and then a dash, and then I'll type something like "flush left." So now this is gonna indicate that we get all those same properties, but this content's gonna be flushed left instead. So, if I come up here and selected "So many choices" and assigned this H2 - flush left, that's gonna flush over to the left hand side. So again, depending on how many styles you need and how many alterations you make, and how many times you reuse the text block or the style, you can decide when you wanna use some of the styles inside of Sketch versus just setting them right on the stage. So, let's option drag, drag this down, and we're gonna do the same thing for the body. Let's go back to our document, let's come down here and select all this content. Skip the paragraph tag there. Let's go back to Sketch, let's select all, and let's paste all that content. So, just like before, we're gonna assign a style. I'm gonna come down and choose Body - centered. Now, I don't wanna have all this content centered, so I will have that selected, hit left, come back to the styles, and let's do the same thing we did for the H2 style. So, we'll say create a new text style. We're gonna call this Body - flush left, then press return. So now, when we get to our smaller screen, if we wanna flush left some of these other pieces, especially on a handheld device, we can use Body - flush left instead of Body - centered.