Circles and squares are the fundamental shapes of any UX design project. In this video, learn how these primitives do a lot more than add a pop of color to your XD design.
- [Instructor] With the grid in place, we can now concentrate on where stuff goes. And that is kind of the purpose of a content wireframe. Not a wireframe that you may be used to, just a simple content wireflame, with little blocks that say this goes here, this goes here, this goes here. And, as you move through the project, you may want to move them around, who knows, but that's the purpose of iteration. Okay so let's get started. So the sign in page is going to have three things. It's going to have a username area for input, a password area for input, and of course a button for sign in.
And then the tours area is going to have an area at the top for a little bit of navigation. There will be an input area in there that will allow the user to search for different places in Beijing, and of course there will be suggested sites to visit. So let's get started. Now, a content wireframe is very simple. It's just a series of boxes. So I'm just going to create a box here, and I'm going to say right here is going to be the username. And I can turn off the border, and I can just fill it with a color. And that will be the username area, and then if I hold down the Option + Shift keys, I can bring down another copy of it.
There's the password, and of course down here will be the sign in, and what I want to do is round that off, so I can just say basically say, look give me 10 pixels on the corners, and you can see there it is. Now I can also just use the text tool, and say this is the username and of course it's got to be white. Don't worry about fonts, don't worry about anything, just worry about what's where.
Okay so there's the username. And again I'm just going to copy and paste, so I'm just going to hold down the Option key while I click and hold. For you guys on the PC that would be the Alt key. And this will be password. And finally we're going to bring in the sign in. So let's do the same thing here. Now over on the tours page, it's going to be a little bit different.
We're going to create a little area up here, which we could call nav. So we'll just fill this with a slightly different color of gray, and we'll just indicate that it is nav. And we'll just make that white. And then we're going to make that little text input area, so we'll just come across here, and we'll just draw a little box here. You notice I've got equal spacing on either side, so I kind of know where it's going to go, and I'm going to make this one a little bit darker.
So we'll just come down here. And with the text tool, we'll just type in the word search, and we'll just put that there. And we'll make it white. And then basically what we're going to do is have four tours or three tours, doesn't matter, and we'll just say okay fine, we want them to go there, so where you just kind of want tour one to go in here.
So we'll just turn off the border, give it a slightly darker fill, and again we just start indicating what it is, so it's tour one. And just change that color right there, deselect, selection tool, pull that on top, there we go. Doesn't matter where the text goes. Okay so there are going to be a few of these so what we we're going to do is we're just going to select tour one and the box, and we're going to group it.
And how to group it is just ObjecT, Group, or Command + G, and then all we have to do is that Option + Alt + Click + Drag thing, and we'll just drag it down, and we'll make one there, and we'll drag it down, and we'll put one there. Now you notice that as I move down, I get a little smart guide here that tells me how much space is between the two. So I'm just going to take this text here, and you notice you can right into the group, and change things.
And we'll make this tour three. And basically that's what we've done, that's a content wireframe, it just concentrates on where content goes, I don't have a clue what's going to be up in here, I don't have a clue of color, text, I don't have anything, this is going to be a block, this is going to be a block, this is going to be a card or something, and this is sort of how they're going to be presented. And the beauty of this is if you change your mind and say look, I want these to be a little bit smaller, well fine, just take one, and make it smaller, and you can just keep working away, making them smaller.
And then just move them around. So we could just move that one up. Because these are nothing more than content blocks, that's all they are. So there you go, there's a content wireframe, right there, not hard to do at all, and it gives you the opportunity to play what if games, what if we put this here, what if we made these smaller and put two across, okay fine let's see what it looks like. Once you've settled on this, then you can move into the basic wireframe, and that's what we're going to do next, we're going to wireframe this whole thing up.
- 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.