Carpé Cocoa

I’ve heard good things about Balsamiq Mockups so I thought I’d give it a try. The desktop version is currently just $79, and installs in moments from the Mockups site. The app is based on Adobe Air, so if you don’t have Air installed already, you’ll need to do that first. Mockups runs on OS X, Windows, and Linux. There is also a web version. This review uses the OS X desktop version. You can try out the desktop version for free, but to save or export designs you’ll need a license key.

Registration

Registration is simple, although the menu item is hidden in the Help menu instead of being in the Application menu (which doesn’t actually exist). Once you’ve entered the registered name and serial number, the app is fully activated. Registration is per-user, not per-machine, so you can install it on your desktop, laptop, home desktop, etc. Registration includes free perpetual updates.

Reinventing the… uh… clock

When you launch Mockups, you are presented with a new mockup window, ready for your design. Across the top are a number of controls you can add to the Mockup. These controls are broken down into a number of categories. Since I write iPhone apps for a living, we’ll select the iPhone category to get started, then set about creating a workflow for the built-in clock app.

First, drag a iPhone object into the mockup to act as a container for our views. Bring up the properties window (it’s greyed out until you point at it) and select the middle background pattern, which shows a Nav Bar at the top and a Tab Bar at the bottom. Then click in the “Quick Add” box and start typing “Icon”. Select the “Icon and Text Label” and type in “World Clock”. Click on “Icon search” and type in “Circle”, then select the “Dot, Little Black Circle” icon. Change the font size to 9 and icon size to Small to make it fit better, and drag it over the tab bar area on the phone. In a similar way, we can quickly make the Alarm, Stopwatch, and Timer buttons and place them in their approximate locations. Select all 4 icons and Align Bottom, then Distribute Centers Horizontally and Group them. We’ll save this as “iPhone Clock App World Clock”.

Next we clone the mockup (??N) three times and save the clones as “iPhone Clock App Alarm”, “iPhone Clock App Stopwatch”, and “iPhone Clock App Timer”. Later we can link the icon buttons to the different views, but for now we’ll continue creating the World Clock view. In a few moments we can add an Edit button and a + button and use a Label to finish the Nav Bar.

Next we complete the content view. Simple add a Rectangle/Canvas to the content area, an icon for the clock, and a few Labels for the City, Time, AM/PM and Day, adjusting the fonts appropriately (remember, the goal is an approximate representation of the final app). Duplicate the row we just created a few times to fill out the content area.

In-App Navigation

The last step on this view is to fill out the links. Just select each control and choose the desired mockup from the Link dropdown. A small blue arrow will appear on the control. If you switch to View->Full Screen Presentation (?F) you can click on these linked buttons to navigate around the mockup.

We can use the included iPhone Picker control to quickly mockup the Timer screen as well. The buttons in the middle are made from Canvases and Labels to allow customizing the text layout and colors, much as we’d have to do in Interface Builder or programmatically if we were to build this app for real. It would be nice if Mockups let you change button colors. Maybe that feature will be added soon.

Full Screen Presentation

We can go on like this adding additional mockups until we’ve covered all the screens in the app. Along the way we can share the files with the rest of the team to get feedback much more quickly than if we were writing code for all of this. If you are in the same office as the rest of your team or use some sort of web collaboration software, you can use the Full Screen Presentation mode to click through the various screens in the app, using the ridiculously large pointer (and I mean that in a nice way) to point out parts of the interface as you discuss it.

Conclusions

Mockups is extremely easy to use. I wrote this review as I was learning the app for the first time. The hand-drawn images really do have the intended “lo-fi” effect, encouraging you to stay focused on the big picture instead of spending hours tweaking individual pixels. Mockups will definitely become part of the AppMobi design process. It will be a big help as we move ahead with development of our more sophisticated productivity apps.