Cuando tiene sentido usar animaciones en el diseño web

Uno de los errores más comunes que cometen los diseñadores web es incluir demasiados elementos animados. Pensar dice: “Las animaciones son geniales, así que cuanto más, mejor”. Sin embargo, demasiado bueno, como este, puede afectar negativamente su sitio web. Las animaciones, como cualquier otro elemento web, deben cumplir con un propósito práctico. En este artículo, hablaremos sobre algunos de los tipos más comunes de animaciones que puede esperar ver en línea. Luego desglosaremos cuatro situaciones en las que se justifica el uso de animaciones en sus proyectos.
¡Vamos a ver! Una introducción a las animaciones en las animaciones de diseño web está en todas partes en la web, incluso si a veces no te das cuenta. En el pasado, las animaciones eran mucho más pronunciadas. Por ejemplo, no era extraño encontrar sitios web completos que se ejecuten en el flash, donde cada elemento ha sido animado. Afortunadamente, esos días oscuros están detrás de nosotros. Hoy en día, está mucho más acostumbrado a hacer que las animaciones sean parte de un diseño general, pero no una pieza central. Uno de los ejemplos más comunes de animaciones en la web son las transiciones en galerías deslizantes. Otras animaciones son aún más sutiles. Por ejemplo, los botones que cambian los colores cuando pasa con el mouse sobre ellos:

Otro ejemplo de animaciones simples que cumplen con un objetivo son los campos que se destacan al hacer clic. De esta manera, siempre sabes en en qué área ingresas:

Sin embargo, no todas las animaciones web son tan benignas. Todavía hay muchos ejemplos que ofrecen más flash que una sustancia (como sitios web que lo secuestran, por ejemplo). En nuestra opinión, es completamente posible construir un sitio web completo sin usar animaciones, por lo que si elige agregarlas, debe cumplir con un objetivo. Es decir, deben hacer que su sitio web sea más fácil de usar, como prácticamente todos los exámenes mencionados anteriormente. Sin embargo, muchas personas caen en la trampa del deseo de animar todos los aspectos de su sitio web solo para agregar un aspecto visual. No hay nada de malo en el deseo de un sitio web elegante. Sin embargo, demasiadas animaciones pueden causar una sobrecarga visual. En algunos casos, incluso pueden ralentizar su sitio, dependiendo de cómo los implementen, que desea evitar a cualquier precio. Dado esto, hablemos de algunas situaciones en las que tiene sentido el uso de animaciones en el diseño web. 4 situaciones en las que tiene sentido usar animaciones en el diseño web Retener: esta no es una guía definitiva para situaciones en las que puede usar animaciones en el diseño web. Es solo una colección de sugerencias nacidas de nuestra experiencia. Si hay otra situación en la que cree que las animaciones pueden mejorar su experiencia de usuario, ¡no dude en probarlas!
1. Destaca las acciones usando “microinteracciones”
Las animaciones no tienen que ser brillantes para ser efectivas, de ahí el término microtiratos.

Cuando hablamos de microinteracciones, nos referimos a animaciones simples con casos de uso único. Tome el ejemplo anterior, donde el botón que elija resaltara al hacer clic en él. Este tipo de animación cumple con dos propósitos, le brinda comentarios visuales cuando interactúa con un elemento y le proporciona cómo usarlo. Idealmente, desea que las microinteracciones sean sutiles. No debe robar la luz de los reflectores en los elementos que destacan, sino simplemente hacerlos más fáciles de usar. Sin embargo, puede ser difícil determinar al implementar micro-instancias en su sitio después de todo, incluso la página más simple tiene docenas de elementos que puede animar. Aquí hay algunos consejos rápidos por el momento en que tiene sentido implementarlos: resaltar cuando activa o desactiva una función.
Como una forma de anunciar a los usuarios que una cierta acción fue un éxito, como enviar un mensaje a través de un formulario de contacto.
Al resaltar cierta información, como los precios en una tabla.
Para animar íconos en su sitio.
Con respecto a la implementación de microinteracción, puede ser difícil si no conoce el camino alrededor de las hojas en cascada (CSS). Sin embargo, DIVC le ofrece opciones construidas para animar muchos de los elementos en prácticamente cada módulo. Incluso hablamos sobre seis tipos de microinteracciones que puede implementar utilizando el tema.
2. Muestra los menús ocultos que utilizan animaciones de menús ocultos son elementos de diseño algo controvertidos. Muchas personas creen que los menús siempre deben ser visibles porque estas son la principal forma en que los usuarios navegan a través de su sitio web. Tendemos a estar de acuerdo, pero en algunos casos, los menús ocultos tienen sentido si son fáciles de acceder. También puede usar gotas animadas si trabaja con una gran cantidad de páginas. En ambos casos, el uso de animaciones tiene sentido, porque ayuda a aliviar la divulgación del menú oculto. Sin ellos, los menús aparecerían instantáneamente en la pantalla, lo que puede ser demasiado repentino.
En cuanto a la forma de agregar animaciones a sus menús, DIV incluye más opciones que puede usar. Por ejemplo, puede elegir entre decoloración, extensión, deslizamiento y animaciones de volcado para menús de caída:
También tienes más opciones cuando se trata de menús ocultos. Por ejemplo, puede configurar un menú “hamburguesa” con un revelador deslizante, que puede crear modelos muy limpios:

Independientemente del tipo de animación que elija implementar, recuerde que debe probarla tanto en escritorios como en dispositivos móviles. Los menús son una parte esencial de su sitio web, por lo que debe asegurarse de que las animaciones no interfieran con su funcionalidad.
3. Mostrar información oculta utilizando animaciones hover

Las animaciones simples con Mouse son una excelente manera de incluir más información en espacios más pequeños.

Las animaciones del mouse son una excelente manera de maximizar la información que proporciona en el espacio disponible. Por ejemplo, puede agregar efectos con el mouse a los elementos en la galería que le muestra el nombre de cada imagen o la fecha en que se hicieron. La clave con las animaciones en la carrera es agregar información que sus visitantes estarán interesados ​​en leer. Por ejemplo, con Divi puede crear una sección para presentar a los miembros de su equipo y agregar biografías que se muestran cuando las personas cruzan el mouse sobre sus imágenes: si desea mantener las cosas simples, también puede usar animaciones de mouse como microinstrucción . De esta manera, cuando los visitantes pasen por el mouse sobre un elemento, sabrán que “funcionan” o se tienen una idea de cómo usarlo. Ambos tipos de animaciones con flotación requieren el uso de una imagen de CSS. Sin embargo, se implementan fácilmente y pueden agregar cierta profundidad a otros sitios web simples. 4. Cree galerías deslizantes usando transiciones
Las galerías deslizantes son elegantes y le permiten contar una historia.

De todas las formas de agregar animaciones a su sitio, las galerías deslizantes son probablemente una de las más comunes. De hecho, la mayoría de las personas probablemente no se dan cuenta de que miran animaciones simples cuando se deslizan de una imagen a otra.
Sin animaciones, las transiciones entre imágenes serían instantáneas, lo que puede ser inquietante. En esta situación, las animaciones están en gran medida relacionadas con el estilo, pero pueden hacer que sus galerías sean más fáciles de usar. Hay muchos complementos que puede usar para agregar galerías animadas a WordPress, cada una con su propio conjunto de efectos. Sin embargo, si usa DIV, no debe agregar ningún complemento adicional. El módulo Slider Divi le permite agregar galerías deslizantes a cualquiera de sus páginas, así como personalizar sus transiciones: la mayoría de los sitios web usan “deslizándose” en la parte superior de sus páginas. Sin embargo, puede romper el molde y usar galerías deslizantes en muchas otras situaciones, como mostrar testimonios de sus productos. Cuando se trata de diseño web, desea que cada artículo que agregue en sus páginas para cumplir con un objetivo más allá de verse bien. Además, debe tener en cuenta que las animaciones pueden retrasar su sitio, lo que desea evitar. Si desea usar bien sus animaciones web, aquí hay cuatro escenarios en los que es lógico implementarlas:

Resaltar acciones usando microinstracciones.

Revelar menús ocultos usando animaciones.
Muestre información oculta con animaciones con el mouse.
Crea galerías deslizantes usando transiciones.

¿Tiene alguna pregunta sobre cuándo se usa animaciones en el diseño web? ¡Pregunte en la sección de comentarios a continuación! Miniatura de la imagen del artículo de Olha Chernova / Shutterstock.com.