La versión corta
- El motion branding es el conjunto de reglas sobre cómo se mueven el logo, la tipografía, los fondos y la interfaz de una marca.
- Las decisiones clave son el ritmo, las curvas de aceleración, la dirección y qué elementos pueden moverse.
- El movimiento de una marca debe encajar con su carácter: las marcas tranquilas se mueven despacio y con suavidad, las enérgicas más rápido y con más rebote.
- Las reglas de movimiento son más útiles escritas como unas pocas duraciones y curvas con nombre que comparten diseño y desarrollo.
- Un buen motion branding siempre incluye una versión con movimiento reducido para quienes piden a sus dispositivos menos movimiento.
En esta página
El motion branding es la parte de una identidad que describe cómo se mueve la marca: a qué velocidad pasan las cosas, cómo aceleran y frenan, en qué dirección viajan y qué puede moverse. Un logo que encaja de golpe dice algo distinto que uno que entra flotando. Escrito como un puñado de reglas, el movimiento hace que cada vídeo, historia, web y app parezcan de la misma marca, aunque cambien los colores y las composiciones.
Por qué el movimiento forma parte de la identidad de marca
La mayoría de los manuales de marca se quedan en logo, color y tipografía, porque se escribieron para impresión. Hoy la gente suele encontrarse con una marca en movimiento: en un Reel, una historia animada, el hero de una web, la interfaz de un producto. Si nadie decide cómo se mueven esas cosas, lo decide cada diseñador y cada herramienta, y la marca empieza a comportarse como varias empresas distintas.
Incluso una marca casi siempre estática sale ganando. Una sola regla, como «las palabras llegan subiendo con suavidad, nunca girando», evita mucho trabajo fuera de marca antes de que empiece. Si tu marca nunca se ha movido, motion graphics para marcas es un buen punto de partida.
Las cuatro decisiones del motion branding
- Ritmo. Cuánto tardan las cosas. Las duraciones cortas resultan eficientes y vivas; las largas, tranquilas, meditadas o lujosas.
- Curvas de aceleración. Cómo acelera y frena el movimiento. Una salida suave resulta natural; un ligero rebote, juguetón; lo lineal, mecánico. Mira las curvas en easing.
- Dirección y comportamiento. ¿Las cosas suben, se deslizan, escalan, se funden o se revelan? Elige dos o tres comportamientos y úsalos con coherencia.
- Qué se mueve. Decide qué elementos pueden moverse: el fondo, las palabras, el logo, las fotos. La contención aquí es la mayor diferencia entre lo premium y lo recargado.
Ritmo
Curva
Comportamiento típico
Ritmo
Curva
Comportamiento típico
Ritmo
Curva
Comportamiento típico
Ritmo
Curva
Comportamiento típico
Las ideas de base, como el tiempo, la jerarquía y la continuidad del movimiento, se explican en principios del diseño de movimiento. El motion branding consiste en elegir entre ellas y comprometerse.
Escribir reglas de movimiento que compartan diseño y desarrollo
Las guías de movimiento fracasan cuando se escriben con adjetivos. «Fluido y seguro» significa algo distinto para cada persona. Nombra unas pocas duraciones y unas pocas curvas, dáselas a diseño y desarrollo con las mismas palabras, y la marca se moverá igual en un editor de vídeo y en el código.
:root {
/* Pace */
--motion-quick: 180ms;
--motion-base: 320ms;
--motion-calm: 600ms;
--motion-ambient: 12s;
/* Easing */
--ease-arrive: cubic-bezier(0.16, 1, 0.3, 1); /* soft ease out */
--ease-move: cubic-bezier(0.65, 0, 0.35, 1); /* ease in out */
--ease-leave: cubic-bezier(0.7, 0, 0.84, 0); /* ease in */
}
.headline-enter {
animation: rise var(--motion-base) var(--ease-arrive) both;
}
@keyframes rise {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.headline-enter { animation: none; }
}Fíjate en la última regla. A algunas personas el movimiento las distrae o les sienta mal, y piden a su dispositivo que lo reduzca. Una marca en movimiento completa define qué ocurre entonces, normalmente un fundido sencillo o ningún movimiento. Movimiento reducido explica cómo.
El movimiento en los recursos de una marca
Regla de ejemplo
Qué definir
Regla de ejemplo
Regla de ejemplo
Qué definir
Regla de ejemplo
Regla de ejemplo
El logo suele recibir la mayor atención y es lo que menos aparece. Los fondos y la tipografía están en pantalla mucho más tiempo, y ahí es donde la coherencia compensa. Para el logo en sí, logo animado repasa los enfoques principales.
Una marca tranquila: duraciones largas, color que deriva, palabras que aparecen con un fundido y se quedan.
Una marca juguetona: ritmo más rápido, palabras que aparecen con rebote, movimiento más vivo en el fondo.
Fondos que se mueven como tu marca
El movimiento más visible en la mayoría del contenido de marca es el fondo: el color en movimiento detrás de una historia, un Reel o un hero. También es el movimiento que las marcas toman prestado de bancos de imágenes con más frecuencia, lo que significa que no es de nadie. Un fondo cuyos colores, luz, grano y movimiento son todos tuyos hace más por el reconocimiento que una animación de logo elaborada que se ve una vez.
radial-gradient(110% 80% at 70% 30%, #a7f3d0 0%, #10b981 35%, #065f46 70%, #022c22 100%)Así funcionan los Marks en Gradiently. Un Mark es una receta de colores, materiales, luz, grano, movimiento y una voz tipográfica, así que su movimiento forma parte de su identidad y no es un efecto que se añade. Cada diseño que lo lleva, de una historia a una diapositiva, se mueve igual, y como cada Mark es único y tiene un solo dueño, el contenido de nadie más se mueve exactamente como el tuyo. Sistemas de degradados de marca explica cómo construir el color a su alrededor.
Movimiento fuera de marca
- Cada diseñador elige sus propias transiciones
- Todos los elementos se animan a la vez
- Fondos animados de bancos de imágenes
- Guías escritas solo con adjetivos
- Ningún plan para el movimiento reducido
Motion branding
- Dos o tres comportamientos con nombre, usados en todas partes
- Se mueve una cosa cada vez, en orden
- Un fondo que pertenece a la marca
- Duraciones y curvas con nombre en tokens compartidos
- Una alternativa definida, estática o con fundido
Preguntas frecuentes
¿Qué es el motion branding?
El motion branding es el conjunto de reglas sobre cómo se mueve una marca: su ritmo, sus curvas, su dirección y qué elementos pueden moverse. Hace que vídeos, publicaciones, webs y apps parezcan una sola marca.
¿Qué debe incluir una guía de movimiento de marca?
Unas pocas duraciones con nombre, unas pocas curvas, dos o tres comportamientos de entrada, reglas para el logo, la tipografía, los fondos y las transiciones, y qué pasa cuando alguien prefiere movimiento reducido.
¿A qué velocidad deben ir las animaciones de marca?
El movimiento de interfaz y de texto suele estar entre unos 150 y 700 milisegundos, más rápido en marcas enérgicas y más lento en las tranquilas. El movimiento de fondo es mucho más lento, se mide en segundos.
¿Una marca pequeña necesita motion branding?
Una versión breve ayuda a cualquier marca que publique vídeos o historias. Incluso una regla sobre cómo entran las palabras y un fondo en movimiento mantienen la coherencia del contenido.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil