L’essentiel en bref
- Un bon motion design repose sur cinq principes : donner une intention à chaque mouvement, bien le chronométrer, l’adoucir avec un easing, l’ordonner par importance et en utiliser le moins possible.
- Les petits mouvements d’interface paraissent en général justes entre environ 150 et 300 millisecondes, alors que les grands déplacements et les entrées demandent plus de temps.
- Ce qui entre doit ralentir, ce qui sort doit accélérer, et les boucles continues doivent garder un rythme régulier.
- Quand plusieurs éléments bougent, le plus important doit bouger en premier, et un seul élément doit mener à la fois.
- Un petit système de mouvement, avec trois durées et deux ou trois courbes d’easing, garde le mouvement d’une marque cohérent sur chaque pièce.
Sur cette page
Les principes du motion design sont les règles empiriques qui rendent un mouvement naturel plutôt qu’aléatoire. L’animation de personnages classique a ses douze principes célèbres, exposés par les animateurs de Disney Frank Thomas et Ollie Johnston dans The Illusion of Life. Pour le travail de design, comme les posts, les sites, les logos et les présentations, cinq font presque tout : intention, durée, easing, hiérarchie et retenue. Vous pouvez les appliquer sans jamais ouvrir une application d’animation.
Intention : chaque mouvement doit avoir un rôle
Le mouvement est bruyant. Tout ce qui bouge attire l’œil : faire bouger quelque chose revient à affirmer que cela compte maintenant. Avant d’animer, nommez le rôle. Si vous n’y arrivez pas, laissez fixe.
Un mouvement qui a un rôle
- Attire l’œil vers la seule chose à lire d’abord
- Montre d’où quelque chose vient ou où il va
- Confirme une action : envoyé, enregistré, ajouté
- Installe une ambiance avec un fond lent
Un mouvement pour le plaisir
- Chaque élément qui rebondit à l’arrivée
- Un texte qui continue de bouger pendant qu’on le lit
- Logos qui tournent et boutons qui pulsent
- Des transitions qui font attendre
Durée : combien de temps un mouvement doit durer
La durée est le principe que la plupart des gens ratent, en général en étant trop lents sur les petites choses et trop rapides sur les grandes. Deux règles aident. Les mouvements petits et fréquents doivent être rapides, car on les voit tout le temps. Les mouvements qui vont plus loin ou changent davantage doivent durer plus longtemps, car l’œil a besoin de temps pour les suivre.
| Type de mouvement | Durée habituelle | Pourquoi |
|---|---|---|
| Retour d’un bouton ou d’un interrupteur | Environ 100 à 200 ms | Paraît instantané, tout en restant visible |
| Petits changements d’interface, menus | Environ 200 à 300 ms | Assez rapide pour ne retarder personne |
| Grands panneaux, changements de page | Environ 300 à 500 ms | Plus de distance demande plus de temps |
| Texte qui entre dans un post ou une vidéo | Environ 0,4 à 1 s | Assez long pour se lire comme une entrée |
| Dérive d’arrière-plan dans une boucle | Plusieurs secondes par cycle | De l’ambiance, pas de l’information : à peine perceptible |
Un test utile : si les gens remarquent l’animation elle-même plutôt que ce qu’elle montre, elle est trop lente ou trop grande. S’ils ratent complètement le changement, elle est trop rapide.
Easing : pourquoi rien ne doit bouger à vitesse constante
Les objets réels accélèrent et ralentissent. Un mouvement à vitesse constante, dit linéaire, paraît mécanique, car rien dans le monde ne bouge ainsi. Les courbes d’easing ajoutent accélération et décélération, et choisir la bonne est simple une fois qu’on connaît trois cas.
- Entrée : ease out. Arriver vite et se poser en douceur, comme une voiture qui se gare. La plupart des entrées utilisent cette courbe.
- Sortie : ease in. Partir doucement et filer. Les sorties peuvent aussi être plus courtes que les entrées.
- Déplacement dans le cadre : ease in et out. Démarrer et s’arrêter en douceur.
- Boucles et rotations : linéaire. Un mouvement continu doit garder un rythme régulier, sinon il semblera hésiter au raccord.
.panel-enter {
transition: transform 300ms cubic-bezier(0, 0, 0.2, 1); /* ease out */
}
.panel-leave {
transition: transform 200ms cubic-bezier(0.4, 0, 1, 1); /* ease in, and shorter */
}
.background-drift {
animation: drift 20s linear infinite; /* steady loop */
}Hiérarchie : faire bouger d’abord ce qui compte
Le mouvement crée un ordre de lecture, comme la taille et l’épaisseur dans un design fixe. Ce qui bouge en premier se lit en premier. Quand plusieurs éléments s’animent, échelonnez-les par ordre d’importance, avec un court intervalle d’environ 50 à 150 millisecondes entre chacun, et ne laissez qu’un seul élément mener à la fois. La hiérarchie visuelle traite la version fixe de la même idée.
Dans une version animée de cette story, le titre arrive en premier, puis la date, puis les détails. L’arrière-plan garde son propre rythme en dessous.
- 1
L’arrière-plan s’installe
Le champ bouge déjà lentement quand le post apparaît. Il installe l’ambiance sans demander à être lu.
- 2
Le titre entre
Une entrée claire, en ease out, en moins d’une seconde.
- 3
Les lignes d’appui suivent
L’étiquette et les détails arrivent juste après, dans l’ordre de lecture, avec un mouvement plus petit.
- 4
Tout se fige
Les mots s’arrêtent et restent immobiles assez longtemps pour être lus. Seul l’arrière-plan continue de bouger.
Retenue : moins de mouvement que vous ne le pensez
L’immobilité est ce qui donne un sens au mouvement. Si tout bouge, rien ne ressort et le design paraît anxieux. Choisissez un mouvement principal par pièce, gardez les distances courtes et laissez les mots immobiles une fois arrivés. La retenue concerne aussi les personnes : certains trouvent le mouvement inconfortable, voire nauséeux, donc chaque pièce doit fonctionner avec le mouvement désactivé. La réduction des animations explique comment s’y préparer.
Cohérence : un petit système de mouvement
Les marques gardent leurs couleurs et leurs polices cohérentes ; le mouvement mérite le même soin. Notez un tout petit système et réutilisez-le : trois durées, deux ou trois courbes d’easing et un mouvement maison pour les arrière-plans. Cela évite que chaque nouvelle pièce invente sa propre vitesse, et rend votre mouvement reconnaissable, comme le décrit le mouvement pour les marques fixes.
:root {
--motion-quick: 150ms;
--motion-base: 250ms;
--motion-slow: 400ms;
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
:root {
--motion-quick: 1ms;
--motion-base: 1ms;
--motion-slow: 1ms;
}
}Appliquez les mêmes principes quand vous animez un logo, un post ou la bannière d’un site. Les logos animés et les posts animés les montrent à l’œuvre.
Les questions qu’on nous pose
Quels sont les principes de base du motion design ?
Pour le travail de design, cinq couvrent la plupart des besoins : donner un rôle à chaque mouvement, choisir une durée raisonnable, utiliser l’easing, ordonner le mouvement par importance et en utiliser le moins possible.
Combien de temps doit durer une animation ?
Le retour d’interface fonctionne en général autour de 100 à 300 millisecondes, les mouvements plus grands autour de 300 à 500 millisecondes, et les entrées de texte dans les posts ou les vidéos autour d’une demi-seconde à une seconde.
Quel easing utiliser ?
Ease out pour ce qui entre, ease in pour ce qui sort, ease in et out pour ce qui se déplace dans le cadre, et linéaire pour les boucles continues.
Quels sont les 12 principes de l’animation ?
Ce sont des principes d’animation de personnages décrits par les animateurs de Disney Frank Thomas et Ollie Johnston dans The Illusion of Life. Le timing et l’easing, qu’ils appellent slow in et slow out, se transposent le plus directement au motion design.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
