Wireframes: Prototyping your Design

Now, back to our regular schedule! Today I'll be writing a little about wireframes, an important tool for any usability designer.

What's a Wireframe? Well, the best definition I have for a wireframe is that it is a working blueprint of a website or app. It's not all decked out in colors and information, but you can still click through to see how the interactions on your site will work without having to put in all of the effort of picking colors and manipulating things in Photoshop.

As for reasons why we use wireframes...

•  It's a quick method for getting usability tests out of the way. Going through the entire process of designing a website only to find that your design isn't usable is not good- it means you're probably spending a lot more time fixing something that you could have discovered in the middle.

• Once you've made one, you can reuse it over and over again. If you need to recreate your design or want to create a different website with a similar feel, you can always reuse a tested wireframe- and will still look and feel like a completely different website, based on the color and stylistic choices you make during the design process.

•  It's a simple way of conveying a layout concept. If you're working with a client and need to know exactly how they want the layout to look, make a wireframe and send it to your client- or even get the client to make their own! Wireframes are simple enough that they can be created in Microsoft Paint, and as such they are a quick and painless method of exchanging ideas without too deeply into details.

If you'd like to see some examples of wireframes, www.usability.gov  provides some examples of what a wireframe should look like on its Templates page.