Uso de los 12 principios de animación de Disney en su próximo proyecto de diseño web

En el momento exacto en que estoy escribiendo esto, mi oficina tiene 17 algo-u-otros de Disney en las paredes y estantes. Diecisiete. Incluso yo estoy sorprendido. Por mucho que me gusten todas las cosas de Disney, la magia creada a través de los 12 principios de la animación se me escapa incluso a mí cuando veo una de sus películas.

Y ese es el punto. Los 12 principios de la animación son sutiles. Hacen impresiones en los espectadores sin que los espectadores se den cuenta. Nos hacen reír, llorar, simpatizar y soñar, a veces dentro de la misma escena. Y crean personajes y objetos que se ven y se mueven de manera tan realista que quieres extender la mano y tocarlos. (¿Alguna vez has visto a Coco ? Dejo mi caso.)

Esos 12 principios de la animación ahora proporcionan la base para todo el trabajo en movimiento, Disney y otros. También son relevantes para campos fuera de la animación, como el diseño web.

Una breve historia de los 12 principios de la animación

Los 12 principios de la animación fueron presentados por Ollie Johnston y Frank Thomas, dos de los Nueve viejos de Disney, el grupo principal de animadores que se unieron en las décadas de 1920 y 1930. Johnston y Thomas escribieron The Illusion of Life: Disney Animation en 1981, y sigue siendo la "biblia" de la animación. El libro analiza de cerca los enfoques de los principales animadores de Disney para extraer los 12 principios. Si bien estos principios fueron originalmente pensados ​​para la animación dibujada a mano, han sobrevivido a los cambios tecnológicos y ahora son utilizados por animadores por computadora (como Pixar) y diseñadores web.

Los 12 principios de la animación y cómo informan el diseño web

Hay una razón por la que estos principios han resistido la prueba del tiempo. A veces, lo básico sigue siendo lo mejor.

1. Aplastar y estirar

Fuente: Chris Gannon a través de Giphy

“Squash and Stretch” es el más importante de los principios de animación. Da a las animaciones flexibilidad, gravedad, peso y masa. Cuando un objeto está en movimiento, no permanece con la misma forma.

Sin embargo, el volumen debe mantenerse constante. Estirar requiere hacer que el objeto sea más delgado y más largo; el aplastamiento lo hace más corto y más ancho. Si lo hiciera más delgado o más corto, no retendría el mismo volumen.

En el diseño web, "Squash and Stretch" se usa cuando los objetos necesitan ser llamativos. Si hay un objeto que debe parecer que tiene masa física, este principio puede funcionar.

2. Anticipación

Fuente: CentoLodigiani a través de Giphy

La anticipación prepara al espectador para lo que va a suceder y puede hacer que la acción resultante sea más realista. No te sentarías sin primero doblar las rodillas o agarrar algo sin estirar el brazo, ¿verdad? La anticipación pone al personaje u objeto a través de uno o dos movimientos realistas para indicar al espectador lo que está a punto de suceder.

En el diseño web, la anticipación se usa en las transiciones. Por ejemplo, si un visitante está completando un cuadro de información y omite la información requerida, el cuadro podría rebotar un poco para llamar su atención y comunicar: "Oye, algo anda mal". Otra forma de usar la anticipación es encoger un poco los elementos y luego agrandarlos al pasar el mouse.

3. Puesta en escena

La puesta en escena dirige el ojo del espectador para que mire donde usted quiere que mire ("líneas principales" en la fotografía). Minimiza el resto de la escena para que el espectador se concentre en lo que tú quieres. Otro componente de la puesta en escena es que cada acción que realiza un personaje tiene una intención detrás. Si aislaras cada fotograma de la animación, podrías saber la intención detrás de la pose.

La puesta en escena es uno de los principios más fáciles de aplicar al diseño web y los elementos visuales utilizados en los sitios web. Esto es lo que sucede cuando aparece una ventana emergente en una página web: el movimiento de la ventana emergente hace que usted se concentre en ella y el resto de la página se ve borrosa, atenuada o cubierta. En sentido figurado, estás iluminando la parte más importante del "escenario" y manteniendo todo lo demás en segundo plano. La luz y la sombra también se pueden usar para esto, o los diseñadores web pueden aplicar este principio simplemente deshaciéndose de los detalles innecesarios.

4. Directo al frente y posar para posar

"De frente" y "posar para posar" son dos formas diferentes de crear animaciones. Con "recto", los fotogramas se crean en orden de principio a fin. Esto le da a la animación un movimiento dinámico y fluido. Con "pose to pose", se crean el primer y último fotograma, luego se agregan las poses intermedias necesarias.

Fuente: Vincenzo Lodigiani, Artista de movimiento

Hoy en día, la animación por computadora usa "pose para posar" porque la computadora puede completar los fotogramas que faltan automáticamente. Echa un vistazo a las animaciones de Chéjov: puedes ver que no son realistamente fluidas (y se supone que no deben serlo). Si desea crear una animación "directa" en su sitio web, puede utilizar la función de sincronización de pasos (), que le permite definir varios fotogramas y mostrarlos en una secuencia.

5. Acción de seguimiento y superposición

El principio de "acción de seguimiento y superposición" dice que cuando un personaje u objeto está en movimiento y luego se detiene, partes del sujeto se moverán y se detendrán a diferentes velocidades. Esto imita las leyes de la física de la vida real.

• Acción superpuesta: diferentes partes del sujeto se mueven a diferentes velocidades.
• Seguimiento: las partes sueltas del objeto continúan moviéndose durante unos segundos después de que el objeto principal ha dejado de moverse. Esas partes se moverán más allá del punto de parada y luego retrocederán hacia el objeto.

En el siguiente ejemplo, los brazos y las piernas de Rapunzel se mueven a un ritmo diferente al de su cabeza, eso es una acción superpuesta. Cuando deja de girar, su cabello continúa balanceándose por un segundo, eso es seguimiento.

"Arrastrar" es una técnica relacionada en la que sucede lo contrario: partes del objeto se mueven y luego el resto se pone al día. Todas estas técnicas muestran un movimiento realista o pueden exagerar el movimiento para lograr un efecto cómico.

El "movimiento de espera" también está relacionado con esto. Los personajes que quedan todavía tienen un ligero movimiento para que la animación no se estanque.

En el diseño web y móvil, el "seguimiento" y la "acción superpuesta" le muestran al espectador que una acción se detiene intencionalmente . De lo contrario, puede pensar que simplemente dejó de funcionar. Por ejemplo, mire cómo la aplicación Wunderlist en mi iPhone muestra que estoy moviendo un elemento de la lista. El artículo se vuelve de un color diferente y se agranda a medida que lo muevo, luego vuelve al color y tamaño originales una vez que termino. Así es como sé que la acción está completa.

También puede ver este principio en acción en su iPhone. A medida que pasa de una vista a otra o mueve los iconos en la pantalla de inicio, los elementos se mueven a ritmos ligeramente diferentes. Así es como se comunica su iPhone: "Las cosas están cambiando".

6. Reducir y reducir la velocidad

El principio de “entrada y salida lenta” establece que un objeto comienza a moverse lentamente, gana impulso y acelera, luego vuelve a desacelerarse cuando se detiene. Básicamente, los movimientos deben acelerarse y desacelerarse para que sean naturales. Para lograr este efecto, hay cuadros adicionales al inicio y al final de una acción para enfatizar el aumento y la disminución gradual del movimiento.

Fuente: La ilusión de la vida en Tumblr

Para el diseño web, CSS tiene dos funciones de sincronización relacionadas con este principio: entrada y salida fáciles. Puede ver un ejemplo en el sitio web Your Plan, Your Planet (primero haga clic en "Empecemos").

7. Arco

Como muchos de los otros 12 principios de la animación, "arco" se basa en la física. Los objetos suelen seguir algún tipo de arco a medida que se mueven debido a la gravedad. Si se mantuvieran rectos, el movimiento sería mecánico, no realista.

Esto también se aplica a todos los tipos de movimiento, no solo a los arcos de menor a mayor a menor:

En el diseño web, el principio de “arco” se puede utilizar creando animaciones que forman un arco, por supuesto, pero también haciendo que un elemento gire, como durante los tiempos de carga.

8. Acción secundaria

Una acción secundaria enfatiza la acción principal sin distraerse de ella. También da más dimensión a los personajes y objetos y da vida a una escena. El principio de la puesta en escena juega un papel importante porque la acción principal todavía tiene que ser el foco.

Una acción secundaria no tiene por qué quedar fuera del objeto principal. Puede ser un personaje que silba mientras camina o que expresa emoción levantando las cejas.

En el diseño web y móvil, el principio de "acción secundaria" se ve cuando los elementos se apartan para dejar espacio para un nuevo elemento, como cuando reorganiza las aplicaciones en su iPhone. Esto puede ir de la mano con "acciones de seguimiento y superposición", que enfatiza esas acciones.

9. Calendario

El tiempo es bastante sencillo y está relacionado con "entrar y salir más despacio". El principio dice que los elementos deben moverse constantemente de forma natural, como lo harían en el mundo real. Para enfatizar, se pueden acelerar o ralentizar a propósito. La cantidad de fotogramas utilizados establecerá el tiempo: más fotogramas crean una acción más lenta, menos fotogramas crean una más rápida.

En este ejemplo, las primeras acciones de Daffy Duck tienen una sincronización natural, y luego la última acción, cuando se acerca al espectador, es deliberadamente rápida para enfatizar.

La sincronización también ayuda al espectador a comprender el peso de los objetos entre sí. En este ejemplo, el personaje levanta las pesas lentamente y las deja caer rápidamente, mostrando que son pesadas para él:

Fuente: @scottthigpen en Giphy

En el diseño web, el tiempo se utiliza para hacer que los elementos se queden un poco más tiempo o desaparezcan rápidamente, especialmente cuando se responde a la interacción del usuario. Por ejemplo, si un usuario desea descartar un menú, puede configurar el tiempo para que se mantenga durante 300 ms. Si tocan un elemento en la barra de navegación, querrá que la acción ocurra rápidamente (100 ms).

10. Exageración

A pesar de que muchos de los 12 principios de la animación se centran realidad, la belleza de la animación es que no es real. El principio de "exageración" dice que demasiado realismo puede restar valor a lo que mejor se hace en la animación: el entretenimiento. La exageración se usa para hacer que los personajes y los objetos sean más interesantes. Toma la realidad y la sube un poco, lo suficiente para que la escena siga siendo creíble. La exageración requiere moderación para que la escena no se vuelva abstracta o surrealista.

En el diseño web, los objetos se escalan hacia arriba o hacia abajo para llamar o distraer la atención. Cuando un usuario está activo en una determinada parte del sitio web, como un formulario, puede crecer mientras otros elementos se reducen. Esto es similar al principio de "puesta en escena", especialmente cuando piensa en formularios emergentes.

11. Dibujo sólido

Fuente: La ilusión de la vida en Tumblr

Aunque la animación es técnicamente 2D, tiene que presentarse de manera realista en 3D. El principio de "dibujo sólido" también podría llamarse "perspectiva" porque se trata de tener la capacidad de dibujar y comprender conceptos básicos como:

• Anatomía
• Equilibrio
• Consistencia
• Luz y sombra
• Volumen
• Peso

Para los diseñadores web, agregar profundidad a un elemento muestra a los usuarios que pueden interactuar con él. Puede ver esto en acción en nuestro sitio web. Mira cómo el botón "Unirse para descargar" se vuelve rosa a medida que me desplazo hacia abajo:

12. Apelación

Posiblemente el más difícil de dominar de los 12 principios de la animación, "atractivo" dice que tus personajes, objetos y su mundo tienen que atraer a la audiencia. Deben ser atractivos y encantadores de alguna manera, físicamente o de otra manera. No existe una receta para hacerlo bien, pero el desarrollo sólido del personaje y la narración son ingredientes clave.

En la animación, todos los personajes no serán atractivos: el villano es la piedra angular de las películas de Disney. Sin embargo, la forma en que se presentan debe tener carisma e interesar a la audiencia.

En diseño web, "atractivo" significa que el sitio web en su conjunto es atractivo, agradable y fácil de usar.

Terminando

Los 12 principios de Disney pueden ayudar con animaciones sencillas, como si estuviera creando un juego interactivo en su sitio web, pero también pueden ayudar con el diseño de todo tipo de páginas web. La mayoría de los consumidores son como yo cuando se trata de películas de Disney: sé que algo me gusta y mi cerebro procesa las señales, pero no sé por qué tengo esas reacciones. El trabajo del diseñador web es anticipar lo que un visitante pensará y hará, y luego guiarlo sutilmente para que tome las acciones correctas.

¿Busca aún más formas de conectarse con su audiencia? Lea la publicación de nuestro blog sobre el uso de la emoción del color.