Principios de movimiento
Cómo se mueve la marca: rápida o pausada, seca o elástica. Traducido a curvas y duraciones con nombre.
Marca en el producto
Que responda con
el ritmo de la marca.
Transiciones, respuestas y tiempos que ayudan a entender lo que pasa y que suenan a la marca, no a los valores por defecto del framework.
El movimiento también
tiene carácter.
Cada producto se mueve: abre paneles, confirma acciones, carga, cambia de estado. Casi siempre con las animaciones por defecto, que no dicen nada. El movimiento es una capa de marca que casi nadie diseña y que todo el mundo percibe.
Definimos un sistema de movimiento: pocas curvas, pocos tiempos, reglas claras de qué se anima y qué no, y microinteracciones que explican (esto se ha guardado, esto está cargando, esto se puede deshacer). Ligero, accesible y con el carácter de la marca.
Qué hacemos
Así lo trabajamos.
En este orden, con el equipo dentro desde el primer día.
Microinteracciones clave
Los momentos que más se repiten: pulsar, guardar, cargar, error, éxito, deshacer. Diseñados y prototipados.
Transiciones
Cómo se pasa de una pantalla a otra sin perder el contexto: qué se mantiene, qué entra y qué sale.
Implementación
Tokens de movimiento y componentes animados en el código (CSS, GSAP, Framer Motion o el stack del producto), con movimiento reducido respetado.
Te llevas
Lo que queda cuando terminamos.
El proyecto termina; el criterio se queda en tu equipo.
01 Tokens de movimiento
Sistema
Curvas, tiempos y reglas de uso, en diseño y en código.
02 Microinteracciones
Piezas
Las interacciones clave diseñadas, prototipadas e implementadas.
03 Criterios
Guía
Qué se anima, qué no, y cómo comprobar que el movimiento ayuda.
Cuándo tiene sentido
El momento adecuado.
Cuando el producto se siente tosco o genérico, cuando la marca tiene una identidad fuerte que el producto no transmite, cuando hay que explicar cambios de estado que la gente no entiende, o al construir un sistema de diseño que todavía no tiene movimiento.
Si no estás seguro de que sea tu caso, cuéntanoslo: la primera conversación sirve para dimensionar el problema real.
Hablemos de tu casoPreguntas frecuentes
Lo que suelen preguntarnos
sobre motion y microinteracciones.
¿No ralentiza el producto?
Bien hecho, no. Las animaciones se limitan a transformaciones baratas, duran lo justo y respetan la preferencia de movimiento reducido del usuario.
¿Lo implementáis vosotros?
Sí, o lo especificamos para vuestro equipo con los valores exactos y ejemplos en código.
¿Vale para una app nativa?
Sí. Los principios son los mismos; la implementación se adapta a iOS, Android o al framework multiplataforma que uséis.
