Los principios de la animación clásica aplicados al diseño web

Te proponemos seis principios básicos para dar vida y realismo a la hora de crear animaciones para tu web.

En el post "Mejora tu diseño con efectos y animaciones web", hablábamos de las diferentes tipologías de animaciones para web y los formatos más utilizados. Sin embargo, el mundo de las animaciones es enorme y en este artículo os proponemos adentrarnos un poco más en él.

Hace 40 años, en 1980, Frank Thomas y Ollie Johnson, trabajadores de Disney que formaban parte del prestigioso grupo de los 'Nueve ancianos' (Disney's Nine Old Men) redactaron los 12 principios de la animación, dentro del su libro “The Illusion of Life”.

Estos 12 principios son una guía para crear la ilusión de movimiento natural en personajes y objetos. Para el uso que le vamo a dar nos interesan 6 de estos principios, ya que todavía son válidos para mejorar las animaciones web; hacer que sean naturales y fluidas, de modo que se integren totalmente en el diseño, pero sin molestar al usuario en su experiencia de navegación, todo lo contrario, lo que queremos es mejorarla.

Los 6 principios, al detalle:

1. El principio del dibujo sólido

Este principio es la base del diseño de materiales. El dibujo sólido se refiere al tratamiento de formas como si se trataran de objetos sólidos reales y, por tanto, deben estar sujetos a las leyes naturales de la física.

En las interfaces de usuario, como la de una web, este concepto es fundamental para desarrollar relaciones espaciales entre paneles o información. Todos los objetos mantienen un peso y volumen fijados y están sujetos a fuerzas como la gravedad, la fricción y la inercia, por lo que cualquier resultado del movimiento debería reflejarlo. Cuando los objetos siguen esta ley natural se vuelven más intuitivos para los usuarios.

Una aplicación de este principio aplicado a una animación web, sería por ejemplo cualquier elemento que el usuario pueda hacer clic y arrastrar para reubicarlo en otro punto. El elemento que el usuario "coge" debe tener un comportamiento de objeto sólido y por tanto mantener la forma durante el traslado (arrastre). También lo podemos hacer crecer un poco para dar la sensación de que lo hemos elevado de su sitio y por lo tanto puede pasar por encima de los otros elementos de la web. Y si este elemento interacciona con otros durante este traslado, estos otros elementos también deberán moverse con el mismo principio.

BoletPARA PROFUNDIZAR:

2. El principio de los arcos

La dirección en la que se mueve un objeto nos cuenta el tipo de objeto que es. Normalmente sólo los de tipología mecánica se mueven en líneas perfectamente rectas, mientras que los que tienen más cualidades orgánicas se mueven en arcos.

Los arcos pueden tener variaciones de coordenadas XY, por ejemplo, una pelota votante o también variaciones de velocidad, que sería aplicar el efecto de gravedad a las animaciones, sea para darles aceleración o desaceleración al inicio y al final de la animación.

Para dotar el elemento de más vida también es recomendable utilizar el efecto rebote o "bounce" que da elasticidad y plasticidad a la animación.

Aplicándolo a web, un ejemplo claro es la aparición de elementos durante la carga del contenido, sea al inicio o bien durante el scroll. Si los hacemos aparecer de manera mecánica, puede producir un efecto brusco que puede molestar visualmente al usuario. Mientras que si aplicamos un arco de movimiento mientras se posiciona el objeto, el movimiento será mucho más atractivo y natural.

BoletPARA PROFUNDIZAR:
Mofeta - Seguretat CMS

Foto: Pixabay

En la naturaleza difícilmente encontramos movimientos 100% rectilíneos. Todo tiene su arco de movimiento, sea microscópico o gigante.

3. El principio de escenificación

Este principio consiste en configurar la escena para mostrar la importancia de lo que está pasando, para redirigir la mirada del espectador hacia donde se desarrolla la siguiente acción. En animación clásica, un ejemplo claro es cuando un personaje mira a otro, provoca que el espectador mire automáticamente al otro personaje esperando que haga alguna acción.

En nuestro caso podemos utilizar este principio para ubicar en la página los elementos donde queremos dirigir la mirada del usuario, de forma que le facilitamos la navegación. Por ejemplo, mientras mostramos un formulario que hemos hecho aparecer en popup, oscurecemos o hacemos borroso el contenido del fondo y remarcamos con movimiento e intensidad el campo activo.

BoletPARA PROFUNDIZAR:

4. El principio de exageración

En animación clásica, cuando se quiere dar dramatismo a una acción, se exagera el movimiento natural para darle más importancia y que destaque sobre los demás. Sirve también para captar la atención del espectador en ciertos momentos.

En animación web también tenemos momentos importantes que queremos destacar, por ejemplo en un formulario, si el usuario ha dejado de rellenar un campo o ha escrito mal un correo electrónico, podemos darle un toque de atención no sólo con un mensaje o un color, sino con un movimiento brusco del elemento. De este modo enfatizamos "el error".

O por ejemplo en esta animación de descarga de un archivo, donde le podemos dar vida a todos los elementos para que sea más atractivo para el usuario durante la espera. Incluso cuando la descarga falla.

BoletPARA PROFUNDIZAR:
Mofeta - Seguretat CMS

Foto: Johannes Plenio

La exageración es un elemento poco o nada habitual en la naturaleza, pero sí hay elementos naturales que presagian un dramatismo posterior y que han sido la base de la exageración que hemos creado los humanos. Los truenos y relámpagos previos a una tormenta serían un claro ejemplo.

5. El principio de acción secundaria

Mientras se está llevando a cabo una acción principal, una animación secundaria puede ayudar a destacarla o aumentarla. Un ejemplo en animación clásica es el movimiento de los brazos oscilantes de alguien que camina o la inclinación de la cabeza.

En animación web podemos aplicar este principio en diferentes momentos. Un ejemplo muy claro es la animación parallax. Mientras movemos el contenido principal mediante scroll, podemos mover un elemento de fondo en una velocidad diferente y provocar el efecto parallax. U otro ejemplo sería en un smoothScroll (scroll animado al pulsar un botón), dar un pequeño retraso en la animación de los elementos para dar una sensación de velocidad y que cada elemento es independiente del resto.

Una herramienta en a javascript que utiliza este concepto es scroollReveal.

principi-accio-secundaria
BoletPARA PROFUNDIZAR:

6. El principio del atractivo

Este principio es el más difícil de conseguir. Se trata de seducir al espectador. Si una animación provoca un gesto expresivo a la persona que la está mirando, ya sea una pequeña apertura de los ojos, o una abertura de boca o una ligera sonrisa, has creado una interacción atractiva que es muy valiosa y lleva la atención de la usuario a un nivel más alto.

Para aplicar este principio a la animación web, debemos buscar sorprender al usuario con elementos que no se espere, que sean originales y atractivos y que le provoque este gesto expresivo.

Por ejemplo, podemos hacer que un botón haga algo inesperado cuando el usuario lo pulsa:

O podemos animar elementos que nadie esperaría que se animaran, como por ejemplo el contenido del líquido de unos iconos:

O que al hacer clic encima de un lugar que no debería tener ninguna interacción, nos quede enganchado el fondo de color en el ratón hasta que lo tengas a una cierta distancia:

principi-atractiu
BoletPARA PROFUNDIZAR:
Camaleo - Animacions web

Foto: George Lebada

La seducción en la naturaleza es indiscutible. Desde increíbles flores hasta animales con colores extravagantes. Uno de los más coloridos del mundo es el Camaleón pantera de Madagascar.
Eina
Una de las primeras animaciones en informática fue el parpadeo de un cursor en el sistema operativo MS-DOS. Era una animación muy básica pero que todo el mundo entendió. Era un mensaje clarísimo que decía "estoy esperando que escribas algo". Y si el cursor dejaba de parpadear, significaba que el sistema se había colgado.
Msdos

Como conclusión...

Estos principios de animación son atemporales por una buena razón, teniéndolos en cuenta cuando se diseñan para interfaces de usuario, pueden mejorar considerablemente la funcionalidad de la página. Si se utiliza bien, la animación puede impactar positivamente en tu marca.

Al utilizar animaciones, ten siempre en cuenta la funcionalidad del movimiento: todos los movimientos deben ser intencionales y beneficiar la experiencia del usuario de alguna manera. Utiliza la ley natural de la física como guía de cómo los objetos deben moverse e interactuar entre ellos.

Y sobre todo, pásatelo bien! El diseño útil no debería ser aburrido. Diseña una experiencia agradable y tus usuarios seguirán volviendo.

Mejora tu diseño con efectos y animaciones web

Si nos quieres conocer mejor,
¡contáctanos! Y si te gusta, ¡síguenos!