Si vous êtes familier du motion design et d'After Effects, vous savez probablement à quel point créer une nouvelle animation peut être difficile. Un mauvais alignement peut entraîner beaucoup d'allers-retours et le moindre changement peut vous faire perdre des heures de travail, et générer une frustration massive dans votre process créatif.
Comme la plupart des entreprises product-led, on doit souvent produire des animations pour montrer notre produit. On voulait donc partager notre process pour rendre tout ça aussi fluide que possible 👇
1. Alignez-vous avec un brief design clair dans Notion+Claap
On nous a fait remonter que l'animation de notre homepage n'était pas très claire : les gens ne comprenaient pas qu'on pouvait enregistrer son écran. Certains pensaient même qu'on était une solution de visioconférence, il fallait régler ce problème.
J'ai reçu un ping sur Notion avec un court brief qui contenait tout ce dont j'avais besoin. Il commençait par un claap de 4 minutes, puis quelques bullets résumaient étape par étape ce qui était attendu pour l'animation.
2. Créez la première version de votre storyboard d'animation dans Figma
Avant de plonger et de réaliser toutes les maquettes détaillées du storyboard, j'ai fait un wireframe rapide avec des éléments que j'avais déjà. En utilisant les commentaires Figma pour recueillir du feedback, j'ai pu vite savoir si j'allais dans la bonne direction avant de me lancer dans le storyboard final.
3. Recueillez du feedback avec Claap
À partir du feedback obtenu sur les wireframes bruts, je suis entré dans le détail du storyboard et j'ai produit quelque chose de plus propre à présenter.
J'ai aussi fait quelques pré-visualisations de ce à quoi l'animation ressemblerait sur notre site pour mieux voir comment elle s'inscrirait en contexte, et vérifier que le zoning et le placement collaient à toutes les pages.
Quand j'ai terminé le storyboard, j'ai lancé mon extension Claap et commencé à enregistrer mon écran pour expliquer mes intentions pour chaque frame et les animations que j'allais faire dans After Effects. Il est important d'être clair et précis pour aider vos coéquipiers à vous donner un feedback actionnable.
4. Implémentez les changements dans Figma
Sur le claap partagé en review, j'ai eu environ 4 commentaires pointant des changements à faire sur le storyboard. L'un d'eux impliquait de revoir le zoning principal et le layout de l'animation.
Recevoir ce genre de feedback AVANT de commencer l'animation, c'est génial : faire ces changements dans After Effects une fois l'animation faite peut être un poil frustrant, croyez-moi. J'ai vu quelques MacBook traverser la pièce.
Rien de très chronophage. J'ai donc fait ces changements, enregistré mon claap, et repartagé pour feedback.
5. Validez le storyboard final avec Claap
À ce stade, j'étais plutôt confiant : je savais que les changements étaient faits et que tous les retours avaient été pris en compte.
Je n'ai eu qu'un commentaire : "Parfait ! Merci beaucoup 🙏" avec quelques tout petits ajustements de texte.
Difficile d'avoir un message plus clair : j'étais bon pour commencer à animer.
6. Commencez à créer vos animations dans After Effects
Pour l'animation, j'utilise After Effects. Ce n'est pas le soft le plus facile et je n'en connais probablement que 5 à 10%. Mais je sais m'y retrouver et faire ce qu'il faut. J'ai commencé par importer tous les éléments nécessaires à l'animation, organiser mes assets et anticiper pour que mon process soit plus simple et moins frustrant.
7. Validez le flow d'animation d'une 1re version avec Claap
Après une longue journée sur la première partie de l'animation, j'avais enfin quelque chose à enregistrer et à montrer dans un claap pour recueillir du feedback.
Cette fois, j'ai eu 2 commentaires. De bons commentaires 🤗
8. Finalisez l'animation dans After Effects
Après quelques commentaires gratifiants, il ne restait plus que la deuxième partie de l'animation. Encore une journée d'After Effects avant d'avoir une version complète.
Souvenez-vous de quand j'ai dit "Recevoir ce genre de feedback AVANT de commencer l'animation, c'est génial". Imaginez si j'avais dû faire un gros changement et refaire toutes ces keyframes, effets, et plus encore, sans avoir validé le storyboard au départ ?
(et ce n'est même pas la page complète des layers 😱) flying macbook
Mon Mac a eu de la chance ce jour-là. On a eu quelques échanges sur Slack où j'ai partagé un aperçu rapide de l'animation pour voir si l'équipe avait du feedback avant de lancer un render complet.
9. Uploadez votre dernière version dans Claap pour validation (optionnel)
Après l'approbation de tout le monde, il ne restait plus qu'à rendre et exporter l'animation. Une fois cela fait, j'ai simplement importé mon animation rendue dans mon workspace et partagé pour validation finale.
10. Faites briller votre nouvelle animation sur la landing page
Et la voici !
10 étapes pour mener votre projet de motion design.
Je ne suis pas motion designer, et je ne suis pas si fort que ça dans After Effects, mais c'est probablement la plus belle animation que j'ai faite jusqu'à présent. J'en suis vraiment fier.
