Renate Schinköthe
Published on under User Experience

Animations – Sketching, After Effects or CoreAnimator?

Animations have long been an important tool to improve the user experience of digital products. My daily work is enormously enriched by the integration of animations into my concepts and designs. Whether it is an animation with small monsters for a children’s Video on Demand (VoD) app or a focused walkthrough in a TV UI. It’s simply fun. 🙂 

 

Both videos were created with a different purpose. On the one hand, to be able to convey the animation better to the customer and, on the other hand, to “specify” the animation to the development team.

Again and again, we are confronted with the problem that animations drafted for the purpose of illustration can often not be finalized by the development team without incurring high costs. We currently use the following three tools to accomplish specific purposes in a particular project phase:

 

Animation Sketching

The easiest way to visualize animations is to draw them. Particularly during the early phases of a project, it is a good idea to quickly record, and then discuss, the initial ideas. Animation sketching flows nicely into wireframing because when you create wireframes you think about whether, and how, animations can be optimally used.

When drawing the initial and final state of a UI, objects that must change, or move, become apparent. The end result resembles a storyboard. Changes in each sequence are recorded in writing.

 

sketch for coeno ui storyboard

Animation Sketching for the coeno UI: For each view, the focus animation was defined and elements that change during animation were identified

 

As the project progresses further, the more difficult it becomes to stick to drawings. The concept continues to evolve, but the visual design becomes more mature. From now on, what is interesting is what the animation really feels like. Unfortunately, this cannot be conveyed by a storyboard.

 

AfterEffects

One of the most famous and powerful animation tools is After Effects. Designed to create complex title animations and special effects for movies, After Effects has been used in recent years to visualize motion graphics and animations. Even on Dribble, there are many After Effects videos on the topic of UI animation.

But simply creating an animation is only possible if one is familiar with the tool. The interface is complex and the training time is long. The great advantage, however, is that all imaginable features can be influenced and controlled in detail within an animation. From animation paths to exact easing, each frame can be defined individually. It is possible to import ready-made designs from Photoshop and to work directly with the layers. However, it does not always have to be a finished design. A page transition can also be shown by means of animated surfaces.

In addition to the significant effort required for animation creation, there is also the problem of documenting the animation for the development team. After Effects “only” provides the ability to export videos. Based on a video alone, it is not clear how to implement the animation. Therefore, the animation parameters and their changes must be documented separately. However, it is unclear whether the animation is feasible.


This short video shows the behavior of an input field when an error occurs. What seems to be quite straightforward in the video must be described by the description of 7 different parameters, which all change during the animation.

 

Nevertheless, After Effects has found its place in our workflow – especially when it is important to develop a feeling for the animation and its effect, or to illustrate the animation itself.

 

CoreAnimator

With comparatively little effort, it is possible to use CoreAnimator to create animations, which can also be used directly by the development team. A major advantage of the tool is the Swift or Object-C code export. This also ensures that animations can be created that can be implemented without significant investment of time and money. The final 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 that shows the beginning and ending states of an object. CoreAnimator then fills in the tweening. Anyone who has ever worked with After Effects, Flash or Principle can quickly become familiar with the interface. Easing and timing can be edited via the timeline.

There is, however, a small drop of bitterness:

Unfortunately, you cannot add sound. As soon as sound is included with an animation, the overall effect cannot be judged.

Interface CoreAnimator

CoreAnimator Interface: In the Timeline, element-specific scaling, size, position, etc. can be changed.

 

What now?

In conclusion, it can be said, once again, that the use of the tool and the method is dependent on project participants and project status. Personal preferences also play an important role. When a tool is mastered perfectly, you tend to keep using it, especially when the job has to be done fast. Nevertheless, it is important to keep your eyes open for new, small everyday helpers. Currently I am trying to get to Principle …

 

Ski Jump by Dimiter Petrov from the Noun Project

This Post has been published in User Experience.
More articles from Renate Schinköthe

Leave a reply

Your email address will not be published. Required fields are marked *