Briefs Brings the Future of App Wireframing and Blueprints to You

Briefs Brings the Future of App Wireframing and Blueprints to You

We’re nearly halfway into 2013 and the App boom is still on. Everyone wants an app or a responsive website because the rise of mobile continues. Almost everyone has an app idea and a concept. Matthew Panzarino has a great post up on The Next Web on the rise of the App Director. An app idea is useless if only you can see it and people you work with are left clueless. Everything seems to work in your head but getting that point across to someone else isn’t very easy. A director works with scenes and actors and an app designer or entrepreneur needs something great to get a concept across to someone else. This is where Briefs by MartianCraft comes in.

I’ve used a few wireframing tools like Livewires for iPad, the iPhone app POP and even Paper by 53 which is the simplest to sketch something in. Briefs is on a whole other level. It is so much more. While other tools for the same subject are usually standalone applications that do a few things correctly, Briefs takes care of everything. Rob Rhyne has gone through hell with getting the App approved for a few years now. Briefs was finally released on the Mac App Store and there’s even an iOS companion app called Briefscase.

You know how I keep saying Mac apps need to reach the level of UI polish that the great iOS apps have? Well Briefs has all that and more. It looks stunning. The app icon itself is a piece of art. It has a nice blueprint slate with chamfered edges along with a physical colour chart used to match colours. Even the detailing on the material on the blueprint in the icon is great. Before using Briefs, you need to understand the app. It does have a learning curve and that is expected with almost all professional grade software.

Everything you create within Briefs is a .brief file. A brief created has separate timelines for different devices. Just like a universal app, Briefs will have different timelines for an iPad, iPhone and iPhone 5. It supports Retina and non Retina resolutions for artwork. The whole nomenclature within the app for elements brings you back to the article about an App Director. Timelines for different devices are made of scenes like in a movie. A scene is a full screen image representing the state of the app at that moment. Scenes contain actors that are graphical elements on the screen. Actors are images that have actions linked to them that can be triggered by tapping on them. One of the things I love about Briefs that nothing else has is the ability to link screens together with real time native animations. Everything else has a web approximation of native animations. Briefs gives you a variety of animation options and they work brilliantly. There are two sets of actors that are available for use out of the box. The first kind is the iOS style that has native elements like tab bars, buttons and alerts in addition to all the other typical elements one would expect. The second set of actors available is the blueprint one that looks great overall and I found myself using that one more while using the app. The app isn’t limited to just those sets though. You can easily drag your own elements and artwork into a scene and work with those.

[showcase id=”7754″]

The layout of the Mac app is split up into 4 main sections. The left of the app has your timeline and scenes grouped by device. The main work area has the device being worked upon at the moment with scales and a lovely dark background. The right of the app has the information section that gives you details and lets you edit a variety of things for each actor or scene. There’s a segmented control on the top in the middle that lets you switch between an overview of the brief, editing section and a blueprint of the current brief. There is a tool bar that is nice and subtle above the work area that has buttons to let you flip or group elements. Actors and hot targets for when you use your own screenshots can be linked to other scenes with actions easily with the necessary animations and sounds.

Once you are ready to interact with your brief, you can use the play button and select a simulator or a device to work with. This is very similar to Xcode. Your iOS device needs to have Briefscase installed. One of the highlight features of Briefs is Briefslive. Briefslive lets you see changes on your device in a brief in real time as you work with it on the Mac. This works brilliantly and saves a lot of time. As shown in the video introducing the app, your iOS device can be docked near your Mac and you can see changes you make reflecting on them instantly.

[showcase id=”7759″]

Briefs can be published directly to your device if it is on the same network and has the Briefscase app installed. You can also share files by email or iMessage. Briefs can be opened on any iOS device in the Briefscase app. This is great because now a designer working with Briefs can send over the .brief file to anyone with an iOS device running the free companion app. Now the app as such involves no coding but it takes care of developers as well because a brief’s assets can be exported with proper naming conventions used. This reduces the bridge between designers and developers working on a common project. The Briefscase app itself is a nice little app that lets you navigate through your briefs and interact with them. It has a demo Welcome brief and all briefs added to it are represented by small circles with the first two letters from the name. It also shows you when a brief was last modified. Tapping a brief gives you an option to select which timeline you want to see and at any time a swipe up from the bottom will let you access the control panel for Briefscase.

Briefs is not aimed at casual users or students just getting into design or development. It is a professional grade application meant for professionals. Once you spend time with it, Briefs fits perfectly in your workflow and will be invaluable. I did face a few crashes in the first release of the app but in the latest build, the app runs almost perfectly. There’s no point using plain sketches for apps today. Briefs will help you make a banger of a first impression with your app. Seeing something you thought of work in front of your own eyes this quickly has never been simpler. While Briefscase is free, Briefs is an expensive app. It costs $199.99 on the Mac App Store or directly from the developer. There is a free trial available as well that is not time limited which is great. You can spend time with the app and decide whether it is worth it. The trial is however limited to 10 scenes and one timeline per brief. Any professional developer shop or designer will find immense value in this app. Tell your app story with Briefs for Mac.

I also love how newer Mac apps are dealing with licensing. MartianCraft followed Black Pixel’s steps and allowed the non Mac App Store version of the app to be licensed with the Mac App Store one. This is an ideal scenario for consumers because they have the convenience of buying from the Mac App Store and also the ability to receive updates quickly instead of waiting on Apple’s approval process. While this may not seem great from a developer’s point of view, consumers will enjoy this.

Mikhail Madnani is the acting Editor-in-Chief of Beautiful Pixels. He’s usually the one making sure so many weather apps get reviewed when he isn’t playing Xenoblade Chronicles 2 or Hearthstone.