Animación web en la era posterior a Flash

En este entorno ferozmente competitivo, las empresas buscan frenéticamente formas de captar y retener la atención de las personas. A medida que avanzamos en nuestra vida diaria, el flujo interminable de estimulación visual que brota de los anuncios animados en la calle, los videos en nuestros teléfonos móviles, sin mencionar nuestras redes sociales, crea una sensación de movimiento constante que compite por nuestra atención.

La reacción de una fracción de segundo al movimiento en nuestro entorno se desarrolló a partir de la necesidad de sobrevivir y fue desencadenada por estímulos ambientales percibidos como potencialmente amenazantes o dañinos; la gente presta especial atención a las cosas que se mueven. Cuando captamos algo que se mueve rápidamente con el rabillo del ojo, el cerebro nos alerta en una fracción de segundo porque nuestro cerebro subconsciente ya ha reaccionado ante el peligro antes de que nuestra mente consciente haya tenido tiempo de procesar la información.

Los anunciantes lo saben, y es por eso que tenemos anuncios animados en las calles en las paradas de autobús y en las plataformas del metro, anuncios de video que aparecen en las redes sociales y vallas publicitarias electrónicas con video de movimiento completo. La técnica es un efecto de golpe uno-dos diseñado para entregar mensajes de marketing. Primero, captando nuestra atención, y segundo, usando videos y animaciones para transmitir el mensaje.

Si una imagen estática vale más que mil palabras, ¿cuánto vale una animación?

Aquí es donde entra en juego la animación web. Los diseñadores web esperan capturar y mantener nuestra atención, y tal vez agregar una sacudida inesperada de placer. La animación web se puede utilizar para visualizar varios pasos en un proceso o una idea complejos, para ilustrar un mensaje de marketing simple o para mover cosas en una página web de forma natural y fluida a medida que las personas se desplazan, nuevamente, para llamar la atención sobre algo.

Cómo comenzó la animación web, el auge de los GIF

Durante los primeros días de la World Wide Web, las cosas eran bastante estáticas y aburridas. Las páginas web se basaban principalmente en el diseño gráfico y los diseños del mundo de la impresión. Sin embargo, algunos diseñadores hicieron un esfuerzo concertado, a pesar de los desafíos técnicos y de ancho de banda, para incluir formas tempranas de animación web para hacerlas más dinámicas y atractivas. Una de las primeras adiciones de una animación GIF a un sitio web fue en Batman Forever de Jeffrey Zeldman en 1995. Los visitantes eran recibidos por el vuelo de Batman hacia ellos, animado como una secuencia de imágenes.

El sitio de promoción de Batman Forever fue uno de los sitios más populares en ese momento. Inspiró a otros diseñadores y desarrolladores web a incorporar animación web GIF como un elemento peculiar y llamativo en sus sitios web.

Veinte años después, los GIF animados ahora están en todas partes. Están en Twitter, Messenger, iMessage, WhatsApp, Skype, Instagram y Facebook. Los GIF son adecuados para animaciones de bucle corto, secuencias de imágenes e incluso bucles de vídeo cortos. Sin embargo, una desventaja desafortunada es que el formato de archivo GIF no tiene transparencia variable y no admite un canal alfa; por lo tanto, todos los píxeles son completamente opacos o completamente transparentes.

Las animaciones GIF fueron el comienzo de un renacimiento en el diseño web, pero no eran ideales. Especialmente en los primeros días de acceso telefónico y velocidades lentas de Internet, los GIF acaparaban el ancho de banda. El resultado fue una secuencia pixelada de baja resolución. El inconveniente para los diseñadores que tenían que comprimir los GIF al tamaño más pequeño posible era una paleta limitada de 8 bits, lo que generaba muchas tramas. Esto cambió con Internet de alta velocidad que se volvió más común en el siglo XXI y, como consecuencia, la animación web se volvió más atractiva con millones de colores y más fluida con velocidades de cuadro más altas.

El amanecer de la animación web Flash

El gran auge de la animación web se produjo con la introducción de Flash en 1996, cuando Macromedia anunció su complemento web y la herramienta de animación basada en cuadros que lo acompañaba: Macromedia Flash (después de que adquirieran FutureSplash Animator, un programa de animación vectorial). Flash desempeñó un papel de liderazgo en traer nuevas capacidades a la web. Desde audio y animación hasta interactividad y video, Flash ayudó a impulsar Internet.

La oportunidad de crear animaciones web simples, ligeras y basadas en vectores en sitios completos que incluían interacciones, creó lo que podría llamarse el período "barroco" del diseño web con (demasiados) elementos animados abarrotando el paisaje. Sin embargo, Flash ofreció un vistazo a las posibilidades del diseño web dinámico, liberando a los diseñadores para experimentar y desatando un período de rápida evolución del diseño web.

Las animaciones Flash son ligeras y relativamente fáciles de hacer. Con un tamaño de solo unos pocos kilobytes, se distribuyen en formato de archivo SWF y un archivo que usa sonido con gráficos vectoriales nítidos. La creación de animaciones web se convirtió en un proceso simplificado que no aumentaba mucho los tiempos de carga de la página web. Pero a pesar de todo eso, quedaba un inconveniente importante: se requería un complemento de navegador para que se ejecutara.

Además, ActionScript (AS), un lenguaje de programación orientado a objetos similar a JavaScript, permitió una interacción sofisticada en Flash. ActionScript se diseñó inicialmente para controlar animaciones vectoriales 2D simples, pero posteriormente evolucionó hasta convertirse en una herramienta sofisticada.

Desafortunadamente, la animación Flash no estaba diseñada para ser receptiva, no funcionó bien en todos los dispositivos y finalmente se eliminó de todos los dispositivos móviles populares. Si bien el tamaño del archivo era relativamente pequeño, Flash no estaba bien optimizado y terminó agotando la CPU, lo que también fue un problema en los dispositivos móviles. El final de la era Flash se produjo después de que Steve Jobs decidiera no admitir Flash en los dispositivos móviles de Apple.

Flash se creó durante la era de las PC, para PC y ratones. Pero la era móvil se trata de dispositivos de bajo consumo, interfaces táctiles y estándares web abiertos, todas las áreas en las que Flash se queda corto.

steve trabajos

Animación web hoy

Hoy en día, como Flash está obsoleto, tenemos diferentes necesidades de animación web. Las herramientas deben ser flexibles y ligeras. Los diseñadores web deben crear contenido receptivo y adaptable para diferentes dispositivos (computadora de escritorio, tableta y móvil), teniendo en cuenta varias dimensiones de pantalla, navegadores, relaciones de aspecto, densidades de píxeles y más. Nuestras obras maestras de animación web tienen que funcionar en un móvil de 5 pulgadas y 720 px hasta una tableta QXGA de 9,7 pulgadas y una pantalla Retina 6K de 32 pulgadas.

La tecnología ha madurado hasta un punto en el que incluso los dispositivos móviles con poca potencia tienen el ancho de banda y el poder de procesamiento para manejar animaciones web muy exigentes y contenido de video de alta resolución. Esto no significa que los sitios web deban estar súper "ocupados". Como siempre, se trata de lograr el equilibrio adecuado entre la animación, la interacción dinámica y los elementos estáticos. El hecho de que hoy podamos implementar muchas animaciones web sofisticadas no significa que debamos hacerlo.

Los diseñadores/animadores web también deben considerar el soporte multiplataforma. Hace diez años, los diseñadores no tenían que asegurarse de que sus creaciones se verían bien en una variedad tan amplia de dispositivos. Se deben tener en cuenta diferentes relaciones de aspecto, orientaciones verticales y horizontales, así como varias densidades de píxeles y distancias de visualización. Este acertijo presenta a los diseñadores web un conjunto de nuevos desafíos y peligros potenciales. Las pruebas de usuario consumen un tiempo precioso, más cosas podrían salir mal en una multitud de plataformas y las animaciones web deben ser más detalladas que nunca.

HTML5, CSS3, JavaScript y SVG (gráficos escalables) parecen ser las mejores soluciones para la animación web. El uso de estas tecnologías y lenguajes web modernos ayudará a abordar la mayoría de los problemas anteriores, pero no todos. Pero siempre es una buena idea andar con cuidado, especialmente cuando se está en un territorio desconocido, y un control de calidad y pruebas exhaustivos son imprescindibles.

¿Por qué utilizar la animación web?

La animación web puede atraer y mantener la atención de las personas por más tiempo que una página web estática y comunica una idea o concepto de manera más clara y efectiva. La excelente animación web transmite una historia detrás de cada movimiento. Se trata de dar vida a una animación con significado y "alma" (lat. anima).

La animación web debe ser fluida, significativa y apoyar el viaje del visitante. El diseñador/animador web debe ser consciente de cómo la animación encaja en la experiencia del usuario, tratar de predecir los posibles flujos de usuarios y luego apoyarla de manera significativa.

Los diseñadores web no deben mirar la animación web desde una perspectiva puramente técnica; necesitan verlo desde la perspectiva del usuario.

Una de las cosas esenciales de la animación es el tiempo. El momento adecuado le da un significado físico y emocional a una animación. La experiencia debe ser fluida y lógica. Si la animación no es fluida (tiene un problema de tiempo), las personas podrían percibirlo como un error y perder toda motivación para explorar más el sitio web.

El animador necesita usar el tiempo apropiado para proporcionar el efecto deseado. ¿Cuántos fotogramas clave se deben usar en la animación? ¿Qué tipo de cambio dinámico en la animación se debe a la interacción del visitante y qué tan rápido llega la respuesta después de la interacción? ¿La animación es caprichosa, seria, entretenida?

Desde un punto de vista lógico, podemos dividir la animación web en dos tipos básicos:

• Una animación web estática, no interactiva, por ejemplo, una animación GIF.
• Una animación web dinámica con participación del usuario e interactividad que cambia según la entrada del usuario.

El mejor ejemplo de animación dinámica es un juego, donde los usuarios manipulan el contenido en pantalla. Otro ejemplo simple sería cambiar la posición de ciertos elementos cuando un visitante del sitio web se desplaza por un sitio web de desplazamiento de paralaje. La animación no es pasiva, varía según las acciones del usuario.

La animación web dinámica se usa a menudo para presentar infografías animadas en un sitio web, por lo que las personas prestan más atención a áreas específicas mientras se desplazan por la página; es una forma poderosa de resaltar información relevante.

Los pros y los contras de la animación web

Aquí hay algunos pros y contras de las técnicas de animación web, incluidas las soluciones heredadas que ya no están en uso.

¿Qué pasa con los pros y los contras de la animación web en general? La animación web bien ejecutada aún puede parecer fuera de lugar, por lo que siempre es una buena idea hacer algunas preguntas cruciales (así como interrogar a los clientes y otros miembros del equipo) antes de proceder a integrar la animación en el diseño de un sitio web.

Primero, debemos verificar cómo la animación afectará la experiencia del usuario. ¿ Mejorará la UX del sitio web? Los diseñadores deberían:

• Examinar el diseño del sitio web existente (si está disponible)
• Compruebe el público objetivo y las plataformas de hardware que utilizan
• Verifique los tiempos de carga del sitio y la carga de la CPU
• Explora otras alternativas
• Ojo con la usabilidad

No es una buena idea usar animación web en un sitio simplemente para seguir las tendencias.

La decisión de utilizar animación web debe tratarse como cualquier otra decisión de diseño; Los diseñadores web deben sopesar los pros y los contras y asegurarse de que la experiencia del usuario no se vea comprometida. También deben trabajar con los desarrolladores para determinar los requisitos del código y asegurarse de que no se queden atrapados con un código ineficiente que deba modificarse en el futuro.

La tecnología de animación web moderna ha madurado significativamente en los últimos 20 años: el rendimiento, el ancho de banda disponible y la calidad de representación han aumentado. Sin embargo, los diseñadores deben andar con cuidado y solo agregar animación a un sitio web si mejora significativamente la experiencia del usuario.

Lectura adicional en el blog de diseño de Toptal:

• Cómo crear animaciones de carga personalizadas para disminuir las tasas de rebote
• Crear ilustraciones alucinantes con Sketch y Looper en poco tiempo
• Una guía paso a paso para la animación de la interfaz de usuario con Principle y Sketch
• Inspiraciones de animación de logotipos para hacer que su marca sea más identificable
• Una guía paso a paso para crear videos explicativos de productos animados