La guía completa de diseño de animación web

Lo creas o no, no tienes mucho tiempo para convencer a los visitantes de tu sitio para que se queden. Tu ventana es en realidad mucho más corta de lo que crees.

En esencia, toma solo 0.05 segundos Después de que su página cargue para que los visitantes formen una opinión. Más específicamente, eso se traduce a milisegundos 50. Sorprendentemente corto, ¿verdad?

Ok, algunos de ellos se irán. Pero otros pueden optar por quedarse.

Luego viene la etapa de impresión, que básicamente dura solo 10 segundos. Si su sitio no puede administrar uno sólido, perderá la mayor parte de su tráfico incluso antes de que comience el proceso de conversión. Solo proceden a golpear los botones de atrás o cerrar.

Y si tenía alguna esperanza de recuperarlos, aquí está la dura verdad. 88% de ellos No es probable que vuelvan a un sitio web después de una mala experiencia.

Pero espera un minuto. ¿De quién es el trabajo de retener el tráfico web una vez que llegan al sitio?

Ok, por supuesto, es natural culpar al administrador de contenido del sitio. Y quizas tengas razon. Pero solo en parte.

Resulta que todo comienza con el diseñador web. De hecho, un estudio que examinó ampliamente una amplia gama de comentarios de los consumidores estableció que 94% de los negativos. fueron relacionados con el diseño.

¿Qué significa esto?

Para empezar, no hay escapatoria a esto. La responsabilidad principal recae en usted. Además de implementar todas las mejores prácticas de diseño que hemos cubierto en nuestras piezas anteriores, tiene que usar un sombrero de relaciones públicas y considerar los elementos que se conectan de manera efectiva con el tráfico.

Estoy hablando de cosas como animaciones web.

¿Y por qué estamos sugiriendo específicamente eso?

Bueno, eso es algo que voy a revelar en breve. Esta guía lo guiará a través de todos los aspectos críticos de las animaciones web. Pero primero, vamos a explorar lo básico ...

Los fundamentos de las animaciones web

Imagina a tu personaje de dibujos animados favorito paseando por la pantalla. O tal vez el logotipo de su teléfono aparezca en la pantalla cuando reinicie el dispositivo. ¿Qué tienen en común?

Bueno, ambos son ejemplos básicos de animaciones.

La animación ocurre esencialmente cuando un elemento fijo es "traído a la vida". Entonces comienza a exhibir alguna forma de movimiento.

No sabemos exactamente cuándo comenzó esta práctica. Pero, tenemos una idea de que el primera pelicula animada En la historia se hizo hace más de un siglo. La tendencia se ha desarrollado bastante desde entonces, gracias a los avances progresivos en tecnología.

Sin embargo, una cosa ha permanecido constante: los principios de la animación. De hecho, Ollie Johnston y Frank Thomas, de Disney, más tarde escribieron sobre ellos en su libro, "La ilusión de la vida: animación de Disney". Aquí está la lista completa:

  • Apelar
  • Dibujo sólido
  • Exageración
  • Sincronización
  • Acción secundaria
  • Arco
  • Lento y lento
  • Acción de seguimiento y superposición.
  • Acción recta y pose para posar.
  • Puesta en escena
  • Anticipación
  • Compresión y extensión

Los doce aún proporcionan el marco para el diseño de animaciones en la actualidad, incluidos los publicados en la web como videos, WebGL, SVG, CSS y GIF.

Ahora, las animaciones web pueden ser tan simples como un resaltado que se muestra cuando pasas el cursor sobre una letra, a una compleja serie de videos de pantalla completa de múltiples capas. En otras palabras, puede adoptar un enfoque sutil, o elegir hacer todo lo posible con animaciones dominantes que gritan para llamar la atención. Todo depende de la situación.

Y eso plantea la pregunta: ¿cuándo se supone que debes usar las animaciones?

¿Cuándo debería utilizar animaciones web?

Por supuesto, son lindos. Y ciertamente serían adiciones interesantes para el diseño de su sitio.

¿Pero sabes que? Sus niveles de eficacia posteriores son una cosa totalmente diferente. Por lo tanto, no hace falta decir que las animaciones no son adecuadas para todos los proyectos de sitios web. Y lo más importante, sería una mala idea adoptarlos al azar.

Da la casualidad de que 46% de consumidores online juzgar la credibilidad de un sitio en función de su atractivo visual general y estética. Simplemente no puede permitirse comprender eso con un marco de animación mal diseñado. Al mismo tiempo, sería desafortunado perder constantemente las oportunidades de conversión de oro al no capitalizar las animaciones.

Entonces, ¿cuándo deberías aprovecharlos?

Bueno, aquí está la cosa. Las animaciones web son principalmente ideales cuando necesita aumentar la facilidad de uso al llamar la atención o ayudar a los usuarios con el proceso de navegación.

¿Cómo?

En general, toma 2.6 segundos para que los ojos de un visitante aterricen en la sección del sitio web que influye principalmente en su primera impresión. Sin embargo, el uso hábil de una animación puede acelerar las cosas al atraer de inmediato su atención a las áreas más críticas del sitio.

Las animaciones también son útiles cuando se busca dirigir a los usuarios a través del embudo de conversión. Una forma animada emergente, por ejemplo, sería una estrategia inteligente para construir listas de correo. Luego, cuando se trata del proceso de compra, puede considerar incrustar videos. Han sido probados para convencer 73% de los compradores Para proceder y comprar un producto o servicio.

Por último, puede utilizar animaciones web únicamente con fines estéticos. Una animación decorativa que sea fluida y sin problemas puede mejorar el atractivo visual general de manera bastante significativa, y en consecuencia establecer una conexión emocional entre los usuarios y la interfaz. Y así es como se llega a aumentar progresivamente los niveles de compromiso del usuario.

Herramientas de animación web

¿Listo para empezar a crear animaciones web? ¡Perfecto! Pero, ¿dónde debería empezar?

Bueno, ¿qué hay de buscar una herramienta robusta para convertir tus ideas en animaciones reales? Afortunadamente, hay una amplia gama de opciones ordenadas en la web, que están bien optimizadas para varios usuarios y diferentes tipos de animaciones. Lo que elija para sus proyectos dependerá de sus habilidades, objetivos principales, presupuesto y el tipo de sitio en el que está trabajando.

Dicho esto, aquí hay algunos ejemplos destacados, cada uno con su propio caso de uso único:

  • js
  • Animación de líneas 3D con Three.js
  • js
  • Flubber
  • Animación de color
  • jqclouds
  • Scrollissimo
  • Animación cel
  • js
  • js
  • CSS3 Animación
  • Transformar cuando
  • js
  • Rellax
  • A
  • js
  • Scroll Trigger
  • Scrollanim
  • js
  • js
  • js
  • js
  • Foxholder
  • Animatelo
  • css
  • Animista
  • js
  • CAAT
  • AnimateMate
  • js
  • Stylie
  • GFX
  • js
  • js
  • js
  • jQuery DrawSVG
  • Ramjet
  • Golpe
  • Mezclar
  • css
  • css
  • js
  • Ceaser
  • CSSynth
  • Azafrán
  • CSShake
  • css
  • js
  • Rocket
  • Tránsito
  • css
  • js
  • Popmotion
  • GSAP por GreenSock
  • js
  • js
  • CSS animar
  • Es martes
  • Sospechoso
  • js
  • js
  • js
  • js
  • js
  • ¡Espere! Animar
  • Interfaz de usuario de movimiento
  • js
  • Pintor de línea perezoso
  • js
  • js
  • js
  • AnijS
  • js
  • Animaciones magicas
  • css

Diseño de animaciones web

Efectos de la libración

Las animaciones de Hover son, sin duda, algunas de las más simples en la web. Vienen a la vida y resaltan los elementos seleccionados cuando el puntero se mueve sobre ellos. La animación en sí puede ocurrir en varias formas, como cambiar de tamaño o cambiar de color.

El truco aquí es adoptar los efectos con moderación. De lo contrario, corre el riesgo de resaltar demasiados elementos, lo que podría confundir a los usuarios.

También es recomendable mantener alguna forma de acuerdo con la metodología en todo el sitio. Si los botones de la página de inicio cambian de verde a rojo, por ejemplo, use el mismo marco para resaltar más en otras páginas web.

Animaciones de fondo

Incrustar una animación de fondo es una estrategia efectiva para agregar emoción y vitalidad a su página web sin interferir necesariamente con el énfasis principal. Puede usar cualquier cosa, desde videos hasta imágenes sutiles que se mueven secuencialmente.

El mejor enfoque aquí es mantener las cosas estructuradas y simples. Si elige integrar un video, acórtelo en consecuencia y mantenga un bucle que sea relevante para su sitio. Luego, asegúrese de que los movimientos sean lo suficientemente sutiles para atraer la atención sin abrumar a los usuarios.

Animaciones de estilo GIF

Vale la pena considerar un GIF si está particularmente interesado en una animación que es excepcionalmente fácil de configurar. Una típica puede ser algo así como cambiar de texto o un payaso sonriente incrustado en el diseño de su contenido.

Todo lo que necesita hacer es idear una idea sólida, obtener un video o imagen relevante y luego convertirlo en un GIF perfecto utilizando un software de edición adecuado. Cargar la creación resultante en formato GIF genera una animación similar a un video que se carga tan rápido como una imagen pequeña.

Animaciones transicionales

Las animaciones de transición se utilizan para introducir vigor cuando los usuarios se mueven de una sección del sitio a otra. Son similares a las animaciones de diapositivas que aparecen cuando se mueve de una diapositiva a la siguiente.

Créditos de las imágenes: Shutterstock

Para un resultado perfecto, asegúrese de que las animaciones sean fluidas y consistentes en todo el sitio. También deben ser lo suficientemente cortos como para no retrasar el proceso de transición real.

Cargando animaciones

La verdad es- 47% de consumidores online espere que sus páginas web se carguen en al menos 2 segundos. Si no logra esto, cada segundo adicional se traduce a 7% menos conversiones.

Pasando por el tiempo de carga promedio actual de 22 segundosEs bastante evidente que cumplir con la expectativa de 2-Second es bastante difícil. Sin embargo, puede salvar una gran parte del tráfico manteniéndolos ocupados con animaciones mientras otros elementos del sitio continúan cargando.

Céntrese en crear simples que sean lo suficientemente livianos como para cargar casi inmediatamente el tráfico que se redirige a su sitio. Deben estar diseñados para introducir sistemáticamente a los visitantes a la marca y al tema general del sitio web.

Animaciones activadas por desplazamiento

Los estudios de seguimiento ocular han establecido que los usuarios de sitios web gastan 57% de su tiempo arriba del pliegue.. Pero, resulta que muchos de ellos están dispuestos a desplazarse hacia abajo, siempre que proporcione una estructura y un mecanismo de diseño favorables.

Y ahí es precisamente donde entran las animaciones activadas por desplazamiento. Se activan de inmediato, los usuarios comienzan a desplazarse para crear la ilusión de una página fluida e interminable. Es una forma inteligente de eliminar las transiciones que de otra manera desalentarían el desplazamiento.

Navegación y animaciones de menú

Seamos honestos. Las opciones de menú ocupan una gran cantidad de espacio en la pantalla, especialmente en sitios holísticos y con múltiples niveles de selección. Afortunadamente, puede sacar provecho de las animaciones para ocultar las opciones, y luego revelarlas solo cuando un usuario hace clic o se cierne sobre los botones correspondientes.

Este tipo de animación también simplifica y simplifica el proceso de navegación al comprimir toda la estructura en opciones de menú conectadas visualmente. El marco debe diseñarse con segmentos de submenú que se abren sistemáticamente cada vez que un usuario hace clic o apunta a las opciones del menú de superposición.

Galería y presentaciones de diapositivas

Tal vez no sea sorprendente, la lapso de atención promedio de los seres humanos Es 8 segundos, al menos según un estudio reciente realizado por Microsoft. Incluso un pez de colores es capaz de permanecer atento durante más tiempo que un individuo típico. Por lo tanto, puede apostar a que la mayoría de los visitantes de su sitio no serán lo suficientemente persistentes para hacer clic en todos los elementos de la galería.

¿Pero adivina que? Puede aprovechar inteligentemente las animaciones de galería y presentación de diapositivas para mostrar automáticamente numerosas imágenes, sin forzar necesariamente a los usuarios a navegar a través de ellas.

Lo más importante aquí es el tiempo de visualización de la imagen. Las pantallas cortas con transiciones rápidas se sentirían apresuradas, mientras que las pantallas largas con transiciones lentas resultarían aburridas y lentas. Con esto en mente, diseñe el diseño general para mostrar cada imagen durante unos segundos de 5 a 8, antes de pasar rápidamente a la siguiente.

Conclusión

En resumen, debe analizar las animaciones en función de cuánto mejoren posteriormente la experiencia del usuario. Una excelente debe activar una conexión emocional de los usuarios o facilitar el proceso de navegación. Una perfecta, por otro lado, debería ser capaz de lograr ambas cosas cómodamente al mismo tiempo.

Para lograrlo, tómese su tiempo para evaluar críticamente todos los parámetros relevantes a medida que diseña e incrusta animaciones en su sitio. Y recuerde, sea sencillo, ligero y bien alineado con su marca.

imagen del encabezado cortesía de Alfrey Davilla | vaneltia

Bogdan Rancea

Bogdan es miembro fundador de Inspired Mag, habiendo acumulado casi 6 años de experiencia durante este período. En su tiempo libre le gusta estudiar música clásica y explorar artes visuales. También está bastante obsesionado con los fixies. Ya es dueño de 5.