Cascades

Lottie, le nouvel outil des Designers

30 août 2017

Airbnb est l’une des principales plateformes de réservation et de location d’appartements entre particuliers et connaît un grand succès en France depuis son lancement en 2008. Quelques années plus tard la marque se lance dans le design et dispose aujourd’hui d’un nouvel outil : Lottie

Lottie a vu le jour grâce à Salih Abdul-Karim. Auparavant Motion Graphics Artist chez Square, il intègre Airbnb en juin 2015 comme Experience Designer puis devient Design Lead de l’enseigne en mars 2017.

 

Ecran Lottie responsive

Cet outil répond à une problématique bien connue des UI designers. Elle concerne les animations et plus précisément leurs intégrations.

Avant l’UI designer imaginait et concevait des animations sur After Effect. Il les envoyait ensuite à un développeur qui était chargé de l’intégrer sur le web. Cet exercice long et complexe nécessitait plusieurs heures et parfois même plusieurs jours de travail pour convertir ces animations en code.

 

Design thinking

« Lottie […] allows native apps to use animations as easily as they use static assets. »

Une solution innovante

Lottie va permettre d’intégrer directement des données d’animation vers votre App depuis After Effect en passant par une extension opensource du nom de Bodymovin. La particularité de cette extension est qu’elle est associée à un lecteur Javascript intégré qui va permettre de retranscrire directement l’animation en lignes de code.

 

Ecran Lottie animation

« Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, and allows native apps to use animations as easily as they use static assets. »

Comme vous l’avez compris cette simplification va permettre aux designers de créer des animations toujours plus complexes sans avoir à se soucier de leurs réécritures. Au cours des derniers six mois, Lottie a été adopté par de grands acteurs du web tels que Google, Uber ou encore le New York Times.

Lottie est également utilisé par The Noun Project pour animer de nombreux pictogrammes et  les laisser à disposition de leurs utilisateurs.

Comment Lottie va-t-il évoluer ?

 

Pour l’instant l’outil se limite à la création de vidéos d’animation mais les équipes créatives sont en train de travailler sur un élargissement du champ d’action de l’outil vers une dynamisation des interactions en s’attaquant aux éléments présents sur la page ainsi qu’aux textes. Des milliers d’applications travaillent sur ce sujet et Lottie va devoir innover et se démarquer de ses concurrents avant que cette problématique mêlant UI et intégration devienne obsolète.

Share on FacebookShare on Google+Pin on PinterestTweet about this on TwitterShare on LinkedInEmail this to someone

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.