App Mockup Tools Reviews Part 1

How Does AppCooker Stack Up?

It took me twenty-five minutes to get my mockup done in AppCooker. Like Blueprint, AppCooker also provides some good video tutorials on its website. The overall user experience is great, and I find that AppCooker is even easier to use than desktop design programs.

Just as in Blueprint, all of your progress is saved automatically so you can focus on your mockups without worrying about whether you saved your work.

It’s possible to export your project to three file formats: AppCooker, AppTaster or PDF. The project file contains not only your mockup, but also the icon, App store and pricing info of your app. As well, you can export either PDFs or JPGs of specific workspaces. It’s possible to view the mockup interactively via AppTaster and leave feedback.

You can watch the video of my final result here. If If you want to try AppTaster for yourself, download this file and upload it to your Dropbox folder!

AppCooker – More Info

Hot Apps Factory’s AppCooker main app is compatible only with the iPad, although it’s possible to use the companion app AppTaster from your iPhone.

• AppCooker is a PAID app $14.99.
• AppTaster is the AppCooker FREE companion app that allows to play mockups and prototypes made in AppCooker.

FluidUI by Fluid Software

FluidUI is a browser-based application that works on Mac, Windows, and Linux. It’s a paid service, but it offers a free plan which allows you to create one project, limited to a maximum of 10 screens, and doesn’t provide the more advanced functionality of the service. However, the free plan should be enough to decide if the product suits your needs.

Paid plans range from $12 to $89 per month; for more details, check out the pricing page here.

One of the great features of this service is that you can create mockups for iOS applications as well as Android and Windows Phone apps. This is great news for anyone looking to go cross-platform!

The FluidUI interface is clean and well ordered, although sometimes it felt clumsy when performing certain tasks, such as creating a segmented control with two segments. However, the overall experience is pleasurable. There are over 2000 iOS, Android, Windows 8 widgets for phone and tablet prototyping that are always up to date with the latest OS standards.

It’s possible to choose low fidelity wireframes for speed, or high fidelity components that emulate the actual OS in pixel-perfect detail. Every UI element is at your reach with a fully integrated library search, and if 2000 elements aren’t enough, you can even upload your own images.

Like the other tools I’ve reviewed, building interactive prototypes is fairly easy. You can zoom in and out of a workspace and link screens simply by dragging a line between them. However, I really missed the simplicity and advanced features of AppCooker Smart Back links that aren’t available in FluidUI.

Cloning screens and other conveniences such as notes, add grids guidance, and snap alignment are really easy to use and will save you tons of time. The transition animations between screens aren’t customizable as far as I have seen.

Screen flows are playable anytime using the Fluid player that is integrated into the workspace. Fluid Player simulates how your prototype will work in a mobile device, although you can always try your mockup on an actual physical device.

If you want to give this really cool feature a try, scan the QR code below and follow the instructions, or simply follow the link that FluidUI provides with your mockup project.

How Does FluidUI Stack Up?

It took me 25 minutes to get my mockup done in FluidUI. Although FluidUI doesn’t have a companion app, its projects are highly portable thanks to the Fluid Player. You can even share your mockup links via email and the recipients won’t need to install any additional software in order to watch the final result.

With a premium FluidUI account, you can export your project as PNG screens, an interactive HTML mockup, a PNG screenflow diagram, or even print it out. With the the simple free plan, it’s possible to share your project on Twitter and Facebook. Finally, there is a really neat feature that allows you to move projects between accounts with the teleport utility.

FluidUI – More Info

Fluid Software’s FluidUI is a great choice for cross-platform development, and the Fluid Player makes it incredibly easy to preview mockups.

• FluidUI – Demos watch some demos to understand the FluidUI potential.

Photoshop by Adobe

Photoshop is a well-known desktop application for Windows and Mac. It’s not the simplest mockup and prototyping tool, but it’s the most complete design software package out there by far. It is expensive, to be sure, but if you’re a designer it’s worth every penny.

You can either buy Photoshop Creative Cloud for $19.99/month, or you can get the complete Creative Cloud package with all of Adobe’s software packages for $49.99/month. If you’re interested in more details, you can find the complete list of Adobe’s products here.

Photoshop has a steep learning curve, but once you learn the basics you’ll have a lot of flexibility at your fingertips and an outstanding prototyping companion at your disposal. Most of the basic features of Photoshop features will serve you well when prototyping your workflow, including layers, guides, clone stamp, horizontal type tool, shapes, and the good old paint bucket.

To speed up your iOS graphic design workflow there’s a really useful Photoshop plugin named DevRocket. It’s compatible with Photoshop CS5 and better, so you’re covered with your Photoshop Creative Cloud license. Otherwise, it’s priced at $19 for a single licence. This plugin is always up to date and makes your workflow more efficient with the following built-in tools:

• Instant view templates: lets you easily create iOS view templates — in any orientation — for both iPad and iPhone.
• Smart icon workflow: generates all iOS icon sizes from a single piece of artwork.
• Native look previews: displays a preview your prototype design.
• Export both resolutions: generates standard and retina artwork versions for your UI elements.

I found the instant view template feature really handy, as it generated the starting point for all of my app’s screens — pre-optimized for iOS 7. Easy peasy!

To include UI elements in your design, you have two options:

1. Search online for free or paid PSD files that cover your needs; you’re likely to find a PSD that covers the iOS 7 UI components library.
2. You can go to the Refill Store via DevRocket and download free or paid UI elements to integrate into your design.

Since standard UI elements are never enough, I found a lot of really great component templates on the Teehan+lax free iOS templates site. These guys have created a gorgeous iOS components collection for iPad and iPhone design that brings lots of visual design goodness together in one place. Thanks guys!