This week I’ve spent a lot of time focusing on animating certain moments and interactions for my company’s website. I sketched lots of variations with arrows, moving lines this way and that, taking some of the better ideas into sketch for prototyping purposes. The idea of going beyond paper with animations is important because it gives me, the designer, the ability to think about timing, easing, and the flow of movement between states. But how much is too much for a designer to do in the animation space? This question kept coming up while working on all these various moments of delight. On one hand, I could pay for a powerful application like Adobe After Effects, Principle, Haiku, or Flow, developing my tool based skills to make an animation crystal clear, moving in exactly the way I want. Or I could use some free tools, get about 75% of the way there, then meet with my engineering team to clean up the last bits and pieces. So which direction has proven to be better?
When working in waterfall, getting things “buttoned-up,” or entirely designed, is important. You may not have direct access to your engineering team or they may only take components that are fully spec’ed out. It happens, and many designers work within this type of model. The big pro of this model is that everything has to be thought through. The designer should have time to test and understand what the user enjoys most, and have rationalized exactly what the design is doing in context of the whole system. Then, by the time the design is buttoned-up and ready to go, the designer really understands every use case, having gone through rounds of critique and iteration, fulfilling their design process. On the other, there are some big cons. Like I stated previously, precision takes software knowledge, and while it’s awesome to have mastered a tool like After Effects, there is a huge learning curve. Even if you go with something a bit more straightforward, like Principle, it can still take a couple of days to get up and running. But the bigger issue is the transition between buttoned-up animated prototypes and engineers ability to implement WYSIWYG. For those that don’t know, WYSIWYG is “What You See Is What You Get.” I mention this because a designer can set all parameters, perfecting their animation, but when handed off to engineering, some aspects will still won’t be implemented exactly the way you planned. So you’ll have to sit down with your engineer and tweak things on the fly to make it as close as it can be to how you designed it.
Which leads me to the final point. If you are going to sit down with your engineering partner no matter what percent of the prototype is designed, in order to get the animation looking the way you want, why not do it earlier when the design isn’t entirely spec’ed out? Meeting earlier minimizes doing double the work and the frustrating experience of changing the design last minute. In fact, it has been my experience that not having the animation fully designed has created the greatest amount of creative output. It allows for a conversation to occur where engineering has a stake in the final design and the final parameters are set in the code, so there is no last transition that needs to occur. And if the buttoned-up animation isn’t needed, why spend the time learning a complicated programs that will be outdated in a year, when you have lots of other impactful projects to work on. Don’t get me wrong, there is a certain level of fidelity that is needed to explain your design to various stakeholders and go through the critique process. Therefore, in my humble opinion, a prototype that gets the point across is good enough, at least for now.
