La creación de una experiencia de usuario es a la vez arte y ciencia. Diseñar una impresionante página de aterrizaje para un sitio web o una aplicación web requiere tanto una identidad visual, diseño y usabilidad para que los visitantes comprendan la información y completen las tareas. La animación proporciona un nivel extra de delicadeza y diseño que permite que la experiencia se construya – ser coreografiado en una secuencia o revelado añadir énfasis y estilo. Varias técnicas como las animaciones GIF, el vídeo incrustado y Flash tienen ciertas limitaciones. Ingresa HTML5. El lienzo de HTML5 con JavaScript y CSS3 proporciona un método basado en estándares web para incluir la animación que es ligera y funciona con los navegadores móviles.
Índice de contenidos
La evolución del contenido de Flash
Cuando Flash se hizo popular por primera vez, muchos sitios web incluyeron un «Flash Intro» que comenzaba con un cargador de progreso y un botón de «saltar introducción». Diseñadores más sofisticados usaron cookies para evitar que el espectador tuviera la introducción en visitas posteriores. Con el tiempo, la introducción en Flash se extinguió y le siguieron los banners en Flash, las animaciones en Flash incrustadas y las aplicaciones en Flash. Las limitaciones de los plugins de Flash, incluida la incapacidad de los motores de búsqueda para indexar el contenido, obligaron a los desarrolladores a mantener un contenido alternativo.
El móvil mata al Flash
La falta de soporte de Flash player en ciertos teléfonos inteligentes y tabletas (gracias Apple) ha hecho que Flash sea prácticamente ilegal en el mundo del marketing. Las investigaciones predicen que el uso de tabletas casi se duplicará a principios de 2021. Mientras que las tabletas Android y Blackberry apoyarán a Flash, la investigación muestra que casi el 89% del tráfico mundial de tabletas proviene del iPad.
HTML 5 ofrece una nueva forma de crear animación
Hace poco fui testigo de mi primera animación introductoria en HTML5 en el sitio web de Magento (puede o no estar aún disponible). Es sutil, de buen gusto, revelando logotipos de clientes y su corto y final desvaneciéndose en la página principal.
Cómo crear una animación HTML5
Entonces, ¿cómo puedes coreografiar la animación de los ricos gráficos? La animación en HTML5 (más HTML, CSS3, Javascript, etc.) requiere un talento tanto de programación como artístico, muy raro en la misma persona. Aparte de ser un mago de JavaScript/HTML5 hay una forma de hacerlo sin conocimientos de programación (aunque eso no duele). Si estás familiarizado con la animación de gráficos en movimiento, CGI, animación Flash, aquí hay algunas aplicaciones que te ayudarán a empezar a crear animaciones.
Hype es una nueva herramienta de animación HTML5 para Mac (disponible en la Mac App Store) creada por dos antiguos empleados de Apple, Jonathan Deutsch y Ryan Nielsen. Hype puede grabar y reproducir automáticamente los cambios de un usuario, o los usuarios pueden reorganizar manualmente los fotogramas clave. Soporta múltiples líneas de tiempo (útil para animaciones basadas en eventos de ratón o teclado), y utiliza transiciones CSS3 (o JavaScript como alternativa). Los usuarios pueden crear un número ilimitado de escenas, y los cambios en el HTML interno se renderizan sobre la marcha para una vista previa en vivo. Viene con un completo Javascript API para la codificación de funciones personalizadas.
¿Ya tienes Flash? Convierte a HTML5
Swiffy de Google Labs convierte los archivos SWF de Flash a HTML5, lo que permite reutilizar el contenido de Flash en dispositivos sin un reproductor de Flash (como iPhone y iPads).
Actualmente, Swiffy es compatible con un subconjunto de SWF 8 y ActionScript 2.0, y la salida funciona en todos los navegadores Webkit como Chrome y Mobile Safari. Si es posible, la exportación de la animación Flash como un archivo SWF 5 podría dar mejores resultados.
Conclusión
Proporcionar una rica experiencia con un sutil movimiento coreografiado y un contenido secuencialmente revelador es una gran manera de añadir estilo y clase a su mensaje y delicadeza a su experiencia de marca en general. Los diseñadores web de Leovel ya no están obligados a mostrar gráficos estáticos como el primer impacto visual que tienen en los espectadores. Poner un énfasis extra en la palabra «sutil» – no hay necesidad de revivir el botón de «saltar la introducción». Un diseñador, animador o programador experto con un sólido sentido de diseño puede aprender rápidamente a crear una animación HTML5.