Every product requires preparation to release, especially new mobile apps. If you’re trying to make people more productive, you’ll . Creating a great app demands planning, testing and studying in the look out for the best ways to achieve its intents.
One of the main culprits for a poor app is poor navigation, often caused by the lack of a prototype where you can visualize your app’s engines and hierarchies between screens. That’s what Briefs does. It allows you to set actions to the elements of your static design and create an interactive mockup, which you can send to partners for feedback or just grab a feeling of how it is to navigate within your project.
Briefs, Timelines and Scenes
Understanding the meaning of those three is the basis for the hierarchy of Briefs. The namesake — briefs — comes first; it’s the main project. Within a brief you can create timelines, which features each a set of interactions per device; for example, you can create a timeline for the iPhone 5, iPhone 4 or 4S and for the iPad and stipulate different scenes for each of them. You can also create multiple timelines for the same device to test alternative setups.
Briefs 2 has a gorgeous interface to help you create interactive mockups.
Scenes, if you allow me the comparison to Keynote, are your slides, which will carry all the elements to compose each screen of your prototype. Every scene has its default view in portrait, but you can also set a landscape view, also, scenes can be easily duplicated so you don’t have to apply all your elements from the ground up for each scene.
Change the view to check every aspect of your brief.
As you develop your prototype further, it is worthy mentioning that Briefs has three different views. The Scene View is the one you may be already familiar of as it is the first shown where you can edit your canvas and structure your elements. The Detail View shows a blueprint of your scene where you can dig further into the dimensions of your actors and visualize the assigned actions. Then there’s the Overview, which displays your entire timeline and every connection between the scenes.
Actors and Actions
Every graphical element placed in a scene is called an actor and you can attach actions to them: playing sounds, displaying alerts or jumping to other scenes. Actions can be customized as you please with eighteen combinations of transitions, like curling, sliding, flipping and covering. You can find plenty of actors to start your prototype at Briefs’ Library or drag your own designs to the library and you’ll have them included as well.
The Library contains a great set of actors for your prototype.
There are three kinds of actors: button, text and hotspot. The first two are quite self-explanatory, while the hotspot is an area that you can place on your other elements to assign specific actions into its boundaries. Hotspots make it extremely easy to simply add your static image of the whole screen and allocate actions for every area you want.
To every actor is allowed some sort of customization, you can keep track of its position on a X and Y axis, resize, rotate or change its opacity. For those that allow text you can change size, alignment, color or font, the latter has only a limited set of options. But the best part provided by the Info panel is the Actor States, where you can manipulate how an actor displays when disabled or touched, including different settings for regular or retina screens.
Set a transition as an action for your actors and tweak it.
Actions can be a bit tricky to setup, so here’s what you’ll need to do. After going the whole way and creating your first scene, open the Library and drag any actor into the canvas, right-click on it and choose “Add Action…”. Now comes the tricky part. There’s a circle in your actor and another one on your pointer, they’re linked by a dotted line. Just lead your pointer to another scene on the sidebar if you want to create a “jump to” action or click on the actor to set individual actions.
Testing your Prototype
It would be pointless to convert static images into something with motion, sound and user interaction and not be able to actually test the thing. There are two quick ways to test your prototypes. The first one is using the in-app Simulator. Just hit the “Play” icon in the toolbar and a template of your device will pop up on your desktop, ready for you to test with your mouse.
Test your interfaces on the Mac or beam it to your device of choice.
But, of course, you can test everything on the devices it was planned for. Briefs has an iOS helper called Briefscase, which is available for free in the App Store. You can upload your briefs to Dropbox and open them on Briefscase or using a feature called BriefsLive, which syncs your Mac and the device of choice wirelessly (both must be open and connected on the same network).
Conclusion
Briefs may not be ideal to people playing with mockups once in a while; with a $199 price tag, it seems more focused on indie developers who often test their ideas out. But if you just want to mess around and see if that old idea can take shape, you can download a fully functional trial, with no expiration date, only the limitation for 10 scenes, 1 timeline and 2 briefs, which may be enough for you to get a taste or perhaps use effectively to create a prototype of your dream iOS app.
The application looks gorgeous, and is an exciting way to build app mockups. I can’t see it as a game changer, though, as it still faces the main issue of interactive mockups’ lack of support for gestures. It’s hard to break out of the box with a totally new idea, when you’re constrained to what we’re already used to in apps.
Briefs has also crashed at least four times while I was reviewing it performing simple tasks, and it didn’t save my current work either time. So that’s an urgent thing to fix. It looks gorgeous and has great features, yet packs all the bugs we’re used to see on complex 1.0 apps.
     |