There are 6,000 ways of doing everything and in this video, the author uses everything covered in this chapter to pull the project together.
- [Instructor] In approaching this challenge, the first thing I do is just sort of take a look at what I need. Well, I need a nav bar here, and I can get that over in the UI kits. And then if I roll over these little strips here, you'll notice that, if I click on it, it's a repeat grid, so this is going to make my life a ton easier. So to get started, I work my way down the art board. I'm going to select the gray bar on the main art board, hold down the shift key, select the nav bar text. And come over to the Wu Han art board and do the same thing.
And then just press delete. Now I can come over to the UI kit, and because this is an iPhone 6, I can use the Apple iOS kit, and I'm looking for a white status bar, and there's one right here in the control center. So I select the status bar, copy it to the clipboard, command C on a Mac, control C on a PC. And I can close this, and here's what I just love about working with XD. If you select an art board, it'll just paste it right in place.
So there's command V or control V on the PC, and select the Wu Han art board and paste again. I notice I got a little problem up here, right here, the Bluetooth. So I'm just going to select that icon, I'm going to come over here to the appearance panel, and just change its color to white. There we go. And I'm going to select that and change its color to white as well. So that's done. Now what I have to do is get this repeat grid in place.
That's not hard to do at all either. So you select the repeat grid, and then you're going to come over to your Challenge_1 folder, and you're going to select the strip images up here, all six of these, and you just drop them into place, and boom, they're in place. I'm just going to click here and just push it back, there we go. And I notice that the text is a little bit thin, so what I'm going to do is I'm going to select the City text, and I'm using Helvetica.
I'm going to change it to a bold. And you'll notice it changes to bold for all of them. And the other thing I want to do is give the text a little bit more contrast. For instance, right here, you can hardly see the words for the city. So what you do is you select just one of the strips, and you just push the opacity back. Now, you'll notice that they all change, but the problem is, they're brightening up. That's because the art board is white. So we're going to select the main art board here, and we're going to set the fill to black, 000000.
And again, we'll just select an image, and just push the opacity back. And you'll notice how they all darken up. So we've got the opacity going here, we've got the cities. So this city here is the tea capital of China, Anxi. This city here is an old trading city formerly known as Canton, it's Guangzhou. And this is Shanghai.
And this city is in southern China, right above Hong Kong, Shenzhen. And this city is in northern China, it's Taiyuan. And finally, this city down here is Wu Han, which was one of the original old capitals of China. So there we go, we've got the main page done. This is good. Okay, so let's get this taken care of. So, the image we know is going to go in there, it's just a straight box, so we can just drop the image in there.
So I'm going to take the text out, just delete it, and come back to our images folder, and there's a WuhanLrg, Wu Han large. Just drop it in and there it is. Now all I have to do is replace the icons, so we'll just select the boxes, and we'll start bringing in the icons. So again, it's just drag and drop. And if we go back, there are the icons. And we can bring all three of them in.
And we can now start sizing them up. So we've got the calendar icon here, and with the shift key held down, I'm just going to scale it down to about 45 pixels or so. There's the like icon. I'm just going to move it up. And we'll just move it into place. We'll fix all of these in a minute. And our final icon is right there, that's the share icon.
Then I'll just move it into place. I'm going to select the calendar icon. I notice it's 47 pixels. What I'm going to do is change the size to 35. I want to scale these things properly, so I'm going to change the height value to 35, and it will scale in proportion. There we go. And we're going to make this one a height of 35 as well. Click the lock icon again. And the heart icon, or the like icon, click the lock, 35, return.
And then we can just roughly move these into place. So we'll just move this in. And then, with the shift key held down, I'm going to select all three of them, and I'm just going to align them on the centers. That's good. And now what I want to do is sort of give myself some equidistance here. So I've got 103.2 pixels here, so I'm going to make this one 103 as well. There we go. And they are equally lined up.
The final step is to actually get a back icon here, 'cause we got to go back to this page. So we're going to come back to our UI kit, Apple iOS. I'm one of these guys who doesn't believe in reinventing the wheel, and there's a little back icon right there, so I'm just going to get the magnifying glass, zoom in on it, and double click, and I'm going to copy it to the clipboard, going to close the kit, and I'm going to paste, there it is, and change the fill to white.
Now, sometimes you get a little difficulty getting these just 'cause they're a little small, so I just tend to zoom in a little bit. And I've got my icon, and I'm just going to move it up. Just move the page down a little bit here. Zoom in a little bit. Couple of clicks, that ought to do it, there we go. And I'm going to get my selection tool again, and just move it into position, and I'm ready to go.
So now what I'm going to do is go to view, zoom to fit all so I've got them all in place, and I'm going to select Wu Han right here, come over to my prototype, and give myself a wire to this page, and I'm going to push right. And we're going to use an ease out, and then we're going to select this icon, come back here, and we're going to use a push left. And then all we have to do is just test. So there's Wu Han, and you can see everything is doing what it's supposed to do.
So there you go, there's the solution to this first challenge.
- 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.