Logotipos com gradiente famosos: o que identidades conhecidas ensinam

Os logotipos com gradiente famosos passaram de incomuns a onipresentes em meados dos anos 2010, quando alguns dos apps mais usados do mundo migraram para glifos simples sobre gradientes coloridos. A mudança ensinou aos designers uma lição que continua valendo: quando um logotipo aparece como um quadradinho entre dezenas de outros, a cor faz mais do trabalho de reconhecimento do que a forma. As melhores identidades com gradiente unem uma marca muito simples a um gradiente fixo, distintivo e usado em todo lugar.

Este artigo examina três redesigns amplamente documentados e tira lições gerais deles. Ele descreve o que mudou em público, não como nem por que as empresas decidiram. Para a técnica de fazer um, veja logotipos com gradiente: quando funcionam.

Por que os logotipos com gradiente tomaram conta dos ícones de app

As telas iniciais dos celulares mudaram o que um logotipo precisa fazer. Todo app ganha o mesmo quadrado arredondado, mais ou menos do mesmo tamanho, cercado por outros. Ilustrações detalhadas ficam borradas nesse tamanho, e uma única cor chapada é compartilhada com dezenas de outros apps. Um gradiente oferece algo no meio: uma assinatura de cor com mais combinações do que a cor chapada permite, legível mesmo quando o glifo por cima é pequeno demais para se ver bem.

Instagram, 2016: o gradiente vira a marca

Em maio de 2016, o Instagram trocou o ícone detalhado e retrô de câmera por um contorno simples de câmera em branco sobre um gradiente que ia do amarelo quente e do laranja no canto inferior esquerdo, passando pelo rosa e pelo magenta, ao roxo no canto superior direito. No lançamento, a empresa apresentou as cores como uma evolução da listra arco-íris do ícone antigo. O redesign provocou reações fortes no início, e o gradiente continua no centro da marca desde então, renovado em 2022 junto com uma nova fonte.

• O glifo ficou mais simples à medida que a cor ficou mais rica. Uma câmera em contorno deixa espaço para o gradiente ser a parte reconhecível.
• O patrimônio existente foi levado adiante. As cores do ícone antigo foram reinterpretadas, não jogadas fora.
• Um caminho diagonal do quente ao frio dá ao gradiente uma direção que as pessoas conseguem lembrar, não só um conjunto de cores.

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

Em 2020, o Messenger trocou o logotipo em azul sólido por um gradiente de azul, roxo e rosa. A mudança veio ao mesmo tempo que as mensagens entre Instagram e Messenger. A forma, um balão de fala com um raio, permaneceu, então as pessoas ainda conseguiam encontrá-lo; só a cor mudou.

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

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

Em 2019, a Mozilla apresentou uma nova identidade em que o Firefox virou o nome de uma família de vários produtos. O logotipo do navegador manteve a raposa, simplificada, e a família compartilhou gradientes vibrantes de amarelo, laranja, vermelho, rosa e roxo entre os ícones dos produtos. Cada ícone tinha a própria forma, mas os gradientes compartilhados faziam com que parecessem parentes.

O que essas identidades com gradiente têm em comum

Cinco lições para o seu logotipo com gradiente

1. 1

   Mantenha a forma muito simples

   O gradiente fala por si, então a marca por cima deve ser legível no tamanho de um ícone de app ou de um avatar.

2. 2

   Leve adiante uma cor reconhecível

   Se você já tem uma cor conhecida, construa o gradiente a partir dela. O reconhecimento que você já conquistou vale a pena preservar.

3. 3

   Fixe o gradiente com exatidão

   Registre cada parada, posição e ângulo. Um gradiente refeito a olho vai derivando, e o reconhecimento deriva junto. A consistência de marca explica por quê.

4. 4

   Tenha sempre uma versão chapada

   Favicons, bordados, impressão em uma cor e algumas interfaces não conseguem mostrar um gradiente. Escolha uma cor chapada e uma versão branca ou preta do glifo.

5. 5

   Use o gradiente além do logotipo

   Os exemplos mais fortes repetem o gradiente em fundos, destaques e movimento, então ele vira um ativo distintivo de marca por si só.

.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 dar errado atrás de um logotipo, e não dentro dele. Se o seu logotipo fica sobre o seu próprio gradiente, leia como pôr um logotipo sobre um gradiente e, para construir uma identidade inteira em torno de um, o branding com gradientes.