Guide en 10 étapes pour réaliser votre projet de motion design

Si vous connaissez le motion design et After Effects, vous savez probablement à quel point la création d'une nouvelle animation peut être difficile. Un mauvais alignement peut entraîner de nombreux allers-retours et tout changement que vous apportez peut vous faire perdre des heures de travail et créer une énorme frustration dans votre processus de création...

Comme la plupart des entreprises axées sur les produits, nous devons souvent produire des animations pour présenter notre produit. Nous voulions donc partager notre processus pour que ce travail se déroule le plus facilement possible 👇

1. Mettez-vous en conformité avec un cahier des charges de conception clair dans Notion+Claap

Nous avons reçu des commentaires selon lesquels l'animation de notre page d'accueil n'était pas très claire car les gens ne comprenaient pas qu'il était possible d'enregistrer leur écran. Certaines personnes ont même pensé que nous étions une sorte de solution de conférence Web, nous avons donc dû résoudre ce problème !

J'ai reçu un ping sur Notion avec un bref brief contenant tout ce dont j'avais besoin. Tout a commencé par une courte vidéo de 4 minutes, puis quelques puces résumant étape par étape ce qui était attendu pour l'animation.

‍

2. Créez la 1ère version de votre storyboard d'animation dans Figma

Avant de me lancer et de créer toutes les simulations détaillées nécessaires au storyboard, j'ai créé un rapide wireframe en utilisant des éléments que je possédais déjà. Puis, en utilisant les commentaires de Figma pour recueillir des commentaires, j'ai pu rapidement savoir si j'allais dans la bonne direction avant de commencer le storyboard final.

‍

3. Recueillez des commentaires avec Claap

À partir des commentaires que j'ai recueillis à partir des maquettes, je suis ensuite entré dans les détails du storyboard et j'ai créé quelque chose de plus clair à présenter.

En plus de cela, j'ai fait quelques pré-visualisations de ce à quoi ressemblerait l'animation sur notre site Web afin d'avoir une meilleure idée de la façon dont elle apparaîtrait dans son contexte et de voir si le zonage et le placement correspondaient à toutes les pages.

Quand j'ai fini de travailler sur le storyboard, j'ai lancé mon extension Claap et j'ai commencé à enregistrer mon écran pour expliquer quelles étaient mes intentions pour chaque image, ainsi que les animations que j'allais réaliser dans After Effects. Il est important d'être clair et précis pour permettre à vos coéquipiers de vous donner plus facilement des commentaires exploitables.

‍

4. Mettre en œuvre des changements dans Figma

À partir du claap que j'ai partagé pour examen, j'ai reçu environ 4 commentaires soulignant certaines modifications à apporter au storyboard. L'une d'elles consistait à refaire le zonage principal et la mise en page de l'animation elle-même.

Obtenir ce type de feedback AVANT de commencer à créer l'animation est une bonne chose, car apporter ces modifications dans After Effects une fois que c'est terminé peut être un peu frustrant, croyez-moi. J'ai vu quelques Macbooks voler à travers la pièce...

Quoi qu'il en soit, rien ne prend trop de temps. J'ai donc apporté ces modifications, enregistré mon claap et l'ai partagé une fois de plus pour obtenir des commentaires.

‍

5. Validez le storyboard final avec Claap

Pour cette partie, j'étais assez confiante car je savais que toutes les modifications appropriées avaient été apportées et que tous les commentaires avaient été pris en compte.

Je n'ai eu qu'un commentaire : « Parfait ! merci beaucoup 🙏 » avec quelques petites modifications pour le texte et ainsi de suite.

Je n'aurais pas pu avoir de message plus clair que celui-ci, alors j'ai su que c'était bien de commencer à animer.

‍

6. Commencez à créer votre animation dans After Effects

Pour l'animation, j'utilise After Effects. Ce n'est pas le logiciel le plus facile à utiliser en général et je n'en connais probablement que 5 ou 10 %. Mais je sais comment m'y prendre et obtenir ce dont j'ai besoin. J'ai commencé à importer tous les éléments dont j'avais besoin pour l'animation, à organiser toutes mes ressources et à essayer de planifier à l'avance afin que mon processus ne soit que plus facile et moins frustrant.

‍

Validez le flux d'animation sur une 1ère version avec Claap

Après une longue journée de travail sur la première partie de l'animation, j'avais enfin quelque chose à enregistrer et à montrer en un clin d'OEIL afin de recueillir quelques commentaires éventuels.

Mais cette fois, j'ai reçu 2 commentaires... de bons commentaires 🤗

Finaliser l'animation dans After Effects

Après quelques commentaires enrichissants, il ne me restait plus qu'à passer à la deuxième partie de l'animation. Passez une autre journée à After Effects avant de disposer de la version complète de l'animation.

Tu te souviens tout à l'heure quand j'ai dit « C'est génial d'avoir ce genre de feedback AVANT de commencer à faire l'animation » ?Imaginez si je devais faire un grand changement et devoir refaire toutes ces images-clés, ces effets et bien plus encore sans avoir correctement validé le storyboard au début ?

(et ce n'est même pas la page complète des couches 😱) macbook volant

Mon Mac a eu de la chance ce jour-là. Nous avons eu quelques échanges sur Slack au cours desquels j'ai partagé un aperçu rapide de l'animation pour voir si l'équipe avait des commentaires avant de faire un rendu complet.

Téléchargez votre dernière version dans Claap pour validation (facultatif)

Après avoir obtenu l'approbation de tout le monde, il me suffisait de rendre et d'exporter l'animation. Une fois cela fait, j'ai simplement importé mon animation rendue dans mon espace de travail et je l'ai partagée pour la validation finale.

Montrez votre nouvelle animation de la page de destination

Et le voici !

10 étapes pour réaliser votre projet de motion design.

Je ne suis pas un motion designer et je ne suis pas très douée pour After Effects, mais c'est probablement la plus belle animation que j'ai réalisée jusqu'à présent. J'en suis vraiment fier.

‍