Lo que debes y no debes hacer cuando agregas animación a tu página web
¿Animar o no animar? Esa es la cuestión cuando de trata de crear una página web. Los defensores de la animación en diseño web te dirán que inyecta sentido de movimiento, generando una experiencia de usuario dinámica y fluida. Y no sólo eso, la animación ha sido una de las principales tendencias de diseño web en los últimos años, lo que significa que tus visitantes esperarán ver efectos animados al entrar en tu página. Los menos entusiastas, por otro lado, argumentarán que la animación distrae y hasta puede parecer poco profesional a los ojos de muchos espectadores.
Entonces, ¿quién tiene razón en este debate? Realmente, ¡ambos! La verdad es que las animaciones pueden ser un complemento maravilloso para la apariencia de una página web, siempre y cuando se trabaje de la manera correcta para que se ajuste a los objetivos de la web. Aplicar animaciones sin sentido a tu esquema de diseño web puede ser una verdadero desastre – ¡y nadie quiere eso! Es por eso que hemos preparado una guía sobre lo que hacer y lo que no hacer para agregar animación a tu web de manera exitosa.
Ponte al día con los fundamentos de la animación.
Primero, recuerda que las animaciones vienen en muchas formas y formatos. Pueden ser tan sutiles como un ligero movimiento de un botón o pueden ser tan espectaculares y llamativas como un fondo completamente animado. La animación se puede configurar como reacciones interactivas al comportamiento de tus visitantes (como elementos que aparecen a medida que te vas desplazando por la web), o pueden ser independientes a las acciones de los visitantes. Se puede aplicar a elementos pequeños, como una flecha, o a elementos grandes como un fondo de video que ocupa toda la pantalla. Comprender el espectro completo de las capacidades de animación te ayudará a usarlas de una manera más estratégica.
En Wix, cuando nuestros diseñadores crean plantillas y páginas web, dividen las animaciones en tres categorías:
Interacciones micro: se utilizan para hacer que las interacciones pequeñas (como hacer clic en un botón) sean rápidas y claras para el usuario. Esto se puede lograr mediante el uso de efectos de caja interactiva.
Transiciones y comportamiento de la página: para facilitar la navegación de un punto a otro y para cambiar de una página a otra.
Hermosas y decorativas: para darle un toque especial a tu diseño como el desplazamiento de paralaje.
La moderación es una fuerza, no una debilidad.
Cuando se trata de animación, como con todas las cosas buenas de la vida (incluidos comer helados y ver “La Casa de Papel”), la moderación es la clave. No solo es recomendable, sino casi obligatorio abstenerse de cargar a pantalla con una sobredosis de animación. Por un lado, no querrás que tu página sea sea demasiado pesada y sobrecargar su rendimiento. Además, que podrías distraer a los visitantes con tanta acción. Mantener las cosas ligeras asegurará que sus visitantes disfruten de una experiencia de navegación placentera y sigan el flujo de tu página web.
Una y no más (…Santo Tomás)
Otra excelente regla para mantener una relación saludable con la animación es usarla solo cuando puedas justificarla con un propósito definido. En otras palabras, las animaciones deben realizar una función, por ejemplo:
Guiar el movimiento de la página mostrando a los visitantes cuándo desplazarse y dónde hacer clic.
Complementar la “historia” de tu página haciendo aparecer gradualmente los elementos.
Darle mayor visibilidad a tu producto o servicio.
Romper el desplazamiento estático de la web con un poco de movimiento.
Crear una atmósfera particular en páginas web que son especialmente adecuadas para el contenido animado, por ejemplo, una tienda online de ropa de niños.
¿Puedes justificar la aplicación de animación con uno de estos usos? ¡Genial! ¡Entonces estás listo para empezar! (No te olvides de la moderación).
Qué debería ser animado (y qué no)
Algunos elementos comunes de las páginas web funcionan bastante bien con las animaciones, mientras que otros realmente no lo hacen. Enfoca tu energía en el primer grupo:
Todo lo que activan un comportamiento (botones de navegación, llamadas a la acción (CTA) o imágenes vinculadas)
Elementos que dan direccionalidad (flechas, desplazamiento de fondo).
Barras de carga
Elementos destinados a llamar la atención (icono de nuevos mensajes, ventanas, botón de compra).
Los casos en que no se debe usar animaciones son aquellos en los que dicho efecto animado dañará de alguna manera la funcionalidad del elemento. Por ejemplo, no debes agregar animación a párrafos de texto porque dificultará su lectura. Tampoco deberías agregar animaciones a los espacios donde los visitantes ingresan su propio contenido (como un formulario de contacto o comentarios), ya que esto les distraería de completar la tarea.
Simplifica el contenido
Una excelente estrategia para integrar la animación en el diseño web es utilizarla como una herramienta para aclarar o simplificar el contenido. Digamos que quieres explicar a los visitantes de tu página cómo funciona tu empresa de embalaje y mudanzas. Puede describir el proceso completo en un par de párrafos, puedes crear una tabla con viñetas o puedes simplificar la información utilizando unos cuantos elementos visuales que animen los pasos clave. Transmitir información de esta forma se conoce como onboarding. Es una técnica de diseño que generalmente combina texto simple con imágenes animadas, creando un método intuitivo y atractivo para guiar a la audiencia en el uso de tu producto.
La audiencia importa
Siempre es importante pensar en el público objetivo y ser sensible a sus necesidades. Esto cobra mayor importancia cuando se trata de animación. Ten en cuenta sus preferencias estéticas, las razones por las que visitan tu página web, así como su nivel de conocimiento técnico.
Para hacerlo un poco más difícil todavía (pero solo un poco), si tu público objetivo está realmente interesado en los esquemas de color monocromáticos; o si los visitantes están interesados en tu web porque quieren obtener asesoramiento legal; o si sospechas que muchos de ellos accederán a su página a través de una versión anterior del navegador en un sistema operativo obsoleto, entonces puede asumir que las animaciones no son la opción correcta en tu caso.
¿Listo para crear el diseño más hermoso? Aplica tus dotes creativas y ¡crea una página web con Wix!
Publicado por Equipo Wix
