Motion design en branding: splash screens y animaciones de logo que hacen que una app parezca premium

La mayoría de la gente conoce tu marca por primera vez en una pantalla pequeña, durante un segundo o dos: una app que se abre, un logo al principio de un vídeo, una story entre otras dos. Un logo estático puede quedar muy bien ahí. Un logo que se mueve bien le dice a la gente, antes de que lea una sola palabra, que alguien ha cuidado los detalles.

Diseño identidades de marca con el movimiento incorporado desde el principio, para apps como Sculpt y Poppin y para productos como ChromaAI. En este artículo te cuento dónde aporta el motion a una marca, cómo diseño splash screens y animaciones de logo, y qué pedir para que tu equipo reciba piezas que de verdad pueda usar.

El motion no es decoración. Bien usado, cumple tres funciones:

• Transmite cuidado. Un timing fluido y seguro es difícil de fingir. La gente lo percibe como calidad, igual que percibe una buena tipografía, aunque no sepa explicar por qué.
• Genera reconocimiento. Un logo que siempre aparece de la misma forma se convierte en un pequeño ritual. Después de unas cuantas aperturas, la animación forma parte de la identidad.
• Muestra personalidad. Una aparición rápida y con rebote dice algo distinto que un fundido lento. El motion es el tono de voz de lo visual.

También funciona al revés. Una splash screen que va a tirones, un loop que se entrecorta o una intro que hace esperar hacen más daño que no tener ninguna animación.

Cuando planifico el motion de una marca, empiezo por identificar los momentos en los que va a aparecer:

1. Apertura de la app y splash screen. Los primeros fotogramas después de tocar el icono.
2. Animación del logo. El inicio y el final de vídeos, publicaciones en redes, presentaciones y pantallas de eventos.
3. Onboarding y estados vacíos. Pequeños momentos animados que hacen que el primer uso se sienta guiado.
4. Microinteracciones de la interfaz. Botones, cargas, estados de éxito y transiciones que comparten el mismo timing y la misma curva de aceleración.
5. Vídeos de lanzamiento y de campaña. El formato más largo, donde todo lo anterior se junta.

No necesitas los cinco desde el primer día. Pero diseñar el logo y el timing básico pensando en todos ellos te ahorra un rediseño más adelante.

Sculpt AI es una app de fitness que reúne el registro de entrenamientos y de comidas en un solo lugar, y usa la IA para que la experiencia sea sencilla. Como Creative Director, empecé por los cimientos: una identidad de marca moderna y limpia, acompañada de motion design para la animación de marca y las visuales de la splash screen. Solo después pasamos al nuevo flujo de usuario y a más de 150 pantallas de interfaz.

La animación del logo gira en torno a la energía, que es de lo que trata el producto. Una chispa dibuja el rayo y el logotipo de sculpt sobre un fondo naranja y después se asienta en el logo estático. Ese último fotograma importa: toda animación de marca debería terminar exactamente en el logo que la gente ve en todas partes, para que el movimiento y la identidad estática se refuercen entre sí.

La splash screen es el único sitio donde el motion puede molestar con facilidad, porque se interpone entre el usuario y la app. Mis reglas:

• Nunca añadas espera. La animación debe reproducirse mientras la app carga, no después. Si la app ya está lista, deja que el usuario entre.
• Que sea corta. Para que aparezca un logo, suele bastar con un segundo más o menos. Todo lo que sea más largo va en el onboarding o en un vídeo.
• Parte de la pantalla de lanzamiento. El primer fotograma debe coincidir exactamente con la pantalla de lanzamiento estática de la plataforma, para que no haya un salto visible cuando empieza la animación.
• Que sea ligera. Los formatos vectoriales como Lottie mantienen los archivos pequeños y los bordes nítidos en cualquier pantalla.
• Respeta el movimiento reducido. Si alguien ha activado la reducción de movimiento en los ajustes del sistema, muestra un fundido sencillo o el logo estático.
• Usa la versión completa con moderación. Muchas apps muestran la animación completa en la primera apertura y una más corta a partir de ahí.

Para Poppin, una app para descubrir eventos, el encargo era una animación, y acabó siendo un rediseño del logo de la botella, una versión en 3D y dos animaciones. Cada pieza tiene una función distinta:

• Una animación 3D principal. La botella iridiscente se descorcha, para intros de la app, la web y campañas de lanzamiento.
• Un loop de motion graphics en 2D. Una botella blanca de línea se inclina y se descorcha mientras se dibuja el logotipo. Es rápido, se repite en bucle y es lo bastante ligero para publicaciones diarias, stories y anuncios.

Esa combinación funciona para la mayoría de marcas: una pieza pulida para los grandes momentos y un loop sencillo que el equipo puede usar a diario. Si te estás planteando el 3D, mi guía de animación 3D de producto profundiza en el proceso.

Con ChromaAI, una plataforma de creación de contenido con IA, el trabajo iba más allá de un logo. Además de rediseñar más de 100 pantallas, creé un sistema de motion y le di al producto una imagen nueva. El símbolo en forma de media luna aparece animado sobre un fondo lavanda suave, y el mismo lenguaje de movimiento se traslada al vídeo de lanzamiento de 30 segundos, construido con componentes reales de la interfaz en lugar de visuales abstractas.

Un sistema de motion no es más que un conjunto de reglas que todo el mundo puede seguir:

• Duraciones. Unos pocos valores fijos para movimientos pequeños, medianos y grandes.
• Curvas de aceleración. Una o dos curvas que definen cómo arrancan y se detienen las cosas.
• Coreografía. Qué se mueve primero, cómo se siguen los elementos y cómo entran y salen las pantallas.
• Momentos característicos. La aparición del logo, los estados de éxito y las cargas, diseñados una vez y reutilizados.

Con esas reglas, un desarrollador que anima un modal nuevo y un editor que monta un vídeo para redes acaban con un movimiento que se siente de la misma marca.

• La animación del logo en un formato vectorial para la app, como Lottie, además de MP4 y WebM para la web.
• Versiones cuadrada, vertical y horizontal para redes, presentaciones y pantallas de eventos.
• Una versión corta y otra completa de la animación.
• Una versión con fondo transparente para colocarla sobre vídeo.
• Un fotograma final estático que coincida exactamente con el logo.
• Las reglas de motion: duraciones, curvas de aceleración y ejemplos, para que el equipo pueda ampliarlas.
• Los archivos fuente, para que las próximas modificaciones no empiecen de cero.

¿También estás planteando una identidad nueva? Mi artículo sobre qué incluye una identidad de marca explica cada pieza, y puedes ver los proyectos completos en mis casos de estudio.