Lessons

Lesson Info

Starting a Project

When we dive into Adobe XD the first time you're actually gonna see this start screen. This is kind of like your welcome. It's what do you want to create today, that type of thing. And if you look in here, you're gonna see that we can create phone, tablet, web, or even custom. I know people that create presentations in here, things like that. You can go in and choose a size and there are certain number of default sizes we can start with. Your iPhone, that type of thing, even Android, for instance. What I want to do is I want to choose iPhone 6, 7, 8, and we're gonna start with that. So we're gonna go out here and start. Now, to get started you can just click on the actual icon here, and it'll choose that screen size or that size to start with. So click on that. It'll open up XD, and we'll get running here. Now, just like any program, I think the first thing we need to do is save this. So, let's do that. I'll come up under file and come to Save As or Save, we haven't saved it yet, and I...

'll actually just put this out on my desktop, and I'll call it something silly like My App. You want to actually name it something that makes sense. We're just learning, here. So I'm gonna say My App. Now this is an Adobe XD native file. It's actually gonna include all of your assets, your texts, like everything in there. Your screens, that type of thing. Think of this file that you're creating here similar to an Illustrator file or a Photoshop file. It's the native format for XD. Now once we get in here and we get this open, take a look at the work space. Just look out there. This is an Adobe application, by the way. This program was created from the ground up to be fast. So what I want to do to start here is I want to just show you around a little bit. You're gonna see on the left we have the tools. This is the toolbar. We also have a series of menus or these are actually panels. Look down lower left down here, you're gonna see an asset panel and a layer of panel, way down there in the lower left corner. You can toggle between those. We'll be using those quite a bit. On the right, you're gonna see the Property Inspector. Now the Property Inspector is kind of like the Control Strip in Illustrator and Photoshop and those programs. If you click on something, it shows you the properties for it over there. You're gonna see that this is a pretty minimal workspace although this is all we need, to be honest. So, we also have two modes we're gonna work with in here. We actually have Design and Prototype. In the upper left corner, you're gonna see Design and Prototype. Design is what you think. You're gonna add your your screens, your art boards, you're gonna add your design content, and then when you're ready to test it out and maybe have somebody look at it or you look at it, tap and go to a different screen, for instance, you can go to Prototype Mode and start making connections. So, we've got two modes to work with. All right, we're gonna kind of go back and forth a little bit as we progress here between those two modes. So make sure you're in the right mode. I sometimes forget where I am. You'll also know that on Mac, we actually have menus at the very top. On windows, we don't have those menus. You're actually gonna see a hamburger menu in the upper left corner. So you can click on the hamburger menu and you can see the menu out there. In Windows, we're gonna be doing a lot of contextual menus, or right clicking, to see things, to do things, which can make it actually faster. We've got one art board. What we're gonna do now is we're gonna start setting up by adding some more art boards, doing some different things to them and just laying the groundwork for our app or web design. So I'm gonna come out here and make sure that you have the Select tool, which is that arrow over in the toolbar. And you can click on the art board itself or within the art board, or the name to select it. And you just move it around. It's pretty easy. If you've ever worked with art boards in Illustrator, they're similar. I'll just say that. If we want to, we can go out and resize them. I'm not gonna do that yet. But the first thing I want to do is rename this, 'cause as we have these screens, or these art boards, we're gonna go in and we're gonna name them so we keep track of them. So if you come to the name above and double click, you can just type in a name if you want and change it later, however you work. Press Enter, Return, and you've named it. Now if we want to create new art boards, this is gonna be our home screen for our app, we want to create a login screen, a place for all different types of content. We're gonna create more of these. To do that an easy way is to copy, paste, to duplicate, et cetera. What I tend to do, perfectly honest, I actually go in and duplicate these. If you want to duplicate an art board, you can actually hold down Option on Mac or Alt on Windows. From within the art board bounds, just drag. It's like copying in other Adobe applications. You gotta let go of the mouse first, and then the key, and you'll create a copy of it. So now I have to art boards. I've got my home screen, and this is gonna be log ins, so I will rename that screen to Log In. I'm gonna zoom out. Let's talk a little bit about zooming because this is gonna be paramount. We have a Zoom tool in the toolbar. I don't think I've ever used it. I got to be honest. 'Cause there are so many ways to zoom in here. If you want, if you have a track pad or something like that, or a touch device, you can use zoom in and zoom out by pinch zooming, that type of thing. You can also use Command plus and Command minus. I'm going the wrong way here, that's fine. To zoom in and out, if you do that, are Control plus, Control minus on Windows. You will see that there is a view menu up here and one of my favorite commands is called Zoom to Selection. That's Command three on Mac or Control three on Windows. If you click on something and press that Command three or Control three, it zooms right into it, puts it right into the dock in your window there. Now in Windows you're gonna find that we actually have those types of commands up here in the upper right corner. You're gonna see this Zoom menu. On Windows those commands are up there. So you can access them there. I'm gonna zoom out, I can also, I've got this ancient mouse. Don't laugh. It's actually got a scroll wheel, which nobody has anymore. But I can use Option, scroll wheel, forward back, Alt, scroll wheel on Windows, if you want to do that. And we're just gonna create a few more art boards out here. So if you want to move around, you can press the space bar to get to the hand tool, and drag. You can kind of move or drag things around. There is no hand tool in here. You've got to use the Space bar to get that done. Now, what we're gonna do is we're gonna create a few more art boards here, so what I want you to do is I want you to do this. We're gonna duplicate some art boards. So, click on the log in art board and press Command D, or Control D on Windows. It's gonna duplicate it. Just make a copy. Let's do that a few more times. Press Command D with that art board selected, or Control D. And we're gonna create like six art boards. We might need more later. We're gonna go in and name them, and you can do that, like I said before, just by double clicking above the art board name. So, I'm gonna double click above this art board name, and I'll call this one Categories. I can spell it, there we go. The next one I'll double click on, I'll actually call this Hikes. Making sure I've got these named correctly. Double click on the next one, and you don't have to, learning this, you don't have to name these if you don't want to, but honestly it's best practice. You've got to make sure that you've got things you can keep track of, all that type of thing. And make it easier for you later on. We've got some art boards. Now, what if we want to make a different size art board or do something different here? Click in one of these Places art boards, one of the art boards on the right. If you want, you can make an art board any size. You can just, you'll see the points around it. Just drag like the bottom middle point down. You'll actually see that you can make these taller, wider, whatever you want to do. If you resize one vertically this way you're gonna see that there's actually now a dashed line there. That dashed line represents the view port height, or the height of the original device viewing area. Whatever you want to call it. This is basically above the fold, if you've ever heard that term. If we put content below that line in the art board, and we scroll either in the browser or whatever we're building this for, you're actually gonna be able to have scrolling content in an art board. So if you look on the right over there, with that art board selected, you'll see a bunch of the properties. Size, all this kind of thing. You will see scrolling vertical to start. You can turn it off if you don't want that. You just want to make a big art board. That's fine. Now, if we want to, let's actually do this. I want to make the other one taller next to it. So I'm gonna click in that art board and I'll just drag to make a taller. There we go. Now, if we want to add other art boards, maybe a web size, we want to do the app and the website in this same file, or whatever you're thinking of doing. Or the multiple versions or whatever. We want to add more art boards that are different sizes but that map to a size like desktop or like iPad, for instance. If you look over on the left you're gonna see that we have the Art Board tool. Click on the art board tool, and I'm gonna press the space bar to get to the hand and drag over just a bit to give myself some space here, and then let go. On the art board tool, if you look on the right over there in the property inspector, you'll see a whole bunch of sizes that we have available. These are the default sizes we can work with. Of course, you can create custom sizes by drawing. You can actually drag with the art board tool to make an art board, but I want to make a web size art board. So if you look over there, scroll down if you need to, you're actually gonna see we have, I don't know, I'll go with web 1366. Just click on that size and it'll put the art board out there for us. Now what you can do, now with the Art Board tool selected, to move an art board, you need to drag it by the name. If you try and drag it from the actual art board, you're gonna make yourself on art board and get a whole bunch of trouble. So just drag it by the name, and you organize your art boards however you want. If you want to keep the app on one side of the file, the web on the other, or however you're doing it, you do that. And then I can go in and resize it or do whatever I need to with the Art Board tool if that is something we need to do. And I can add a whole series of art boards. Now, I'm gonna actually go and fit everything in the window here so we can see it all. If you come under View, you will see Zoom to Fit All. Now in Windows, you're gonna go up, I'm gonna select that first, or choose that. You're gonna go up to the Zoom menu up here and you should see Zoom to Fit All. It's Command zero or Control zero. A lot of us know that. Now what I want to do is this. Go to the Selection tool, the Select tool, rather. The black arrow. And then click in the home art board to select it. If we want, we can actually set up grids to design to. If you look on the right, you can select a whole bunch of art boards by Shift clicking or dragging across. If you come to the right over there, we have two grids we can work with, Layout and Square. Make sure Layout is chosen, and turn it on. And what you can do is go in and just set up numbers of columns, all kinds of things. You can even change the color, if you want to, by clicking on this Color Fill here. And you can do Alpha, Transparency, all kinds of things, just to make it easier to see, harder to see, that type of thing. And if you go with Alpha all the way down to zero, you can make it so it looks like lines out there. Which could be really cool. Now we could use that if we want to, and we can also set that as the default if we want. There's a Make Default button there. And then we can apply it to other art boards. That's a great thing to do. All right, so we've got grids we can work with. We've got a square grid and this column layout grid. Now the grid, if you resize the art board, the grid will resize. The content on the grid, if you put stuff out there, will not. Just know that. We can also set colors on the backgrounds of art boards. So if you, let's suppose that I'm making something for Apple Watch, and it needs to be black, or I want to make this red, this art board, just to give an idea of a red background. With the art board selected, click in the middle. Come over to the right, you're gonna see the Appearance Fill. Click in the fill box there, the color, and we can set up a color value, however you want to do this. Now I've got a hex value that I'm gonna type in here. E7, 4C, 3C, and then I'll press Enter or Return, and that's the color I kinda want to use. Now, it's gonna put in the background. Just think of it this way. This is just for us to design to a prototype, to test and iterate and see how we're doing here, and this is you know a great way for us to be able to do that pretty easy.