Government of Spain Dintel Standardized Design of Electronic Procedures Start First steps Foundations Components Modules Templates Tokens Support

Animations

The movement marks the behavior of system components, improving feedback and understanding, avoiding visual blindness to change, reducing visual load, and showing what will happen when you take an action or what you can do next.

Show Animations Token

Principles

Support

Facilitates the user’s experience by drawing their attention to the most important details at each moment

Simplicity

It adapts to the experience without creating distractions. The animation must convey the intention that is sought without appearing exaggerated

Rapidity

It is quick, so that the person does not have to wait longer than necessary.

Duration

Animations should feel fast to achieve a sense of instant response. The shorter durations will be for the smaller components and will progressively increase with their size.

Acceleration

Acceleration dictates the speed at which objects travel through space in the course of an animation. We will differentiate between those elements that appear, disappear or remain on the screen during its animation

Effects

The effects are the application of styles of duration and acceleration to specific cases to give life to the system.

Send an email to the Design System team at desarrollo.dintel@correo.gob.es , use our application Teams DINTEL.