Les principes en action
Concevoir un mouvement, c'est travailler avec la dimension temps. Comprendre le mécanisme donne un sens au mouvement.
Partager Les principes en action
Illustrations par Matija Medved
Sur les pages de marketing, les ressources sociales, les vidéos de marque et les présentations, c'est par le mouvement que les idées prennent vie. Ce dernier permet de concevoir un design au fil du temps, en utilisant le rythme, le son et le séquençage pour orienter l'attention et donner forme au sens.
Nous avons demandé à trois designers de Figma spécialisés dans l'animation (Chad Colby, Ben Hill et Gilles Desmadrille) d'expliquer les principes du mouvement, comment élargir les possibilités de narration et comment l'IA change leur métier.
Quelle est la plus grande différence entre le design graphique et le design d'animation ?
Dans le design graphique, tout est communiqué par l'intermédiaire de moments figés dans le temps. Le mouvement élimine cette contrainte, introduisant rythme, cadence, transformation et caractère. Les bases demeurent inchangées, avec la clarté et l'intention au cœur.
Nous pensons davantage en plusieurs frames. Au lieu d'essayer de condenser chaque élément du récit en une seule image, nous le décomposons – d'abord ceci, puis cela – pour qu'il soit plus facile à digérer.
Il s'agit vraiment de la façon dont cet élément de temps est utilisé dans le mouvement pour raconter un récit ou communiquer une idée. Comment utilisez-vous l'easing et le timing pour évoquer un sentiment ou communiquer ce que vous essayez de dire ? Il existe également une connexion profonde à la façon dont votre message se synchronise avec le son. Quand vous pensez à la musique, à la façon dont les rythmes sont structurés – tout est question de timing, tout comme le mouvement.
Je suis toujours admiratif de la façon dont le son et l'image s'assemblent pour créer quelque chose de plus grand que la somme de ses parties. Votre cerveau établit des connexions que vous n'auriez pas pu planifier. C'est assez fondamental dans ma façon d'aborder les choses : laisser certains aspects au hasard et être ouvert à ces heureux accidents.
Où trouvez-vous des références pour déterminer comment quelque chose doit se mouvoir ?
Je pense que l'essentiel est de comprendre la physique. Le mouvement est ancré dans la façon dont les choses se déplacent dans le monde réel. Imaginons que vous essayez d'animer ou de créer par prompt une balle rebondissante. Elle démarre très vite, rebondit, puis ralentit alors qu'elle se rapproche du sommet. Elle retombe ensuite, et chaque rebond est plus bas. Être capable de capturer ce ressenti est très important.
Si vous trouvez votre inspiration uniquement dans d'autres travaux de mouvement, vous risquez de reproduire les tendances prévisibles (les balles rebondissantes et les rectangles ont leurs limites). Si vous vous inspirez du mouvement dans la nature, des dispositifs narratifs et des astuces de montage du cinéma, ou même des formes gestuelles dans l'art et le design, vous vous distinguerez.
En définitive, les utilisateurs sauront quand un mouvement est « bon », même s'ils ne peuvent pas expliquer pourquoi. Le design est plus subjectif. La relation du mouvement avec le monde réel fait cette différence.
Si vous vous inspirez du mouvement dans la nature, des dispositifs narratifs et des astuces de montage du cinéma, ou même des formes gestuelles dans l'art et le design, vous vous distinguerez.
Mini glossaire du mouvement : principes fondamentaux
Accélération progressive/Décélération progressive : comment le mouvement accélère et décélère avec le temps
Anticipation : mouvement préparatoire qui annonce ce qui va se passer
Dépassement : action de dépasser légèrement la position finale avant de se stabiliser
Suivi : mouvement secondaire qui se poursuit après l'arrêt du mouvement principal
Maintien : pause qui donne à l'observateur le temps de comprendre ce qui vient de se passer
Stabilisation : mouvement final et subtil lorsque quelque chose se met au repos
Comment traduisez-vous ce que vous voyez dans le monde réel dans la sensation que le mouvement doit susciter ?
Je pense que l'élément clé est l'easing, c'est-à-dire ce qui décrit le timing et la façon dont les choses se mettent en place. Un autre élément clé est le raccord par similitude, où vous passez d'un plan à un autre mais connectez les deux plans par le même mouvement. Il se peut que vous passiez de lent à rapide, puis à lent de nouveau, puis que vous fassiez une coupe franche au point le plus rapide, et au final vous obtenez une transition parfaitement fluide. Les transitions font partie intégrante de notre façon de penser le mouvement. Elles sont essentielles pour connecter les différents moments d'une histoire et permettent de rendre le tout cohérent et uni. Par exemple, bon nombre de nos vidéos de lancement présentent plusieurs cas d'utilisation d'une fonctionnalité, mais elles doivent toujours donner l'impression d'une expérience continue. Nous utilisons donc des transitions et des coupes bien placées pour maintenir la dynamique et le rythme, l'observateur demeurant ainsi attentif du début à la fin.
Il est souvent question du rythme du mouvement et de la manière dont quelque chose communique – quelle est la courbe narrative ou quel est le moment clé de crescendo qui fait que cette chose a vraiment un impact ? Et l'on devient vraiment pointilleux jusqu'à se perdre dans les détails des courbes de keyframe, des fréquences de frame et des expressions (bouts de JavaScript) pour vraiment ajuster les mouvements au millimètre.
Lorsque nous présentons notre travail à un plus grand groupe, nous utilisons beaucoup d'effets sonores pour vendre l'idée sous-jacente au mouvement. J'ai participé à des appels où l'on se disait « Ceci bougera de gauche à droite », et cela ne faisait mouche que lorsque quelqu'un disait « Ça fera Whoop ! »
Où voyez-vous les plus grandes opportunités d'intégration plus complète du mouvement aux autres workflows de conception ?
L'idée que vous pouvez être sur le plan de travail, à travailler sur un design et à tester l'animation, à voir ce qui fonctionne et ce qui ne fonctionne pas en temps réel – c'est un grand changement. Auparavant, vous deviez passer entre différents outils et plateformes. Maintenant, tout peut avoir lieu sur le plan de travail multijoueur, ce qui permet aux utilisateurs d'avancer et d'improviser plus rapidement et élève le niveau de collaboration entre le design et le mouvement.
Le mouvement perce. Il explique ce que les mots ne peuvent pas expliquer, et les marques le savent – c'est pour cette raison que l'envie d'un mouvement de qualité ne cesse de croître. En même temps, le mouvement est très chronophage, et il est donc difficile pour les équipes travaillant dessus de suivre le rythme du design et d'itérer de la même manière. Mais travailler sur la conception et l'animation dans le même logiciel est vraiment enthousiasmant. Il sera intéressant de voir quelles portes s'ouvrent.
Ce qui m'enthousiasme, c'est le nombre de personnes qui vont découvrir ou adorer le mouvement et qui sinon ne l'auraient pas fait. Cela a été mon cas. Je n'ai jamais su que je voulais être designer de mouvement, mais j'ai touché à quelques outils et j'ai réalisé que c'était bien plus amusant que de travailler dans une seule frame.
Le mouvement a toujours été perçu comme magique, en partie parce que la majorité des designers ne se spécialisent pas dans le mouvement. Aujourd'hui, au lieu d'attendre l'intervention d'un designer de mouvement, davantage de personnes peuvent contribuer plus tôt et faire remonter les idées dans la hiérarchie plus rapidement.
Mini glossaire du mouvement : jargon de l'équipe
Vif : mouvement rapide et énergique
Onirique : mouvement plus doux et plus atmosphérique
Pataud : mouvement délibéré, moins élégant, comme manipulé physiquement
Plus nerveux : timing plus rapide et easing plus marqué nécessaires
Aérien : ancrage ou connexion faible avec la physique du monde réel
Trop linéaire : se déplace à une vitesse constante – paraît mécanique
Mort à l'arrivée : manque d'énergie, d'intention ou de clarté
Comment voyez-vous les choses évoluer avec l'IA ? Qu'est-ce qui vous enthousiasme ? Y a-t-il quelque chose qui vous inquiète ?
Dans After Effets, le mouvement impliquait souvent d'ajouter des expressions et des scripts pour contrôler les propriétés et construire des systèmes, donc c'était essentiellement du codage. Lorsque j'étais en formation, la plupart des animateurs ne savaient pas coder, et nous nous appuyions donc sur une feuille de calcul d'expressions que nous copiions et collions dans les projets. Aujourd'hui, la génération de mouvement par invite change la donne. Vous pouvez esquisser rapidement des idées (par exemple, quelque chose de lent, de rapide ou qui rebondit) tout en gérant également les aspects techniques. Une fois que quelque chose est défini et soutenu par du code, vous pouvez le réutiliser partout. C'est une ouverture énorme.
Beaucoup de gens feront des mouvements tape-à-l'œil pour le plaisir, tandis que d'autres utiliseront le mouvement plus judicieusement pour communiquer et orienter les utilisateurs. Le savoir-faire, le métier, l'intention et la retenue seront les facteurs de différenciation.
Avoir à la fois le contrôle du temps et de l'intention sera essentiel – comprendre que le temps est votre nouvel outil, un nouvel élément avec lequel vous pouvez concevoir. Si vous n'avez qu'un simple mouvement et n'évoquez ou ne dites rien, vous ne faites surtout qu'ajouter un filtre par-dessus un design.
Ce sera très facile de créer un bon mouvement, mais si vous ne comprenez pas les principes fondamentaux du mouvement, vous aurez du mal à créer un mouvement exceptionnel. C'est ce que l'on fait depuis longtemps. Certaines choses ont tenu 100 ans, et il y a une raison à cela. À mesure que la technologie progresse, il sera important d'observer ces principes fondamentaux. C'est ce qui maintient les choses humaines.
This article was featured in our annual print magazine, Start Anywhere. Explore the digital version, or purchase a copy.
