Marcas vivas: visuais em movimento e responsivos são a nova identidade

Uma marca viva é uma identidade desenhada para telas, não para papel: seus visuais se movem com suavidade, se recompõem em cada formato e respondem ao que for colocado sobre eles, para que as palavras sempre sejam lidas. A maioria das identidades de marca foi desenhada como imagem fixa e depois cortada para celulares, banners e stories. Uma marca viva mantém as mesmas cores, o mesmo material e a mesma tipografia, mas se comporta mais como uma superfície do que como uma figura. É o passo natural 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. Você não precisa dos três no primeiro dia, mas cada um deixa a marca mais à vontade onde as pessoas realmente a veem.

Uma marca viva é parente de uma identidade dinâmica, mas a ênfase é outra. A identidade dinâmica varia a forma de uma peça para outra de propósito. Uma identidade viva pode parecer igual em todas as peças; o que muda é como ela se comporta dentro de cada uma, movendo-se, encaixando-se e abrindo espaço.

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 concorra com a mensagem. Mantenha as palavras paradas, deixe a superfície se mover devagar e use um só tipo de movimento em todo lugar para que ele vire parte do visual. Movimento para marcas estáticas e fundos de gradiente animado aprofundam a técnica.

Adaptação: um visual, todos os formatos

Uma marca que posta durante a semana pode precisar de um story, um post de feed, uma imagem de link e um banner do LinkedIn. Uma imagem fixa cortada para cada um perde sua melhor parte em pelo menos um deles. Uma identidade viva é renderizada para cada formato, então a luz e as áreas calmas caem no lugar certo todas as vezes. Um visual, todos os tamanhos mostra como isso funciona na prática.

Resposta: fundos que abrem espaço para as palavras

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

Para os princípios por trás disso, veja texto sobre gradiente e contraste de cor e acessibilidade.

Respeite o movimento reduzido

Algumas pessoas ativam o movimento reduzido nas configurações do aparelho 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.

.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 */
  }
}

Como começar uma marca viva sem refazer tudo

1. 1

   Mantenha o seu núcleo fixo

   Cores, tipografia e logo ficam exatamente como estão. Ser vivo é um comportamento acrescentado por cima, não um rebranding.

2. 2

   Faça do fundo a parte que se move

   Ele ocupa mais espaço e carrega menos informação, então o movimento ali não custa nada em clareza.

3. 3

   Escolha uma assinatura de movimento

   Uma deriva, um sopro lento de luz ou um brilho suave. Escreva-a no seu guia de estilo da marca.

4. 4

   Renderize por formato

   Faça cada tamanho a partir da mesma receita em vez de cortar um arquivo mestre.

5. 5

   Confira cada linha de texto

   Em todos os quadros e em todos os formatos, as palavras devem ser lidas sem uma caixa atrás.

O Gradiently foi feito exatamente para isso. Um Mark é um fundo vivo, uma receita de cores, materiais, luz, granulação, movimento e uma voz tipográfica que é renderizada ao vivo atrás de cada design. Ele se compõe sozinho para cada tamanho, sua região mais calma se move para trás das suas palavras e a tinta automática escolhe texto claro ou escuro 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 você pode exportar o design em movimento, como GIF, ou como MP4 ou WebM onde o seu navegador suporta gravação.