Last Friday I watched “Divergent” on TV and only 5 days later I was living the same experience!

(Spoiler: The rest of the post can contain parts of the plot, maybe the title is also a spoiler, sorry about that)

Not long ago I signed up for a UX meetup and this week there was a talk about animations. I have done several animations with JQuery in my career and it is very fun to do them, so I was very interested in a UX perspective.

Thanks to the talk, I learnt that an animation should have a purpose, it can help the user to understand better the content, it should be fluent and the message should be the same without animation (accessibility).

I also learnt about some tools to create animations: Codepen (CSS3), After effects, Framer.js or Origami. They are a good way for the designer to show what he/she has in his/her mind in case the designer also codes.

And in this point of the talk arose the big question: if a designer doesn’t use CSS or JQuery, how can the animation be transferred to the frontend developer? Maybe he/she doesn’t have aesthetic taste (this is what I heard there, it is not my opinion, but I went in disguise and they didn’t know I wasn’t one of them). The speaker said the best answer: communication.

I have worked with 2 designers that didn’t code the animations and I haven’t had any problem in coding what they want to achieve. Sometimes it is a very nice idea but unrealistic (the very speaker said that he is called “the one with the fantasies” by the developers), but you can come to an agreement and do something cool.

If you work in web development, you have to communicate with designers, backend developers, the salesperson or the team leader. Each role has a different idea of the final product, but though communication, the use of different tools and examples from the web, the same idea can be shared by the whole team.

And maybe we can learn from each other: the designer can explain to us how they transform a client idea in a design and we can help them to code to let them create their own animations.