![]() ![]() So don't feel like you have to get caught up too much with making things absolutely pixel perfect. And some dimensions might be slightly out, compared to what they're gonna be once the site is deployed. 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. 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. There's something that's important to remember as you're going through this process is that this is not responsive development. You're gonna be able to cover that, because you're prepared for any width that the site needs to work at. 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. 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. 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. 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. 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 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. One, you want to communicate with the person who is gonna be coding up design exactly how want this design to function. 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. But I can't shrink down the window and have it actually respond like a regular site, so it doesn't work like that. I can preview this design, and I'll get this that looks like a live website. 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. 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. All right, so about responsive design in XD. 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. And anyway, some of the actual process of what we'll be going through can be a bunch of tweaking of sizes. ![]() ![]() 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. What we're gonna be focusing on is specifically responsiveness in XD. I'll give you some links to some courses that can help you with the initial getting started with XD. If you need a primer on the basics of working with XD then check out the links in the notes below this video. 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. And first up, I also wanna mention that this isn't gonna be a course on using XD as a drawing software. 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. 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. Hey, welcome back Responsive Design in Adobe XD. 3.1 Quick Overview of What You Can Do in XD
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |