Principios del movimiento
Cuando diseñas movimiento, estás diseñando con el tiempo. Entender la mecánica convierte el movimiento en significado.
Compartir Principios del movimiento
Ilustraciones de Matija Medved
Ya sea en páginas de marketing, contenidos para redes sociales, vídeos de marca o presentaciones, el movimiento es lo que da vida a las ideas. Permite que el diseño se desarrolle a lo largo del tiempo, utilizando ritmos, sonido y secuencias para dirigir la atención y dar sentido a lo que se muestra.
Les pedimos a tres diseñadores de movimiento de Figma —Chad Colby, Ben Hill y Gilles Desmadrille— que nos explicaran los principios del movimiento, cómo ampliar las posibilidades a la hora de contar historias y cómo la IA está cambiando su oficio.
¿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 a través de momentos congelados en el tiempo. El movimiento elimina esa limitación e introduce ritmo, cadencia, transformación y personalidad. Los fundamentos siguen siendo los mismos, con la claridad y la intención como ejes centrales.
Pensamos más en términos de varios marcos. En lugar de intentar condensar todos los elementos de la historia en una sola imagen, la dividimos —primero esto, luego aquello— para que sea más fácil de asimilar.
En realidad, se trata de cómo usas ese elemento del tiempo en el movimiento para contar una historia o comunicar una idea. ¿Cómo usas la atenuación y el tiempo para evocar un sentimiento o transmitir lo que intentas decir? También hay una conexión profunda con la forma en que se sincroniza con el sonido. Si piensas en la música, en cómo se estructuran los ritmos… todo es cuestión de tiempo, igual que el movimiento.
Siempre me sorprende lo bien que se combinan el sonido y la imagen para crear algo más grande que la suma de sus partes. Tu cerebro establece conexiones que no podrías haber planeado. Eso es algo fundamental en mi forma de enfocar las cosas: dejar algunas cosas al azar y estar abierto a esos accidentes afortunados.
¿Dónde encuentras referencias para determinar cómo debería moverse algo?
Creo que lo fundamental es entender la física. El movimiento se basa en cómo se mueven las cosas en el mundo real. Imagina que intentas animar o simular una pelota que bota. Empieza muy rápido, rebota hacia arriba y luego se va ralentizando al llegar a lo más alto. Después vuelve a caer, y cada rebote es menos alto. Ser capaz de capturar esa sensación es realmente importante.
Si solo te inspiras en otros trabajos de animación, lo más probable es que acabes cayendo en las tendencias de siempre (las bolas que rebotan y los rectángulos tienen un límite). Si te inspiras en el movimiento de la naturaleza, en los recursos narrativos y los trucos de montaje del cine, o incluso en las formas gestuales del arte y el diseño, conseguirás destacar.
Al fin y al cabo, la gente sabe reconocer cuándo un movimiento es “bueno”, aunque no sepa explicar por qué. El diseño es más subjetivo. La relación del movimiento con el mundo real determina esa diferencia.
Si te inspiras en el movimiento de la naturaleza, en los recursos narrativos y los trucos de montaje del cine, o incluso en las formas gestuales del arte y el diseño, conseguirás destacar.
Mini glosario de movimiento: principios básicos
Aceleración/desaceleración: cómo varía la aceleración y la desaceleración del movimiento con el tiempo
Anticipación: un movimiento preparatorio que avisa de lo que está por suceder
Sobrepaso: moverse ligeramente más allá de la posición final antes de volver hacia atrás
Seguimiento: movimiento secundario que continúa después de que el movimiento principal se detiene
Suspensión: una pausa que da tiempo al espectador a asimilar lo que acaba de pasar
Estabilización: el movimiento final y sutil cuando algo se detiene
¿Cómo plasmas lo que ves en el mundo real a cómo debería sentirse el movimiento?
Creo que lo más importante es la atenuación, que es cómo describimos el tiempo y cómo las cosas encajan en su sitio. Otro concepto es el corte de coincidencia, en el que pasas de un plano a otro pero los conectas mediante el mismo movimiento. Puedes pasar de lento a rápido y luego volver a lento, y hacer un corte brusco en el punto más rápido, y al final parece una transición fluida. Las transiciones son una parte fundamental de cómo concebimos el movimiento. Son clave para conectar los distintos momentos de una historia, ayudando a que todo resulte coherente y unificado. Por ejemplo, muchos de nuestros vídeos de lanzamiento muestran múltiples casos prácticos de una función, pero aún así deben dar la sensación de ser una experiencia continua, así que usamos transiciones y cortes bien colocados para mantener el impulso y el ritmo, y que el espectador siga interesado en todo momento.
Hablamos mucho sobre el ritmo del movimiento y cómo se transmite algo: ¿cuál es el arco narrativo o ese gran momento culminante que hace que algo tenga un impacto real? Luego nos volvemos muy técnicos y nos metemos de lleno en las curvas de fotogramas clave, las velocidades de fotogramas y las expresiones (fragmentos de JavaScript) para ajustar al milímetro los detalles del movimiento.
Cuando presentamos nuestro trabajo a un grupo más amplio, usamos un montón de efectos de sonido para que la idea del movimiento resulte más convincente. He estado en llamadas donde decimos algo como: “Esto se moverá de izquierda a derecha“, y no acaba de cuajar hasta que alguien dice: “¡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 idea de que puedas estar en el lienzo, trabajando en un diseño y probando animaciones, viendo en tiempo real qué funciona y qué no… eso supone un gran cambio. Antes tenías que ir cambiando entre diferentes herramientas y plataformas. Ahora todo puede suceder en el lienzo multiusuario, el cual permite moverse y improvisar más rápido y sube el listón de cómo se combinan el diseño y el movimiento.
El movimiento lo dice todo. Explica aquello que las palabras no pueden, y las marcas lo saben; por eso no deja de crecer el interés por los buenos proyectos de animación. No obstante, requiere mucho tiempo, así que a los equipos de movimiento les cuesta seguir el ritmo del diseño e iterar de la misma manera. Pero trabajar en un mismo software para el diseño y la animación es realmente emocionante. Será interesante ver qué puertas se abren.
Lo que me entusiasma es la cantidad de gente que descubrirá o se enamorará del movimiento, algo que de otra forma nunca habría pasado. Eso es lo que me pasó a mí. Nunca pensé que sería diseñador de movimiento, pero probé unas cuantas herramientas y me di cuenta de que esto mola mucho más que trabajar con un solo fotograma.
El movimiento siempre ha resultado mágico para la gente, en parte porque hay menos diseñadores de movimiento que de otros tipos. Ahora, en lugar de esperar a un diseñador de movimiento, más gente puede contribuir antes y hacer que las ideas avancen más rápido.
Mini glosario de movimiento: jerga del equipo
Zippy: movimiento rápido y enérgico
Onírico: movimiento más suave y atmosférico
Chunky: movimiento deliberado y menos elegante, como si se manipulara físicamente
Más ágil: requiere mayor rapidez y transiciones más marcadas
Parece ligero: carece de peso o de conexión con la física del mundo real
Demasiado lineal: se mueve a una velocidad constante; da sensación de ser mecánico
Sin vida: carece de energía, intención o claridad
¿Cómo crees que va a evolucionar todo con la IA? ¿Qué es lo que más te ilusiona? ¿Hay algo que te preocupe?
En After Effects, el movimiento a menudo implicaba añadir expresiones y escribir scripts para controlar propiedades y crear sistemas, así que, en esencia, estabas programando. Cuando yo empecé, la mayoría de los animadores no sabían programar, así que nos valíamos de una hoja de cálculo con expresiones que copiábamos y pegábamos en los proyectos. Ahora, las indicaciones de movimiento están cambiando todo eso. Puedes esbozar ideas rápidamente —ya sea algo lento, rápido o dinámico— mientras te ocupas también de la parte técnica. Una vez que algo está definido y respaldado por código, puedes reutilizarlo en cualquier lugar. Eso abre un montón de posibilidades.
Mucha gente se limita a crear movimientos llamativos solo por el simple hecho de hacerlo, mientras que otros los usarán de forma más reflexiva para comunicarse y guiar a los usuarios. La habilidad, el oficio, la intención y la moderación serán los factores diferenciadores.
Tener control sobre el tiempo y la intención que conlleva será esencial: hay que entender que el tiempo es tu nueva herramienta, un nuevo elemento con el que puedes diseñar. Si solo se trata de movimiento, y no evocas nada ni dices nada, básicamente solo estás añadiendo un filtro sobre un diseño. Si solo se mueve y no evocas nada ni dices nada, básicamente solo estás añadiendo un filtro encima de un diseño.
Va a ser muy fácil crear un buen movimiento, pero si no entiendes los principios básicos del movimiento, te va a costar crear un movimiento excelente. Hay gente que lleva mucho tiempo dedicándose a esto. Hay cosas que han perdurado durante 100 años, y hay una razón para ello. A medida que avanza la tecnología, va a ser importante mantener esos principios fundamentales. Es lo que hace que las cosas sigan siendo humanas.
This article was featured in our annual print magazine, Start Anywhere. Explore the digital version, or purchase a copy.
