Wireframes are an essential part of the project process that many developers tend to leave out. Wireframes can speed up project development times, create more meaningful user testing, and get programmers and designers on the same page. They create a great balance of initial function design and graphic design that gives both design and programming teams something to go off of. If you’re not using wireframes yet, my hope is that after reading this, you will!

Benefits!

By creating wireframes first, you outline the functionality (what has pagination, what happens when you click “this”, etc.) and basic layouts for pages (what goes where). You can easily move elements around and ensure that you’re creating a very usable product, while keeping everyone on the project informed. Let’s look some more at how wireframes can help.

• Users are emotional. Wireframes and prototypes are generally gray or monochromatic in color. This lends itself well to initial user testing. They/You can focus more on actual functionality than users’ reactions to colors, pictures, text, etc. User testing can be hard because people have biased and emotional responses to certain things, this helps alleviate those situations. Wireframes also help you test earlier on in the process. You can see what’s working and what needs some revising before the design is set in stone.
• Designers can make it pretty. This will give your designers a place to start, even if you both decide to move things around, it’s at least a non-blank canvas. Graphic designers typically don’t want to design forms, am I correct? This lets them do what they do best without wondering what needs to happen on the page.
• Programmers can program. Knowing what functionality needs to exist upfront will make your programmers happy and make teamwork easier for them. This allows them to breakdown what/where/when action happens and how to account for it, as well as how best to delegate the work among themselves.

Tools & Resources.

Hopefully you’re thinking, “this is great, how do I start?” Well, the good news and bad news is that there isn’t really a standard for how to draw wireframes. There are however, many people with good ideas and resources to go off of. Let’s start with the programs:

• OmniGraffle Professional - Link. This is by far my favorite. It’s very easy to get up and going with and offers many features that can save you time (manual guides, presentation mode, multi-page HTML export). Another plus is that it’s very easy to get some basic user testing done with it. There is one caveat though, it’s Mac only.
• Microsoft Visio - Link. I’ve used Visio extensively and it’s a great tool as well. It’s been the defacto standard for diagrams for a long time on the PC and a lot of people have continued to carry on with it for wireframing. You won’t get the same presentation modes that OmniGraffle offers, but you will find more stencils and templates available on the web. It’s a toss up, but Visio is PC only.
• Adobe Dreamweaver - Link. Although Dreamweaver isn’t really suited for wireframing, some people use it to easily mockup HTML and get the process going. It’s a good tool, but I think if you are serious about wireframing, you’ll have better luck with one of the two programs listed above. Dreamweaver is available for both PC and Mac.

So now that you have your tool picked out, how about some stencils and templates to get you going…

• Graffletopia is a great site with stencil kits of shapes you can use in OmniGraffle.
• Garrett Dimon has some great templates that you can start working off of, available for OmniGraffle and Visio.
• Yahoo! has an entire stencil set of their UI shapes that you can download. The nice thing about their package is that you can not only get it for OmniGraffle and Visio, but they also offer PNG and SVG versions. Great to hand off to your designers to get everyone on the same page.
• Urlgreyhot also has great stencil kits for Visio and Omnigraffle.

The thing to keep in mind is that not one stencil kit will have all the elements you’re looking for, but a combination of them will get you where you need to be. Anything else you need can be easily drawn.

A Better Start.

Since I’ve started using wireframes to start out projects, there’s been no looking back. They help to get ideas across to other team members, as well as ensure that everyone is on the same page. I’m sure you’ll find that as you move forward using wireframes, projects will get easier to get everyone moving on. There’s no waiting on comps or writing code that may not get used.

Let me know what your experience has been and if you have any tips to pass along!