Motion

A touch of motion can spark an animated reaction. These guidelines will show you how to engage your audience through purposeful movement.

Leonis motion design values

Animations add vibrancy to interfaces and enhance user experiences.

Engaging

Keep the viewer interested without distracting them

Purposeful

Tell a story and lead the viewer through it

Clear

Present complex ideas in ways that are easily understood

Delightful

Imbue animation with a spirit of playfulness

Effectiveness of animations

We assess an animation's effectiveness based on the following two aspects.

Justified

Is the animation necessary? Does it help users understand the information? Effective animations should add value and avoid redundancy.

Performant

Is the animation smooth and free from frame loss or lag? Effective animations should maintain fluidity and not compromise the product's performance.

Animation principles

Unlike animations in typical front-office applications, those in enterprise-level systems focus heavily on enhancing user interactions and their effectiveness. Drawing from Leonis's core design language, we’ve established three key animation design principles:

natural
Performant
Concise