Proyecto propio
Quiet Motion Una identidad pensada para moverse.
Nombre, identidad, reel de presentación y sitio web de un estudio nuevo, construidos con un mismo lenguaje: la curva de animación y sus dos keyframes.
- Tipo
- Proyecto propio
- Servicios
- Identidad visual · Motion · Sitio web
- Año
- 2026
- Piezas
- Logotipo en 5 versiones · Reel de 18 s · Sitio web
La necesidad
Un estudio nuevo necesitaba nombre, identidad y una forma de presentarse. Tenía que sentirse minimalista y premium, transmitir calma, precisión y calidad, y ser fácil de entender para clientes hispanohablantes aunque el nombre esté en inglés.
El objetivo
Una identidad que funcionara igual en un avatar de 32 píxeles, en un reel y en un sitio web, y que tuviera su propio lenguaje de movimiento desde el primer día.
El concepto
La herramienta con la que se construye el movimiento convertida en símbolo: una curva de animación entre dos keyframes. Se eligió entre tres rutas visuales y se refinó hasta que se leyera bien en todos los tamaños.
Identidad visual
Lettering propio para «quiet motion», sin fuentes de terceros. El símbolo tiene dos tamaños ópticos: uno de detalle y uno compacto para el avatar.
Paleta
Un negro cálido en lugar de uno azulado, para que la calma no se sienta fría. El ámbar se reserva para los keyframes.
- Noche#131211
- Hueso#EDE8E0
- Piedra#A39D93
- Ámbar#E3A24C
- Marfil#F4F1EB
- Tinta#1A1917
- Ámbar profundo#A65F14
Motion
El reel de presentación construye la marca como se construye una animación: dos keyframes, la curva y el nombre. Usa solo dos curvas de movimiento y una cosa se mueve a la vez. El sonido es original, sintetizado para la pieza.
Sitio web
Este sitio aplica la misma identidad a la web: la curva se dibuja al cargar, un hilo acompaña el recorrido y cada bloque aparece una sola vez. Está hecho con HTML, CSS y JavaScript sin dependencias, respeta la preferencia de movimiento reducido y no descarga ningún video hasta que pulsas «Reproducir».
Decisiones de diseño
- Separar los keyframes de la curva para que se lean como piezas propias, incluso a 32 píxeles.
- Un solo grosor de trazo para el símbolo y las letras: se leen como una sola pieza.
- En movimiento, una entrada y un recorrido con curvas fijas, sin rebotes ni destellos.
- En la web, el ámbar se limita a keyframes, puntos y detalles; todo el texto supera el contraste mínimo de WCAG.
¿Quieres algo así para tu marca?
Iniciar un proyecto