Wireframes Done Right

Wireframes are drawings of website, used to illustrate: how a web application will function, what will be the content and how the visitor will navigate. They are not used to illustrate the look and feel (graphic design) of a site. When designing web applications first, comes the functionality and then the graphics. Main reason: graphics are dependent on the structure and functionality site, not the other way around. Graphics are only eye candy, so a nice looking site is useless when the visitor doesn’t know what to do. Also the graphic design can narrow down the possibilities in the usability design of the site and we don’t want to constraint that.

Why?

Think clothing, the activity you wish to do, decides what you will wear, not the other way around. If you want to work out, you wear clothing that is designed for it. You don’t wear a suit to play basketball or for your karate class (only if you are Chuck Norris). To avoid this: first think usability, then choose the eye candy that best fits.

There are many kind of software that can be used to create wireframes i.e Visio, Visual Studio, Adobe Illustrator, Dreamweaver. The challenge with using this tools, is that people tend to focus on colors, cleanness, effects, etc. and not the usability, functionalities and goals of the site. The best thing, don’t use any of these tools and just sketch the wireframe using paper and pencil.

Ask any developer that used visual studio (or similar programming) IDE to develop a prototype with the intention of showing functionality. Most will tell you that the customer, will focus on the look and think that it will be ready in a week. If you have ever shown a client a Visual Studio “prototype”, where your draw the software, using the visual controls, the developer will be stress by comments like “oh .. this button doesn’t do nothing”, while the he is thinking “of coarse man, this is just to see if I understood what you wanted”. It will be worst if there is some navigational functionality in the “software prototype”.

Another reason you shouldn’t use this tools, is that you may start to focus on how it looks, if colors match and they it looks nice. The irony is that you know is just a to show functionally! However sometimes is just irresistible.  So, if you use a paper and pencil there will be a good chance it will look like done by a first grader, and then is when you will get the real feedback.

So, as the image bellow says: “The better it looks, the more narrow the feedback”.

Image source: head rush and thanks to Jakob from www.jensplan.se for the tip on the image.

Next post, I will talk about a program (Balsamiq Mockups) that is used to make wireframe mockups that look like done with paper and pencil. The idea of using such tool is that you can iterate faster and save time, still it could have the same effect, as the tools mention above. And as a bonus, I will tell you how to save and convert the mockups into images, without buying the license.