FREELessons: 15Length: 2.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Basic Wrapper Layout

Even if the body of your site is 1200px or 1440px, it’s important to make it clear to a coder what should happen in a design when the viewport doesn’t match these values.

First, I’ll show you what not to do when creating a layout. Then we’ll start our design by setting up our document and basic wrapper layout in Adobe XD to ensure we’ll be conveying this important information.

2.1 Basic Wrapper Layout

Hey, I'm Kezz Bracey for tutsplus. Welcome to the first lesson in code friendly design with Adobe XD. In this first lesson we're gonna look at setting up the basic layout of a webpage design, and in it we're gonna cover one of the first gotcha's to look out for when you're creating a design that can actually be translated properly on to the web. And that is that even if the main body of your site has a fixed width, It might be 1,200 pixels for example. You can't just provide a design that's only 1,200 pixels wide. It needs to actually still be wider than that so that you can communicate with the coder what you want to have happen on viewports that are wider than 1,200 pixels or whatever the fixed width of your site is. What you're seeing on screen here is a design that's an example of what not to do. So we have a design here. It's 1,200 pixels wide. It all looks nice. And this is actually a really, really common thing that you'll see in designs that are intended to be coded up. And we'll just hit Play, so we can preview this design. So this is the design at it's static 1,200 pixels of width, but what happens if we want to increase the width of our viewport to anything wider than that amount. So, I'm just gonna drag this up and you could see that now we have a problem. We've got nothing but blank space either side of the design, and this is what is actually gonna happen in reality. Viewports can be any type of width, they can be very wide, very small and you have to think of both of those possibilities in your designs. So a coder will get this design, they'll know that there needs to be something that has to be done when the viewport is wider than this amount, but they won't know what you as a designer would like to have happen. So either they'll have to improvise and code in something to fill in these blank spaces to the left and right side themselves. And you might not feel that it fits with your original design vision or they'll have to come back and get you to do more work on the design, so that they know what they should do in the coding stage. So now, let's go ahead and set up our layout. This is gonna be the basis of our design, and we'll do it in a way that it's going to allow us to communicate to a coder what we want to have happen when a browser is wider than our 1,200 pixel wide layout. So I'm gonna create a new design in XD. And even though I know I want the body of site to be 1,200 pixels wide, I'm actually gonna choose this example here, this preset size. This is 1920 x 1080. So that is gonna give us something indicative of a more common viewport size. So open that up. You've got a blank canvas that shows us our viewport size and we can click on the label of this canvas here, or this art board rather. And this will show us the dimensions that we're working with. Now, we're gonna be creating a design that's quite tall, because it's gonna have a lot of content. So we're also going to increase the height of this art board pretty significantly. We're gonna boost it up to 8,090. So now I wanna be able to see this whole design at once, so I'm gonna Ctrl+0. Now, we can see the whole canvas. The next thing we're gonna do is add in a big rectangle that's gonna act as representing the background color of the whole site. In the example that we looked at before of what not to do, the only background colors that we had were of the main site body. But you also need to show what the background color needs to be or even background image of the entire window. So we're gonna do that first. Grab the rectangle tool up here, and just drag out our rectangle that's gonna cover the whole side. It's always a good practice to name your laser as you go along in a way that communicates to the coder what they should do with each one of these layers. So we're just gonna call this site background. The next thing that we're gonna do is set up another rectangle to represent a site wrapper. This site wrapper is going to contain the body of the site, the main content of the site. It's actually gonna contain everything we saw in the example of what not to do. This site wrapper is what is gonna have that 1,200 pixel width. So we'll just drag out another rectangle. Actually first we'll lock this layer for now so we don't accidentally move it around, and now we'll just drag out a big rectangle. This doesn't have to be perfect cuz we will adjust it, and we'll call this one site wrapper. Now we want this to be 1,200 pixels wide because this is gonna represent our main site body. And for now I'll just give it a little bit of color, make it a little bit easier to distinguish from the rest of the site. We want it to be centered. So I have to zoom in a little bit here. We'll turn off that border, so we get a clearer read on how wide this actually is. So just get this zoomed to a level that fits comfortably, and you can see that we've got our 1,200 pixels of content here. And that gray wrapper there is what's gonna contain all of this type of content, that's all gonna be in there. And now you can see that we have these large gaps either side, and we're gonna be able to design what should appear in those gaps. And now that you have these gaps on the right and left side, you also want to consider whether you should have a gap along the top. And that's gonna depend on your design decisions. I find that it looks more consistent if you have a gap on the left and right sides of your design, that you also have a gap on the top. So I'm gonna make that gap 20 pixels. So to create that gap, I'm gonna change the y position of our site wrapper to 20. Now we also wanna have an equivalent size gap at the bottom here. So to do that, we're gonna drag this all the way to the actual bottom of the site, so we get that to snap. So that gives us a height of 8,070. Obviously, if you subtract 20 from 8,070, you get 8,050. So you can just manually enter the number here but this is a good opportunity to show you another feature of XD which is the ability to perform mathematics functions inside this fields. So if I know that I want this to be 20 pixels less I can just go minus 20, hit Enter, and it automatically calculates that for me. And that's something that can come in really handy with more complex things that you might be doing in your layout later. So now, we've got our site background in place, and we're gonna be able to color that a little bit later. We've got our site wrapper in place. It's the correct width, show all of the content that we want to have up here. We're also controlling how much space there is above and below the site wrapper. And as we move further into the design process, we're gonna be able to make sure that we're controlling exactly how the site is gonna look at viewport widths wider than 1,200 pixels. All right, so in the next lesson, we're gonna start actually getting the color scheme and the look and feel of our site in place. And I'm gonna show you a really handy shortcut that can really speed that process up. This is a technique that I've used a lot during freelance design. And it can eliminate a lot of the time that you spend playing around and trying to figure out what direction to take in a design. So we're gonna go through that in the next lesson. I'll see you there.

Back to the top