I came across a question on Quora about jQuery animations in wireframes, which got me thinking about the general conventions in depicting any animation in static wireframes. I've been using either call-outs or supplemental documentation to explain animated elements but those obviously don't do the justice.
Is there a better way or is it the inherited "feature" of abstractions?
Answer
Wireframes are a terrible place to try to describe animation. The closest you can get is something abstract like interactive sketching notation, but that requires the viewer of the wireframe to understand the notation style and it can only communicate very limited transitions.
Use a wireframe to outline the structure of a page. Treat it like a sketch, even if it's a high fidelity sketch made in eg. Axure or Balsamiq Mockups.
Use an interactive prototype (preferably created in the same environment the final product will be created in) to illustrate any kind of interactivity, be it the specific hover effect on a button or actual screen transitions and animations.
No comments:
Post a Comment