≡ Menu

Balsamiq Mockups earns a place in our toolkit.

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.

image

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.

photo

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!

Reblog this post [with Zemanta]

{ 1 comment… add one }

  • Ivan January 8, 2009, 11:58 pm

    Well you surely hit the nail on the head with this! I have learned the hard way to avoid prototypes that look like real application.

    What I tried then was bunch of different tools to create "ugly" black and white screens but at least when discussing the requirements I have never again had to fight the customer to focus on functionality and avoid commenting on colors and other design details.

    What I use exclusively for lthe ast two years is small program called MockupScreens (http://mockupscreens.com) and sometimes I even prototype directly in a meeting together with customers. I don't know whether you can do the iPhone app mockup with that, though :-(

    This Balsamiq tool looks similar, thanks for mentioning it I'll be sure to check it out!

    Ivan

Leave a Comment

Next post:

Previous post: