Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:19Length:1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.2 Wrapping Up

Hey, welcome to the final video in Responsive Design in Adobe XD. I'm just gonna try to cram everything that you've learned into a nutshell. So whenever you want a refresher, you can just come back and watch this video. All right, so first up, we covered a quick refresher on what responsive actually means. It all boils down to just two things. And that is controlling your columns, and controlling the content inside those columns. As for your overall workflow, you're gonna really need to think about mobile first, because you really have to be thinking about mobile always across all sizes. And you always need to be making sure that you include both touch controls and mouse controls. And everything needs to be designed with optimization and performance in mind. So of your overall workflow, figure out the smallest fit that you're gonna have, and the widest width that you're gonna have, and start at either end. But just make sure that you cover the entire spectrum of widths in between those two ends. As far as the specifics for Adobe XD, remember that this is not responsive development, it's just responsive markup creation. And so you can't make things pixel perfect like they are in the browser. So your job, your goal is that you're trying to focus on by communicating to the coder where the breakpoints should be, and how you want the site to respond at every different size. You wanna also be able to communicate to a client how things are gonna look on various devices. And you wanna do both of those things in the most efficient possible way. One of the things that you can do is use the responsive resize function. Which is a lot like constraints in other programs, with the difference being that XD will try to figure out which constraints you wanna have applied to which elements. Sometimes it'll guess correctly, sometimes it won't. So you just have to keep an eye on it and tweak the settings as necessary. Basically, you wanna have responsive resizing switched on at the artboard level, so you can have fluid rescaling content inside the artboard. You wanna have it turned on whenever you've got elements that you wanna have anchored on the right or the left, or when you have things that you need to stay at a fixed size when their parents are changed. And you wanna turn it off when there are child elements of whatever it is that you're resizing, that you want to remain flexible, like with a flexible column layout. In XD, you can use artboards to represent multiple different widths. And you can also use those artboards to test where a layout breaks, by setting them up so that the whole design will shift as you resize that artboard. Within an artboard, you can set up an emulation of flexible percentage based columns. While you're doing that, you can also use rectangles inside groups to simulate all of the divs that are going to make up the actual design. And these can also serve the function of acting like guides, so you have something to snap to as you're trying to position your content. And you also have something that you can align your content relative to as well. You can use the repeat grids functionality to quickly produce multi-column and multi-row layout elements in your site. But you'll then need to ungroup that repeat grids area that you've set up and turn off responsive resize, if you want that space to be able to stay flexible when you're resizing the artboard that it's in. When it comes to working with text, often you wanna take point text and turn it into area text, and expand the bounds of the area that that text is in. And that will help it to resize with the width of the page. And it's a good idea to add a text style to your document for all of the different sizes that you're gonna have your text at. That helps you to be able to easily reuse that style in multiple places throughout your markup, and it also helps to communicate to the coder what font sizes need to be used in the style sheet. So then with that information about how to use Adobe XD in a responsive context, you can go ahead and create a series of artboards that represent each of the breakpoints that your layout is gonna need to have. So wherever the layout needs to be adjusted in order to stay legible, that's when you create a new artboard. So if you're starting from a wide layout, as you go along, you're going to gradually need to collapse multiple column layouts into single column layouts. So just keep going through, adjust the artboards until you see a break. Make a new artboard, change up the layout. And then keep going until you've covered the entire spectrum from your widest possible layout, down to your thinnest possible layout. And that is everything. So I hope that helps make the process of responsive design for mockups in Adobe XD a lot smoother and straightforward for you. Maybe you even picked up a couple of new things about responsive design in general. Thank you so much for taking this course, and I will see you in the next one.

Back to the top