Motion branding: como uma marca se move, não só como ela parece

O motion branding é a parte de uma identidade que descreve como a marca se move: com que rapidez as coisas acontecem, como aceleram e desaceleram, em que direção viajam e o que pode se mover. Um logo que encaixa de repente diz algo diferente de um que flutua até o lugar. Registrado como um punhado de regras, o movimento faz todo vídeo, story, site e app parecer a mesma marca, mesmo quando as cores e os layouts mudam.

Por que o movimento pertence à identidade de uma marca

A maioria dos manuais de marca para no logo, na cor e na tipografia, porque foram escritos para a mídia impressa. Hoje as pessoas muitas vezes encontram uma marca em movimento: num Reel, num story animado, num destaque de site, numa interface de produto. Se ninguém decide como essas coisas se movem, cada designer e cada ferramenta decide por conta própria, e a marca passa a se comportar como várias empresas diferentes.

Até uma marca quase sempre estática se beneficia. Uma única regra, como “as palavras chegam subindo com suavidade, nunca girando”, evita muito trabalho fora da marca antes mesmo de começar. Se a sua marca nunca se moveu, motion graphics para marcas é um começo tranquilo.

As quatro decisões do motion branding

1. Ritmo. Quanto tempo as coisas levam. Durações curtas parecem eficientes e animadas; as longas parecem calmas, ponderadas ou luxuosas.
2. Easing. Como o movimento acelera e desacelera. Um ease out suave parece natural; um leve overshoot parece divertido; o linear parece mecânico. Veja easing para as curvas.
3. Direção e comportamento. As coisas sobem, deslizam, mudam de escala, aparecem aos poucos ou se revelam? Escolha dois ou três comportamentos e use-os de forma consistente.
4. O que se move. Decida quais elementos podem se mover: o fundo, as palavras, o logo, as fotos. A contenção aqui é a maior diferença entre premium e carregado.

As ideias de base, como tempo, hierarquia e follow through, são tratadas em princípios de motion design. O motion branding é o ato de escolher entre elas e se comprometer.

Escrevendo regras de movimento que designers e desenvolvedores compartilham

Diretrizes de movimento falham quando são escritas com adjetivos. “Suave e confiante” significa algo diferente para cada pessoa. Dê nome a algumas durações e algumas curvas de easing, entregue-as a designers e desenvolvedores com as mesmas palavras, e a marca se move do mesmo jeito num editor de vídeo e no 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; }
}

Repare na última regra. Algumas pessoas se distraem ou passam mal com movimento e pedem ao dispositivo menos dele. Uma marca em movimento completa define o que acontece então, em geral um fade simples ou nenhum movimento. Movimento reduzido explica como.

O movimento nos materiais de uma marca

O logo costuma receber mais atenção e aparece menos vezes. Fundos e tipografia ficam na tela muito mais, e é aí que a consistência compensa. Para o próprio logo, logo animado percorre as principais abordagens.

Fundos que se movem como a sua marca

O movimento mais visível na maioria dos conteúdos de marca é o fundo: a cor em movimento atrás de um story, de um Reel ou de um destaque. É também o movimento que as marcas mais pegam emprestado de bancos de imagens, o que significa que não pertence a ninguém. Um fundo cujas cores, luz, grão e movimento são todos seus faz mais pelo reconhecimento do que uma animação de logo elaborada vista uma vez.

É assim que os Marks funcionam na Gradiently. Um Mark é uma receita de cores, materiais, luz, grão, movimento e uma voz tipográfica, então o seu movimento faz parte da sua identidade, e não é um efeito que você acrescenta. Todo design que o veste, de um story a um slide, se move do mesmo jeito e, como cada Mark é único e tem um só dono, o conteúdo de mais ninguém se move exatamente como o seu. Sistemas de degradê de marca mostra como construir a cor em torno dele.