Motion branding: como uma marca se move, não só como se vê

O motion branding é a parte de uma identidade que descreve como a marca se move: com que rapidez as coisas acontecem, como aceleram e abrandam, que direção seguem e o que pode mexer. Um logótipo que encaixa de repente diz algo diferente de um que entra a deslizar. Escrito como um punhado de regras, o movimento faz com que cada vídeo, story, site e app pareça a mesma marca, mesmo quando as cores e os layouts mudam.

Porque é que o movimento pertence a uma identidade de marca

A maioria dos manuais de marca fica pelo logótipo, a cor e a tipografia, porque foram escritos para impressão. Hoje as pessoas encontram muitas vezes uma marca em movimento: num Reel, num story animado, no topo de um site, numa interface de produto. Se ninguém decide como essas coisas se movem, cada designer e cada ferramenta decide por elas, e a marca começa a comportar-se como várias empresas diferentes.

Até uma marca maioritariamente estática ganha com isto. Uma só regra, como “as palavras chegam a subir suavemente, nunca a rodar”, evita muito trabalho fora da marca antes de começar. Se a tua marca nunca se moveu, os gráficos em movimento para marcas são um ponto de partida suave.

As quatro decisões do motion branding

1. Ritmo. Quanto tempo demoram as coisas. Durações curtas parecem eficientes e vivas; as longas parecem calmas, ponderadas ou luxuosas.
2. Suavização. Como o movimento acelera e abranda. Uma saída suave parece natural; um ligeiro ressalto parece divertido; linear parece mecânico. Vê a suavização para as curvas.
3. Direção e comportamento. As coisas sobem, deslizam, escalam, esbatem ou revelam-se? Escolhe dois ou três comportamentos e usa-os de forma consistente.
4. O que se move. Decide que elementos podem mexer: o fundo, as palavras, o logótipo, as fotografias. A contenção aqui é a maior diferença entre premium e confuso.

As ideias de base, como o tempo, a hierarquia e o prolongamento, estão nos princípios de motion design. O motion branding é o ato de escolher entre elas e assumir a escolha.

Escrever regras de movimento que designers e programadores partilham

As diretrizes de movimento falham quando são escritas como adjetivos. “Suave e confiante” quer dizer coisas diferentes para cada pessoa. Dá nome a algumas durações e a algumas curvas de suavização, entrega-as a designers e programadores com as mesmas palavras, e a marca move-se da mesma maneira num editor de vídeo e em 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; }
}

Repara na última regra. Há pessoas que ficam distraídas ou indispostas com o movimento e pedem menos ao seu dispositivo. Uma marca em movimento completa define o que acontece nesse caso, normalmente um simples esbatimento ou nenhum movimento. O movimento reduzido explica como.

O movimento nos materiais de uma marca

O logótipo costuma receber mais atenção e aparece menos vezes. Os fundos e a tipografia estão muito mais tempo no ecrã, e é aí que a consistência compensa. Para o próprio logótipo, o logótipo animado percorre as principais abordagens.

Fundos que se movem como a tua marca

O movimento mais visível na maioria do conteúdo de marca é o fundo: a cor em movimento por trás de um story, de um Reel ou do topo de um site. É também o movimento que as marcas mais vezes vão buscar a bancos de imagens, o que quer dizer que não pertence a ninguém. Um fundo cujas cores, luz, grão e movimento são todos teus faz mais pelo reconhecimento do que uma animação elaborada de logótipo vista uma vez.

É assim que funcionam os Marks no Gradiently. Um Mark é uma receita de cores, materiais, luz, grão, movimento e uma voz tipográfica, por isso o seu movimento faz parte da identidade e não é um efeito que acrescentas. Todos os designs que o usam, de um story a um slide, movem-se da mesma maneira e, como cada Mark é único e tem um só dono, o conteúdo de mais ninguém se move exatamente como o teu. Os sistemas de gradientes de marca tratam de como construir a cor à volta dele.