Jordan Hudgens: In this guide we're going to discuss high fidelity wireframes, or, "mockups". These are much more detailed. They essentially represent what the system will look like.

We're not going to go into a lot of detail here, because that's what the User Interface course is for. That course teaches you how to create these types of mockups, pick the right color schemes, build a style guide, and design the rest of the interface. We're not going to cover all of that right now. We're simply including this section so you know at what stage to build these types of designs.

Jesse Cook: Following the low fidelity wireframes, you're going to get into these high fidelity designs or these mockups. Like I said in a previous guide, clients, managers, and bosses start to get really handsy at this point because this is a really fun part.

Generally how I run these projects is that I get sign off on the sitemap and I get sign off on the low fidelity wireframe so that I'm confident about what's supposed to be there. Armed with that, I create just a couple of high fidelity designs of key pages so that I can give the client a good idea of what the app is going to look like. At this point, I like to go to the Bat Cave and tell the client "I'm going to disappear for a little while."

Hopefully, by this time, I've established some trust that they don't need to be involved on every single screen. They know I'm going to match the aesthetic from that first couple of mockups and that I'm going to apply that same design to the others. I'm really just putting the paint on the wireframes. I'm moving things around--maybe I had a button in the low fidelity wireframe, and I didn't care where it went, so I just threw it in the middle.

When I start to design it, there's a domino effect where every decision is going to affect another decision. That's why we did the low fidelity wireframe because we don't want one change to affect a bunch of things that you put a lot of time and effort into. This is the point where you can start to get really meticulous and start to care about the balance because you know all the Lego pieces that you're working with. You know when you assemble them that it should stay the way it is. If it doesn't, then it's probably because you've allowed someone like me to add some more scope which I tend to do.

JH: Haha!

JC: So that's where we flow into this. You want to make sure that everything leading up to this has been signed off--don't skip the low fidelity, because when you hit this point you want to work with confidence and actually put the time into it to make each one of these things look great.

JH: That's perfect.

We wanted to keep this section short since this is what the User Interface course is all about. The main takeaway is that, after you have the sitemaps and the wireframes approved, and the developers are working on the backend, that's when you get down to business and start designing mockups, style guides, and so on.