Subscribe / Unsubscribe Enewsletters | Login | Register

Pencil Banner

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

Mark Gibbs | June 6, 2013
This week, a collection of goodies. First up for all of you iPad aficionados, a neat wireless Bluetooth speaker called Zooka from Carbon Audio that fits onto the edge of your tablet and boosts your audio volume by about five times (turned up full, that's a sound pressure of 80dB at 1 meter). There's also a built-in microphone so you can take calls if you've paired the Zooka with your iPhone.

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.

 

Previous Page  1  2  3  Next Page 

Sign up for CIO Asia eNewsletters.