viziblr

Last week a colleague asked me to shed some light on tools that would be helpful in prototyping UX and creating mockups. And now I’ll take this an an opportunity to share what I said.

PEN, PAPER, AND CAMERA (VERY UNDER-RATED)

Cheap and sometimes the fastest way for simple UI.

• Use graph-paper – makes it easy keep consistent sizing and alignment
• Whiteboards also work, provide an easy “undo” -and are useful if you need to do a full UX workflow
• The camera is critical here – you can avoid redrawing it
• Protip– use the graph paper with the light blue (any light color is fine) lines – if you want to get rid of the lines, it’s easy to do in a bitmap paint program later

VISIO 2010 OR VISIO 2007

Visio 2010 has a “Wireframe Diagram” document

You can use Visio 2007 – but it will make everything have a “Windows XP” look. The new look in Visio 2010 is a more generic, but has a very clean & modern look.

VISDYNAMICA (AND VISIO)

I haven’t tried this tool yet - so here’s a description from their website:

“VisDynamica is a rapid prototyping tool that brings rich interactions to wireframes made with Microsoft Visio™.Dropdowns, modal dialogs, sliders and all other dynamic effects, so common in the real web, can now be easily and accurately simulated.”

http://visdynamica.com/

EXPRESSION BLEND + SKETCHFLOW

This is a very new tool and I haven’t had a chance to play with it. You can learn more here: http://www.microsoft.com/expression/products/Sketchflow_Overview.aspx

BALSAMIQ MOCKUPS

Some people love this product – definitely worth checking out. I played around with this a little bit and thought it was very promising. Like SketchFlow, this app emphasizes a “non-final” look to the mockups.

http://www.balsamiq.com/

VISUAL STUDIO WINDOWS FORMS DESIGNER

With either Visual Studio 2008 or Visual Studio 2010 you create a new “Windows Forms Application”

• If what you are designing is very form-oriented then this good way of prototyping things quickly.
• Protip – decide up-front if you intend to take the code from the mockup and use it for the final code

AXURE RP PRO

Of all the options this is probably the most serious choice – I characterize this tool as an IDE for mockups and prototyping. It is Serious Business.

http://www.axure.com/

I recently purchased Axure but haven’t used it in production yet. During my next spec-writing phase I’m going to use it exclusively and will write up my experience and post it on this blog.