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

[Canonical HTML page](https://gradiently.design/pt-pt/guide/motion-branding-guide)

Duas marcas podem partilhar a mesma fonte e a mesma cor e, ainda assim, não ter nada a ver quando se movem. O movimento é a parte da identidade que a maioria das marcas deixa ao acaso.

## The short version

- O motion branding é o conjunto de regras para o modo como o logótipo, a tipografia, os fundos e a interface de uma marca se movem.
- As decisões centrais são o ritmo, a suavização, a direção e que elementos podem mexer.
- O movimento de uma marca deve corresponder ao seu carácter: as marcas calmas movem-se devagar com suavização gentil, as marcas enérgicas movem-se mais depressa e com mais ressalto.
- As regras de movimento são mais úteis escritas como poucas durações e curvas de suavização com nome, partilhadas por designers e programadores.
- Um bom motion branding inclui sempre uma versão de movimento reduzido para quem pede aos seus dispositivos menos movimento.

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](https://gradiently.design/pt-pt/guide/motion-for-still-brands) 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](https://gradiently.design/pt-pt/guide/easing) 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.

| Carácter | Ritmo | Suavização | Comportamento típico |
| --- | --- | --- | --- |
| Calmo, premium | Lento, 400 a 700 ms | Saída suave | Esbatimentos, subidas lentas, cor à deriva |
| Confiante, editorial | Médio, 250 a 400 ms | Saída firme | Varrimentos, deslizamentos limpos, cortes ao compasso |
| Divertido, simpático | Rápido, 200 a 350 ms | Saída com ressalto | Saltos, ressaltos, entradas com escala |
| Técnico, preciso | Rápido, 150 a 250 ms | Entrada e saída acentuadas | Deslizamentos retos, texto de máquina de escrever |

Pontos de partida para o movimento de interface e de texto. O movimento de fundo e ambiente é muito mais lento, medido em segundos.

As ideias de base, como o tempo, a hierarquia e o prolongamento, estão nos [princípios de motion design](https://gradiently.design/pt-pt/guide/motion-design-principles). 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.

```css
: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; }
}
```

O movimento de uma marca como tokens. Três durações, um ritmo ambiente e três curvas com nome cobrem quase tudo.

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](https://gradiently.design/pt-pt/guide/reduced-motion) explica como.

## O movimento nos materiais de uma marca

| Material | O que definir | Exemplo de regra |
| --- | --- | --- |
| Logótipo | A entrada, o estado de repouso, quanto tempo se mantém | Desenha-se em 800 ms, mantém-se parado, nunca em ciclo |
| Tipografia | Um ou dois estilos de entrada | Os títulos sobem; as linhas de apoio esbatem-se um tempo depois |
| Fundos | Velocidade, direção, se fazem ciclo | A cor desloca-se devagar e repete-se a cada 12 segundos |
| Transições | Como uma cena ou página substitui outra | Varrimento no sentido da leitura, nunca uma rotação |
| Interface | Pairar, premir, abrir e fechar | Os painéis abrem com a duração base e fecham mais depressa |

Uma linha por material chega. Se uma regra precisa de um parágrafo para se explicar, provavelmente é demasiado complicada.

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](https://gradiently.design/pt-pt/guide/animated-logo) percorre as principais abordagens.

Design vertical com um título editorial sobre fazer as coisas devagar, sobre um gradiente que se desloca suavemente

Uma marca calma: durações longas, cor que se desloca, palavras que se esbatem e ficam.

Design vertical de lançamento de produto com o texto Chegou, em cor viva e layout ousado

Uma marca divertida: ritmo mais rápido, palavras que saltam com ressalto, movimento mais vivo no fundo.

## 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.

Um campo de cor da marca: `radial-gradient(110% 80% at 70% 30%, #a7f3d0 0%, #10b981 35%, #065f46 70%, #022c22 100%)`

Um fundo assim, a mover-se devagar e sempre da mesma forma, torna-se tão reconhecível como um logótipo.

É 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](https://gradiently.design/pt-pt/guide/brand-gradient-system) tratam de como construir a cor à volta dele.

### Movimento fora da marca

- Cada designer escolhe as suas transições
- Todos os elementos animam ao mesmo tempo
- Fundos em movimento de bancos de imagens
- Diretrizes escritas só com adjetivos
- Sem plano para movimento reduzido

### Motion branding

- Dois ou três comportamentos com nome, usados em todo o lado
- Uma coisa move-se de cada vez, por ordem
- Um fundo que pertence à marca
- Durações e curvas com nome em tokens partilhados
- Uma alternativa estática ou em esbatimento definida

## FAQ

### O que é o motion branding?

O motion branding é o conjunto de regras para o modo como uma marca se move: ritmo, suavização, direção e que elementos podem mexer. Mantém vídeos, publicações, sites e apps com o aspeto de uma só marca.

### O que devem incluir as diretrizes de movimento de uma marca?

Poucas durações com nome, poucas curvas de suavização, dois ou três comportamentos de entrada, regras para o logótipo, a tipografia, os fundos e as transições, e o que acontece quando alguém prefere movimento reduzido.

### Que velocidade devem ter as animações de marca?

O movimento de interface e de texto fica normalmente entre cerca de 150 e 700 milissegundos, mais rápido para marcas enérgicas e mais lento para as calmas. O movimento de fundo é muito mais lento, medido em segundos.

### Uma marca pequena precisa de motion branding?

Uma versão curta ajuda qualquer marca que publique vídeo ou stories. Até uma regra sobre como entram as palavras e um fundo em movimento mantêm o conteúdo consistente.