Marketing Digital et Vente

Lottie, le nouveau format qui booste la créativité des web designers

Les lotties changent la façon de travailler des graphistes

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

Vous êtes peut-être actuellement en emploi ou vous sortez des études. Dans un cas comme dans l’autre, vous avez probablement prévu un budget de sécurité. Votre travail vous apporte un salaire qui vous permet de subvenir à vos besoins et à ceux de votre famille et si vous êtes encore chez vos parents cela vous permet de voir venir encore quelque temps.

Quand on décide de se lancer en tant qu’entrepreneur on prend forcément une part de risque. Est-ce qu’on peut vivre sans salaire pendant une ou deux années ? Très peu de sociétés génèrent suffisamment de revenus pour s’autofinancer pendant la phase de démarrage. Les entrepreneurs doivent souvent réinvestir entièrement leurs bénéfices pour assurer leur croissance.

Une société a généralement besoin d’au moins trois ans pour atteindre son rythme de croisière. Et il faut compter plus de sept ans pour entrer dans un cycle de consolidation.

Il sera alors nécessaire à toute personne désirant se lancer dans les affaires de faire une évaluation comptable de sa situation financière à court et moyen terme.

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.

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

Vous avez aimé cet article ?
Partagez-le avec vos collègues ou amis

Les points essentiels

Les entreprises, professionnels indépendants et apprenants privés peuvent nous solliciter pour concevoir et animer une formation sur mesure.

Avantages

La mise en place de ces formations intègre les prestations suivantes:

  • Accompagnement dans la définition de vos besoins en formation
  • Création d’un programme de cours adapté à votre métier et vos activités
  • Planification de la formation en tenant compte de vos contraintes
  • Mise à votre disposition de nos formateurs certifiés et expérimentés

Solutions

Nous pouvons vous proposer différentes prestations : rejoindre un cours collectif, organiser une session dédiée ou encore suivre des cours privés… en fonction de vos objectifs de formation, du nombre et de la disponibilité des participants, ainsi que du budget alloué.

Voici des exemples de formations spécifiquement conçues pour nos clients : « Retouches portraits make-up avec Photoshop », « Formation pour iPad et format fluide avec InDesign », « Complémentarités et modalités de transfert de fichiers entre AutoCAD et Illustrator », « Calibrage colorimétrique du matériel informatique pour l’impression », « Data visualization »,  « optimiser le référencement du site Internet de notre entreprise »…

Des questions ? Notre conseiller en formation est à votre disposition.
L’échange effectué via la plateforme Zoom a, généralement, une durée de 30 minutes.

Si vous êtes affilié à un organisme du chômage ou à l’Hospice Général, merci de prendre contact au 022 552 43 43.

 


formations

PHOTOSHOP, INDESIGN, ILLUSTRATOR, MIDJOURNEY…

BIM, Construction…, Soumission…

AUTOCAD, REVIT, ARCHICAD, 3Ds Max, BLENDER…

MOTION GRAPHIC DESIGN, AFTER EFFECTS, PREMIERE PRO…

UX & UI DESIGN, FIGMA, WORDPRESS, WIX…

MARKETING DIGITAL ET RÉSEAUX SOCIAUX, COMMUNITY MANAGEMENT ET BRAND CONTENT…

Stage en entreprise · Accueillez un stagiaire