Clik here to view.
Check out the best app mockup tools!
In the first part of this series, I reviewed several popular app mockup tools:
- Blueprint
- AppCooker
- FluidUI
- Photoshop
- Handmade Sketches
These are all great tools, but there’s a lot more than that!
So in this second part of the series, we’re going to take at three more mockup tools:
- Briefs
- OmniGraffle
- Balsamiq Mockups
The special thing about these particular tools is that they can be used to make all kinds of mockups – even for desktop apps or websites.
I’ll give a review of each app, then at the end of the article I’ll share my personal recommendation on which is the best app mockup tool for you.
And best of all – we have some giveaways at the end! Keep reading to see how you can enter to win.
Briefs by MartianCraft
Image may be NSFW.
Clik here to view.
Briefs is a $199, first-class Mac application that makes mocking up really easy on platforms… and yes, even fun!
Like the other apps highlighted in part 1, you can create simple mockups and deliver iterations to your design. Even sharing your projects with clients can be painless with the free companion iOS app Briefscase.
Briefs is a desktop application, which presents several advantages. For example, you can enjoy the comfort of working with a bigger screen and other synergic desktop utilities. But there’s a drawback as well; you can’t make changes on the fly as you can with Blueprint or AppCooker.
MartianCraft always keeps Briefs up to date with new OS and hardware releases. The app offers several templates both for mobile and desktop platforms.
Image may be NSFW.
Clik here to view.
Briefs’ primary structure is a timeline with multiple scenes, each of which represent a single app visual state. In turn, they contain many actors to deal with interactions.
Image may be NSFW.
Clik here to view.
I’ve found Briefs’ menus to be intuitive and essential, but they don’t sacrifice functionality. In the upper right-hand corner, you’ll find the mainmenu:
Image may be NSFW.
Clik here to view.
It contains:
- Scene list: This allows easy visualization and navigation among scenes.
- Inspector: This allows you to change scene and actor properties.
- Assets browser: This is where to browse a sizable library of actors.
Inside the Briefs library there are four sub-libraries: Android, Blueprint, Desktop and iOS, so this is great for cross-platform projects. You’re not forced to use a style but it’s possible to mix elements in a single mockup.
Image may be NSFW.
Clik here to view.
With the inspector, it’s easy to tweak the settings on your actors:
Image may be NSFW.
Clik here to view.
You can use a handy toolbar that allows to flip, change the actor z, flip, lock in place and even group/un-group actors.
Image may be NSFW.
Clik here to view.
If you can’t find a specific actor you need, there is no need to panic or declare failure, Briefs has the solution:
- Create a new folder and insert your assets
- Go into Managed Asset Folder and search for the folder you previously created, and voilà, the custom actors are ready for use!
Image may be NSFW.
Clik here to view.
Briefs auto-saves your project, so when it’s re-opened you’ll find the last available project. You can also save your project as a brief file and load it on another computer.
Briefs’ main menu allows you to move and interact with your mockup in an effective way. You can switch between: Timeline, Single Scene and Blueprint.
Image may be NSFW.
Clik here to view.
Timeline, where all your scenes and their connections are highlighted.
Image may be NSFW.
Clik here to view.
Single scene, where you can work in a “single view” you select from the scene list or timeline.
Blueprint, a great tool that will schematize all the app components (per scene) and highlight their properties: sizes, colours, fonts, spacing … both for non-retina and retina display.
It’s a phenomenal method to communicate your design to clients and other developers in a clear way. In addition, versioning features allow you to track documents with ease.
Image may be NSFW.
Clik here to view.
How about this for useful? You can generate a PDF automatically, to contain all of this information, which can be a super-handy way to communicate to pixel-precision between developers and designers. Just do this: File > Export as PDF.
Image may be NSFW.
Clik here to view.
Example Blueprint PDF file download
You can also add interactivity to your mockups, which you can then preview in the companion app Briefscase. This is a great way to show off your mockups to clients or friends. You can do this in two ways:
- Select an actor and the option from the main menu:
- Create a hotspot (imagine it as a touch sensitive area)
Select Actor > Add action
Image may be NSFW.
Clik here to view.
Select Actor > New Hotspot Actor
Then just decide what kind of action to trigger and set up its properties (delay, duration, type of transition …).
Image may be NSFW.
Clik here to view.
How Does Briefs Stack Up?
It took me 25 minutes to get used to Briefs’ dynamics and finish the mockup of my sample app without watching any tutorials. Initially, like with what happened with Groosoft’s Blueprint, I struggled a bit with actions and scenes linkage, but I figured it out after a while.
This tool is outstanding and makes sharing projects really easy. Either use classic sharing mediums, like email, IM or AirDrop, or download the free iOS app Briefscase for real-time interaction and the ability to get immediate feedback on your design!
Image may be NSFW.
Clik here to view.
If you want to learn more about Briefs and Briefscase, check out this cool demo video I made showing off the final results from the sample app:
Image may be NSFW.
Clik here to view.
Briefs – More Info
- Briefs is a PAID app that costs $199, and includes a full functional demo.
- Briefscase is the free Briefs companion iOS app that lets you view mockups created with Briefs.
OmniGraffle 6 by Omni Group
Image may be NSFW.
Clik here to view.
OmniGraffle is so much more than a wireframing tool. You can use it to draft, chart, brainstorm, and much more! It’s one of the four productivity apps from Omni Group.
OmniGraffle comes in two flavors:
- iPad version: The iPad version has fewer functionalities but gives you the power of working on the go. You can find it on the iOS App Store costs $49.99.
- Mac version: The Mac version comes in two flavors – a normal version and a Pro version (read about the differences here). You can find it on the Mac App Store for $99.99, with the possibility to upgrade to Pro with $89.99 via in-app purchase. Alternatively, you can buy these directly from the Omni Store, which has the advantage of considerable volume discounts.
Since OmniGraffle is quite vast, for the sake of simplicity I will cover only those functionalities that will help me to build my simple tracking app mockup.
Every time you open the app for a new project, the Resource Browser prompts you to choose a suitable template. Note that you can create your own templates, in order to start with documents configured to meet your needs. For this article, we’ll go with the iOS template.
Image may be NSFW.
Clik here to view.
At a first glance, I thought Omni reached the right balance between function, overall aesthetic and usability. However, I personally prefer the Briefs’ darker UI colour, because I think it lets you focus more on your mockup contents.
Menus are intuitive and the main interface is dividable into four principal parts:
Image may be NSFW.
Clik here to view.
- In yellow, the canvas is where you interact with your mockups elements
- In red, the toolbar is where to find the main tools to customize and facilitate your work (zoom, shape and line tools, text tool, bring to front and send to back options …)
- In green, the sidebar is where to find and organize canvasses and their individual layers
- In purple, the inspector tunes the mockup element’s basic properties (fill, stroke, shapes, lines, images, alignments). Here you also add stencils, modify the project typography and set up other advanced properties
The inspector has a Stencils Library, which contains a plethora of elements for your wireframes.
Image may be NSFW.
Clik here to view.
If you feel inclined to add other elements, simply drag and drop custom images from your desktop. Another option is to go to Graffletopia and subscribe to their service. It costs only $24 dollars a year, and you’ll be able to use hundreds of stencils on your both Mac and iPad. If you’re more of a minimalist, then just buy single stencil kits.
In spite of the variety of stencils, I’ve found AppCooker and Blueprint libraries more comprehensive for iOS-only projects. However, with OmniGraffle you can reach a higher level of elements customization, and integrating elements from outside sources is as easy as dragging and dropping.
All in all, I found working with OmniGraffle rather enjoyable, because the software acted as I expected, and it helped me with repeating tasks. Here is an example that highlights its usefulness. This happened while I was positioning arrows for the tableview below:
Image may be NSFW.
Clik here to view.
- I dragged and dropped the first arrow
- I copied and positioned the second arrow
- I copied the third, and *Puff* it was already in the right place, since it noticed the first two arrows aligned! :D
It might seem to be a simple thing, but try to imagine this kind of behavior in a bigger project, or in every day design tasks — it will save you a lot of time and repetitive click-click-clicking.
Going forward, the sidebar will help you interact quickly with your canvasses:
Image may be NSFW.
Clik here to view.
You can add new canvasses and layers easily, while keeping your whole project organized.
Much like Photoshop, elements layer from back to front; you can hide, lock and edit them granularly. If you need to print the project, you can define if a specific layer should print. One stellar feature is shared layers (represented in orange), so when you add or modify something in that layer, it’s shared automatically across canvasses.
I must admit that I would love to see more iOS components built into OmniGraffle. For instance, it was difficult to find the iOS7 segmented control, so I had to add it externally. However, OmniGraffle compensated for this deficiency with the ability to customize stencils libraries extensively.
Image may be NSFW.
Clik here to view.
When the canvasses are ready, you can start to link them via actions.
Image may be NSFW.
Clik here to view.
When you click on an element from the advanced properties inside the inspector, you’ll find the sub-menu actions. That is where to choose which action to perform when an element is clicked, and it allows you to add basic interactivity to your wireframe. You can choose from different actions:
- Open a URL
- Open a File
- Run a Script
- Jump Elsewhere
- Show or Hide Layers
With the help of the option Jumps Elsewhere, it’s possible to create a prototype from your wireframe. For mobile prototypes, it can also be useful to use Show or Hide Layers. For instance, if you need to show an alert view when the user performs a specific action.
Last but not least, OmniGraffle projects are very portable and exportable to a variety of different formats.
Image may be NSFW.
Clik here to view.
How Does OmniGraffle Stack Up?
As an OmniGraffle newbie, it took 25 minutes to finish the wireframe. In my opinion, OmniGraffle is one of the most powerful and adaptable software of the reviewed set since it can do far more than just app mockups. That said, if your interest is primarily wireframing for mobile apps, you might find the other reviewed tools more useful because they have focused, out-of-the-box features that can take care of your projects.
All the other tools have a companion app or methods that help you to share project with your team and clients. OmniGraffle’s more time-consuming interface is forgivable since OmniGraffle is a broader, more versatile program.
If you want to learn more about Omnigraffle, check out this cool demo video I made showing off the final results from the sample app:
Image may be NSFW.
Clik here to view.
OmniGraffle – More Info
- OmniGraffle 6 is a PAID app that costs $99.99 + $89.99 to go PRO from the Mac AppStore. Another option is to purchase one license for $199.99 from the Omni Store
- OmniGraffle for iPad is a Paid app that costs $49.99. It has limited functionality when compared to the desktop counterpart
Balsamiq Mockups by Balsamiq
Image may be NSFW.
Clik here to view.
Balsamiq Mockup is a wireframing tool that allows quick design creation and simple elements that do not distract the evaluator or client, which keeps him or her focused on the content and graphic quality!
Balsamiq offers a desktop app, with a fully functional 7-day trial. At the time of writing this, the price for a lifetime license was $79. Different from the other two tools, Balsamiq Mockups is cross-platform so you can work on Mac, Windows or Linux. Here’s where you can find the download page.
It also offers a web application myBalsamiq. You can begin with 30-day trial and if you want to keep it, it’s $12 per month. The option to share all your work automatically across platforms, including PC, (PCs need love too) makes the web app rather tempting.
Now it’s time to dive into the nitty-gritty with Balsamiq Mockups! :]
At a first glance, it’s clear you can divide the UI in three main areas, the toolbar, the elements bar and the canvas.
Image may be NSFW.
Clik here to view.
- In green, there is the toolbar that contains various utilities that will help you with your work, such as, undo, redo, cut, copy, delete, bring to front, send to back, zoom …
- In orange, the UI components bar contains all the components you can use to compose your mockup. Notice how they are ordered by category.
- In blue, this is where you’ll actually organize your mockup sheet. It can contain multiple sheets. You can link them to create interactive prototypes.
I think the UI component bar is really well organized. However, there was a surprise when I opened the iPhone category; there were only a few:
Image may be NSFW.
Clik here to view.
So I Googled and found some community-generated sets of UI components. The crowd saves that day again. Phewww..! :D
Image may be NSFW.
Clik here to view.
For my simple tracking app I will use: iPad Controls, iPad Controls by Raad, iPhone Glossy Bars and iPhone Customizable.
If you still need a custom component, you can drag and drop images inside Balsamiq Mockups. When you add the first custom component, it will create an asset folder on your desktop.
Image may be NSFW.
Clik here to view.
The Project Assets category will reference that folder.
Image may be NSFW.
Clik here to view.
If you need to customize a component, there is a terrific set of icons ready for you.
Image may be NSFW.
Clik here to view.
When you highlight a specific component, a popup appears to allow you to change its properties.
Image may be NSFW.
Clik here to view.
Different components have different properties inspectors, and you can even change group properties.
Image may be NSFW.
Clik here to view.
I worked with the help of one canvas, and my goal was to quickly copy and paste so that all my mockups would be in the same place. Ten short minutes went by and the next thing I knew, I was done!
Image may be NSFW.
Clik here to view.
Although, Balsamiq Mockups is very simple, it gives you a great level of customization. Plus, it’s user-friendly and quick.
Creating an interactive prototype is simple, you only have to follow a few steps:
- If you worked in one canvas as I did, create a number of canvasses according to your views. Select New Mockup. Click the + button to add to your heart’s content.
Image may be NSFW.
Clik here to view.![add new tab]()
- Copy and paste a single view in each canvas. Click on tab labels to give each a name, as this will keep your project clean and help you during the linkage phase. Image may be NSFW.
Clik here to view.![docs]()
- Now link canvasses by clicking on the component that should trigger the action and set up the link type and destination. Image may be NSFW.
Clik here to view.![links]()
When you finish the set up, your views should look like the one below, with little red arrows representing links.
Image may be NSFW.
Clik here to view.
It’s possible to export your project in different formats: PNG, PDF, XML; but to allow interactivity I’ve exported it as a PDF File for your reference.
How Does Balsamiq Mockups Stack Up?
It took me ten minutes to finish the wireframe. Balsamiq Mockups is the most easy-to-use wireframing tool I’ve ever used. It’s intuitive and allows a substantial amount of customization. It’s cross-platform, and this gives it a definite advantage over the other tools reviewed in this article. Furthermore, you may use the browser app to share your work between office and home! :]
Image may be NSFW.
Clik here to view.
Balsamiq Mockups – More Info
- You can find a comparative table of Balsamiq versions, and a direct link to download at their compare versions page.
Prototyping Tools Compared
This series has covered a ton of app mockup tools, and at this point it might be hard to keep them all straight! So I’ve put together this handy table that sums up the features offered by the various prototyping tools:
Image may be NSFW.
Clik here to view.
So what’s the verdict?
Overall, I think all of these tools are pretty sweet. Each has a unique set of attributes, abilities and characteristics that may appeal to different developers with specific needs.
But I know you might wanna see what I think is the best after reviewing these tools, so I picked a winner in a few different categories.
Best Value On Mac For Wireframing Only
Image may be NSFW.
Clik here to view.
If you’re looking for the best app solely focused on making app mockups and time and money is a concern, I’d recommend Briefs.
In my opinion, Briefs is a great app because it offers the right amount of features to create mobile and desktop app wireframes. It’s also intuitive and has the most aesthetically pleasing UI; personally, I think the darker color makes it easier to focus on your work. Lastly, Briefscase completes the Briefs package as a remarkably useful and free prototype tester.
Best Value On Mac For More than Just Wireframing
Image may be NSFW.
Clik here to view.
If you’re looking for a general purpose app for mockups, brainstorming, charting, and more, I’d recommend OmniGraffle. There’s a lot you can do with OmniGraffle, and app mockups is just one part!
One small drawback is that OmniGraffle is only for Mac. As far as cost goes, the basic version is yours after a one-time purchase at $99.99. You can update to Pro later on, which makes it less expensive alternative to Photoshop.
Best Overall On Mac For Those With Plenty of Time and Money
Image may be NSFW.
Clik here to view.
If money and time to make the mockups is not a concern, I advise you to choose Photoshop, which was featured in part 1 of this series, because it is much more than a wireframing tool and almost an indispensable part of an app developer’s toolbox.
Photoshop is not cheap – Photoshop Creative Cloud costs $19.99 per month, and that adds up quick. It also is quite time consuming – it has a large learning curve, and making mockups in Photoshop is probably slower than any of the other options (although third party tools like DevRocket make this more appealing).
However, the benefit is that your mockups will look pixel-perfect, and there’s literally nothing you can’t do. Moreover, Photoshop is widely adapted, so collaborating and sharing files is usually simple.
Best Overall On iPad
Image may be NSFW.
Clik here to view.
I really loved AppCooker! It makes it possible to work up detailed mockups quickly and is even fun to use. AppTaster completes the package because it provides great add-on to this outstanding app. However, I want to note that I did not get to try OmniGraffle for iPad.
Although Blueprint is also a great tool, I had a better overall experience with AppCooker. The fact that it takes only a few minutes to create an app icon, a business plan, and take notes about ideas is why you might find a lot of value in AppCooker.
Best Looking Mockups
AppCooker also wins the best looking mockups category. In my opinion, their mockups were the most orderly, customizable and cleanest of all the tools that I tested.
Easiest and Fastest For Quick Mockups
Image may be NSFW.
Clik here to view.
I found Balsamiq Mockups to be the easiest and quickest tool to use. It’s simple, clean and straight to the point. The fact that it is cross-platform and offers a web application makes the tool even more appealing. It took me only ten minutes; compare that to an average of about 25 minutes with the other tools.
Best Companion App
I’ve found Briefscase as the most intuitive companion app. Although you have the possibility to pass files through dropbox, the synchronization happened automatically thanks to the software. In addition, it’s easy to use and features a gorgeous and intuitive UI.
Where To Go From Here?
And to end this article, we have some good news – a few lucky readers will win a free mockup tool! The developers of the following apps have been kind enough do donate a few promo codes for some lucky readers:
- Blueprint: 5 copies
- AppCooker: 5 copies
To enter, all you have to do is comment on this post – in 24 hours, we will randomly select the winners.
Also, if you have any questions or comments on your favorite mockup tools, feel free to join the discussion in the forums below. Happy mocking!
App Mockup Tools Reviews Part 2: Briefs, OmniGraffle, and Balsamiq is a post from: Ray Wenderlich
The post App Mockup Tools Reviews Part 2: Briefs, OmniGraffle, and Balsamiq appeared first on Ray Wenderlich.