# Marcas vivas: porque os visuais em movimento são a próxima identidade

[Canonical HTML page](https://gradiently.design/pt-pt/guide/living-brand-identity)

A maioria das identidades foi desenhada para papel e depois colada em telemóveis. Uma marca viva é desenhada para ecrãs: move-se um pouco, serve todas as formas e faz espaço para o que transporta.

## The short version

- Uma identidade de marca viva é aquela cujos visuais se movem, se adaptam a cada formato e respondem ao conteúdo que lhes é posto, em vez de ficarem uma imagem fixa.
- O movimento ajuda nos ecrãs porque uma mudança suave prende o olhar num feed, sem precisar de uma rodagem de vídeo.
- A legibilidade responsiva significa que o fundo se ajusta onde as palavras ficam, para o texto se ler em todas as molduras.
- Uma identidade viva continua a precisar de regras fixas: a mesma família de cores, o mesmo material, a mesma tipografia e o mesmo tipo de movimento sempre.
- As boas marcas vivas respeitam quem prefere movimento reduzido e oferecem uma versão estática.

Uma **marca viva** é uma identidade desenhada para ecrãs e não para papel: os seus visuais movem-se suavemente, recompõem-se para cada formato e respondem ao que lhes é posto, para as palavras se lerem sempre. A maioria das identidades de marca foi desenhada como imagens fixas e depois cortada para telemóveis, banners e stories. Uma marca viva mantém as mesmas cores, o mesmo material e a mesma tipografia, mas comporta-se mais como uma superfície do que como uma imagem. É o passo natural seguinte para marcas que vivem sobretudo em feeds.

## O que torna viva uma identidade de marca

Três comportamentos separam uma identidade viva de uma estática. Não precisas dos três no primeiro dia, mas cada um faz a marca sentir-se mais em casa onde as pessoas realmente a veem.

| Comportamento | O que significa | Porque ajuda |
| --- | --- | --- |
| Movimento | O fundo desliza, respira ou desloca a luz lentamente | Prende o olhar num scroll sem gritar |
| Adaptação | Recompõe-se para cada tamanho em vez de ser cortada | A melhor parte do visual cai no sítio certo em cada formato |
| Resposta | Muda onde as palavras ficam para se manterem legíveis | Cada título lê-se sem caixas, sombras ou desfoque |

Movimento, adaptação e resposta. Juntos, transformam uma identidade de imagem em superfície.

Uma marca viva está relacionada com uma [identidade dinâmica](https://gradiently.design/pt-pt/guide/dynamic-brand-identity), mas a ênfase é diferente. Uma identidade dinâmica varia de propósito a forma de uma peça para outra. Uma identidade viva pode ter o mesmo aspeto em todas as peças; o que muda é como se comporta dentro de cada uma, movendo-se, ajustando-se e abrindo espaço pelo caminho.

## Movimento: pequeno, lento e sempre do mesmo tipo

O movimento é a parte mais visível de uma marca viva e a mais fácil de exagerar. O objetivo é um fundo que pareça vivo, não que compita com a mensagem. Mantém as palavras paradas, deixa a superfície mover-se devagar e usa um só tipo de movimento em todo o lado para que se torne parte do visual. [Movimento para marcas estáticas](https://gradiently.design/pt-pt/guide/motion-for-still-brands) e [fundos de gradiente animados](https://gradiently.design/pt-pt/guide/animated-gradient-background) aprofundam o ofício.

### Evita

- Ciclos rápidos de cor
- Palavras que saltam ou rodam
- Um estilo de animação diferente por publicação
- Ciclos com um salto visível no fim

### Faz

- Uma deriva lenta de luz pela superfície
- Palavras paradas, ou uma entrada calma
- Uma assinatura de movimento para toda a marca
- Um ciclo contínuo que se une de forma invisível

## Adaptação: um visual, todas as formas

Uma marca que publica numa semana pode precisar de um story, uma publicação de feed, uma imagem de link e um banner do LinkedIn. Uma imagem fixa cortada para cada um perde a melhor parte em pelo menos um deles. Uma identidade viva é renderizada para cada forma, por isso a luz e as zonas calmas caem sensatamente de cada vez. [Um visual, todos os tamanhos](https://gradiently.design/pt-pt/guide/one-look-every-size) mostra como isto funciona na prática.

- Story 1080×1920: 1080 × 1920
- Publicação Instagram 1080×1350: 1080 × 1350
- Pré-visualização de link 1200×630: 1200 × 630
- Banner LinkedIn 1584×396: 1584 × 396

De muito alto a muito largo. Uma identidade viva recompõe-se para cada um em vez de ser recortada de uma só imagem.

## Resposta: fundos que abrem espaço às palavras

Num gradiente ou numa superfície em movimento, o contraste muda ao longo da moldura e do tempo. Um título que se lê bem num segundo pode afundar-se numa mancha clara no seguinte. As soluções habituais, uma caixa atrás do texto, uma sombra ou um desfoque, lutam todas contra o fundo. Uma identidade responsiva resolve-o na origem: a parte mais calma da superfície fica atrás das palavras e as cores junto às letras aprofundam-se ou aclaram-se.

Uma publicação de escola de dança em que a zona clara do gradiente atravessa diretamente o título

Um fundo fixo: a zona mais clara pode cair mesmo atrás do título.

A mesma publicação de escola de dança com uma zona calma e mais escura do gradiente atrás do título

Um fundo responsivo: a zona calma move-se para trás das palavras e a letra fica nítida.

Para os princípios por trás disto, vê [texto sobre gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) e [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility).

## Respeita o movimento reduzido

Algumas pessoas ativam o movimento reduzido nas definições do dispositivo porque a animação lhes faz mal ou as distrai. Uma marca viva na web deve respeitar essa preferência e mostrar uma versão estática do mesmo visual. São poucas linhas de CSS, documentadas na [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).

```css
.brand-surface {
  background: linear-gradient(120deg, #0f172a, #1e3a8a, #0e7490, #0f172a);
  background-size: 300% 300%;
  animation: drift 24s ease-in-out infinite alternate;
}

@keyframes drift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-surface {
    animation: none;
    background-position: 30% 50%; /* a calm, still frame of the same look */
  }
}
```

Uma deriva lenta por uma superfície azul-marinho, azul e verde-azulada, com uma moldura estática para quem prefere movimento reduzido. Mais em [movimento reduzido](https://gradiently.design/pt-pt/guide/reduced-motion).

## Como começar uma marca viva sem reconstruir tudo

1. **Mantém o teu núcleo fixo** Cores, tipografia e logótipo ficam exatamente como estão. Viva é um comportamento acrescentado por cima, não uma mudança de marca.
2. **Faz do fundo a parte que se move** Ocupa mais espaço e leva menos informação, por isso o movimento ali não custa nada em clareza.
3. **Escolhe uma assinatura de movimento** Uma deriva, uma respiração lenta de luz ou um cintilar suave. Escreve-a no teu [guia de estilo da marca](https://gradiently.design/pt-pt/guide/brand-style-guide).
4. **Renderiza por formato** Faz cada tamanho a partir da mesma receita em vez de cortar um ficheiro mestre.
5. **Verifica cada linha de texto** Em cada moldura e em cada formato, as palavras devem ler-se sem uma caixa por trás.

O Gradiently foi feito exatamente para isto. Um Mark é um fundo vivo, uma receita de cores, materiais, luz, grão, movimento e uma voz tipográfica que se renderiza ao vivo atrás de cada design. Compõe-se para cada tamanho, a sua região mais calma move-se para trás das tuas palavras e a **tinta automática** escolhe letra clara ou escura linha a linha a partir da paleta do próprio Mark. As palavras podem entrar com animações simples como subir ou revelar, e com o Pro podes exportar o design em movimento, como GIF, ou como MP4 ou WebM onde o teu navegador suporte gravação.

## FAQ

### O que é uma identidade de marca viva?

Uma identidade cujos visuais se movem suavemente, se adaptam a todos os formatos e respondem às palavras que lhes são postas, mantendo as mesmas cores, material e tipografia.

### O motion branding é só para grandes empresas?

Não. Um fundo que se move devagar atrás de palavras paradas chega, e não precisa de rodagem de vídeo nem de equipa de animação.

### Um fundo em movimento dificulta a leitura do meu texto?

Pode, se as zonas claras ou agitadas passarem atrás das palavras. Mantém o movimento lento e a parte mais calma da superfície atrás do texto.

### Como deve uma marca viva tratar as definições de movimento reduzido?

Mostra uma moldura estática do mesmo visual quando o dispositivo pedir movimento reduzido. Na web, usa a media query prefers-reduced-motion.