Motion design, the animation of digital content, has become an essential part of our modern interaction with computers. Wherever you look in modern applications, text boxes fly around, elements pop up and menus shrink as you scroll. UX designers have long recognized animations as an essential building block to increase usability and delight the user.
As a visual designer, I have been exploring this topic for several years now. In my personal experience, the transfer from design to development has proven to be critical. As it turned out, it is not so easy to translate the abstract idea of a movement in a designer’s head into an actual application. The form of transfer and type of specification heavily influence efficiency of implementation. An inefficient translation can be frustrating for both the developers and designers involved. How can this be avoided?
Different designers work differently in integrating motion design into their work. Besides the variety of tools (e.g. After Effects, Protio.io, Kite Composer, Framer, Flinto, Principle), the output can vary from loose scribbles to storyboards to frame-accurate animatics. In order to facilitate the communication between development and design despite all the variables, I present some guidelines and basic considerations for the efficient specification of animations in the UX process.