The Wireframing Tools of the Trade

Wireframing is one of the core components of User Experience Design. It is the blueprint in which the product is conceptualized and provides direction on the execution of it—similar to the blueprints for an architect that gets handed off to an engineer. Wireframing usually requires many iterations and refinements, and there are multiple methods of wireframing. Each UX Designer has his or her own preference, so it boils down to what you are comfortable with and which method works best for you. Let's look at a few differen wireframing approaches:

Sketchbook

My rule is "pencils before pixels." Before I even do anything on the computer, I draw ideas out, whether they are quick wireframes or figuring out workflows. A few reasons why I like wireframing with pencil and paper:

• The iterations are quick and simple.
• Time and cost effective.

UI Stencils

I've been using UI Stencils for more than six months now and absolutely love it. It is a very quick and simple way to draw out some realized sketches. I typically like to bring a sketchpad, stencil and pencils when meeting with clients to draw out solutions with them. I like to use UI Stencils when I want to pump out multiple wireframes. I quickly trace the stencils and it gives me a quick workspace to draw my ideas out.

Balsamiq Mockups

If you're looking for a lightweight and quick mockup tool, Balsamiq Mockups is the one you want to use. I really like using Balsamiq when working with internal resources or developers whom I've worked with a lot. With a tool like Balsamiq, it is very simple and quick to pump out wireframes. The con is that it is a bit limited in the amount of detail your wireframes can be. That is why I use it when working with developers who are famliar with my approach. When I am looking for something a bit more robust and realized, I use Omnigraffle Pro. You also might want to try Mockingbird.

Omnigraffle Pro

My favorite wireframing tool is Omnigraffle Pro. When I'm building wireframes to pass off to a developer, I use Omnigraffle because it provides the most detail and capability. The negative is that it may be a great learning curve for some people, but once you learn it, it is a very powerful tool. Some reasons I like Omnigraffle:

• The ability to download stencils and templates to quickly get you started on projects.
• Exporting presentations in multiple formats, including HTML imagemapping for clickable prototypes.

Another wireframing tool similar to Omnigraffle is Axure.

Conclusion

No tool is the right one. It is a matter of what you need to get the job done. Do you need to pass off detailed wireframes to a developer? Are these wires just to hash out ideas that will be more detailed in Photoshop? Explore each option and see which one works best for you!

Have a favorite that I didn't include? Leave a comment and share your experience with it.