The number of tools available for creating wireframes and animated prototypes has exploded. There are many different varieties of tools. This makes for choosing what will work best for you quite a challenge. While not an evaluation, this blog reviews the different types of design tools, including those for animation, so you can narrow which ones you want to consider.
I used to believe that a good wireframe was sufficient to provide to my development team when working on a new page within our web application. While wireframes are a great start, they often leave many questions unanswered. They do not show different states, such as hover, they do not show interaction, nor do they show animation.
Creating wireframes for web and mobile applications are valuable, especially when they allow you to test them with users to ensure that they provide a smooth user experience. Creating wireframes is inexpensive and change be changed rapidly.
But there are limits with wireframes. Then tend to be static and therefore are unable to show any user interaction. This leaves the evaluator (potential user) asking a lot of questions about how the app will really work and what the flow of the app is. It doesn't give enough of a complete experience to really validate the design with users.
Just giving wireframes to your software developer is also problematic. Without showing them design patterns for user interaction, they are left having to guess during coding. My experience is that you end up with a user interface that is about 80% baked.
There are tools to help show the app flow. InVision is a great web tool that allows you to stitch together wireframes to show interaction. Marvel is another relatively new tool that supports this. Both make it possible, without coding, to combine screen wireframes into a closer-to-finished mockup of what and how the application might work.
Animation has become the hot new thing to add to showing user flow. This is especially important to mobile apps where animation is a necessary component of successful mobile app solutions. Even responsive web apps, when used on a mobile device, need to consider adding appropriate animation.
Prototyping tools are now starting to add ways to show animation as well. This is still an area that needs a lot of improvement. The available tools today are either time-consuming, difficult to use or flat out too expensive. Some examples include:
Some help is coming. InVision has recently added the ability to add pseudo animation to wireframes and Sketch designs. While fairly simple, it has good promise. Other tools are moving in the same direction.
Some tools give you the ability to develop the design, interaction and animation in one tool. Some are, unfortunately, only focused on mobile apps, but still this is a good direction. Examples include
I haven't used all of these tools. Part of the problem is that there are too many of them!
For me, I'm still working on a good solution. I like using Sketch to create wireframes, but up until now I have been building my own prototypes using basic HTML, CSS (with the PureCSS framework) and some jQuery. I just discovered Velocity.js, which has a bunch of sweet animation capabilities. But again, you need to have some coding skills to use it.
Another approach is to use one of the advanced web builder tools that include animation features built in. This includes:
There are lots of options to create prototypes these days. Hopefully a few will rise to the top and solve all the needs of the user. For me, I'd like a Sketch plug-in that adds animation. I'm probably going to give InVision and Marvel a try to see which one I like better.
© 2008-2020 copyright mark calkins