Lottie des animations pour vos sites et applications
Redimensionnables, légères et de meilleure qualité
– les atouts du format Lottie –
Le format Lottie est un format ouvert d’animation vectorielle.
Il permet d’afficher des animations légères en très bonne qualité pour vos sites web et applications.
Les animations Lottie sont redimensionnables, légères, multiplateformes et on peut y ajouter de l’interactivité. C’est la solution idéale pour remplacer les images et animations au format Gif.
taille du fichier LOTTIE : 13 ko
Les fichiers Lottie peuvent être 10 à 30 fois plus légers que les fichiers Gif, et comme ils sont vectoriels, ils s’adaptent à toutes les tailles. Une seule animation peut vous servir pour vos sites et vos applications (web, iOS, Android, Windows, QT, Tizen, …) .
taille du fichier GIF : 167 ko
Ça y est, vous connaissez l’essentiel sur ce format, mais concrètement, à quoi il sert ?
Voici quelques exemples d’applications ci-dessous.
Branding – Mettez en avant votre identité par l’animation
Les animations Lottie peuvent attirer l’attention sur votre logo, pour dynamiser votre site internet ou pour servir d’attente pendant le chargement de votre application.
L’animation de votre logo permet de renforcer votre image de marque en lui donnant plus de sens (taille du fichier Lottie : 64 ko).
Pour l’histoire :
En 2015, Hernan Torrisi créa le premier plugin pour transformer les animations After Effects en animation vectorielle au format .json.
Micro interactions – Améliorez l’expérience utilisateur
Envoi de mail, ajout ou validation d’un panier de commandes… Les animations Lottie viennent améliorer l’expérience utilisateur en visualisant l’action : acheter, envoyer, partager, supprimer.
Elles aident à la compréhension, l’utilisateur est mieux accompagné et vous gagnez en ergonomie.
Vous pouvez le tester ici, à gauche avec un survol puis clic (taille du fichier Lottie : 49 ko), ou sur les liens vers les réseaux sociaux en haut de cette page.
Pour l’histoire :
En 2017, la branche design d’AirBnB ajouta les librairies pour les applications, le format Lottie était né.
Lien vers la page lottie Airbnb
Informer – L’animation intégrée sans vidéo
Le format Lottie est idéal pour informer, par exemple pour vous apprendre que :
80% de l’énergie dépensée dans la vie d’un ordinateur, l’est à sa fabrication, et ce, parce qu’il est jeté en moyenne au bout de 4 ans.
(taille du fichier Lottie : 107 ko)
cf. nos animations pour l’Ademe sur le sujet
Pour l’histoire :
Le nom Lottie vient de Lotte Reiniger, réalisatrice pionnière de film d’animation.
lien wikipédia
Interactivité – Engagez le visiteur en le faisant agir
On peut ajouter de l’interactivité aux animations Lottie. Des interactions simples comme un clic, un appui long, un déplacement, … permettront d’engager le visiteur.
Cela peut aider par exemple à comprendre comment déconstruire les représentations sexistes(taille du fichier Lottie : 49 ko).
cf. notre animation pour le centre Hubertine Auclert
Ou pour se rendre compte de la part des handicaps invisibles. (taille du fichier Lottie : 154 ko)
cf. notre animation pour le Ministère de l’enseignement supérieur de la recherche et de l’innovation
On peut pousser le processus un peu plus loin en présentant une animation plus complexe avec plusieurs interactions. L’aspect ludique de l’animation et l’interaction peuvent se mettre au service de l’apprentissage.
Voici un exemple ci-dessous (taille du fichier Lottie : 444 ko).
Les interactions seront légèrement différentes entre ordinateurs et smartphones/tablettes : un appui long sur ces derniers correspondra à un survol avec la souris.
Le Studio BOUTON vous accompagne dans vos projets d’animations Lottie : animation de logo, d’éléments d’interface, création de contenu de formation animé, interactif ou non.
Vous avez des idées d’animations en motion design ? Contactez-nous pour en parler. 06 82 91 72 90