Grâce à l’apparition constante de nouveaux outils digitaux et la multiplication des interfaces auxquelles nous pouvons faire face chaque jours, le motion design prends de plus en plus de place dans les options disponibles chez les créatifs pour transmettre un message. Quand un designer pense au motion design, plusieurs programme. Comme After Effects, Edge Animate ou encore les langages de code comme le HTML5, CSS3 et jQuery peuvent venir à l’esprit. Mais la maîtrise des outils ne garantit pas forcément un produit final de qualité. Comprendre ce qui va forger la création et les raisons pour lesquelles les événements se produisent sont les clés pour la production d’une animation qui aura du sens. Le sens du mouvement existait bien avant que les développeurs possèdent des outils aussi avancés qu’aujourd’hui et cela continuera à exister même lorsque les outils évolueront. Un sens qui donnera petit à petit lieu à des principes liés au motion design.
Ce sens du mouvement à été notamment développé par les animateurs de Disney Ollie Johnston et Frank Thomas. Deux des animateurs faisant partie du groupe de ceux que Walt Disney appelait les « neuf sages ». Peu importe le style d’animation, qu’il soit en 3d ou totalement expérimental, les 12 principes se retrouvent dans la majorité des animations basées sur le mouvement.
Bien qu’il y’ait une différence clairement définie entre un personnage humain et le motion design, les 12 principes s’appliquent malgré tout à tous ces procédés. Le designer et animateur Cento Lodigiani décrit les 12 principes de base de l’animation à travers une courte série de vidéos en utilisant un simple cube. Cet objet est une parfaite analogie pour démontrer comment ces principes peuvent s’appliquer au motion design.
Voici donc une représentation quelques-uns de ces 12 principes. Bien que certains concepts soient très proches les uns des autres, il sont malgré tout parallèles les uns aux autres.
L’écrasement et l’étirement
L’ajout d’une exagération au mouvement d’un objet permet de lui donner un poids et un volume plus quantifiables. Ce principe est souvent démontré à l’aide d’un ballon rebondissant. Le ballon va apparaître étiré en tombant et écrasé en touchant le sol. En étirant et écrasant le ballon, l’animateur va lui donner un aspect plus réaliste.
Cet exemple en motion design, « what it takes to be original », utilise cette technique plusieurs fois, notamment dès la 2ème seconde avec le rectangle en mouvement.
La mise en scène:
Influencée par les principes du théâtre, la mise en scène permets d’établir une humeur, de mettre un objet en valeur et de clarifier ce qui se passe sur la scène.
Cet exemple est une excellente façon de montrer l’importance de la mise en scène dans le motion design. Il n’y a pas de détails inutiles dans l’arrière plan qui viendraient surcharger la vidéo. Ce qui aide à rester concentré sur le centre de l’image malgré le fait que la scène soit constamment en mouvement.
Slow in and slow out
Dans le monde réel, les objets ont besoin de prendre de l’élan avant d’atteindre leur pleine vitesse. De la même façon, cela prends du temps avant qu’un objet lancé arrive à son arrêt complet.
Dans le motion design de l’ouverture de TEDxTianhe, l’effet slow in and slow out peut être vu dans le cercle (00:02-00:04) se déplaçant dans l’oval et qui va tomber. Cet effet peut également apparaître dans dans des objets imparfaits comme le cube (00:16-00:20). Cet effet visuel permet d’ancrer le mouvement dans la réalité.
Trajectoire arquée
Tous les objets lancés en l’air et les personnages qui sautent ont une trajectoire arquée, et reproduire correctement cette trajectoire arquée améliore le réalisme des mouvements. Il peut s’agir d’une parabole, avec un mouvement dans lequel l’objet va monter puis redescendre. Tout en avançant ou d’arcs de cercles pour les éléments en rotation.
Action secondaire
Dans la vie de tous les jours, la première chose qui va nous sauter aux yeux face à un objet en mouvement va être son mouvement principal. Comme ça peut être le cas avec une personne qui marche ou bien un oiseau qui vole. La présence d’un mouvement secondaire, par exemple le balancement des bras lors de la marche ou bien le mouvement des plumes de l’oiseau vont aider le spectateur à soutenir le mouvement principal. Cependant, il faut se méfier d’une action secondaire trop visible car elle pourrait détourner l’attention de l’action principale. Ce qui n’est pas le but.
Dans cette animation, les formes des lettres se dessinent de façon esthétique sur l’arrière plan. Une fois leur animation terminée, certaines sont soutenues par un mouvement secondaire. Comme les flammes autour de la lettre B (00:07-00:10) ou encore les petits insectes sur le C (00:14-00:17)
Le dessin en volume
Le dessin en volume apporte à l’animation un réalisme accru. Ajouter une forme et un effet 3D vont faciliter la reconnaissance des objets au spectateur. Peu importe de quelle manière le dessin est créé, que ce soit de manière informatique ou de façon manuelle, il doit pouvoir être placé dans un environnement 3D
Le générique de la série Mad Men montre la silhouette d’un homme en mouvement, courant puis tombant d’un bâtiment. Dans chaque position, le personnage à un volume visible et une forme réaliste dans un environnement en 3 dimensions. Même lorsque l’environnement change autour de lui.
L’attractivité
Un personnage, ou même un arrière plan n’ont pas nécessairement besoin d’être beaux. Ils peuvent même être laids et pourtant dégager un intérêt pour le spectateur et ainsi faire sens dans l’histoire. En motion design, l’attractivité peut être mise en place grâce à une mise en scène ou même une juxtaposition d’images avant même que l’on y importe du mouvement.
Dans le générique d’ouverture de la série True Detective, malgré le peu de mouvement, l’oeil du spectateur est attiré dans la composition. Grâce à une mise en scène intéressante causée par la superposition de personnages et de lieux. Comme dit précédemment, ces lieux ne donnent pas particulièrement envie de s’y rendre afin d’y passer ses vacances mais ils arrivent pourtant à dégager un véritable intérêt visuel.
Nous vous avons expliqué 7 de ces 12 principes de base de l’animation en motion design. Il existe également l’anticipation, l’exagération, la cohérence physique et théâtrale, l’action partie par partie ainsi que le timing. Cependant, les exemples donnés dans cet article devraient d’ores et déjà vous permettre de mieux comprendre ce que vous voyez. Et de surtout être capables de répondre à la question « pourquoi est-ce que ça rend si bien/mal ». Pour tout savoir sur les tarifs des vidéos motions design, faites une demande en ligne depuis notre outil.
