Motion Design

How to Present Animations and Interactions

to Developers

Nowadays, a static app UI design is not

enough. The Motion Design is no longer
future of the UX Design. It is an essential
element of digital product creation. If you
are designing animations and interactions
you should know how to prepare Motion
Design Specification for Front-end
Developers.

Motion is an element of the UX Design that

brings digital products to life. However,
vthe animation of the UI should not be an
artistic expression. You have to think of it as
of a part of the UX Design that helps users
to understand the solution.

The main purpose of the motion is to show

what will happen and guide users eye into
the actions destination. It also highlights
relationships between elements. Whats
more, animation should hide what is
happening in the background and finally
delight users.

The most popular one Adobe After

Effects gives only ability to create a movie
with a sequence of simulated interactions.
Adobe software is used often in the
community, but we have to remember that
it was never the main purpose of After
Effects to create the animation of the app.
This software is a rich and comprehensive
tool for the more artistic animations.
There are apps that are crafted specially to
create animated prototypes.
The first worth to mention is Facebook
Origami Studio. This tool gives an
opportunity to create a highly animated
prototype that successfully simulates app.

Flinto is the next impressive tool. It has a

possibility to create interactive prototypes
with animated transitions, behaviors,
gestures and scrolling.

One of the most simple to use tools for

macOS is Principle. It is created to build
prototypes with rich animations and
interactions within a minutes. One of the
advantages of Principle is extremely clear
animation sequence management in a
timeline.

The newest one in the market is the Kite

Compositor. This is a powerful animation
and prototyping tool. If you would like to
create Motion Design mainly for macOS
and iOS it is an interesting option.
All of these tools give you a possibility to
create an animated video or a prototype
and then present it to the developers and
stakeholders.

When the stakeholder will decide to accept

the motion design from the movie or the
prototype. It will be the time to start its
implementation. However, developer will
not be able to implement the motion
precisely only with mentioned
deliverables.

Receiving an artistic vision in a movie or a

prototype is not enough. Developer needs
to receive precise data of the desired
animation behavior.

Implementing an animation in iOS or

Android requires providing series of data
like the duration, easing, transformation
type, initial state and final state of the
object. Every developer perceives
implementation of Motion Design in these
terms.

Filling the gap in the communication

between the Designer and Developer is
often a challenging subject. It is necessary
to translate the visualization into
parameters that will allow the
implementation.

Lets try to improve a bit the specs

mentioned by professionals from
Mountain View. First, focus on the main
requirements and assumptions for the
Motion Design specification.

1. Time is the foundation

Every animation and interaction take time.
For the developers of Android or iOS, it is
ideal to present timing in milliseconds (1
second is 1000 ms). As a designer always
prepare specs in this units.
Very often the whole motion is a
composition of many objects and types of
animation. The good specs should include
delays between each sequence.

Google recommends that a whole duration

of the motion should be about 300ms.
Transitions that exceed 400ms may feel
slow.

2. Easing adds life to motion

The linear velocity of the transition often
feels not natural. To bring more reality it is
necessary to apply some easing curves to
the motion.

The animation may accelerate, decelerate

or do both depending on a transition
phase. This way motion will feel much
more natural than mechanical.

iOS and Android provide several

predefined easing curves that will help
developers implement the requested
animation faster. Off course every easing is,
in the end, a mathematical equation called
polynomial. Front-end developer should
be able to create all types of the easing
curve in code.

Easing curve used for the animation of the

particular element is the must have
information in the specs.

3. Type of transformation reveals possibilities

To create good motion it is necessary to be
conscious of the types of affine
transformations available in the UI motion:

Translation
changing view position in X or Y axis

Scaling
changing the scale of objects width, height or both

Rotation
rotating object around X, Y or even Z axis
There is also a possibility to change opacity
(alpha property) and color of an object.

The combination of these types may give

outstanding results. Your specification has
to include a description of the
transformation type.

4. Transformation parameters ensures

constraints
Every animation will be useless if we will
not provide exact values that will inform an
app about the scale of the motion.

It is good to provide values in points for

translation (pt for iOS and dp for Android),
in the percentage value (for example for
scaling or opacity) and in the degrees or
radians (rotation).

Always consult with your team which types

of values will be useful for them.
5. Animated object is a must
Finally your specs should include a short
information about an element which is
interacting in a particular moment

If we would like to see more beautifully

animated User Interfaces every animation
or animated interaction created by
Designer should include specs for
Developers.