Lottie ! Mais qui est cette personne qui attise l’intérêt des graphistes numériques ? C’est Charlotte – Lotte – Reiniger, réalisatrice allemande et pionnière de l’animation de silhouette. C’est de là que vient le terme Lottie qui est une solution de création d’images en mouvement qui vient remplacer le flash.
Le roi est mort, vive la reine ! Des pionniers avaient compris que le flash était voué à une mort certaine. Adobe l’a enterré à la fin de l’année 2020. Requiescet in pace Amigo !
Les Lotties donnent un coup de fouet à la création numérique destinée au web.
Si vous êtes un graphiste, comme moi, vous voulez illustrer les sites Internet avec de l’image. Et si cela bouge, c’est encore mieux. J’ai longtemps été frustré. D’un côté, je pouvais réaliser des animations en Flash, mais elles étaient incompatibles avec les sites modernes.
J’imagine que vous pensez comme moi, vous aimez quand c’est propre. Le GIF c’est sympa, mais voilà, c’est inesthétique. Il nous reste deux solutions.
La première : on reste traditionnel et on continue à passer du temps à faire des GIF animés sur Photoshop.
La meilleure : on fait vite un tour sur After Effects et on sort une quantité incroyable de créations sympathiques en Lottie.
Les lotties réconcilient le site Internet avec l’animation
Certains sites sont moribonds car ils sont axés sur l’optimisation du SEO sans penser à l’aspect visuel. Le chargement des images pouvant impacter la vitesse, les développeurs ont supprimé tous les modules énergivores. Il en est de même des animations effectuées en Flash qui sont incompatibles avec les portables et donc avec les sites responsifs.
Mais quand on est web designer on veut des sites qui bougent. L’entrée d’une image par ici, un texte qui s’anime ou un bloc qui apparaît en fade in quand on scroll. Dans les années 1990 les sites débordaient de créativité. Puis dans les années 2000 on est retombé dans le Moyen-Âge. Ce fut donc le retour du GIF et de sa piètre qualité mais au gentil air vintage.
La Renaissance est enfin arrivée grâce aux Lotties. Les années 2020 annoncent le retour des web designers en force. J’invite tous les graphistes à devenir des motion designers car l’avènement de l’image animée et vidéo est là. On aura de plus en plus besoin de personnes créatives pouvant mettre en mouvement les idées écrites des communicants.
En utilisant les lotties on se réconcilie avec l’UX des sites Internet. L’utilisateur peut se balader sur une page sans être dérangé par un temps de chargement qui perturbe la lecture. C’est très embêtant quand une page bouge dès qu’un nouvel élément se charge. Je pense que vous devez être du même avis que moi.
Les créatifs vont, à nouveau, pouvoir travailler en harmonie avec les web développeurs. On constate que les applications présentes dans le top 40 sur l’Apple Store, utilisent les lotties pour leurs animations.
Petit historique des lotties
En 2015, Hernan Torrisi, graphiste chez Airbnb, était à la recherche d’une application ou d’un format pouvant remplacer la mort annoncée du Flash.
Comme sa recherche était vaine, il a eu l’idée d’exporter la représentation d’une animation dans Adobe After Effects et de rendre l’animation interactive. Il a exploité les capacités de script du logiciel pour énumérer un projet d’animation. Puis, il a publié un plugin appelé Bodymovin, qui exporte la description au format JSON.
Hernan Torrisi a également édité le tout premier moteur de rendu pour le format Lottie. Grâce à un lecteur JavaScript pour les navigateurs, les animations sont ainsi visibles de tous les internautes.
En 2017, les ingénieurs Brandon Withrow, Gabriel Peal et Leland Richardson, également chez Airbnb, ont vu le potentiel des animations basées sur le JSON.
Les trois ingénieurs se sont associés à l’animateur principal de chez Airbnb : Salih Abdul-Karim. C’est lui qui les a aidés à créer des bibliothèques d’animations au format JSON pour iOS et Android. C’est cette équipe qui a donné le nom « Lottie » à ces fichiers.
En 2020, le format .lottie a été créé. C’est un format de fichier open-source qui regroupe un ou plusieurs fichiers Lotties ainsi que les ressources associées dans un seul emplacement.
En 2021, le format Lottie est devenu le nouveau standard pour l’animation interactive. Il devient impératif de se former et de créer des animations si on veut rester concurrentiel.
Formation pour devenir Motion Graphic Designer
Veuillez remplir les champs ci-dessous pour recevoir le descriptif de cours.
En soumettant ce formulaire, j’accepte que les informations saisies soient exploitées dans le cadre de ma demande de renseignements et de la relation commerciale qui peut en découler. Voir notre politique de confidentialité
Les cinq avantages des lotties pour la création web
Les Lotties sont des images vectorielles
Le premier, et imparable avantage du Lottie est le fait qu’il soit redimensionnable sans perte de définition. Cela résout énormément de problèmes d’intégration aux contenus numériques.
Combien de fois, vous vous êtes pris la tête avec une image qui perdait en qualité ?
Tout simplement parce qu’à l’origine, le fichier était mauvais. Vous, comme moi, savez que, quelques fois, nos clients ou collègues nous transmettent des documents sur lesquelles nous devons travailler sans autre discussion. Et on évite de parler de l’utilisation erronée de notre travail final et dont la qualité se dégrade quand on en perd la main.
Elles sont légères
Le deuxième avantage est son faible poids qui en fait l’allier de tout web développeurs en recherche d’optimisation. Il est 600x plus léger qu’un fichier PNG ou GIF, et se déploie 10x plus vite.
On peut ainsi utiliser plusieurs animations sur une même page sans craindre le contrôle rapidité. Une landing page sera, de ce fait, plus qualitative en ayant une animation lottie qui soutient le propos en un coup d’œil.
La compatibilité des lotties avec les systèmes d'exploitations
Troisièmement, les animations peuvent être lues sur plusieurs systèmes comme iOS, Androïd ou React Native, le framework de Facebook. Très user friendly, il peut être utilisé sur plusieurs supports comme les montres ou les objets connectés. C’est un format qui est apprécié des UX Designers pour exprimer une idée.
La facilité de création avec des logiciels intégrés
Le quatrième avantage est de pouvoir créer les animations depuis un logiciel comme After Effects ou Animate. Ces logiciels d’animation sont connus de tous les motion designers car ils font partie des outils indispensables à la création visuelle.
Initialement utilisé pour des animations vidéos, After Effects, est devenu un outil que tous les graphistes utilisent pour créer des contenus animés.
C’est un grand soulagement. Quand on a l’habitude de son écosystème de logiciels de travail, on est plus productif. Si vous êtes familier de la création d’animation, créer des lotties est pour vous un jeu d’enfant.
La communauté Lottie
Le dernier avantage est la communauté. Comme sur WordPress, il y a déjà énormément de ressources disponibles pour créer des animations en utilisant des bibliothèques.
Vous pouvez également proposer vos créations de façon gratuite ou payante. LottieFiles est à la fois une plateforme de test, de collaboration et de partage d’animations. Elle propose une gamme d’outils et de fonctionnalités qui visent à rendre la découverte, la création et la mise en œuvre des animations Lottie plus faciles et efficaces.
On est vite opérationnel
Et bonus, vous pouvez créer vos premières animations Lottie sans connaissance de langage de programmation. Sur LottieFiles, on peut importer et pré-visualiser les animations Lottie. On peut ainsi générer des lignes de code que l’on utilisera pour implémenter les animations dans nos projets.
Comment débuter dans la création de lotties
Pour commencer à créer des lotties, on doit obligatoirement utiliser un logiciel d’animation. Le plus populaire est After Effects mais on peut également utiliser Adobe Animate, Flow, Haiku Animator, Synfig Studio, Inkscape ou Keyshape. Toutefois, il faut installer le plugin lottie dédié à la solution que vous utilisez.
Mon conseil est d’utiliser After Effects car il apporte la meilleure alternative. Beaucoup plus intégré que les autres, vous avez la possibilité de travailler avec une meilleure autonomie. De plus la puissance du logiciel, vous permet de pousser votre créativité là où vous le désirez.
Mais avant d’utiliser ces solutions de création, il faut impérativement avoir des bases solides en dessin vectoriel et en retouche d’image. Apprendre à utiliser Illustrator et Photoshop, vous fait gagner énormément de temps dans votre création.
La préparation des images est une phase qu’il faut prendre en considération. L’animation est intransigeante avec ça. Le mouvement, c’est une succession d’images qui se modifient doucement. C’est une danse. Pour que le déplacement soit fluide, il faut travailler correctement ses calques.
Lancez-vous et donnez du mouvement à la création digitale !
Je serais heureux de voir votre travail et d’échanger avec vous.
Si vous avez besoin de vous former, je serais enchanté de vous rencontrer au sein de Cadschool. Que ce soit auprès de mes collègues ou dans l’un de mes cours, vous trouverez chez nous un accompagnement sincère
