Cómo escribir guías de movimiento de marca (logo, mascota y UI)

¿Qué deben incluir las guías de motion de marca?

Todo lo que, de otro modo, un diseñador, desarrollador o agencia tendría que adivinar. Un esquema práctico, lo bastante corto como para que la gente lo lea de verdad:

Los principios son la parte más fácil de escribir y la menos útil por sí sola. Los fundamentos de motion de Atlassian muestran la extensión correcta: cuatro principios (Human, Clarity, Accessible, Performant), cada uno de una frase, como “El movimiento es una capa que aclara, no decoración”. Las Human Interface Guidelines de Apple resumen la idea central en una línea: “Agrega movimiento con propósito, apoyando la experiencia sin eclipsarla”. Escribe los tuyos con esa extensión y dedica el resto del documento a reglas que alguien pueda comprobar.

¿Cómo defines tokens de duración y easing para el movimiento?

Elige una escala pequeña con nombre y asigna un uso a cada paso. Los sistemas públicos son buenos puntos de partida porque están documentados y probados a gran escala:

Los atributos de tema de Material para Android definen 16 duraciones, desde motionDurationShort1 (50 ms) hasta motionDurationExtraLong4 (1000 ms), con la regla de que “la duración debe aumentar a medida que aumenta el área o el recorrido de una animación”. Atlassian da rangos en lugar de tokens: de unos 50 a 150 ms para interacciones y de 150 a 400 ms para transiciones.

El easing recibe el mismo trato. Carbon divide las curvas en conjuntos productive (“eficiencia y capacidad de respuesta, sin dejar de ser sutil”) y expressive (“entusiasta, vibrante y muy visible”), cada uno con curvas estándar, de entrada y de salida; la estándar productive es cubic-bezier(0.2, 0, 0.38, 0.9). El easing estándar de Material es cubic-bezier(0.2, 0, 0, 1), con curvas de desaceleración para los elementos que entran y de aceleración para los que salen. Material también define tokens de spring en velocidades rápida, predeterminada y lenta, divididos en springs “spatial” para el movimiento y springs “effects” para el color y la opacidad, que no deben rebotar.

Esa división entre productive y expressive encaja muy bien con una marca: tokens productive para el feedback de la interfaz y los expressive reservados para el logo, la mascota y los momentos de lanzamiento. Entrega los tokens como código para que nadie los vuelva a escribir:

:root {
  --motion-duration-fast: 120ms;     /* hover, press, toggle */
  --motion-duration-moderate: 240ms; /* panels, toasts */
  --motion-duration-slow: 400ms;     /* page transitions */
  --motion-duration-brand: 1200ms;   /* logo intro, mascot reactions */

  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-enter: cubic-bezier(0, 0, 0, 1);
  --motion-ease-exit: cubic-bezier(0.3, 0, 1, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-moderate: 0ms;
    --motion-duration-slow: 0ms;
    --motion-duration-brand: 0ms;
  }
}

Los valores de arriba son una escala de ejemplo, no un estándar: elige la tuya, pero que la lista sea corta. De cuatro a seis duraciones y tres curvas de easing cubren casi cualquier producto.

¿Qué puede hacer un logo animado y qué está prohibido?

Una animación de logo sigue siendo el logo, así que las reglas estáticas de la marca se mantienen, y el movimiento agrega algunas propias. Una lista de qué hacer y qué no es el formato más claro:

Cuatro reglas que las guías estáticas suelen pasar por alto:

1. El área de respeto incluye el recorrido del movimiento. Si la marca rebota un 10% por encima de su altura de reposo, el área de respeto se mide desde lo alto del rebote. Si no, el logo animado choca con la navegación o con el borde del video.
2. Tamaño mínimo para las versiones animadas. Un detalle que se lee bien a 200 px se convierte en parpadeo a 32 px. Define un tamaño por debajo del cual solo se usa el logo estático (favicons, avatares pequeños, headers densos).
3. El último fotograma es el logo. Cada reacción puntual termina en el arte aprobado en reposo, porque un video pausado o un dispositivo lento muestra el fotograma en el que se detenga.
4. Siempre existe una alternativa estática, idéntica al último fotograma, para email, impresión, movimiento reducido y cargas fallidas.

Para el vocabulario de revelaciones, stings y loops, consulta logo reveal vs sting vs loop.

¿Cómo debe comportarse una mascota o personaje de marca?

Describe la mascota como un personaje en la biblia de una serie: quién es, qué hace en cada situación y qué no hace nunca. Una versión de una página:

• Personalidad en tres palabras, cada una con un comportamiento. Para una mascota como Kiko: curiosa (se inclina cuando el usuario escribe), tranquila (respiración lenta en reposo), alentadora (un pequeño asentimiento al tener éxito, nunca una celebración por acciones rutinarias).
• Una lista fija de estados. Reposo, carga, éxito, error, vacío, atención y cualquier estado de asistente, como escuchar y hablar. Los estados nuevos pasan por revisión, igual que las nuevas animaciones de logo. Consulta estados de animación de mascota para ver una lista completa.
• Comportamiento ante errores. La mascota puede parecer preocupada, nunca burlona. No se ríe del usuario, no tapa el mensaje de error ni obliga al usuario a esperar su reacción antes de reintentar.
• Frecuencia. La guía de Apple se aplica directamente: “en general, evita agregar movimiento a las interacciones de la UI que ocurren con frecuencia” y “deja que la gente cancele el movimiento”, porque nadie debería esperar una reacción que ya vio veinte veces. Una buena regla es que la mascota reaccione a los hitos, no a cada clic.
• Proporciones y model sheet. Límites de squash and stretch, las poses que respetan el modelo y los ángulos desde los que nunca se dibuja al personaje.
• Ubicación. Dónde puede aparecer la mascota (onboarding, estados vacíos, carga, celebraciones) y dónde no (errores del checkout, pantallas legales, cualquier cosa urgente).

Apple también pide “brevedad y precisión en las animaciones de feedback”, lo que para una mascota significa reacciones cortas ligadas a un evento real y luego volver al reposo.

¿Cuándo debe ir en loop el motion de marca y cuándo debe tener sonido?

Decídelo para cada animación y escríbelo en la especificación, porque cambia tanto la accesibilidad como la elección de archivo.

• Una sola vez por defecto. Las intros de logo, las revelaciones y las reacciones de la mascota se reproducen una vez y quedan en reposo.
• Los loops necesitan un motivo y un límite. Un loop en reposo junto a contenido, que empieza solo y dura más de cinco segundos, necesita una forma de pausarlo, detenerlo u ocultarlo según WCAG 2.2 SC 2.2.2 (nivel A). O haz que el loop se detenga tras unos pocos ciclos, o pon un control de pausa visible.
• Los loops deben ser continuos. El último fotograma de un loop enlaza con el primero sin saltos de posición ni de color. Inclúyelo en la checklist de revisión.

El sonido debe estar desactivado por defecto y nunca transmitir significado por sí solo. La guía de Apple es “hacer que el movimiento sea opcional” y evitar que sea “la única forma de comunicar información importante”; la misma lógica se aplica al sonido. En la web, los navegadores deciden por ti de todos modos: MDN señala que la reproducción de medios con audio suele estar bloqueada hasta que el usuario interactúa con la página, mientras que el video silenciado puede reproducirse automáticamente. Un conjunto de reglas útil:

• El movimiento de la interfaz es silencioso.
• Un logo sonoro (la versión en sonido del logo) existe solo en video y emisión, donde el espectador eligió reproducir sonido.
• Los sonidos de la mascota, si los hay, solo se reproducen después de una acción del usuario y respetan un ajuste de silencio.

¿Qué deben decir las guías de motion sobre el movimiento reducido y los destellos?

Dale a cada animación de las guías una versión con movimiento reducido por escrito. “Desactivarla” es una respuesta válida para lo decorativo; para todo lo que transmite significado, especifica el reemplazo. El sistema de Atlassian lo dice claramente: “cuando el movimiento reducido está activo, el movimiento se desactiva y los cambios son instantáneos”, y pide a los equipos “verificar que la interfaz siga siendo totalmente usable con todo el movimiento desactivado”. IBM Carbon dice: “Ofrece siempre alternativas para las transiciones de estado de la interfaz” y “asegúrate de que siempre haya una forma de comunicar mensajes similares de forma estática”.

En la web, el ajuste es la media feature prefers-reduced-motion, que MDN describe como la preferencia del usuario por una interfaz que “elimine, reduzca o reemplace las animaciones basadas en movimiento”. Los detalles de implementación están en animación accesible y movimiento reducido.

Dos reglas más deben estar en toda guía de marca:

• Destellos. WCAG 2.2 SC 2.3.1 (nivel A): nada “destella más de tres veces en cualquier período de un segundo”, salvo que se mantenga por debajo de los umbrales de destello general y de destello rojo. Los barridos de luz rápidos, los efectos glitch y los videos de lanzamiento estroboscópicos deben revisarse.
• Scroll y parallax. SC 2.3.3 (nivel AAA) pide que el movimiento activado por interacción se pueda desactivar; la explicación del W3C menciona el scroll con parallax como una animación a menudo no esencial que “puede desencadenar trastornos vestibulares”.

¿Qué archivos y formatos deben especificar las guías de motion para la entrega?

Especifica los entregables por plataforma, con nombres, para que el desarrollador reciba la misma animación que aprobó el diseñador:

La fila de Rive merece especial cuidado: los nombres de la máquina de estados son una API. Si las guías dicen que la mascota tiene un número mood y un trigger success, cada archivo nuevo debe conservar esos nombres, o el código de la app se rompe. Trata un cambio de nombre como un cambio incompatible.

Si necesitas estos archivos a partir de un logo existente, Charmotion anima las partes de tu propio logo en lugar de redibujarlo, y los sets de personaje vienen como un archivo de Rive con 17 animaciones, una máquina de estados y Data Binding, además de MP4, GIF, WebM con fondo transparente y MOV, pósters y código para copiar y pegar para web, iOS, Android, Flutter y React Native. Eso le da a tus guías un conjunto concreto y con nombres que documentar. Los planes están en la página de precios.

Cómo escribir guías de motion de marca

1. Escribe los principios. Tres o cuatro principios de una frase que describan cómo debe sentirse el movimiento y para qué sirve.
2. Define los tokens. De cuatro a seis duraciones con nombre y tres curvas de easing, cada una con un uso, entregadas como código.
3. Fija las reglas del logo. Enumera las animaciones de logo aprobadas, lo que está prohibido, el área de respeto incluido el recorrido del movimiento y un tamaño mínimo para el uso animado.
4. Describe la mascota. Personalidad, la lista fija de estados, el comportamiento ante errores, con qué frecuencia reacciona y dónde puede aparecer.
5. Decide los loops y el sonido. Marca cada animación como loop o reacción puntual, agrega reglas de detención para los loops de más de cinco segundos y mantén en silencio el movimiento de la interfaz.
6. Escribe la columna de movimiento reducido. Dale a cada animación una versión con movimiento reducido y revisa los destellos según WCAG 2.3.1.
7. Especifica la entrega. Enumera los formatos por plataforma, los nombres de la máquina de estados y de las propiedades de Rive, los pósters y dónde están los archivos fuente.

Preguntas frecuentes

¿Cuánto debe durar una animación de logo según las guías de marca?

Lo suficiente para leerse y lo bastante poco para no retrasar nada. La mayor parte del movimiento de interfaz en Carbon, Material y Atlassian está entre unos 50 y 400 ms, y los valores más largos se reservan para cambios grandes o a pantalla completa. Las intros de logo duran más porque son momentos de marca, pero en la web mantenlas en uno o dos segundos, haz que terminen en el logo estático y que se puedan saltar.

¿Las guías de motion deben usar curvas de easing o springs?

Cualquiera de las dos sirve si tiene nombre y se comparte con los desarrolladores. Carbon y Atlassian publican curvas cubic-bezier; Material define tanto curvas de easing como tokens de spring, con springs spatial para el movimiento y springs effects para el color y la opacidad. Elige un enfoque por plataforma y documenta los valores.

¿Quién debe ser responsable de las guías de motion de una marca?

Normalmente el equipo de design system o de marca, con un desarrollador como corresponsable de los tokens y los nombres de archivo. Los tokens y los nombres de propiedades de Rive viven en el código, así que los cambios necesitan la misma revisión que cualquier cambio de API.

Fuentes

• Motion, IBM Carbon Design System
• Motion system: easings, durations and springs (Material 3 theme attributes), Material Components for Android on GitHub
• Motion, Apple Human Interface Guidelines
• Motion, Atlassian Design System
• Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
• Understanding SC 2.3.1: Three Flashes or Below Threshold, W3C WAI
• Understanding SC 2.3.3: Animation from Interactions, W3C WAI
• prefers-reduced-motion, MDN Web Docs
• Autoplay guide for media and Web Audio APIs, MDN Web Docs