Animations have long been an important tool for improving the user experience of digital products. The integration of animations into concept and design enriches my daily work enormously. Whether it's an animation with little monsters for a VoD app for kids or a focus walk in a TV UI. It's simply fun 🙂
Both videos were created with a different intention. On the one hand, to better communicate the animation to customers and on the other hand to specify the animation for the developers.
Again and again we are confronted with the problem that animations that were created for illustration cannot be prepared for development without a lot of additional effort. We currently use the following three "tools" to fulfill a specific purpose in a certain project phase:
Animation Sketching
Probably the easiest way to visualize animations is drawing. It is especially useful in early project phases to quickly capture and discuss initial ideas. Animation sketching can be combined very well with wireframing, because you can think about whether and how animation can be used in a meaningful way while creating the wireframes.
When sketching the initial and final state of a UI, objects that need to change or move become obvious. The result is similar to a storyboard at the end. In written form it is recorded per sequence, what changes and how.
The further the project progresses, the more difficult it becomes to stick to drawings. The concept develops further, but especially the visual design becomes more and more mature. From now on it is interesting to see how the animation really feels. Unfortunately, a storyboard cannot do this.
AfterEffects
One of the best known and most powerful animation tools is AfterEffects. Designed to create complex title animations and special effects for movies, AfterEffects has been used in recent years to visualize motion graphics and animations. Many AfterEffects videos on the subject of UI animation can be found on Dribbble alone.
But to create an animation is only possible if you are familiar with the tool. The interface is complex and the training period is long. The big advantage of this professional tool: All imaginable properties of an animation can be influenced and controlled in detail. From animation paths to exact easing, each frame can be defined individually. It is also possible to import final designs from Photoshop and work directly with the layers. However, it does not always have to be a finished design. Animated surfaces can also be used to show a page transition.
Another problem: besides the high effort for the animation creation, it must be documented for the development. AfterEffects only allows the export of videos. But only on the basis of a video, the implementation can not recognize how an animation runs. Therefore, the animation parameters and their changes must be documented separately. This does not answer the question of whether the animation can be implemented.
This short video shows the behaviour of an input field in case of wrong input. What looks quite short and simple in the video has to be explained by describing 7 different parameters, which all change during the animation.
Nevertheless, AfterEffects has found its place in our workflow - especially when it comes to developing a feeling for the animation and its effects or to illustrating the animation itself.
CoreAnimator
With comparatively little effort, CoreAnimator can be used to create animations that can later be used directly by the development team. A main advantage of the tool is the Swift or Object-C code export. This feature ensures that the created animations can be implemented without much additional time and financial effort. The finished animation can be presented to the customer and the development team can work directly with the code.
CoreAnimator is a classic pose-to-pose animation tool, where you specify a start and an end state of an object. CoreAnimator then takes over the tweening. Anyone who has ever worked with AfterEffects, Flash or Principle will quickly become familiar with the interface. Easing and timing can be edited via the timeline.
However, there is a small drop of bitterness:
Unfortunately you cannot add sound. Once an animation is combined with sound, the overall effect cannot be judged.
What next?
The bottom line is the old adage: The use of tools and methods depends on the project participants and the project status. Personal preferences also play an important role. If you have perfect mastery of a tool, you will always fall back on it - especially when things have to be done quickly. But technological development does not stand still. We should therefore remain open to new, small everyday helpers and try them out. Currently I'm trying out Principle ...
.jpeg)
.jpg)
