Zooka, a neat iPad Bluetooth speaker, and a review of tools to wire-framing user interfaces

The Zooka was a successful Kickstarter project that raised almost three times its target ($70,540 on a goal of $25,000) and, impressively, went from concept to store shelves in just 15 months.

The built-in battery lasts for around 8 hours and the whole device acts as a very comfortable handle for an iPad. The sound quality (150Hz to 20,000Hz) is not at all bad ... a little pale at the bass end perhaps, but full in the middle and crisp at the top end (that sounds a little like wine tasting notes, doesn't it? In fact, that was so good, I need a cigarette). Walmart is now carrying the Zooka for $99.95. I'm impressed and the Zooka gets 5 Gearhead stars out of five.

Next up ... should you have the need to try to tell a developer what you want in terms of a user interface, or maybe you just want to explain roughly how an application is to work from the user's viewpoint, you might resort to doodling on a legal pad.

If you've ever tried this exercise it's a great way to drive yourself crazy: You map out a few controls, realize you've mislabeled one of them and have forgotten to add another one and the order is wrong and ... by the time you're two or three screens into the task you're ready to set the pad of paper on fire.

Nope, a legal pad just won't cut it, so software is definitely the way to go, but what to use?

What we're looking for is what's called "wire-framing", a term that comes from computer graphics. In it's original meaning it was where 3D objects were represented by lines drawn along the vertices of objects; this  was useful because wireframe models are easier to render at high speed than solid models.

The terms "wire-frame" and "wire-framing" have since been appropriated by application designers as the practice of mocking up user interfaces and, while Wikipedia discusses this technique in terms of Web interface design, it can be used to describe mockups of user interfaces on any platform.

What's important about wireframes is they are supposed to convey the elements, overall structure and intentions of a user interface rather than illustrate exactly what it should look like. What a wireframe aims for is not a Photoshop-like WYSIWIG representation, but more like a doodle on the back of a napkin, a kind of a WYSIKWIW (what-you-see-is-kinda-what-I-want).

I've been working on a software project and we were developing our design with the idea that we'd leave the user interface look and feel until later on and concentrate on the "big picture". Unfortunately the potential clients wanted to get an idea of what the system would "feel" like and, not surprisingly, text descriptions of functionality just don't communicate design goals with any immediacy. So I went looking for a tool that I could mock up the user interface with.

While there are some interesting Web-based wire-framing applications, such as Mockflow, Mockingbird, and wireframe.cc, I found it difficult to commit to any of them because they were either not what I wanted visually, didn't have great usability, or the premium service was too much of a commitment.

I wound up looking at desktop-based wire-framing tools and one I tried and liked was Pencil Project, a free open source UI prototyping tool that runs on just about every operating system.

Even though this application has some user interface problems (it's somewhat clumsy in practice) it also has great potential. My big issue with this tool was I found it to be unstable on OS X and, after losing a design when the app crashed, I decided to keep looking.I finally found a wire-framing system I really like: Balsamiq Mockups. This system does wire-framing right. It's easy to use and available as a desktop application for OS X, Windows, Linux and Adobe Air, as well as a Web-based version and even a plugin for Google Drive, Confluence, JIRA, FogBugz and XWiki.

Balsamiq lets you create designs with a sketch-like look or, if you prefer, a more conventional "engineered" wireframe look. The tool comes with 75 built-in components and 187 icons and the Balsamiq user community has created free libraries of components that represent the controls and features of just about every major operating system and platform on earth.

You drag and drop components onto the canvas and single click to bring up the properties inspector to change attributes or double click to edit their text. As you drag components around the canvas guide lines appear to show you when the object is lined up with the edges and centers of other nearby objects which makes layout much easier. You can also link some components such as buttons to other mockups to emulate the "flow" from one screen to another.

A set of mockups can be exported as an interactive PDF with the links between them working or to PNG format. There are also community contributed tools for exporting mockups to HTML, Flash, iOS, Android, and other hosting and testing platforms.Balsamiq stores your mockups in an open, documented XML format called BMML which is used by other applications, including mockupsNode, a binary module that uses server-side Node.js to programmatically create and modify BMML files, and MockGen which can generate BMML mockups from existing Web pages.

My complaints about Balsamiq Mockups? It doesn't include a "snap to grid" option; the grid spacing can't be changed; on OS X it occasionally goes to sleep for 15 or so seconds; if you minimize the editing window there's no way to get it back again; it appears to have some problem with its UI where the entire editing window went black (although, admittedly, it had been running for 36 hours straight at the time); and I really want the program to generate a map of the links between mockups.

Those complaints aside, of all of the wire-framing tools I've looked at so far, Balsamiq Mockups is by far the best. The desktop version is priced at $79; the myBlasamiq Web version starts at $12 per month for three active projects, unlimited mockups and unlimited users; and the plugins are priced as low as $50 per year for Google Drive. Balsamiq Mockups gets 5 Gearhead stars out of 5. Now, back to selling the vision to the clients!

Gibbs is making mockups in Ventura, Calif. Your drafts to gearhead@gibbs.com and follow him on Twitter and App.net (@quistuipater) and on Facebook (quistuipater).

Read more about software in Network World's Software section.