Wireframes: Shown Early and Often

By Jed Grant

wireframes thumbnailI’ve heard a lot of different definitions for what wireframes and prototypes are so let me tell you how I define them. A low fidelity wireframe is a black and white layout that represents the requirements that were gathered as part of business analysis. It represents the designers vision of how the application will accomplish those requirements while attempting to temporarily avoid discussion regarding visual and aesthetic elements so that interested parties focus on the objectives being met instead of the color of a button.

A high fidelity wireframe demonstrates exactly how the application will look as is based heavily on the layout and function of low fidelity wireframes while adding the appropriate aesthetics. These are sometimes called mockups or design concepts. If you move the cursor over the image below you will see the high fidelity state of this wireframe.

Photo Before ProcessingPhoto After Processing

A prototype is another beast entirely. While a wireframe is a picture, a prototype demonstrates the intended function while not necessarily tying into databases or being fully functional. Prototypes are often used as a framework to plug the real functionality into once the project reaches that point.

My Wireframes

While some designers prefer to use tools like Balsamiq which attempt to remove design even farther from this step, I find that using tools like that or even paper prototyping means all of that work must be redone. I’ve used a few different things. First there was Photoshop. It works really well if you’re going after precision and accuracy, however, as stated previously, low fidelity wireframes aren’t about precision, they are about representing function and how business requirements are accomplished. Then I tried illustrator. I found that even though I was able to create wireframes faster all the design controls inside of Illustrator made me tend to add design elements that were unnecessary. Finally I tried PowerPoint. That’s right, PowerPoint. No I’m not kidding, but I know exactly what you’re thinking because I thought the same thing when I began collaborating with a designer who did his wireframes exclusively in PowerPoint. I was incredulous. However, I quickly learned better.

Why PowerPoint Rocks for Wireframes

I was a serious skeptic when I started using PowerPoint for my wireframes. I decided to play nice and go along with the other guy so that we could collaborate more effectively. I must admit I’ve really come to appreciate PowerPoint as a wireframing tool for a few reasons. First, it prevents me from doing design. As a visually oriented person I have a tendency to want to make everything look nice, and sometimes that’s actually a bad thing, because then it starts to look designed. As stated before that’s not the purpose of low fidelity wireframes.

The second reason is because it’s fast. Drawing shapes and adding text in PowerPoint is much faster than Illustrator of Photoshop. While you typically see powerpoint used for large, ugly presentation its easily capable of much more than that as illustrated by the image above. Here’s a optimized pdf of some of those wireframes.

For many access to software applications is provided by employers, in this case you probably already have PowerPoint installed which makes it one of the most accessible wireframing tools available.

Better Wireframing Tools

There are better tools than power point. PowerPoint works, and it works pretty well, but if you’re after efficiency and you have to churn out a large number of wireframes quite often then you may want to consider Omnigraffle if you’re using Mac OS X. Omnigraffle has a large number of design stencils (elements) which you can use to quickly flesh out your designs instead of having to create all of those form fields, radio buttons, drop down menus etc. It also has all the other advantages of PowerPoint.

My Opinion on the Matter

Wireframing is great… if you’re project is big enough. Wireframes really help customers understand what you’re planning before you’ve invested all the time in design and creating something functional in CSS and HTML. It ensures you and the customer are on the same page and stay on the same page which is a great way to keep costs and frustrations down. However, there are a lot of projects that simply do not need that level of detail and requirements, a great example is a content based web site that has little functionality, but instead exists to provide information. For jobs that do not involve heavy interaction design I prefer to work directly in Photoshop with high fidelity design included to allow for the project to progress more rapidly.

Get a Trackback link

No Comments Yet

Be the first to comment.

Sorry, comments for this entry are closed at this time.