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

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.

Uma marca viva está relacionada com uma identidade dinâmica, 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 e fundos de gradiente animados aprofundam o ofício.

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 mostra como isto funciona na prática.

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.

Para os princípios por trás disto, vê texto sobre gradiente e contraste de cor e acessibilidade.

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.

.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 reconstruir tudo

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

4. 4

   Renderiza por formato

   Faz cada tamanho a partir da mesma receita em vez de cortar um ficheiro mestre.

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