UX/UI

La magia de la animación web

Publicado por
Javiera Montenegro
La magia de la animación web
Escrito por
Javiera Montenegro
Publicado en
April 9, 2024
Tiempo de lectura
Categoría
UX/UI

La animación está en todas partes. Ya sea un anuncio en la calle, en la tv, en las redes sociales, en todo. Somos constantemente atacados con imágenes en movimiento que intentan captar nuestra atención.

Es así como páginas webs, empresas y personas intentan vendernos sus productos o servicios. Para ello necesitan capturar y mantener nuestra atención. Y una forma de poder aumentar la conversión es la animación web.

Un poco de historia

Animación proviene del latín <Anima>que significa "alma". Por lo tanto, la animación es el intento de darle vida a elementos estáticos.

animacion-disney

En el inicio en las páginas web todo era estático y aburrido. Era bastante difícil adherir algo que no fuera una imagen para poder resaltar algo, ya sea por el ancho de banda o por las dificultades técnicas de esa época.

Pero el deseo de querer avivar y dar dinamismo a las webs era muy fuerte. Fue así como en 1995 la primera página web en adherir un gif animado, fue la web de Batman Forever de Jeffrey Zeldman.  

Esta página fue muy popular en su época, lo que sirvió de inspiración para que diseñadores y desarrolladores integraran gifs como algo llamativo en sus páginas.

web de Batman Forever de Jeffrey Zeldman

Con el tiempo, las herramientas para la creación de animaciones web han ido cambiando. Pasando por Flash, el cual fue lanzado en 1996 por Macromedia (anteriormente SmartSketch), hasta nuestros días, donde la utilización de medios tales como HTML5, CSS3, JavaScript y SVG predomina. Esto se debe a la gran cantidad de dispositivos nuevos que existen hoy en día, por lo tanto, el cuidado que hay que tener con el responsive de las páginas.

attach icon
Adjuntar archivo
máximo: 10MB
Descarga el archivo haciendo click en el botón
Click aquí
¡Ups! Algo salió mal al enviar el formulario.

Crea tu propio manual de marca con esta plantilla gratuita.
¡Organiza tus activos de diseño de forma más eficiente!

Es
Eng