Il y a 4 ans je vous présentais sur le blog le Cinemagraph, l’arme de séduction massive d’animation de vos photos. Aujourd’hui pour cet article #easyfriday, que certains d’entre vous (les veinards qui font le pont) liront bien au chaud sous leur couette ou au coin du feu, je vais rester dans une thématique similaire et vous présenter LottieFiles.
J’ai découvert cette plateforme en début d’année seulement. Je l’utilise depuis fréquemment avec une délectation certaine lorsque je dois créer des contenus engageants (page web, newsletter, post social media, sticker animé en signature mail, bouton CTA…) et que j’ai besoin d’illustrations graphiques légères, de qualité et proposant de l’image en mouvement.
Lottie késaco ?
Sans trop rentrer dans des détails techniques, le Lottie est un format de fichier ouvert d’animation vectorielle basé sur JSON créé à l’origine par la branche de design d’Airbnb (ah tiens, ils sont partout décidément…).
Avant Lottie, les développeurs devaient utiliser des formats d’images volumineux ou alors des GIFS animés pour intégrer des animations complexes, alourdissant de manière considérable le poids d’une page et ralentissant les temps de chargement. Ils pouvaient aussi créer l’animation « from scratch » en code à partir d’une animation créée par un designer.
Aujourd’hui le format Lottie permet notamment aux concepteurs d’animation travaillant avec After Effects d’intégrer rapidement leurs réalisations sur n’importe quelle plate-forme (Web, Android, iOS). Ce format de fichier a comme principal avantage d’être très léger et on peut facilement en augmenter ou diminuer la taille sans pixellisation ou perte de qualité (principe de base du vectoriel).
Malheureusement, créer son propre Lottie n’est pas encore à la portée de tout le monde et peut potentiellement prendre beaucoup de temps pour les moins geeks d’entre nous.
Il va vous falloir déjà être en possession du logiciel de motion design After Effects (et savoir le maîtriser techniquement), puis installer le plugin BodyMovin et surtout créer les images de votre composition (donc avoir un certain talent artistique…). Mais j’ai une bonne nouvelle pour les plus pressé(e)s et les moins créatifs(ves) !
Une collection d’animations gratuites
La plate-forme LottieFile vous donne accès à une énoooorme collection d’animations customisables (en partie gratuite) créées par une communauté de designers de talents que vous pourrez, qui plus est, embaucher occasionnellement pour réaliser des créations personnalisées à votre image.
Pour les moins technophiles, en plus du format JSON, les animations sont téléchargeables en .GIF et en .MP4 ou peuvent s’embarquer en quelques clics sur votre site web via votre constructeur de page WordPress favori ;-).
Les avantages des animations Lottie
Parmi les nombreux avantages qu’offrent les Lotties, voilà ceux qui me paraissent les plus intéressants suite à un usage poussé et une intégration sur de nombreux sites Web :
- Animation ludique et qualitative de vos contenus pour une mise en page plus attractive
- Fichiers très légers (par rapport aux fichiers MP4 ou GIF) qui n’alourdissent pas vos pages et réduisent la quantité d’espace disque utilisé sur vos serveurs (sobriété numérique)
- Amélioration potentielle de l’engagement de vos utilisateurs en suscitant émotion & empathie
- Augmentation efficace du taux de conversion (expérience divertissante et engageante)
- Customisation facile et rapide pour une adaptation de l’animation à votre charte graphique via l’éditeur Lottie (couleurs de fond et des différents calques / vitesse de l’animation / frame rate / dimensions)
- Librairie open-source et donc gratuite !
En Bonus !
Voilà une petite sélection de Lotties de mon cru à utiliser sur vos sites web de destination ou encore dans vos newsletters !
Alors prêts à utiliser les Lotties sur vos internets ? N’hésitez pas à partager vos exemples d’intégration Lottie dans les commentaires de l’article !
