3.3 Artboards and Responsiveness
Artboards form a key part of an optimal responsive design workflow in Adobe XD. In this lesson, we’ll walk through how to put them to work.
1.Introduction1 lesson, 00:49
2.Responsive Refresher2 lessons, 15:28
3.Responsive Design in Adobe XD7 lessons, 43:13
4.Breakpoint Artboards7 lessons, 25:05
5.Conclusion2 lessons, 08:05
3.3 Artboards and Responsiveness
Hey, welcome back to Responsive Design in Adobe XD. In this lesson, we're just gonna touch on artboards, the basics of using them, and how they relate to responsive design. There's not that much to cover, so this is gonna be a fairly quick lesson. All right, so the first thing that you need to know is the artboard tool is here. So you could just grab an artboard tool and you've got a couple of choices. You can either draw out an artboard at the size that you need it. Once you've drawn it out, you can specify width and height here. Or the other way that you can create an artboard is you can select one of the presets down here for a specific device size. So let's say that you want to show how it's gonna look on iPhone 6, 7, or 8, you just click the button here, and it's gonna automatically create an artboard for you at the appropriate size. It's actually going to automatically place that artboard wherever it feels like it doesn't really matter where your cursor is at the time that you hit one of these selections here, it's just gonna line it up next to another artboard. So you might just need to move things around after you create them. Once you do create an artboard, you also have the ability to switch it from portrait to landscape mode. So this can be really great for creating mockups to show clients on how a design is going to look in different orientations. And then the other most significant part of XD artboards is the scrolling settings down here in the view port height settings. So of course usually a site is going to be bigger than the amount you actually have it in view port. And you're typically gonna need to drag out the height so that it can fit in all the content. XD will give you this little dotted line along the bottom here that indicates the bottom of the view port, so I'm just going to just put a big rectangle in here just to demonstrate what the purpose of this is So now if I preview this artboard by clicking this play button here, it's going to allow me to scroll down past that point that I specified with that little dotted line along the bottom of the viewport area. And I can actually drag this to a different spot, And that's gonna change how much of the design is visible in that preview before you need to scroll to see more of the content. So as I've already mentioned a couple of times, even though you do have all of these different device sizes here as presets, don't start your design with picking sizes out from this list. Rather, what you wanna do instead, Is create a series a of artboards based on the layout itself, what the layout needs. So these, which are examples we're gonna go through later, these are all the points at which they layout needed to change in order to keep the content in it readable and fitting comfortably. So you wanna go through create a series of artboards like that. And then once you're done then you can take these artboards, take the content from these artboards, and then you can quite easily fit that content into device specific previews. So then you're gonna have all of these breakpoints, this is the information that the coder needs, but you're still gonna be able to go to a client or whoever it is that you're developing an interface for. And you're gonna be able to say, this is how it's gonna look in this Android tablet. And then you'll be able to show them the preview so that they have a clear understanding of what you're actually doing with the design. So as I said, that's just a quick lesson. There's really not that much to artboards, but I wanted to cover those points because they are so fundamental to the process. And speaking of things that are fundamental to the process, we've talked about how fundamental working with columns is, and how you should try to have your columns be flexible so that you can get as much life out of them as possible. So in the next lesson I'm gonna show you how you might set up a LAN in an XD art board that simulates flexible width divs in a production design. So we're gonna go through that in the next lesson. I'll see you there.