Possible Duplicate:
How can animations be depicted in wireframes effectively?

Are there any standard tools for work between designers and developers, especially for designer to explain flow and animations (e.g. animation of components on ipad)?

  • 1
    Could you flesh out your question a bit? Specifically, you're basically asking about how a designer can show a developer the animations/transitions they want the developer to create for the final product? – Ben Brocka Apr 30 '12 at 21:14
  • 1
    Has the question "How can animations be depicted in wireframes effectively?" not provided you with an answer? – dnbrv Apr 30 '12 at 23:30

A couple of great tools to consider for generating mockups and prototypes are Balsamiq Mockups, Microsoft's Expression Sketchflow (video in the Expression link), and also it's possible to use Apple's Keynote or Microsoft's PowerPoint.

All are great for walking through the basic flow of an application, although Expression Sketchflow definitely is a more technical tool with a steeper learning curve. Although you should note that with Sketchflow if you're building a Microsoft app/product, there is potential for a developer to reuse more of your design work.

As for showing off animations, Mockups is more low-fidelity so it's not really suited for animations. With Sketchflow you can create animations, but once again note its got a higher learning curve. For your specific example of animation on iPad, I believe you can achieve some simple animations with keynote see this link on "How To Create Interactive iPad App Prototypes In 30 Minutes Using Keynote Or PowerPoint".

Edit: I should also mention that if you've got technical skills in HTML, JavaScript and CSS that you could definitely apply those here to demo off a more complex animation or transition. There are tons of helper libraries out on the web for doing animations in JavaScript.


There are a few wireframing tools, like Axure, that can handle animations. The other alternative is to produce a HTML mockup yourself, potentially hacking things together with image sprites (this is a common step for early user testing anyway). jQuery makes it quite straightforward to build common animations, and it's very well documented.

Another concept is to use static drawings, but outline motion in a step-by-step fashion. This works well if there's a small number of common, simple animations, but won't work if each user story requires its own variant, or if it's not clear what elements will be transformed in a particular instance.

Generally, though, the communications barrier between designers / BAs and developers is one that very few have conquered. I'm becoming increasingly convinced that one of the best ways to overcome it is for designers to try and build their designs themselves.

Not the answer you're looking for? Browse other questions tagged or ask your own question.