3.1 Quick Overview of What You Can Do in XD
Like any software, XD has things it does well and things it’s not specialized for. To get the most out of the application when doing responsive design, you’ll need to know which aspects it will let you handle, and which it won’t. That’s what we’ll be covering in this lesson.
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.1 Quick Overview of What You Can Do in XD
Hey, welcome back Responsive Design in Adobe XD. In the last section of the course, we just had a quick refresher on Responsive Design so that we know what we're actually trying to achieve as we work in Adobe XD. Now, as we're getting into using the software for this purpose, I'm just gonna start with a quick overview of what you can actually do in XD and what you can't. And first up, I also wanna mention that this isn't gonna be a course on using XD as a drawing software. It's gonna assume that you're comfortable with doing things like drawing out rectangles, and creating groups, and setting colors, and things like that. If you need a primer on the basics of working with XD then check out the links in the notes below this video. I'll give you some links to some courses that can help you with the initial getting started with XD. What we're gonna be focusing on is specifically responsiveness in XD. So as we go through we're gonna skip over the process of actually laying out the shapes and text and what have you, so we can keep that focus on responsiveness. And anyway, some of the actual process of what we'll be going through can be a bunch of tweaking of sizes. And to be honest, you would get pretty bored watching me do all of that, so I will be jumping forwards from time to time to keep the focus on the pertinent points for responsiveness. All right, so about responsive design in XD. So the first thing that you need to be aware of is that you can't make a design in XD that is itself fully responsive. So if we have a look at this mark up here, this is all just done in wire frame form, by the way, rather than trying to focus on a fully fledged design. I can preview this design, and I'll get this that looks like a live website. But I can't shrink down the window and have it actually respond like a regular site, so it doesn't work like that. What you can do, however, is create a series of art boards that show how the design is going to look at every stage of the layout, where something needs to change in order to keep everything fitting nicely in the design and looking legible. So the goal of this process is twofold. One, you want to communicate with the person who is gonna be coding up design exactly how want this design to function. By creating a series of art boards like this, you have complete control over exactly how it's gonna look and whatever width it's being viewed at. So as I was saying before, if you only produce a 10/24 mark-up for a tablet and a 320 mark-up for a phone, then the coder is gonna have to guess what you want to have the design do at 500 pixels. By doing this multiple art board approach, there's no guesswork and you communicate to them exactly what should be happening across the whole size spectrum. And the other thing that you're gonna be able to do to these art boards is communicate with the client how things are gonna look at different widths. Something that I'm gonna show you later is once you've created a system of art boards like this, you can take one of these art boards and you can adapt it in about 30 seconds to any type device preview that they want. So if a client says hey, show me how this is gonna look on the latest Samsung Galaxy that's at a resolution that nobody has ever used before. You're gonna be able to cover that, because you're prepared for any width that the site needs to work at. There's something that's important to remember as you're going through this process is that this is not responsive development. This is not responsive coding, so you're not gonna be able to do everything in the mark up exactly as it's gonna be in the browser. You're probably not gonna to have spacing that's absolutely perfect to the exact pixel width that it's gonna be in the site. And some dimensions might be slightly out, compared to what they're gonna be once the site is deployed. So don't feel like you have to get caught up too much with making things absolutely pixel perfect. Because the amount of fine tuning that you're gonna have to do to get that point is gonna take you more time than it's really gonna be worth. In reality, when this is actually coded up in the browser, it's not going to be exactly the same pixel for pixel no matter what you do. So don't worry about that too much. You have three main goals that you wanna focus on when you're doing responsive design in XD. And that is through your collection of art boards, you wanna convey what you want to happen to the layout at various sizes to the coder. You wanna be able to convey it to a client, or whoever you're designing for how the layout is gonna look on any device that they might wanna see a preview for. And you wanna do both of these things in the least time-consuming way you can. So achieving those three goals is what we're gonna step you through in the next lessons of the course. And the first place we're gonna look to make that happen is XD's Responsive Resize functionality. This is a fairly new addition to XD, and it's designed primarily to help you with that third goal of making this work flow move alone in the least time-consuming way possible. So in the next lesson we are gonna check out what Responsive Resize actually is and how you can put it to work in your mark ups. So I'll see in the next lesson.