Whiteboarding UI and workflow with Balsamiq

Posted: March 1st, 2009 | Author: Nathan

Before I started work on TallySpace I wanted to have a game plan for the UI and work flow.

My previous projects had always been small enough that I could plan as I went along.  Obviously this lead to many frustrating dead-ends and some backpedaling when my informal plans required major revision, but it worked.

Being that I wanted to do this project right, I wanted to at least plan out, in detail, the user interface of all of the pages.  One day I was listening to Net@Night and they were interviewing the founder of Balsamiq. He basically started the company on his own and was able to make $100K in his first year.  I liked his attitude and his story so I downloaded the demo.

I was immediately struck by the simplicity of it.  I’ve used Microsoft Visio for work flows in the past, as well as a few more complex tools for putting together UIs.  With Balsamiq I was able to throw together a simple UI within two minutes of opening the software, so I bought a copy (US$79).

If you’ve ever used Visio, Balsamiq is similar, but simpler.  It provides you with tool bars for sketch-style versions of almost any control you’d use when developing web sites or software, including drop-downs, buttons, windows, tabs, checkboxes, and more.  You simply drag the controls from the toolbar onto the work surface and change the labels, text, and size to suit your needs.

After putting together a few UIs I realized I could draft the work flow of the entire site by stringing the UIs together for the various pages with notes to myself and basic “if-then” connector arrows.

Within the space of about five hours I had whiteboarded my entire site, including how I wanted all the user interfaces to work and notes about how different controls had to respond in different ways.  This has served as the main blueprint to the site and few changes have been made to the original plan (yet).  As a result, I’ve been able to fly through the creation of the site itself, without going back and forth between planning and executing.

Tags: Balsamiq, TallySpace, Tools |

---