FREELessons: 15Length: 2.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Wrapping Up

Hi, welcome to the last video in Code-Friendly Design with Adobe XD. In this video, we're gonna have a quick fire rundown of every single thing that we've covered in the course. Come back to this video anytime you want to get a refresher on everything that you learned. All right, so first up, we learned that it's really important that your design canvas should not be restricted to the width of the site body that you've designed. You have to let the coder know what you wanna have happened to your design when a viewport is wider than the amount that you've allocated for the body of the site. So if your site is 1200 pixels wide, then make a canvas that say 1980 pixels wide and show what should appear on the left and right side of the site when the viewport is wider than the body of the site that you've designed. You can kickstart your design and get everything come together a lot faster if you start the process with a cool image that does a good job of representing the look and feel that you want in your site. You can use that generate colors. You can use that to get a feel that you then try to use all throughout the rest of your design, such as when you're selecting font families for example. If you're doing this for a business website, then the image that you should start your design with should be the logo of that business. When you're working with font families, either chose a font that you definitely know it can be used in the web like a font from Google Fonts. Or if you're using a different font, make sure that you double check if that font is allowed to be used online and provide the coder with any necessary files that they're gonna need to be able to turn that font into a web font. Wherever possible and practical, try to use vector graphics that can be turned into SVG graphics instead of raster based images. We see an example of creating an arrow graphic using the vector tools in Adobe XD instead of just bringing in a PNG that's already rasterized and set to a fixed size. By using vector tools and allowing for the correction of SVGs, your graphics become infinitely scalable. And typically, they'll be smaller in file size. As your design is coming together, start collecting the colors that you're using in your site into a color palette. Make that color palette really obvious in the design so the coder can then take those colors and use them in the most efficient way possible in your code. Try to avoid having too many really similar colors where they're not necessary. Sometimes it's necessary to have similar colors with things like gradients. But otherwise, try to keep the selection of colors that you're using to a minimum, for example, using the same color for a link as you would for a button. While you're creating this color palette, make sure that you're checking as you go that your colors have sufficient contrast and make sure that they're readable and accessible. You can do this by punching in your colors into a really simple, little web page, and then using Chrome Dev tools to check on the contrast scores between your foreground and background colors. Talk with your coder about using a handoff application that's specifically designed for the coding phase. Three really popular options are Avocode, Zeplin, and Sympli. And then whichever one you choose, start previewing your design in that handoff application early, if at all possible. It will just help to make sure that you catch any inconsistencies that might come up when your design is opened up in that handoff application. Make sure that you check for misalignments, and that can be half pixel alignments or individual elements not being aligned properly with one another. Half pixel alignments are something to look at for in particular when you're putting together vector graphics. You may need to go through and correct the position of nodes. So they're actually falling directly in the pixel group rather than inbetween two pixels. When you're aligning elements on the page, make sure that you've got them consistently aligned with one another. And they have consistent amounts of spacing inside your content area. So if you've got 40 pixels of space around one section of your content, then try to avoid having 46 pixels of space around the next element. Have the way that you layout an alignment where it be something that you think about in advance. Set yourself up with bit of the system and then stick to it. Another area where you should avoid using raster graphics, if at all possible, is with background gradients. You can do a lot with just pure CSS gradients. You can make really nice linear gradients, really nice radial gradients. And those gradients will then be fully responsive. And they'll be a smaller file size than and raster based background image. When you're putting together your typographies, start with your biggest text which is gonna be your heading. And then also your smallest text which is going to be your default paragraph text. Decide on the font families, line heights, weights, and colors for both of those types of text elements. And remember not to use too many different weights. Because if you have too many different variants of the same font file, then you end up with too much download time to bring in all of those font families. So keep it to just a couple of font families and weights, so that it doesn't drag your site load speed down too much. Make sure that you're careful of the difference in weight that can be needed when you you have light text on a dark background versus dark text on a light background. And always make sure that you remember to include the design of links. Demonstrate how you want a default link to look and also how you want a hover link to look. When you go through and finish designing out the typography of your headings, you'll already have your heading one style set up. So then, go ahead and figure out how your heading six style should look. It should basically be the smallest header you can make it, while not becoming smaller than the default text, and remaining distinguishable from that default text. From there, you can use the site like to figure out what spread of font sizes will take you smoothly from that small h six size up to your h one size. And then you can apply this font sizes to your h two, three, four, and five headings. To help make your smaller headings look more pronounced, they can have a slightly heavier weight, while your larger headings can have the lightest weight. Always remember to include line height of your headings to make sure that they're gonna be readable when headings run onto multiple lines. Generally speaking, larger headings can have slightly smaller line heights, while smaller headings need to have slightly larger line heights. And also remember to layout what spacing should be inbetween one heading and the next heading, as well as a heading and default text, as well as making sure that you cater for what happens when a viewport is very wide. Also make sure that you bear in mind what's gonna happen to your design when a view port is very narrow. Be careful with rasterized images. Make sure that you don't fix an image into a place that is not gonna be adjustable. Make sure that you give all the different versions of an image that a coder might need in order to adjust a certain part of your layout to a smaller width. And where it's helpful, you can use a gradient overlay to make sure that a background image fades out to a flat color, making it easier to fill in any gaps that appear around that image. And then finally, when you're all done with your design, go through and clean up all of your layers, remove anything that's not necessary in the design. Name the layer so that the names of the layers are informative. They indicate what the purpose of the layer is, organize things into groups that are also indicative of what that collection of elements is for. Double check to make sure that you've got all the necessary colors added into your color swatches. And wherever you think that it might be helpful, you can include annotations directly in the design to help communicate to the coder what you want them to do with each aspect of the design that you've laid out. All right, so that wraps up Code-Friendly Design with Adobe XD. You definitely don't need to be a coder in order to create a code-friendly design. But there are definitely a few things you should think about as you're going through the design process. If you're aware of these things in each and every project that you do, you're gonna have two major, major benefits. One is that your design is gonna come out in the browser looking the way that you wanted it to. It's not gonna be the coder to make any adjustments. And two, it's gonna allow your projects to be delivered much, much quicker. Because if you know what the coder needs in order to do their job faster, you're gonna be able to provide those things to them. They won't need to come back to you with questions about what you want done in a design or asking you for any amendments to the design. They're gonna be able to just knock their job out really quickly. So your team is gonna be able to be a lot more productive. I hope all that is really helpful to you. I hope that you've learned a lot about how to make code-friendly designs. Thank you so much for taking this course. And I will see you in the next one.

Back to the top