# Motion branding : comment une marque bouge, pas seulement son allure

[Canonical HTML page](https://gradiently.design/fr/guide/motion-branding-guide)

Deux marques peuvent partager une police et une couleur et ne plus se ressembler du tout dès qu’elles bougent. Le mouvement est la part de l’identité que la plupart des marques laissent au hasard.

## The short version

- Le motion branding est l’ensemble des règles qui définissent comment bougent le logo, la typographie, les fonds et l’interface d’une marque.
- Les décisions essentielles portent sur le rythme, l’accélération, la direction et les éléments qui ont le droit de bouger.
- Le mouvement d’une marque doit correspondre à son caractère : les marques calmes bougent lentement avec des accélérations douces, les marques énergiques plus vite et avec plus de rebond.
- Les règles de mouvement sont plus utiles écrites sous forme de quelques durées et courbes d’accélération nommées, partagées par designers et développeurs.
- Un bon motion branding prévoit toujours une version à mouvement réduit pour les personnes qui demandent moins d’animation à leurs appareils.

Le **motion branding** est la partie d’une identité qui décrit comment la marque bouge : à quelle vitesse les choses arrivent, comment elles accélèrent et ralentissent, dans quelle direction elles se déplacent et ce qui a le droit de bouger. Un logo qui se met en place d’un coup sec ne dit pas la même chose qu’un logo qui arrive en douceur. Écrit sous forme de quelques règles, le mouvement donne à chaque vidéo, story, site web et application l’air de la même marque, même quand les couleurs et les mises en page changent.

## Pourquoi le mouvement fait partie de l’identité de marque

La plupart des chartes graphiques s’arrêtent au logo, à la couleur et à la typographie, parce qu’elles ont été écrites pour l’imprimé. Aujourd’hui, on rencontre souvent une marque en mouvement : dans un Reel, une story animée, un en-tête de site, une interface produit. Si personne ne décide comment ces éléments bougent, chaque designer et chaque outil décide à leur place, et la marque se met à se comporter comme plusieurs entreprises différentes.

Même une marque essentiellement statique y gagne. Une seule règle, comme « les mots arrivent en montant doucement, jamais en tournant », évite beaucoup de travail hors charte avant même qu’il commence. Si votre marque n’a encore jamais bougé, [le motion design pour les marques](https://gradiently.design/fr/guide/motion-for-still-brands) est un point de départ en douceur.

## Les quatre décisions du motion branding

1. **Le rythme.** Combien de temps prennent les choses. Des durées courtes paraissent efficaces et vives ; des durées longues paraissent calmes, réfléchies ou luxueuses.
2. **L’accélération.** Comment le mouvement accélère et ralentit. Une décélération douce paraît naturelle ; un léger rebond paraît ludique ; le linéaire paraît mécanique. Voyez [l’easing](https://gradiently.design/fr/guide/easing) pour les courbes.
3. **La direction et le comportement.** Les éléments montent-ils, glissent-ils, grandissent-ils, s’estompent-ils ou se dévoilent-ils ? Choisissez deux ou trois comportements et utilisez-les avec constance.
4. **Ce qui bouge.** Décidez quels éléments peuvent bouger : le fond, les mots, le logo, les photos. La retenue fait ici toute la différence entre haut de gamme et surchargé.

| Caractère | Rythme | Accélération | Comportement type |
| --- | --- | --- | --- |
| Calme, haut de gamme | Lent, 400 à 700 ms | Décélération douce | Fondus, montées lentes, couleur qui dérive |
| Assuré, éditorial | Moyen, 250 à 400 ms | Décélération franche | Volets, glissements nets, coupes sur le temps |
| Ludique, chaleureux | Rapide, 200 à 350 ms | Décélération avec rebond | Apparitions, rebonds, zooms d’entrée |
| Technique, précis | Rapide, 150 à 250 ms | Accélération et décélération franches | Glissements droits, texte machine à écrire |

Des points de départ pour le mouvement de l’interface et du texte. Le mouvement des fonds et d’ambiance est bien plus lent et se mesure en secondes.

Les idées de fond, comme le timing, la hiérarchie et le mouvement de suite, sont traitées dans [les principes du motion design](https://gradiently.design/fr/guide/motion-design-principles). Le motion branding consiste à choisir parmi elles et à s’y tenir.

## Écrire des règles de mouvement partagées par designers et développeurs

Les chartes de mouvement échouent quand elles sont écrites avec des adjectifs. « Fluide et assuré » ne veut pas dire la même chose pour tout le monde. Nommez quelques durées et quelques courbes d’accélération, donnez-les aux designers et aux développeurs avec les mêmes mots, et la marque bougera de la même façon dans un logiciel de montage et dans le code.

```css
:root {
  /* Pace */
  --motion-quick: 180ms;
  --motion-base: 320ms;
  --motion-calm: 600ms;
  --motion-ambient: 12s;

  /* Easing */
  --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);   /* soft ease out */
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);    /* ease in out */
  --ease-leave: cubic-bezier(0.7, 0, 0.84, 0);    /* ease in */
}

.headline-enter {
  animation: rise var(--motion-base) var(--ease-arrive) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .headline-enter { animation: none; }
}
```

Le mouvement d’une marque sous forme de tokens. Trois durées, un rythme d’ambiance et trois courbes nommées couvrent presque tout.

Notez la dernière règle. Certaines personnes sont distraites ou incommodées par le mouvement et demandent à leur appareil d’en réduire la quantité. Une identité animée complète définit ce qui se passe alors, en général un simple fondu ou aucun mouvement. [Prefers reduced motion](https://gradiently.design/fr/guide/reduced-motion) explique comment.

## Le mouvement à travers les supports d’une marque

| Support | Ce qu’il faut définir | Exemple de règle |
| --- | --- | --- |
| Logo | Son entrée, son état de repos, sa durée d’affichage | Se dessine en 800 ms, reste immobile, ne boucle jamais |
| Typographie | Un ou deux styles d’entrée | Les titres montent ; les lignes secondaires apparaissent un temps plus tard |
| Fonds | Vitesse, direction, boucle ou non | La couleur dérive lentement et boucle toutes les 12 secondes |
| Transitions | Comment une scène ou une page en remplace une autre | Volet dans le sens de lecture, jamais de rotation |
| Interface | Survol, appui, ouverture et fermeture | Les panneaux s’ouvrent avec la durée de base, se ferment plus vite |

Une ligne par support suffit. Si une règle demande un paragraphe pour être expliquée, elle est sans doute trop compliquée.

Le logo reçoit en général le plus d’attention et apparaît le moins souvent. Les fonds et la typographie sont bien plus présents à l’écran, et c’est là que la constance paie. Pour le logo lui-même, [le logo animé](https://gradiently.design/fr/guide/animated-logo) passe en revue les principales approches.

Design portrait avec un titre éditorial sur le fait de prendre son temps, sur un dégradé qui dérive doucement

Une marque calme : des durées longues, une couleur qui dérive, des mots qui apparaissent en fondu et restent.

Design portrait de lancement produit affichant C’est arrivé avec une couleur vive et une mise en page audacieuse

Une marque ludique : un rythme plus rapide, des mots qui surgissent avec rebond, un mouvement plus vif dans le fond.

## Des fonds qui bougent comme votre marque

Le mouvement le plus visible dans la plupart des contenus de marque, c’est le fond : la couleur qui bouge derrière une story, un Reel ou un en-tête. C’est aussi le mouvement que les marques empruntent le plus souvent aux banques d’images, ce qui signifie qu’il n’appartient à personne. Un fond dont les couleurs, la lumière, le grain et le mouvement sont entièrement à vous fait plus pour la reconnaissance qu’une animation de logo élaborée vue une seule fois.

Un champ de couleur de marque: `radial-gradient(110% 80% at 70% 30%, #a7f3d0 0%, #10b981 35%, #065f46 70%, #022c22 100%)`

Un fond comme celui-ci, qui bouge lentement et toujours de la même façon, devient aussi reconnaissable qu’un logo.

C’est ainsi que fonctionnent les Marks dans Gradiently. Un Mark est une recette de couleurs, de matières, de lumière, de grain, de mouvement et de voix typographique : son mouvement fait partie de son identité plutôt que d’être un effet ajouté. Chaque design qui le porte, d’une story à une slide, bouge de la même façon, et comme chaque Mark est unique et n’a qu’un propriétaire, aucun autre contenu ne bouge tout à fait comme le vôtre. [Les systèmes de dégradés de marque](https://gradiently.design/fr/guide/brand-gradient-system) expliquent comment construire la couleur autour de lui.

### Mouvement hors charte

- Chaque designer choisit ses propres transitions
- Tous les éléments s’animent en même temps
- Des fonds animés de banque d’images
- Une charte écrite uniquement avec des adjectifs
- Aucun plan pour le mouvement réduit

### Motion branding

- Deux ou trois comportements nommés, utilisés partout
- Un seul élément bouge à la fois, dans l’ordre
- Un fond qui appartient à la marque
- Des durées et des courbes nommées dans des tokens partagés
- Une solution de repli définie : image fixe ou fondu

## FAQ

### Qu’est-ce que le motion branding ?

Le motion branding est l’ensemble des règles qui définissent comment une marque bouge : son rythme, ses accélérations, sa direction et les éléments qui ont le droit de bouger. Il donne aux vidéos, posts sociaux, sites web et applications l’air d’une seule et même marque.

### Que doit contenir une charte de mouvement de marque ?

Quelques durées nommées, quelques courbes d’accélération, deux ou trois comportements d’entrée, des règles pour le logo, la typographie, les fonds et les transitions, et ce qui se passe quand quelqu’un préfère un mouvement réduit.

### À quelle vitesse doivent aller les animations d’une marque ?

Le mouvement de l’interface et du texte se situe en général entre 150 et 700 millisecondes environ, plus vite pour les marques énergiques et plus lentement pour les marques calmes. Le mouvement des fonds est bien plus lent et se mesure en secondes.

### Une petite marque a-t-elle besoin d’un motion branding ?

Une version courte aide toute marque qui publie des vidéos ou des stories. Même une seule règle sur l’entrée des mots et un seul fond animé gardent les contenus cohérents.