Lo que necesitas saber para realizar animaciones para web

     

La animación es una de las tendencias más fuertes para diseño web porque es un recurso que resalta la interactividad y hace más atractivo al sitio, pero no es útil para toda la web. Elegir el recurso de la animación debe considerarse cuidadosamente, pues entre los factores que intervienen está la historia y la personalidad del sitio.

La animación a gran escala, se utiliza como una herramienta de interacción primaria para tener más impacto en los usuarios, e incluyen efectos como scroll parallax que es cuando entras en una web, empiezas a navegar en ella y de repente el fondo parece moverse a una velocidad distinta que el contenido, creando un ligero efecto de profundidad y dejando ver partes que antes no veías. Las animaciones a gran escala también se usan para notificaciones emergentes.

Cuando son a pequeña escala, incluye herramientas de libración, barras de carga y no requieren ninguna intervención del usuario.

Algunas técnicas de animación que puedes usar efectivamente para web, son:

  1. Animación de carga: se utilizan para entretener a los usuarios durante la carga, pero pueden ser tediosas. Es popular en el flat design, portafolios y otros sitios. No deben contener sonido.
  1. Navegación y menús (nonscrolling): los menús de navegación ocultos se han popularizado, pues permiten ahorrar espacio en pantalla.
  1. Animación al pasar el mouse: el llamado efecto mover da una sensación más intuitiva a un sitio cuando los mueven el cursor sobre el contenido. Da una sensación de flotar sobre ellos para una retroalimentación automática.
  1. Galerías y presentaciones de diapositivas: son una forma efectiva de mostrar varias imágenes sin sobrecargar a los usuarios. Son ideales para sitios de fotos, presentaciones de productos y carteras.
  1. Animación en movimiento: es una herramienta perfecta para llamar la atención del usuario. Esta técnica puede ayudar con la jerarquía visual y añadir interés al sitio.
  1. Desplazamiento: el scrolling se basa en la animación y da más control al usuario, quien puede determinar el ritmo de cómo se desarrolla la animación.
  1. Animaciones de fondo: un fondo animado simple puede añadir visibilidad a un sitio, pero debe usarse con moderación o puede ser muy molesto para el usuario. La clave es trabajar en secciones individuales.

La animación de carga y en movimiento son perfectas para tus banner en web, trata de colocar en ellos poco texto y que las animaciones no pasen a una velocidad muy rápida para que el usuario tenga la posibilidad de leer. Incluye siempre un call to action o llamado a la acción en tus banner, invita a los usuarios a hacer clic y envíalos a tu landing page (o página de aterrizaje) optimizada.

Esperamos que con estas técnicas te atrevas a explotar tu creatividad y crear animaciones geniales para la web, lo último que te recomendamos es que siempre pienses en responsive para esto, así harás tu trabajo perfecto para cualquier plataforma.

Adicionalmente, te invitamos a descargar este diccionario con términos de diseños que te será muy útil:

También te puede interesar:

Deja un comentario

Tu dirección de correo electrónico no será publicada.