Usando iconos animados para mejorar nuestros diseños

Los iconos son una parte esencial de cualquier diseño web. Funcionan bien en solitario, sirven para reforzar y hacer más visible una palabra, o incluso para saber la temática de cierto contenido sin tener que leer el texto completo. Pero hay ocasiones en las que nos pueda parecer que la imagen de un icono estático puede resultar algo aburrida, y que nuestro diseño tendría otro aspecto añadiéndole más dinamismo. Y es aquí cuando entra el uso de los iconos animados.

Pero, ¿a qué nos referimos exactamente cuando hablamos de iconos animados?. Pues podemos estructurarlos en diferentes grupos, según su complejidad:

  • Cambio de color del icono.
  • Cambio de escala/rotación del icono.
  • Transformación parcial o total de la morfología del icono.

Seguro que habéis utilizado alguna de estas, ya que hay algunas muy comunes, como el cambio de color de un icono al hacer hover sobre el mismo. Posiblemente este sea uno de los más sencillos a realizar, y que solo no va a costar hacerlo unas pocas líneas de CSS. Podemos añadirle complejidad y hacer combinaciones entre ellas a nuestro gusto. Pero hablando de esto, es muy importante tener siempre presente hasta donde llegar con nuestros iconos animados.

Consejos útiles

Seguro que habéis escuchado hablar del menos es más. Pues con los iconos animados, deberemos aplicar esta máxima. Atrás quedaron los 90 y sus webs en las que proliferaban los gif animados por toda la pantalla.

A ser posible, vamos a intentar no caer en esto. El contenido debe ser el rey de nuestra web, y los iconos deben servir para potenciar este contenido, no como distracción. Vamos a intentar esquivar la sobre-utilización de iconos (sean animados o no), además de que las animaciones provoquen distracciones para consumir el contenido. La animación debe ser una chispa de aviso en un punto, pero no el foco principal de atención.

Otro tema a tener en cuenta es la duración y el tipo de activación de los iconos animados, que van a definir (y mucho) nuestro diseño. En cuanto a la duración, lo dividiremos en:

  • Animación temporal: el icono tiene un comienzo y un final de su animación, tras la cual volverá a su estado estático.
  • Animación infinita: la animación del icono vuelve a comenzar tras terminar, entrando en un loop infinito. Cuando usemos este tipo de animación, hay que asegurarse que la animación final conecte con la final, para que no se produzcan saltos extraños y vaya todo de forma fluida.

En cuanto a forma en la que se pueden activar los iconos animados:

  • Activación por interacción: el icono empezará su animación al hacer clic o hover sobre él. Necesitamos cierta una interactividad del usuario para que se inicie la animación.
  • Activación al hacer scroll: casi es una subcategoría de la anterior, y es que la animación no comienza hasta que el elemento sea visible para el usuario. Esta animación puede iniciarse de forma inmediata, o tener cierto delay.
  • Siempre activo: La animación comienza desde la misma carga de la web. No necesitamos que el usuario interaccione con nada ni de que empiece a navegar. Suele ser común en elementos que estén en la parte superior de la web, o en fondos.

Tanto el tipo de animación como su activación van a tener una importancia crucial en dos aspectos: peso y velocidad de carga de la web. Si usamos animaciones muy largas, es posible que el peso del archivo sea mayor, o si tenemos muchas animaciones, el tiempo de renderizado de la web también será mayor. Por esto es fundamental ver hasta donde llegar con las animaciones sin que la experiencia del usuario sea se resienta

Tipos de archivos que podemos usar

Los archivos de iconos animados que podemos usar son variados, y el uso de uno u otro van a depender mucho de nuestras necesidades y conocimientos. Veamos algunos de los más comunes y utilizados.

GIF / MP4 / APNG

Lor archiconocidos GIF posiblemente sean de los más usados y más fáciles de encontrar. Y, por supuesto, también los encontraremos en formato icono animado. De hecho, es bastante común crear iconos animados en un programa como After Effects, para luego exportarlo como GIF y que podamos usarlo donde queramos. Otro tipo que podemos usar es directamente un archivo de video como el MP4. Con un poco de conocimientos de HTML, podemos ocultar su barra de reproducción y añadirle ciertos efectos como autoplay o loop infinito. Por último están los más recientes APNG. Son un poco la evolución de los GIF pero, a diferencia de estos, soportan 24 bots de color (por 8 de los GIF) y pueden llevar transparencias. Eso si, todo adolecen del mismo punto débil, y es que no son escalables en tamaño, por lo que habrá que tener cuidado para no perder calidad, y insertarlos en nuestra web a un tamaño y resolución adecuados.

SVG

Los formatos vectoriales como el SVG nos ofrecen muchas ventajas: ocupan poco, son escalables sin perder calidad y podemos insertarlos directamente en el HTML. Pero además, si tenemos conocimientos de CSS y/o JS, podemos animar un SVG. No es la opción más sencilla de insertar, ya que será necesario escribir código, pero es una de las mejores.

icono animado en la web de microsoft rewards
Icono SVG animado en la web de Microsoft Rewards

JSON

Un punto intermedio es utilizar frameworks JS, como por ejemplo Lottie. Solo tendremos que añadir un script, configurar la animación del icono de forma visual en un generador visual, y pegar el código HTML resultante. Tendremos la ventaja de los SVG, con la sencillez de inserción de un formato como el GIF. Si entráis en el sitio de Lottie, podréis ver todas las opciones que nos ofrece.

webd e lottie

Bibliotecas online de iconos animados

Si no tenemos tiempo o ganas de crear nuestros iconos animados, siempre podemos recurrir a bibliotecas web, tanto gratuitas como de pago. Veamos dos de mis favoritas.

Icons8

En Icons8 tenemos más de 3700 iconos animados, tanto gratuitos como de pago, en diferentes estilos: de color, iOS, Windows… Están disponibles en formato GIF, After Effect y JSON para Lottie.

Flaticons

 

Con multitud de formatos de archivos (GIF,MP4, PNG, SVG, After Effects, JSON…) y más de 1800 iconos, Flaticon es una gran opción para encontrar iconos animados. Eso si, tienen un estilo muy particular, en negro con un color para acentuarlo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *