Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:15Length:2.5 hours

Next lesson playing in 5 seconds


Free Preview: Code-Friendly Design With Adobe XD

Welcome to the Course

  • Overview
  • Transcript

When you’re creating a design intended to be handed off to a developer, it’s important that you understand some key factors so that your design translates into code the way you expect it to.

In this course, we’ll get you across some of the most common “gotchas” you may not be aware of when designing for the web. By the time you’re done here, you’ll know how to make your designs code friendly, and the developers you work with will love you for it.

While we’re at it, we’re also going to cover some shortcuts for creating great designs, a little practical application of color theory, and a splash of accessibility.

Let’s begin!

Learn Adobe XD

We've built a comprehensive guide to help you learn Adobe XD, whether you're just getting started with UX design or you want to explore prototyping and collaboration.

1. Introduction

1.1 Welcome to the Course

It's a pretty common approach to web design to have one person create the design of the site and another person go through and code up that design. And what's also pretty common is for a design that's intended to be coded up to look a little something like this. So this all looks very pretty, but there's actually a lot that's missing in order to be able to properly turn this into a coded up, fully functioning website. A design that's properly code friendly should actually look more like this. In here, we've got a lot more of kind of information that a coder really needs to take your design, your concept, and actually make it work on the web. This course is the first in a two-part series, one where we're gonna use Adobe XD to create a code friendly design, and another where we're going to use Avocode to take that design and code it up. In this course, we're gonna cover some of the most common things that designers tend not to be aware of, that really need to be included in the design in order for it to be a complete website design, and it's part of the process. We're also gonna cover some shortcuts that can help you speed up the process of making really cool designs for the web. We're also gonna bring in a little practical application of color theory, and we're gonna include a little bit of accessibility as well. Let's go ahead and get started on code friendly design with Adobe XD. I'll see you in the first lesson.

2. Laying the Foundation

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.