Prototypes are important for all sorts of endeavors that pit a creative component against technical requirements – including, of course, software development. Before full-blown development starts, simplified models of a product help insure that all the parties involved are on the same page from the very outset, instead of finding out many months – and dollars – later that everybody was running in a different direction.
Briefs (Mac App Store link), from MartianCraft, aims at bringing powerful and easy-to-use prototyping techniques to iOS. It allows designers to build dynamic models of their apps that can be tested directly on a mobile device without the direct involvement of a developer.
Three years in the making
If the name “Briefs” rings a bell, it’s because its history is as colorful and picturesque as its feature set. Originally demoed at the 2009 C4 Conference in Chicago, it was initially meant to run entirely inside iOS, allowing users to create working mockups of apps directly on their mobile devices.
After nearly three years – and, apparently, much interaction with Apple’s App Store review folks – the final version of the app is split in two separate programs: Briefs proper, which runs on OS X and is where most of the design work takes place, and Briefscase, which runs on iOS devices and “plays back” the mockups created by its desktop-based cousin.
The split works in the app’s favor. OS X allows for more accuracy in positioning and sizing the graphical elements that make up the various parts of a user interface, and the makers of Briefs have found some excellent creative ways to make their Mac app work well alongside its iOS counterpart.
Scenes, actors, and transitions
A Briefs project consists of a collection of scenes, each representing an individual state of the mocked-up app. The software supports both the iPad and the iPhone, and you can orient individual scenes in landscape and portrait as needed.
Scenes act as containers for assets, the individual graphical elements that are part of the interface, like buttons, backgrounds, and so on. Each asset can have multiple attributes, such as text, and is capable of supporting different states, like “disabled,” “tapped,” and so on.
Briefs includes two libraries of assets for each of the two main device types (phone and pad). The “blueprint” library contains graphics that look like sketches (designers use this style to help stakeholders focus on the substance, rather than the form, of their interface sketches), while the “iOS” group plays home to elements that look like their real-life counterparts.
Naturally, the app also allows you to use your own assets, which makes it easy to create custom interfaces and to refine the look and feel of an app until it’s as close to the final product as possible. It even provides a “user” library, although the only way to get assets into it is to add them after they’ve already been dragged on to a scene. This can be problematic because it forces you to continuously import individual files from the Finder, which is time-consuming. It’s a problem the developers of Briefs are aware of and working on.
Finally, any part of a scene can be associated with actors that, in turn, can be used as triggers for what the app calls transitions – the actions that allow the user to navigate through the mockup’s workflow. Transitions include all the animations that typical iOS apps implement, like slide-ins, three-dimensional flips, and so forth, as well as the ability to play sounds. Creating a transition from an actor to a new scene is as simple as Control-dragging from one to the other, and then specifying a number of details that govern a animations’s behavior, like delay, direction, duration, and so on.
From Mac to mobile
As I mentioned earlier, Briefs features a companion app, called Briefscase, that can be installed an iOS device. While you’re working on a mock-up, you can use the app’s BriefsLive feature to visualize and interact with it in real time – including manipulating all the graphical elements and experiencing the various transitions.
In my tests, Briefscase worked very well; as long as your iPhone or iPad is connected to the same Wi-Fi network as your Mac, the interaction between the two is flawless and nearly immediate, allowing you to quickly and efficiently gauge how good your timing, dimensions and color schemes are working. (In a pinch, Briefs also included a Mac-only simulator, although that’s not quite the same experience as the real thing.)
That’s not all that Briefscase can do; you can actually package up a brief and send it to another user via a variety of methods, including email and Messages. The recipient will be able to open the resulting file on their copy of Briefscase and take full advantage of its interactive features to experience the brief on their device. As you can imagine, this is perfect for sharing your work with other stakeholders on the project and collecting their feedback regardless of where they are.
Exporting
Once everybody is satisfied with a mockup, Briefs allows you to export the individual assets so that they are ready for a designer’s final touches, or for a developer to use directly in the app.
Most importantly, the editor has a special “blueprint” mode that, as its name implies, provides detailed information about the position, size, and content of each asset, thus giving everyone involved in the project a detailed set of technical specifications from which to work.
This should be helpful in preventing what I like to call the “pixel mambo” – the curious phenomenon sometimes encountered in projects where developers accuse designers of slicing assets in all the wrong places, and designers accuse developers of butchering their work by placing elements off out of position, or in the wrong size.
The $200 price tag makes Briefs one of the most expensive products you are likely to find on the App Store, and there is no denying that the editor has plenty of room for improvement, both in terms of functionality and stability. The app crashed a couple times while I was working on it (though no data was lost in the process), and some areas of the user interface are a little obscure; for example, it took me a while to figure out how actors work, and not having access to a hierarchical structure of a scene’s assets makes it hard, on occasion, to navigate through its contents.
Bottom line
Professional apps are often expensive, and Briefs is as useful as many other hundred-dollar apps that you are likely to find on the hard drive of someone who builds apps for a living. Besides, designers and developers often charge in the hundreds of dollars per hour, and I know of no person who fits in either category and likes to waste time only so that they can charge clients more or argue with each other about pixel dimensions and animation timings.
In short, Briefs allows everyone involved with a development project to focus on their respective strengths, replacing typical mockup approaches based on static images or technologies like Flash and HTML. It provides an interactive environment that closely matches the real thing, and is worth every penny.
