Alec Saunders SquawkBox

Have you ever been in one of those design meetings where everyone gets hung up on colors, or button placement, rather than focusing on the fundamentals of how the product is supposed to work?  We all tend to obsess over the minutiae of the design rather than functionality, which is putting the cart before the horse.  It’s human nature, I guess. 

When we set out to create the iPhone version of Calliflower, we wanted to avoid this trap.  Enter Balsamiq Mockups.  This great little product lets you quickly create “pencil” sketches of your design, allowing you to sidestep the whole issue of look and feel in your review process.  With a palette of common widgets and some easy to use drawing tools, Balsamiq Mockups lets you blow through initial designs easily and efficiently.

Here’s one of the many mock-ups we created during that process.  It shows the upcoming calls screen and explains how it works to the developers.  This was created in a few minutes to be part of the Calliflower on iPhone functional specification.

Later, this drawing was transformed by graphic artists into the final piece of user interface.  During the process, of course, many iterations of the graphical elements were done, but because the design had been set in the beginning the graphical elements could be could be completed separately from the coding.

Below you can see the final implementation.  It’s pretty similar to the mock-up.

Bottom line: for $79, Balsamiq Mockups was a great investment during the development of Calliflower for iPhone.  Balsamiq Mockups earned its keep many times over. Recommended!