Thanks to the infinite pasteboard, managing artboards, reordering artboards, and mixing them up for mobile and web is a snap as you will see in this video.
- [Instructor] In this chapter, what we're going to do is we're going to take a project. (mumbling) artboards from start to finish, and that means from wire frame to, basically, interactive prototype. So let's get started. The first step in the process, of course, is to create your artboards. We're going to work with the iPhone 6/7 artboards. We'll just click that. And when XD opens up, you've got an artboard. Now we're going to need two artboards here. One artboard will be a login/sign in screen and the other will be talking about various tours available throughout Beijing.
So to add an artboard, you can do this. You can come over to the artboard tool. Right there, click it. And you get to choose a new artboard. You see, right there? And we got the wrong one, so we're going to delete that. That's the great thing about working with artboards. And we're going to add the iPhone 6/7. And you notice that you've got all the various sizes here. So if you make a mistake, it's real simple, just delete. So there's the new artboard. Now a couple of things that you can do with artboards. First one is that you cane name them.
And that's a real good idea. So we're going to name this first one, "SignIn". And this one. Notice, you just double click the name. We're going to name "Tours". And then you just do select, and we've got the artboards selected. Now the other thing about working with artboards is, you don't need to start with the size that you want. If you wish you actually have, say, tablet and desktop versions of this project, well, it's no big deal.
'Cause you come to the artboard tool. You can choose a device, let's go with an Android mobile. And you see it adds it in. And the great thing about this is, if you zoom out, okay, so I'm just going to come up here, and let's zoom out to 50% view. And I can just move it into place. And you can take these artboards, and you can move them around. So we've got two Androids here. And you notice that you can set the spacing too.
The smart guides tell me that these are 85 pixels apart. And there's 90 pixels... So if I want to add a tablet version, all I have to do is come here to the artboard tool. And I can choose, we'll say, an iPad. And if I wanted to add a desktop version, you just select your artboard, choose the artboard tool, and you can come down here, and you get a number of choices for web. Now you can also set these things to be custom sizes.
That's why you've got the handles here, so you can drag an artboard, and you can make it larger or smaller. This is a very handy feature. Now that dotted line you see is actually the bottom of the viewpoint. So if you're going to have scrolling content that's going to have to come below this dotted line, sometimes called the fold. Okay, so, let's just get rid of what we got here by selecting the artboards. And let's get started working on our project.
And, just going to zoom in. Go 100%. And we're ready to start.
- Navigating the XD interface
- Using artboards and grids
- Adding content to layers
- Using the Repeat Grid feature
- Adding interactivity to a project
- Exporting content
- Sharing your work
Skill Level Beginner
Q: This course was updated on 11/29/2017. What changed?
A: New videos were added that cover the XD Assets panel, Experience Design symbols, Creative Cloud Libraries, and pinning comments.