Logótipos famosos com gradiente: o que as grandes marcas nos ensinam

Os logótipos com gradiente famosos passaram de raros a omnipresentes em meados da década de 2010, quando algumas das aplicações mais usadas do mundo adotaram símbolos simples sobre gradientes coloridos. A mudança ensinou aos designers uma lição que continua válida: quando um logótipo aparece como um pequeno quadrado entre dezenas de outros, a cor faz mais trabalho de reconhecimento do que a forma. As melhores identidades com gradiente juntam uma marca muito simples a um gradiente fixo, distintivo e usado em todo o lado.

Este artigo analisa três remodelações muito documentadas e tira delas lições gerais. Descreve o que mudou publicamente, não como nem porquê as empresas o decidiram. Para o ofício de criar um, vê logótipos com gradiente: quando funcionam.

Porque é que os logótipos com gradiente dominaram os ícones de aplicações

Os ecrãs principais dos telemóveis mudaram o que um logótipo tem de fazer. Todas as aplicações recebem o mesmo quadrado arredondado, mais ou menos do mesmo tamanho, rodeado de outros. As ilustrações detalhadas ficam desfocadas a esse tamanho, e uma só cor lisa é partilhada com dezenas de outras aplicações. Um gradiente oferece um meio-termo: uma assinatura de cor com mais combinações do que a cor lisa permite, legível mesmo quando o símbolo por cima é demasiado pequeno para se ver bem.

Instagram, 2016: o gradiente torna-se a marca

Em maio de 2016, o Instagram trocou o seu ícone de câmara retro e detalhado por um contorno simples de câmara em branco sobre um gradiente que vai do amarelo quente e do laranja, em baixo à esquerda, passando pelo rosa e pelo magenta, até ao roxo, em cima à direita. No lançamento, a empresa apresentou as cores como uma evolução da faixa arco-íris do ícone antigo. A remodelação provocou reações fortes ao início, e o gradiente manteve-se no centro da marca desde então, renovado em 2022 juntamente com um novo tipo de letra.

• O símbolo simplificou-se à medida que a cor enriqueceu. Uma câmara em contorno deixa espaço para que o gradiente seja a parte reconhecível.
• O valor que já existia foi preservado. As cores do ícone antigo foram reinterpretadas em vez de deitadas fora.
• Um percurso diagonal do quente ao frio dá ao gradiente uma direção que as pessoas conseguem recordar, não só um conjunto de cores.

Messenger, 2020: uma mudança de cor que anunciou uma mudança de produto

Em 2020, o Messenger trocou o seu logótipo azul liso por um gradiente de azul, roxo e rosa. A mudança chegou ao mesmo tempo que as mensagens entre o Instagram e o Messenger. A forma, um balão de fala com um relâmpago, ficou, para que as pessoas o continuassem a encontrar; só a cor mudou.

A lição: um gradiente pode dizer “isto mudou” sem perder reconhecimento, desde que a forma que as pessoas conhecem se mantenha. É um padrão útil para qualquer remodelação de marca: muda um sinal forte de cada vez.

Firefox, 2019: uma família de gradientes para muitos produtos

Em 2019, a Mozilla apresentou um novo sistema de marca em que Firefox passou a ser o nome de família de vários produtos. O logótipo do navegador manteve a raposa, simplificada, e a família partilhou gradientes vivos de amarelo, laranja, vermelho, rosa e roxo nos ícones dos produtos. Cada ícone tinha a sua forma, mas os gradientes partilhados faziam-nos parecer parentes.

O que estas identidades com gradiente têm em comum

Cinco lições para o teu próprio logótipo com gradiente

1. 1

   Mantém a forma muito simples

   É o gradiente que fala, por isso a marca por cima deve ler-se ao tamanho de um ícone de aplicação ou de um avatar.

2. 2

   Preserva a cor que já é reconhecida

   Se já tens uma cor conhecida, constrói o gradiente a partir dela. O reconhecimento que já conquistaste merece ser mantido.

3. 3

   Fixa o gradiente com exatidão

   Regista cada paragem, posição e ângulo. Um gradiente refeito a olho desvia-se, e o reconhecimento desvia-se com ele. A coerência de marca explica porquê.

4. 4

   Tem sempre uma versão plana

   Favicons, bordados, impressão a uma cor e algumas interfaces não conseguem mostrar um gradiente. Escolhe uma cor lisa e uma versão do símbolo a branco ou a preto.

5. 5

   Usa o gradiente para lá do logótipo

   Os exemplos mais fortes repetem o gradiente em fundos, destaques e movimento, para que se torne um ativo distintivo da marca por direito próprio.

.logo-tile {
  /* Flat fallback: the one colour chosen for small or limited uses */
  background-color: #d62976;
  /* The exact gradient, with every stop recorded */
  background-image: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%);
  border-radius: 22%;
  aspect-ratio: 1;
}

Um gradiente também pode correr mal por trás de um logótipo, e não só dentro dele. Se o teu logótipo assenta sobre o teu próprio gradiente, lê colocar um logótipo sobre um gradiente, e para construir uma identidade completa à volta de um, branding com gradientes.