Uber, Google, Instacart y otros están adoptando la herramienta de prototipos de diseño de interfaz de Airbnb, Lottie.
Hay un nuevo software de diseño de interfaz que están siendo utilizados hoy por grandes compañías de tecnología como Airbnb y Google para crear nuevas aplicaciones. Pero la herramienta, llamada Lottie, no nació de su diseñador típico. En cambio, tiene sus orígenes en una creatividad Madison Avenue.
Salih Abdul-Karim pasó una década en Nueva York, creando comerciales para clientes como Nike y Sony, y redes como Comedy Central y HBO. Como muchos animadores, pasó sus días dentro de Adobe After Effects. No fue hasta que se trasladó a la costa oeste y tomó un trabajo de producción de videos para Square que se dio cuenta del mayor potencial de su propio talento. Estaba haciendo un típico trabajo de composición : Square lanzaría un coercial con un propietario de una pequeña empresa haciendo tapping en la aplicación Square en un iPad, pero debido a que las tabletas se ven horribles cuando se toman en video, fue responsabilidad de Abdul-Karim editar la pantalla del iPad y reemplazarlo con su propia reconstrucción de la interfaz Square-construido desde cero dentro de After Effects. Recrea las palabras, los botones y las animaciones, y luego las superpone a las imágenes comerciales reales, todo para que la aplicación de Square se vea lo mejor posible en la televisión. Y lo hizo otra vez, y otra vez, y otra vez.
“Hice un par de proyectos en Square. Eso es lo que me interesó no sólo usar el movimiento o la animación para venderte algo y entretenerte, sino también usar el movimiento y la animación una vez que estás en el producto “.
En 2015, Abdul-Karim se dirigió a Airbnb, donde abandonó su antigua posición de equipo de video para trabajar en el equipo de UX. Para construir nuevas interfaces, todavía trabajaba en su amado After Effects para prototipos de animaciones y transiciones, que, aunque no es inaudito, tampoco es una práctica estándar en la industria. Pero a menudo, esas animaciones no entrarían en las propias aplicaciones de Airbnb porque, como es común en el desarrollo de aplicaciones, puede llevar a un ingeniero trabajando durante semanas para traducir esas bonitas imágenes en código de trabajo. ¿Por qué la herramienta favorita de Hollywood funcionó tan bien para la pantalla grande, y tan mala para las pequeñas?
“Hice tanta falsa interfaz de usuario que terminé pensando, déjame tratar de llegar al equipo de productos para ver si puedo ayudar a prototipar algunas de estas cosas antes de que incluso lo hagamos”, dice Abdul-Karim, que quería ayudar a construir productos en lugar de simplemente anunciarlos.
Frustrado por el mismo cuello de botella de diseño a desarrollo experimentado en toda la industria, Abdul-Karim comenzó a pensar. Si pudiera usar After Effects para crear una simulación de interfaz de aplicación o un prototipo, ¿por qué no podía usar After Effects para hacer la aplicación real?
Ahora puede, gracias a la propia herramienta de prototipos UTY de Lottie -Airbnb, desarrollada por Abdul-Karim y un par de ingenieros de la compañía.
[Imagen: cortesía de Airbnb]
En los seis meses desde su debut , este software de código abierto ha sido adoptado en los flujos de trabajo de Google, Uber, New York Times e Instacart. Y por buenas razones. Lottie te permite hacer una animación dentro de After Effects y exportarla a una aplicación de iOS o Android como parte de la interfaz real de una aplicación. “Mientras que en una herramienta de prototipado como Framer, Sketch o Principle, se hace algo y un ingeniero necesita recrearlo, con Lottie, lo que haces va exactamente al producto tal cual es”, dice Abdul-Karim.Técnicamente hablando, Lottie sólo exporta un vídeo de lujo a su pantalla táctil. Pero el brillo es que tales videos se pueden encadenar juntos en una serie para hacer botones animados, o se engancharon en apenas parte de la pantalla para crear barras de estado. Los videos también se pueden seleccionar para reproducir en pantalla para responder a todo tipo de gestos, incluyendo golpes, grifos y desplazamientos.
Rápidamente, los desarrolladores han aprendido que gracias a estos controles de reproducción de gestos, pueden utilizar Lottie para simular algo tan complicado como un feed de medios sociales. Tirar hacia abajo es jugar. El levantamiento es rebobinado. Y el usuario final no es más sabio que están esencialmente sólo fregando de ida y vuelta a través de un clip de YouTube muy inteligente.En Airbnb, no todo el desarrollo de aplicaciones se realiza a través de Lottie y se considera una herramienta opcional para los diseñadores. Pero la influencia de Lottie se filtra rápidamente en la aplicación a través de características que ya has visto, o verás pronto. Lottie ahora está impulsando muchas de las transiciones de interfaz de usuario de Airbnb. También lo verás en una futura actualización de la aplicación: Cuando reserves una estancia en una ciudad nueva, la página de confirmación reproducirá 1 de más de 50 animaciones personalizadas, destacando los sitios más famosos de las ciudades.
Airbnb también acaba de utilizar a Lottie en una asociación con el proyectodel sustantivo – el catálogo abierto del icono de la fuente – para lanzar una serie de open-source, pictogramas animados . Son básicamente bonitos botones que cualquier desarrollador de aplicaciones es libre de usar.
Por supuesto, para el observador cercano, estos usos de Lottie siguen siendo sólo videos. Porque después de todo, reproducir videos es lo que Lottie fue construido para hacer. Pero ahora, el equipo de Lottie está creando más interactividad y gráficos dinámicos en la plataforma, lo que le permitirá tomar elementos en el texto y las fotos de la página y animarlos como parte de los efectos.
“Estamos allí”, dice Abdul-Karim sobre el despliegue de estas nuevas opciones, más dinámico. “La cosa es que acabamos de llegar allí. Y siempre que llegue a algún lugar, todavía habrá algún masaje que necesite suceder “. En otras palabras, la destreza técnica de Lottie está superando su facilidad de uso. Y el equipo de Airbnb tiene que averiguar cómo traducir complejas capacidades de animación-cumple-código en características llave en mano dentro del software.
Tan maduro como la interfaz de usuario y el desarrollo de aplicaciones puede parecer hoy en día-hay literalmente millones de aplicaciones disponibles para iOS y Android-proyectos como Lottie demuestran que todavía es pronto para toda la industria. No hay razón lógica para que una increíble animación construida dentro de After Effects no pueda ser la base de la próxima aplicación de éxito, a excepción de una: Nuestras herramientas digitales se construyeron para otra era, que se está desvaneciendo hasta la obsolescencia incluso más rápido que su teléfono inteligente actual .