Tools of the Trade: Software for Prototyping

What is the best tool for creating prototypes?

This is a surprisingly controversial topic. Just like asking someone whether they prefer Coke or Pepsi, you’re bound to get a reason behind why their choice is best, or why water is better for you if they don’t drink soda.

Picking the right prototyping tool is really a matter of what works best for you and your experience with different applications. It’s about what you find easy to use, and allows you to create the designs you envision relatively quickly and pain free.

My favorite tools are Balsamiq, Axure, Visio and InDesign. Each has its purpose in my toolbox, and I choose which one to use based on the needs of each individual project.

Balsamiq (http://www.balsamiq.com/)

balsamiq mockup

Sample Balsamiq Mockup

Balsamiq is a great tool that I use for quick, easy low-fi prototypes. Because of their pre-designed stencils I can quickly create a prototype during a design meeting, or easily refine an existing one. It is fantastically cheap at only $79. Its flashy interface and search tools are easy and fun to use. The prototypes appear sketchy which is great for me when designing for low-fi prototypes. The only con I have heard is that it is limited in its functionality. However, this doesn’t bother me as it has the level of prototyping I need, and I don’t yet need or want the complexity of fancy interactions.

Visio (http://office.microsoft.com/en-us/visio/default.aspx)

visio mockup

Sample Visio Wireframe

Once I move past the initial ideation of low-fi prototypes I like to refine my ideas into a more detailed design. Depending on the project, I use either Visio or InDesign for this step.

Visio allows me to create my own stencils and save them in a stencil set. I can easily drag and drop them onto the page and manipulate their size and properties. I am able to achieve a level of detail greater than I could in Balsamiq, however they are still a low enough fidelity that they will not be mistaken as a finished product. Visio is a bit more expensive at a retail price of $559. However, I find it useful not only for prototyping but also for mapping out architecture diagrams like sitemaps, and user flows. The only con would be the low level of fidelity in their existing stencils. Most of the stencils I use I have created myself.

InDesign (http://www.adobe.com/products/indesign/)

indesign mockup

Sample InDesign Persona Document

InDesign is an Adobe product and has received a lot of marketing as a prototype tool by Nathan Curtis from EightShapes with their Unify package (http://unify.eightshapes.com/users-guide/what-you-get/) It’s a bit expensive at $699, but is overloaded with features. I like the additional level of design that I get out of InDesign as an Adobe tool. It allows me to reach a very high fidelity while still maintaining a structured prototype. My favorite feature is one of the main goals of the product, publishing. I can import all of my prototypes in to one document, annotate them, and publish a full specification. Then any changes I make to the individual prototypes are automatically updated in my document which makes for easy editing. The downfall would be the high learning curve, even for those who are familiar with some of the other Adobe products.

Axure (http://www.axure.com/)

axure mockup

Sample Axure Prorotype

When I am ready to get into interactive prototypes Axure is the first and only tool I turn to. It’s reasonably priced at $589 considering its interactive abilities. It uses a WYSISYG interface to let users drag and drop widgets onto the screen. The widgets can then be manipulated and have actions assigned to them. Projects contain sitemaps, and have as many pages as the user chooses in them. Projects can be shared across multiple computers as well. Master widgets can be shared across pages like templates, and variables can be assigned to create the feeling of a database back end. I feel it has just about everything I need to create a mockup that acts as a real website would. This is very valuable in testing as it allows participants to actually click through and interact with the prototype similar to how they would with a final product. Axure also has built in features for generating specification and additional developer notes.

Additional Tools

While I personally don’t use PowerPoint for my prototypes I know many designers who use it successfully and swear by it.

There are many prototyping tools popping up everywhere. Especially now that UX is becoming a more common part of the tech community. Some other common tools are:

Resources: