Principios del movimiento

Cuando diseñas movimiento, diseñas con el tiempo. Comprender la mecánica convierte el movimiento en significado.
Compartir Principios del movimiento




Ilustraciones de Matija Medved
En páginas de marketing, recursos para redes sociales, videos de marca y presentaciones, el movimiento es lo que da vida a las ideas. Permite que el diseño se desarrolle a lo largo del tiempo, utilizando el ritmo, el sonido y la secuenciación para dirigir la atención y transmitir significado.
Conversamos con tres diseñadores de motion de Figma —Chad Colby, Ben Hill y Gilles Desmadryl— para que compartieran los principios del movimiento, cómo ampliar las posibilidades de la narrativa y de qué manera la IA está transformando su trabajo.

¿Cuál es la mayor diferencia entre el diseño gráfico y el diseño de movimiento?

En el diseño gráfico, todo se comunica mediante momentos estáticos en el tiempo. Motion elimina esa limitación e incorpora ritmo, cadencia, transformación y carácter. Los principios fundamentales siguen siendo los mismos: claridad e intención en el centro de todo.

Pensamos más en una secuencia de fotogramas. En lugar de intentar condensar todos los elementos de una historia en una sola imagen, los descomponemos primero en partes y luego los reunimos para que sean más fáciles de asimilar.

En realidad, todo consiste en cómo aprovechas ese elemento temporal del movimiento para contar una historia o comunicar una idea. ¿Cómo usas las curvas de aceleración y la sincronización para evocar una emoción o transmitir lo que quieres decir? También existe una conexión muy profunda con la forma en que todo se sincroniza con el sonido. Si piensas en la música, en cómo se estructuran los compases, todo gira en torno a la sincronización, igual que en el movimiento.

Siempre me maravilla lo bien que el sonido y la imagen se unen para crear algo que es más que la suma de sus partes. Tu cerebro establece conexiones que nunca habrías podido planificar. Eso es fundamental en mi forma de trabajar: dejar espacio para el azar y estar abierto a esos accidentes felices.

¿Dónde buscas referencias para determinar cómo debería moverse algo?

Creo que lo más importante es comprender la física. El movimiento tiene sus raíces en cómo se mueven las cosas en el mundo real. Imagina que quieres animar —o pedirle a un agente que anime— una pelota que rebota. Empieza moviéndose muy rápido, rebota hacia arriba y luego desacelera al llegar al punto más alto. Después vuelve a caer, y cada rebote es más bajo que el anterior. Poder captar esa sensación es realmente importante.

Si tu inspiración proviene únicamente de otros trabajos de movimiento, es probable que termines siguiendo las tendencias esperadas (las pelotas que rebotan y los rectángulos solo te llevarán hasta cierto punto). Si te inspiras en el movimiento de la naturaleza, en los recursos narrativos y las técnicas de edición del cine, o incluso en las formas gestuales del arte y el diseño, lograrás diferenciarte.

Al final del día, las personas reconocen cuándo un movimiento es bueno, aunque no sepan explicar por qué. El diseño es más subjetivo. La relación del movimiento con el mundo real marca esa diferencia.
Si te inspiras en el movimiento de la naturaleza, en los recursos narrativos y las técnicas de edición del cine, o incluso en las formas gestuales del arte y el diseño, lograrás diferenciarte.

Miniglosario de movimiento: principios fundamentales
Ease in/ease out: Cómo el movimiento acelera y desacelera con el paso del tiempo.
Anticipation: Movimiento preparatorio que anticipa lo que está por suceder.
Overshoot: Superar ligeramente la posición final antes de volver a ella.
Follow-through: Movimiento secundario que continúa después de que termina el movimiento principal.
Hold: Una pausa que le da al espectador tiempo para asimilar lo que acaba de suceder.
Settle: El movimiento final y sutil mientras un elemento se detiene por completo.
¿Cómo traduces lo que ves en el mundo real a la forma en que debería sentirse el movimiento?

Creo que uno de los aspectos más importantes es el easing, que es como describimos la sincronización del movimiento y la forma en que los elementos terminan asentándose en su lugar. Otro es el match cut, donde pasas de un plano a otro, pero los conectas mediante el mismo movimiento. Puedes pasar de un movimiento lento a uno rápido, volver a uno lento y hacer un corte brusco justo en el punto de mayor velocidad, logrando que la transición se sienta completamente fluida. Las transiciones son una parte fundamental de cómo concebimos el movimiento. Son clave para conectar los distintos momentos de una historia y hacer que todo se perciba coherente y unificado. Por ejemplo, muchos de nuestros videos de lanzamiento muestran varios casos de uso de una funcionalidad, pero aun así deben sentirse como una experiencia continua. Para lograrlo, usamos transiciones y cortes bien ubicados que mantienen el ritmo y el impulso narrativo, manteniendo al espectador involucrado de principio a fin.

Hablamos mucho del ritmo del movimiento y de cómo algo comunica: ¿cuál es el arco narrativo o el gran momento de crescendo que realmente le da impacto? Después nos ponemos mucho más técnicos y analizamos en profundidad las curvas de los fotogramas clave, la velocidad de fotogramas y las expresiones (fragmentos de JavaScript) para ajustar con precisión cada detalle del motion.

Cuando presentamos nuestro trabajo a un público más amplio, recurrimos mucho a los efectos de sonido para reforzar la idea que transmite el motion. He estado en reuniones en las que alguien decía: "Esto se moverá de izquierda a derecha", y no terminaba de entenderse hasta que otra persona decía: "¡Hará whoop!".

¿Dónde ves las mayores oportunidades para que el movimiento se integre más con otros flujos de trabajo de diseño?

La posibilidad de trabajar en el lienzo, diseñar y probar animaciones, y ver en tiempo real qué funciona y qué no, representa un cambio enorme. Antes había que pasar de una herramienta o plataforma a otra. Ahora todo puede suceder en el lienzo multiusuario, lo que permite a las personas explorar ideas con mayor rapidez y eleva el nivel de integración entre el diseño y el movimiento.

El movimiento destaca. Explica lo que las palabras no pueden, y las marcas lo saben. Por eso la demanda de un buen motion sigue creciendo. Al mismo tiempo, es un proceso que requiere mucho tiempo, por lo que a los equipos de motion les cuesta seguir el ritmo del diseño e iterar de la misma manera. Pero trabajar en un único software para diseño y animación es realmente emocionante. Será interesante ver qué nuevas posibilidades se abren.

Lo que más me entusiasma es la cantidad de personas que descubrirán el motion o se enamorarán de él, y que de otro modo nunca lo habrían hecho. Eso fue exactamente lo que me pasó a mí. Nunca imaginé que quería dedicarme al motion, pero empecé a experimentar con algunas herramientas y me di cuenta de algo: esto es mucho más interesante que trabajar con un único fotograma.

Para muchas personas, el movimiento siempre ha parecido algo casi mágico, en parte porque hay menos diseñadores de movimiento que diseñadores de otras disciplinas. Ahora, en lugar de esperar a que intervenga un diseñador de motion, más personas pueden contribuir desde etapas más tempranas e impulsar las ideas con mayor rapidez.
Miniglosario de movimiento: abreviaturas del equipo
Zippy: Movimiento rápido y enérgico.
Make it dreamy: Un movimiento más suave y atmosférico.
Chunky: Movimiento deliberado y menos refinado, como si hubiera sido manipulado físicamente.
Make it snappier: Necesita una sincronización más rápida y curvas de aceleración más marcadas.
Parece flotante: Le falta peso o conexión con la física del mundo real.
Too linear: Se mueve a una velocidad constante; se siente mecánico.
Dead on arrival: Le falta energía, intención o claridad.

¿Cómo ves la evolución de la IA? ¿Qué es lo que más te entusiasma? ¿Hay algo que te preocupe?

En After Effects, el movimiento solía implicar agregar expresiones y escribir scripts para controlar propiedades y crear sistemas, así que, en la práctica, estabas programando. Cuando yo empezaba, la mayoría de los animadores no sabía programar, así que dependíamos de hojas de cálculo con expresiones que copiábamos y pegábamos en los proyectos. Ahora, los prompts para movimiento están cambiando eso. Puedes esbozar ideas rápidamente —ya sea un movimiento lento, rápido o con rebote— mientras resuelves también la parte técnica. Una vez que algo está definido y respaldado por código, puedes reutilizarlo en cualquier lugar. Eso cambia las reglas del juego.

Muchas personas crearán movimiento llamativo solo por el efecto visual, mientras que otras lo usarán de forma más intencional para comunicar y guiar a los usuarios. Las habilidades, la técnica, la intención y la moderación serán los factores diferenciadores.

Será fundamental controlar el tiempo y la intención, entendiendo que el tiempo es ahora tu nueva herramienta: un nuevo elemento con el que puedes diseñar. Si solo hay movimiento, pero no evoca nada ni comunica nada, en esencia solo estás agregando un filtro sobre el diseño.

Será muy fácil crear un buen movimiento, pero si no entiendes los principios fundamentales del movimiento, será muy difícil crear uno realmente bueno. Las personas llevan mucho tiempo haciendo esto. Hay cosas que han perdurado durante cien años, y hay una razón para ello. A medida que la tecnología avance, será importante preservar esos principios fundamentales. Son los que mantienen el lado humano de las cosas.

This article was featured in our annual print magazine, Start Anywhere. Explore the digital version, or purchase a copy.



