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

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 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 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é.

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. 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.

: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; }
}

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 explique comment.

Le mouvement à travers les supports d’une marque

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é passe en revue les principales approches.

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.

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 expliquent comment construire la couleur autour de lui.