So you've written a brief, you've created a ton of user stories, you've organized your user stories, so you know now the feature and user stories that you're going to take on. You then took that and said, I need the top-down diagram where I understand how this is going to work, so you create a site map or maybe created a flow chart because it's very important for you to understand the flow, or maybe you did both.
At this point now you should know enough based on the features, based on your top-down diagrams, that you can go and create a wireframe. And there are many tools to create wireframe, but just like everything else, there's always tools for things. I like Adobe XD, because of the prototyping tools, because of the speed, because of how fast the tool is, it's responsive, it reacts to me immediately when I do something. Of course, you could use illustrator, or you could use InDesign even to create wireframes. But I think nowadays it's a no brainer to use XD.
Of course, there are other tools out there core Sketch. Very, very popular, you have InVisionApp. There are some specific wireframing tools that are dedicated to wireframing. But I find the tools with prototyping modes inside XD, it's like come on, it can't get faster than that. And so to get started, you can either start from a prebuilt wireframe kit or a UI kit, or you can create your own. If you click on add-ons inside Adobe XD at the time of this video, that's where this is, but it's pretty easy to find tons of free UI kits and wireframe kits for Adobe XD.
If you just double click on this, this will open up in behance and it looks like multiple owners here, so these people here, UIA, Jonathan, I believe is on the XD team, I don't know Kyle. They've gone and created this, so I can say get XD or download kits. If I click on download kits here, it's going to open up in my downloads here and it says wires, and I can open that up. And here I have wires, mobile and wires web, I'm going to use a web, and click on the web one, and it opens up like this, and I can see all of my different pages now.
So they have a section in here called UI elements, where they talk about system Colors. And here are icons and here is typography and here is paragraph styles body, and they have essentially a design system here, here's some sample navigation bars, and here's some UI buttons, and here's some toggles, and bullions, and filter views. And here's some tag layouts. Here's a nav vertical, here's some footers, here's some call to actions inside footers or like descriptions. Here's some different card layouts, here's some UI Elements for flow charts, in case you want to make your flow chart inside XD.
Again you can see the same thing, we have a diagram, we have a diamond, we have some modal window, you have a title here for an iPhone or a mobile device here, we have some yes, no Boolean values. Some other graphic UI elements. And then over here, we have landing sections, so different pages of the way these could look and a content sections and blog sections and portfolio sections and call to actions and footer sections. And over here we have pricing tables. It really has quite a bit of things, team section, and presentation section. So if you have a product.
And So from this we can start to create these things and will grab these assets and start laying out a page, and I'll show you how to do that. So I'll start out, maybe I'll look at the landing sections because some of those already have a nav, and they have something that looks like this, I'd say maybe I'm close to this, this looks like a good section. And if we look at this, the width of this as 1440 and the height is 900. And so I'll take this one. And you either can copy these and paste them into a new document or just take the element here and drag it up, or in a different location, wherever you want to go and create this. So maybe I wanted to start building here for now. And here's this little notice about auto anime.
I now can click on this top section here and I can say homepage or home. And that would match up with my site maps, so I know in my site map, I have a page called home, so I know in my art board, I need to go and create a page for that. If I know on my site map I have an about page, then I go in my art board and I create an about page. If I know I have a contact page, I would go over here and say contact, and now I have a contact page, right? Pretty straightforward with that. When doing that, you'll see that when I click on this, I'm using, I believe an older version of XD, I just realized, but you'll see that a couple of different, more options here as they have plugins now here. When you look at it.
But here you'll see that this is a symbol, which they now call components in the new version of Adobe XD. I need to update obviously this computer. So, what's cool about symbols and components, they were pretty much the similar. It's just really just an upgrade at this point, is that if I change something here, for example, I changed this to be black and then goodbye, symbols. Hello, I guess I maybe do have that. You can scroll down at the section here or you can just right click on this and I can edit master component, I can reset to master component, I can reveal component and asset panel or I can ungroup component. So if I reveal component and asset panel here, here's that component. And here is this colors changes that I've just gone and made to it, I can reset this back to the master components, you'll see it's blue. Or if I say edit master component, here is the master component down here, and if I change the color of this master component, you'll see it changes everywhere, where that master component is being used.
So again, really quick, easy way to go and do this. So oddly out this page, I'm not going to go too much into Adobe XD as there are a video series here on Code Time on that, and we'll be making more of them as we go. So the trick when you're making wireframes is to not overly design things, and in some ways I would say, you see how this video section overlaps that nav section, to me that's a little bit over-designed already. Now, does It going to matter? It's not really going to matter, but you shouldn't be spending too much time thinking about little things like that and designing those as it doesn't really make sense.
Sometimes even looking at wireframes when they're blue, I look at it, I'm like, ah, they should just be black and white because I come from a little bit of an old school sense of printing out wireframes and putting them up on the wall, so that people can interact with it. That's something that I've started growing out of because before the tools weren't as fast and it wasn't as easy to actually prototype, as it is now. Now I can come into this master component here, and again, we can go through this and say, edit master component, you'll see it here. And I can go into this nav and I can just type in my words, I'm going to zoom out a little bit, that I'm going to have, so I'm going to have a homepage, so I'll just say home or that could just be the logo.
I pasted an SVG copy it looks like there. I actually like this explore section, and that'll be, maybe explore exercises. I'll make another section here called users, and we'll keep these all caps. And there's my contact and there's my sign up. I'm going to pull this out and I'm going to say login right next to it. And then I'll make sure that login is outside of that, and I copied and pasted it, moved it out.
Login will be uppercase. So here it just says XD, I actually think that is live texts for some reason or uneditable text. I'm going to make this a lot bigger and that is an exported elements or outlined element. So I'm going to just take texts, because I don't have a logo right now and I'll say fitness app. And that's what I'll use for now is the name, I'm going to switch us over to that. That looks good. And so if I save this, you'll see up top. It says fitness app, I'll just say fitness. And you can see, it says fitness on all of these pages here. So here it says big title, it's in Georgia here, but I probably make this some sort of neutral sensor of Helvetica or Roboto. And again, some of these things might not be components and they may not update. Some of them will, For example, I could say, make this into a component.
And now that that's a component, when I take that component and I go in here and paste it, you'd see that component's going to match up when I change it here. So ID here is go through this very quickly and start to create your pages. So this is going to be the explore page. I like to just copy that text inside of there, drag it outside of this, scale it up, and then I'll change its color to black. It looks like I just made a guide there, but we'll remove that. And this says, explore now that doesn't need to be that big, but the idea is that's going to be a title, say something like 60.
And now underneath that, I would go in here and I could either create some cards or I can come up top to this card Section. So here we have forms, portfolio, landing, content, sections, presentation, sections, pricing tables. And then in here we had some cards and this one will work perfect. I'm going to make that into a component. and then I'm going to go down to my explore page and paste it. That's a component now. So when I change it, it'll change everywhere. I'm also going to click on the repeat grid up top here, and I'm going to scale this across here like that. I'd say probably three, I'm going to give these a little bit more space and then put three into the section, maybe something like 60 or so. Again, try not to spend most of your time in here, designing and making the perfect grids and all of that.
Try to just get it in there as fast as you can. So I'll drag this so it's longer. I might have pagination based on my user stories, so I would go through here, I don't know, maybe there might be pagination actually as a component. They already have let's go take a look. Pagination on blog posts maybe, so here they have a couple of layouts already created. Doesn't look like they have pagination in the blog section, in the team section, no, doesn't look like it. So I would go in here and I would just create some quick pagination. I would do that by just creating a Square. I'm doing this pretty large size, as you can see this square is 60 pixels or so. I'll take some texts and I'll say something like one inside of it. I'll say that's maybe 20 pixels.
And then So you can see it for size, here I'll shrink this down. Again, that could be just enough as black and white. I can then duplicate this and I'll say something like two and I can duplicate this again, just for this purposes three. And of course I could use the repeat grid or something like that as well. And then I'll change this to a white on black and you can see the active state that I'm in, I'll group the whole thing, and then I will center it to the art board. So now I have an explore section and I have this. Something else that I might want to add to my explore page based on one of my user stories is a search bar. So if I go over here, I can see different fields. So here's typing, here's a select option. Those look like they're just input healed, there's forms, here's some more different styles of the way the forms could look, a couple other ones. Here's name, email, a payment Page. Doesn't look like they have anything dedicated to search, I might be missing it.
I'm going to just grab that for now though, or maybe I'll do one of these rounded once. I'll do that here. And what I mean by a search empathy, it looks exactly like that, just maybe it has a search hourglass. So here I would paste that now, put that maybe something over here, line it up. And I'll say search dot, dot, dot, and I can remove the pipe, and I can remove the person icon there.
So you can see I'm starting to make these things black again. I prefer my wireframes to be black instead of blue, but if you want to change all the blues on this, they made it really easy, so you can see here's the blue colors, if you right click on this and say edit. So that's the darkest blue color I can say that's black from now on, the next one I could say edit, and that's going to be this gray color here. Maybe something like that from here on I'll click edit on this one, that's going to be even lighter gray, maybe something in that space. And then here's that final one, which is really light, I can go in here and just say something in that space there. And so now, all of these exceptions for this blue here, which looks like they didn't include. If they didn't include that color, it's pretty easy. Just click on the color itself.
So, I have that color selected now, actually I think these are images. So they're not allowing you to get to that element, and that is why they didn't. That's the image oof these things it's not just filled in that color. So you'll see pretty much, so obviously you would delete those things. You now have some basic wireframes that are set up and because of these elements here, exceptions for this one here that I started with, are components, I can go in here and I can change this, so I don't want that. And if I click on this component, and I say, edit master component. There's the master component. I can then go in here and edit and remove some of these elements that I don't want. So I want these to be a little bit larger and move this down and this down as well. And maybe I want something that's a little bit more like that.
Now if I go back to my layout here that I've been working on. You'll see that those have now been applied. I messed this one up, but you get the idea of this. This of course could be longer now. I could take my pagination and move it down. So that's our base here, we now have our hero section, we can then jump over to our explore page and we can start to create all of our pages that we have, when we go and create these things though, all of the things that I create, they're not just me like doing it now. It should be matching up with a user story, meaning, like the explore section or these are going to be exercises. I would then say search for exercises.
I need to have a user story that says I can search exercises. I need a user story that says, each exercise has a thumbnail, each exercise has a heart which are baby represent likes or loves. You need to define all of those things when you go and create your wireframes. When you're making wireframes, you need to make wireframes for every single page that you create. Also think about different statuses or States of a component or an element. For example, that search field, I type into it and I don't get any results. Well, here, let's say this is explore, we'll spell that correctly, nope. Another state for this would be the actual search and nothing was found, so I would come in here and I would tie up and say, no I didn't type, that's in the wrong color. Here we go, and say no results were found for your search query.
That's pretty business. But that's that state, as I type something in here, maybe I typed in here cats. And then here I click submit and it says, no search query was found. That might be something centered or aligned and there might be says, please make another search that you could go in and do that logic. The same thing goes, applies to when I'm creating a registration form, and I forget to fill out a field, what is that validation error show on that component?