What I’m looking for in a mobile app prototyping tool

Like most mobile app designers, I’ve been investing time and thought in how to best prototype animations for iOS. If you need to be convinced that animation should play a role in your app designs read Transitional Interfaces and watch this talk by Pasquale D'Silva.

Until now I’ve relied upon Photoshop documents, keyframe drawings and the occasional CSS3/Javascript prototype to communicate with the developers on our projects. I could use these tools – while pointing to the mockup containing several keyframe screens on my monitor – to ignite a collaborative conversation about how best to accomplish a particular custom transition. Really, it seemed that by leaving room for a developer to collaborate on the details of an animation that we could become a tighter team.

But recently I used Quartz Composer and Facebook’s Origami to create a custom animation for the navigation in a new Etsy iOS app. The Quicktime movie that I created and shared internally with the rest of the company helped unify the navigations across several different platforms.

Suddenly I could see the power of prototyping app animations. Not only did it help developers on different platforms unify the feeling of the transitions on their apps, but it also helped people working on different teams – say desktop web – more easily understand the time-based transition I was yapping on about. Once people could see the transition it was easier to focus resources and approve the time spent on the animation.

Great! I want more. I’ve begun looking around for the right tool for me. Here’s a short list of what the tool should accomplish:

I’m looking at the following prototyping tools:

Stay tuned!

 
39
Kudos
 
39
Kudos

Now read this

Adding an image on screen – Beginning iOS Programming (Post 3)

This post is part of a series on native iOS prototyping. So now taking custom views a step farther, let’s add a full-screen image to a new iOS project. Because I like to monkey around and get meta, I’ll be adding a full-screen image of... Continue →