App Mockup Tools Reviews Part 1

How Does Photoshop Stack Up?

With the combination of Photoshop, DevRocket and PSD goodies, I managed to finish the mockup in 40 minutes. Using Photoshop will take a little more time compared to the other dedicated prototyping tools, especially if you aren’t already familiar with photoshop. However, it’s worth the time investment just for the flexibility it gives you alone.

Once you’ve created all your screens — one by one — you can add them to a common workspace if you want to link screens as in other prototyping packages.

There’s an ever-growing number of third-party tools that extend Photoshop’s capabilities in amazing ways. To share your Photoshop mockups with customers, Bjango offers Skala Preview, a cross platform utility that has desktop, iOS and Android versions. You can find all of the tools on the Bjango website.

It only takes a few steps to share a project via Skala Preview:

1. Download Skala Preview for desktop.
2. Create a Remote Connection in Photoshop. Edit > Remote Connections…, and then provide a service name and password. Make sure Enable Remote Connections is ticked.
3. Share your service name and password with customers that have downloaded the Skala View mobile app (available for iPad and iPhone).
4. Start the Skala View app. Make sure you have both Skala Preview and Photoshop running at the same time, and ensure your Mac and the iOS devices running Skala Preview are all on the same wifi network.
5. Enjoy your preview!

Skala Preview sends pixel perfect images of your mockup to any iOS or Android device. You can even carry out colour blindness testing sessions.

Photoshop – More Info

Adobe Photoshop is a great choice if you need flexibility and a powerful tool for your mockup phase.

• DevRocket by Ui Parade is a great plugin which helps speed up your workflow.
• PSD goodies by Teehan+lax will save you a lot of time while providing faithful UI elements for your mockups.
• You can grab some free Gesture Icons from Mobile Tuxedo to conceptually represent gestures in your mockups.
• Use Skala Preview for Mac and Skala View for iOS by Bjango if you need to share your mockups.

Handmade Sketches — by You!

Last — but certainly not least — handmade sketches are still a tried-and true way to application mockups. More than one app began life as a sketch on a paper napkin! :]

There are several companies that offer some really neat tools that help you make quick work of handmade sketches. Take a look at the offerings from the UIStencils website.

Although they look simple, don’t underestimate the freedom and flexibility afforded to you by handmade sketches. Wanna know a secret? These are my favourite way to prototype.

How Do Handmade Sketches Stack Up?

I spent a meagre 10 minutes to finish my mockup using a handmade sketch. I made use of some ready-made templates we use internally at Squareomatic; they offer places for information like date and mockup id that are useful if you need to classify your work.

Interface Sketch Templates offers a variety of amazing templates that give you a solid base to begin prototyping, while lending a professional look to your mockup sketches. Furthermore, they offer iPhone and iPad sketch templates as well as ones for Android, Web-based applications, and Windows 8 Phone.

You can check out my results:

I typically use highlighters to represent visually abstract information like gestures, actions or selected elements. Not only is this an easy and flexible way for me to sketch this information, it makes the flow of the app quite clear to the person looking at the sketch.

Sharing handmade mockups is insanely easy: just take a picture of it with your iPhone and upload it to Dropbox or send it by email!

There are some cons to handmade mockups not listed in this table – there’s no built-in way to save/backup sketches, no easy way to copy/paste elements between sketches, and other advantages that most electronic formats offer.

Prototyping Tools Comparison Table

I’ve given you as much information as I could on the prototyping tools reviewed in this article, but here’s a table that really sums up what the various prototyping tools have to offer:

So What’s The Verdict?

In my opinion, AppCooker offers the best value for the price. It offers advanced features while remaining intuitive and highly usable. AppTaster completes the AppCooker package as a highly useful and free viewer.

I find Blueprint really easy to use and portability of projects handled really well by Blueprint Viewer; its best characteristics are intuitiveness and immediacy.

Best FluidUI’s outstanding feature is its cross-platform capability that gives you a lot of flexibility and a rich widgets library. Creating prototypes with this tool is fast and easy.

If you have time to invest in learning how to use a new tool, Photoshop offers a feature-rich environment. Readily-available plugins and free PSD templates make your prototype work enjoyable and fun!

Finally, I still have a place in my heart for handmade sketches. They’re quick, cheap, and easy, and they prompt a lot of feedback as they showcase the app’s main features without hiding it behind the glitz and flash of fancy graphics.

However, always chose the approach that is best for you, and have fun mocking up some amazing apps!

To learn more on this topic, check out part two of this tutorial series.

If you have any questions or comments, feel free to join the discussion in the forums below!