Motion y branding animado: dando vida a la identidad

Piensa en la última aplicación que abriste. Antes de que tocaras un solo botón, algo probablemente se movió: un logotipo parpadeó suavemente, una forma de carga giró, una pantalla se deslizó a su lugar. Apenas lo notaste, y esa es exactamente la clave. El movimiento se ha convertido discretamente en parte de cómo las marcas se presentan. Un logotipo estático dice "aquí estoy". Uno en movimiento dice "así es como me comporto".

Durante mucho tiempo, el branding significó cosas fijas: una marca, una paleta de colores, una tipografía. Pero cada vez más nuestras vidas transcurren en pantallas que pueden moverse, y las marcas que ignoran eso están dejando de lado la personalidad. En esta guía explicaremos qué es realmente el motion branding, por qué es importante, los elementos básicos con los que puedes empezar y cómo mantenerlo como una sola marca en lugar de un montón de efectos aleatorios. No se necesita experiencia con software de animación.

¿Qué es el "motion branding", en realidad?

El "motion branding" es el uso del movimiento para expresar la identidad de tu marca. Abarca todo, desde un logotipo que se anima cuando se abre una aplicación, hasta la forma en que un botón reacciona al pasar el cursor, o un breve jingle de marca al final de un video. Si tu identidad visual es el elenco de personajes —logotipo, colores, tipo de letra— entonces el movimiento es la forma en que caminan, gesticulan y hablan. Le da un latido a una identidad plana.

Fundamentalmente, el movimiento no es una decoración añadida al final. Bien hecho, expresa la misma personalidad que el resto de tu marca. Una marca tranquila y premium se mueve lenta y suavemente. Una marca juguetona y enérgica rebota y se ajusta. El movimiento debe sentirse como una extensión natural de tu tono de voz de marca; la forma en que te mueves y la forma en que escribes deben provenir claramente del mismo carácter.

Dónde lo verás en realidad

El movimiento aparece en más lugares de lo que la gente espera: lanzamientos de aplicaciones y estados de carga, efectos de desplazamiento en sitios web, publicaciones sociales animadas, introducciones y cierres de videos, íconos animados y transiciones sutiles entre pantallas. Cada uno es una pequeña oportunidad para recordar a alguien quién eres. Y debido a que gran parte de esto vive en la web, ayuda a comprender los fundamentos de la animación web para que tus ideas sean hermosas y rápidas.

Por qué el branding de movimiento vale la pena el esfuerzo

Puede que te preguntes si un logotipo en movimiento es un lujo. No lo es, por tres razones prácticas. Primero, la atención es escasa —el movimiento es una de las formas más rápidas de captar el ojo humano, que evolucionó para notar las cosas que se mueven. Segundo, el movimiento añade memorabilidad; una animación distintiva le da a la gente un gancho más para recordarte. Tercero, señala que eres actual y considerado, lo que genera confianza discretamente.

También hay una recompensa emocional. La forma en que algo se mueve puede sentirse amigable, segura, tranquila o emocionante antes de que se lea una sola palabra. Eso convierte al movimiento en un socio poderoso para el branding emocional — una animación suave y saltarina puede hacer que una marca se sienta cálida de una manera que una imagen estática simplemente no puede.

Los componentes de una identidad de movimiento

No necesitas un presupuesto de Hollywood para empezar. Una identidad de movimiento es realmente un pequeño conjunto de reglas sobre cómo se mueve tu marca, aplicadas de manera consistente. Aquí están los ingredientes principales y lo que hace cada uno.

Fíjate en la última fila. Saber cuándo permanecer inmóvil es tan importante como saber cómo moverse. El movimiento en todas partes es agotador; el movimiento en los momentos adecuados es encantador.

La psicología de cómo se mueven las cosas

El movimiento transmite significado, lo queramos o no, porque nuestros cerebros están programados para leer el movimiento de la misma manera que leemos el lenguaje corporal. Algo que se suaviza y se asienta suavemente se siente tranquilo y confiable, como una persona que habla con voz pausada. Algo que se activa y rebota se siente enérgico y juvenil, como alguien que habla con las manos. Un movimiento brusco y abrupto puede sentirse urgente o incluso agresivo, mientras que uno lento y flotante se siente premium y sereno. Nada de esto es accidental, y significa que tus elecciones de movimiento están diciendo discretamente a la gente cómo sentirse acerca de ti.

Es por eso que tomar prestado el estilo de animación de un competidor rara vez funciona. La forma en que se mueve una marca de lujo —lenta, suave, generosa— se sentiría lenta en una aplicación infantil divertida, y el rebote enérgico de una marca de consumo divertida se sentiría frívolo en un servicio financiero serio. Comienza con tu propia personalidad y deja que el movimiento siga, en lugar de copiar lo que parezca impresionante en otro lugar. Cuando el movimiento coincide con el mensaje, la gente siente que una marca es coherente, incluso si nunca pudieran explicar por qué.

Errores comunes en el "motion branding"

Un puñado de errores estropean un buen movimiento. El primero es exagerar —animar todo hasta que la pantalla nunca se detenga y el contenido sea difícil de enfocar. El segundo es la inconsistencia, donde cada página inventa su propio ritmo y estilo, haciendo que la marca se sienta dispersa. El tercero es el movimiento que no tiene propósito, girando o deslizándose como decoración en lugar de ayudar a alguien a entender lo que está sucediendo. El cuarto es ignorar el rendimiento y la accesibilidad, lanzando animaciones pesadas que se retrasan en dispositivos antiguos o causan incomodidad a personas sensibles al movimiento. Evita estos cuatro, y tu movimiento se sentirá intencional y premium en lugar de recargado y amateur.

Mantén la coherencia, o se desmoronará

La forma más rápida de hacer que el movimiento parezca barato es dejar que cada pantalla invente sus propias reglas. Una página rebota, otra se desliza, una tercera gira sin razón, y de repente tu marca se siente caótica. La solución es la misma que en cualquier otro lugar del branding: elige un pequeño conjunto de reglas de movimiento y aplícalas en todas partes. Esto es simplemente la coherencia de marca extendida al movimiento.

Escribe tus reglas de movimiento

Las pautas de movimiento pertenecen a la documentación de tu marca junto con el color y la tipografía. Anota tu ritmo preferido, el suavizado, la animación distintiva del logotipo y algunas cosas que hacer y no hacer. Si estás construyendo o actualizando las tuyas, nuestra guía sobre cómo crear una guía de estilo de marca y la práctica lista de verificación de pautas de marca muestran qué capturar para que un nuevo diseñador pueda mantenerse fiel a la marca sin adivinar.

Rendimiento y accesibilidad: la parte que la gente olvida

Una marca en movimiento solo es buena si funciona para todos. Las animaciones pesadas pueden ralentizar una página y frustrar a los visitantes con teléfonos antiguos o conexiones más lentas. Mantén los archivos ligeros y los movimientos eficientes. Igual de importante, algunas personas experimentan incomodidad o incluso náuseas con movimientos grandes, así que siempre respeta la configuración de "movimiento reducido" que permite a los visitantes desactivar la animación. Un buen "motion branding" es inclusivo por diseño —añade deleite para quienes lo desean sin castigar a quienes no.

Movimiento en tus canales

Una vez que tengas un lenguaje de movimiento, debería viajar. Las publicaciones animadas tienden a detener el desplazamiento en los feeds sociales mucho mejor que las imágenes estáticas, lo que se conecta perfectamente con una estrategia inteligente de marca en redes sociales. Los mismos movimientos característicos pueden aparecer en los cierres de tus videos, tu aplicación y tu sitio web, unificando todo. Y si tu marca utiliza ilustraciones o íconos, estos también pueden moverse, un tema que se superpone con la iconografía y la ilustración.

Por dónde empezar si partes de cero

No tienes que animarlo todo de una vez. Empieza por el momento que la gente más ve: tu logo. Diseña una animación de buen gusto para la aparición de tu marca y úsala consistentemente. Luego, añade transiciones suaves a tu sitio web para que las pantallas se muevan con intención en lugar de bruscamente. Después, anima algunos de tus iconos más usados o una única plantilla social. Cada pequeña victoria construye una identidad de movimiento coherente con el tiempo, sin un proyecto o presupuesto gigantesco.

El "motion branding" no se trata de alardear. Se trata de darle a tu identidad una forma de moverse que se sienta inconfundiblemente tuya —tranquila o juguetona, audaz o suave— para que incluso una animación de medio segundo recuerde a la gente con quién están tratando. Si las reglas son correctas, y las mantienes consistentes, tu marca deja de ser una imagen y empieza a ser una presencia. Si necesitas ayuda para dar forma a un lenguaje de movimiento que se ajuste a tu identidad, nuestro equipo estará encantado de ayudarte a empezar.

Preguntas frecuentes

Referencias

1. Nielsen Norman Group. “The Role of Animation and Motion in UX.” nngroup.com.
2. Google. “Material Design — Motion.” material.io.
3. Adobe. “Motion Design and Brand Identity.” adobe.com.