I admit it, I'm a much better programmer than graphics designer.

But getting the overall UI structure and flow of an application "right" requires a certain amount of "right brain" activity. And one of the best approaches is to create a "wire-frame" story board.

I've worked in situations where the "chief designer" would hand out web pages carefully crafted in PhotoShop, and ask for "pixel-perfect" renditions. UI discussions would be held using these images.

The problem is that this can lead to quite a bit of yak shaving, particularly of the bikeshedding variety.

I'm a big movie fan, in my dreams I've wanted to be a movie director if I couldn't be a programmer, or a Rock and Roll star, and among my heroes I count Hitchcock, Scorsese, Peter Jackson, and many others. I think that designing user interfaces is quite similar to designing movies. As someone who has watched a lot of that supplemental material on DVDs of recent an not so recent movies, I know how often directors use story boards to work out the flow and pace of a movie.

Storyboards are a rapid prototyping technique. It's a lot cheaper to work with easily replaceable "low-fidelity" artists drawings than to shoot the actual movie. Ideas can be discussed with little regard to the cost of the story-boarding.

User Interface design can, and should make use of a similar technique often called wire-framing, in which the sequence of presentations, the "scenes" if you will, which will take the form of things like web pages and dialog boxes, are sketched out and annotated as to what actions cause which transitions.

A few weeks ago I became aware of a product called Balsamiq Mockups which does a nice job of wire-framing.

Mockups exists both as an online web application and as an Adobe Air desktop version.

One way to think of Mockups is as a specialized version of PowerPoint or Keynote, although that's missing the point a bit. The similarity is that you can create storyboard pages, which are similar to pages in a presentation. There are some differences that make it a specialized wire-framing tool. First Mockups comes with lots of built-in user-interface components for web applications, desktop applications, and even iPhone apps. Second, rather than presenting the pages sequentially, you set up transitions between the pages based on user interactions, like clicking on buttons.

I find the cartoonish feeling of the pages quite nice. They get the idea across without inviting unnecessary quibbling about pixel-perfection. This is a tool for getting the big ideas down, after that a competent web-designer can polish things.

I've been looking for something like this for a while. I know quite a few Rails developers and designers who are pretty pumped up about this tool. It's well worth having a look.