FREELessons: 15Length: 2.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.6 Tidy Up and Add Notes for the Coder

It’s a great practice at the end of any design to go through and tidy up the document, adding and removing a few final things that will help ensure everything is as code-friendly as possible. In this lesson, we’ll go through this phase and get our design ship-shape and ready for handoff.

3.6 Tidy Up and Add Notes for the Coder

Welcome to the last lesson in Code-Friendly Design with Adobe XD. In this lesson we're just gonna put some finishing touches on the design. We're gonna tidy things up, get our layers all named in a way that helps to inform the coder, and whatever we think is necessary, we might include a couple of little notes. All right, so the first bit of clean up we're gonna do is just make sure that the height is correct. Actually slightly underestimated how much height we need here because we're gonna add in a little footer. So, let's start by just increasing the size of our board a little bit, just drag this out for now. We'll figure out exactly how much space we need after we put in our footer. Drag out our site wrapper. And I'm just gonna paste in a little text content, just a really basic copyright message, and let's have that be 40 pixels from the space above it. We'll drag this up to make a neat little footer. And what have we got, 8085. Actually, let's push that up to 8090. And we might just break it about 40 pixel tradition here and just center it. Put that to 100% size. So that looks quite adequate for a basic little footer. So we've got 8090 in height there. We need to at least have a 20 pixel cap so we will snap it to the bottom here. And then we'll just add 20 pixels. All right, so that's our overall design done. Now we'll grab out outboard, shrink that down so that it snaps to the correct size as well. Now let's just go through and do a little tidying. The measures that we've been using so far, let's drag those up to the top of our layer stack. And we can use them to help indicate to the coder, What padding values they should be using when they put this together. So actually we'll leave the 120 measure here, and we use it to indicate the padding in the corner of our panel here. And while we're at it, just get that to be a bit more precise so that it's clear what we're trying to demonstrate here. And the 80 pixel measure, we'll bring all the way up here to represent the first one that we use 80 pixels of padding. Now let's make sure that all of that content is grouped up in the run away. All right, so here we want to take all of these items and group them up into a single panel. That's our second panel, so we're just gonna name that Two. We'll group them up by pressing Shift+G, no, and we'll group them up by pressing Ctrl+G. Do the same thing for our next panel. Select all of these items, and the background, Ctrl+G to group. We'll name that one Three. Our light typography doesn't have a background, but just for consistency, we're gonna add that into our group anyway and name it Four. Going down further, we've got our dark typography here. This time it does have a background, so we'll select that as well. Ctrl+G to group that up and we'll name that Five. We'll keep going down, and we already had everything in this area grouped up, so we just need to name that Six. And if you were handing this off to a developer, obviously, you wouldn't want to leave this BT restering here that we're using as example of what not to do. So obviously, that's not something you wanna set off. So we'll delete that. Next stop, we're gonna need all the content for our last panel. That includes all of these things and also the full width laptop. Group those up and name them Seven, and then once again just for consistency, group up our little copyright message and name that Eight. We've got our color palette up on top right. So now it's a good time to think about if there are any additional colors that you should add to you pallete. There are a couple that I think we're probably ought to add and those are the colors that we use in the gradients. So rather than leaving it to the developer to try to sample these colors, let's make it a little easier. So let's get a swatch duplicated out. We'll select our background here. We'll select this stop. That's the color code for the lighter end of the stop. Let's just add it to our pallet here, just gonna make it easier to add it up here. So we'll select a new swatch and add our new color in there. And then let's do the same thing for each one of the color stops in our gradient down here. So we'll select our background, open up our gradient. These three colors we haven't added to our swatches. So add each of the colors one by one. And now we can go up and insert those. As news swatches. So we need three. One, two, three, So that's one, two, three colors. All right, now over on our layers panel here, we can rename each of these swatches so that it makes sense to the coder what these swatches are used for. So the only use of this color in our design is linear gradient in panel two. So we're just gonna name it really clearly to make it super obvious that's what this swatch is for. So we'll say stop one linear gradient panel two. And we do the same thing for these ones. All right so let's just check the correct panel number, so that's panel six. We selected the panel down here and is highlighted up here, so panel six. So this swatch is stop one, radio gradient panel six. Just copy that, place the same thing in here and just change it at stop two, And stop three. All right, so now the color panel should make total sense when the coder comes to look at it. And now let's just drag it all the way up to the top so that it doesn't look like it's part of our panel system of layouts. Now let's just scan through the other panels and see if there's anything else that we think we need to explain. These already have notes in that we added before specifying here that this link should be underlined, so that's all good. We specify the line height here, but what we could also do is jump into this text and say, the margins between each of these elements should be 40 pixels across the board. And then we can just drop off the last couple of lines from this paragraph. So then it's just a little note to help all that make sense to the coder. And just to make that a little bit clear, Let's just make that our orange color that we worked with before. And so that it doesn't look too confusing, we'll just make this look like another link. All right, so that's what we need to annotate for that panel. This is the same so that's all good there. This section doesn't need any extra annotation either. The coder will know that they'll be able to recreate this gradient in CSS. However, if you wanted to, you could edit this text here and just make it really clear and say please reproduce this gradient using CSS. And then the other thing that we probably just wanna add in here is making sure that the coder knows that there is this full width image here. So we'll just do that with a note in this text again. So we'll just say there is a full-width version of the laptop image you can use for export instead of this clipped version ersion seen on the right. And then we'll just get rid of a couple of those lines again. And once more we'll just make that look like a link so it's a bit clearer. Exactly what we're doing. Actually let's just edit that to say make a bit more sense. Say this full width version of the laptop image in a hidden layer. Just make sure that they're not looking for attachments to an email or something along those lines. So that should actually be a bit more helpful. Now we just wanna probably do a little bit of layer renaming where necessary. All right so, we can actually delete the original version of our background that we had using the blurr effect. There's no need for that to be there, so we can get rid of it to make sure it's not confusing. That said, I will be giving you this file. So I'm actually leave that in, so that you can have a look at, have these layers done if you need to. I'll just hide that. In our panel two, let's just make it clear that this is the background. Name that to BG. Panel three, same thing, background. Panel four everything is self-evident. Panel five again, bring up that layer to BG. Panel six, we'll just scoot down Almost everything there is intuitively named but this, so we'll just name this button, Panel seven, let's rename this mass group to BG Image, and then BG Image Latin. And then, BG Image Gradient Overlay. Name this to button, and then the rest of that should be all good. Eight doesn't have anything to renamed and that is everything. So that might seem like just sort of tiny finicky steps to have to go through. But because these layers are all set up by you, you're the best person to give those layers names and help to communicate to the person who's gonna be taking the desigh from here on exactly what you want each of those buyers to be used for. It only takes a couple of minutes to do it, but for the coder it can save them a lot of time in familiarizing themselves with the design and getting your work into the browser soonr. All right, so that is everything. Let's just actually take a quick preview of what we've done. So I'm just gonna drag this viewport thing up to 1080 and we'll hit play. And then we can scroll through and have a look at our handiwork. Everything is looking pretty cool and there is every single piece of information that a coder should need in here to be able to properly code up your work. To make sure that it looks the way that you want it to look. But not only that, to also make sure that it's fully responsive, it's fully accessible, and all of those technical i's are dotted and t's are crossed. So now we just have one more video in this course and that's where we're gonna go through and wrap up everything that we stepped through in each of the lessons. We're gonna cram things down into a really tight summary so that if you ever need a refresher on everything that you've learned. You can comeback and you can just listen to this one video and it will jog your memory on each and every point that you've been over. So I hope you'll join me in the last listen of this course, I'll see you there.

Back to the top