-->

02-09-15

Muito além do novo logo: o que justifica uma mudança no design de uma identidade visual?

google-redesign

Não é mais um post sobre a nova assinatura do Google. É um histórico que mostra que o pensamento sobre a identidade no Design vai além de um logotipo. Por que, afinal, ele mudou?

Vamos começar este post esclarecendo uma coisa:

Branding ≠ Identidade Visual ≠ Assinatura (logotipo)

De uma forma bem básica, a diferença é a seguinte:

cutedrop-plus-simbolo

Branding

Imagine o branding como uma floresta. Nela existem diversas árvores que a compõem. Por exemplo, se eu tiver em uma floresta tropical, vai ficar bem esquisito se eu encontrar pinheiros natalinos nela. Não fazem parte do mesmo clima. Da mesma forma, o branding é a forma como a comunicação de uma marca é percebida pelo cliente. Se a marca é informal e divertida, vai parecer bem estranho se nas lojas os vendedores andarem de terno, gravata e a decoração for com cores sóbrias demais. Sim, o branding envolve mais do que a parte visual da marca, envolve até dress code ou forma de atendimento, como tom de voz ou linguagem.

Identidade Visual

A identidade visual é uma das árvores da floresta do branding. Além dela, existem árvores que falam do sound design, marketing, entre outras. Mas a árvore da identidade visual envolve a unidade entre os materiais gráficos e visuais da marca. Na identidade visual está inserido inclusive o “logotipo”, além de papelaria, website, uniformes, entre outros.

Assinatura visual

Conhecida popularmente como logotipo (na verdade, o logotipo é um misto entre símbolo e tipografia, existindo outros tipos de assinatura, como tipográfica ou somente com símbolo), ela na verdade é um dos frutos da árvore da identidade visual. Ou, se você quiser encarar de um jeito mais “biológico”, a semente. A partir da assinatura e da definição do seu manual, fica mais fácil encher a árvore da identidade visual de frutos.

Ok, depois deste papo bonito e verde, fica mais simples entender o que aconteceu com a identidade do Google e usá-la como exemplo para entender porque às vezes é preciso mudar.

google-material-clip

1 –  A transição

O Google passou alguns anos da sua vida limpando elementos e focando em interface. Passando pelo flat design até a sua filosofia Material Design, o foco da empresa se fixou em ser flexível e reconhecível em qualquer device, unindo os elementos utilizados em seus diferentes produtos, como Google Maps, Drive, entre outros.

Este lindo processo de unidade de linguagem pode ser notado principalmente através a definição de uma iconografia única e com uma paleta de cores focada nas cores primárias e algumas variações. E, logicamente em todo pensamento Material Design, que você pode entender melhor nesse post.

Cores

Veja um tutorial que explica o uso das cores no Material Design:

google-colors2

Ícones

Como o Google os define, devem ser simples, intuitivos, consistentes e intuitivos à ação que representam. Você pode baixar todo o sistema de iconografia da marca aqui, e ver o processo de criação aqui.

google-icons1

google-icons2

google-iconss3

Navegação

Interfere diretamente na interface dos produtos em diferentes meios, garantindo a rapidez no carregamento e a usabilidade.

google-material-android

Veja o guideline completo do Material Design aqui.

 

2 – A revolução

Depois de alinhar todo o seu manual de elementos, cores e forma de navegação, chegou a hora do toque de chef, revelando a nova assinatura, que dialoga diretamente com todo o pensamento presente no decorrer do histórico de Design da empresa. E sem deixar o povo mutcho loco, fazendo uma mudança brusca em tudo ao mesmo tempo.

google-novologo

Diferente do redesign do logo do Facebook, que há pouco tempo mudou a tipografia sem explicar muito seus motivos, o Google se preocupou em construir um histórico de formas simples e comunicação imagética, que convenceu a galera na hora de justificar o porquê da mudança.

facebook-novo-logo

Uma das justificativas que mais convenceu (pelo menos a mim), pelo ângulo da democratização, foi a seguinte:

Utilizando SVGs, nós geramos automaticamente milhares de variantes em vetor, para satisfazer tamanho, cor e requisitos de background. Isso nos ajudou a tornar o pixel perfeito em todos os lugares que é usado, e otimizar a construção de uma variante especial do nosso logotipo full color, de apenas 305 bytes, em comparação com o existente (de 14 mil bytes). O logotipo velho, com suas serifas intrincadas e tamanho de arquivo maior, necessitava que uma variável aproximada, em texto, fosse utilizada para conexões de baixa banda. Reduzir o tamanho do arquivo evita esta solução alternativa e resulta em uma consistência de tremendo impacto quando você considerar o objetivo de tornar o Google mais acessível e útil pra usuários ao redor do mundo.

 

Confira a evolução:

google-logo-evolution

3 – O processo da nova criação

Entenda só como funcionou o processo da mudança do logo:

O briefing

O briefing para a mudança consistia em:

  • Uma marca redimensionável que pudesse ser reconhecida em espaços restritos.
  • A incorporação do dinamismo e movimentos inteligentes que respondessem a todos os estágios de uma interação de usuário.
  • Uma abordagem sistemática para a marca, para fornecer consistência nos encontros diários dos usuários com os produtos Google.
  • Um refinamento da marca, combinando o que as pessoas amavam com o que racionalmente precisava mudar.

google-equipe

Depois de etapas colaborativas de criação compartilhadas por diversos times, o resultado foi um sistema flexível o suficiente para ser usado tanto em material de divulgação quanto em produtos em qualquer plataforma. Para criar um único logo, o mesmo foi dividido em 3 elementos básicos:

a) O logotipo

Um logo sem serifa que mantém a sequência multi colorida já conhecida.

google-element1

b) Pontos

A abstração dinâmica do logotipo para fins interativos, assistivos e momentos de transição.

google-elements2

c) Google G

Uma versão compacta do logo para pequenas resoluções.

_google-elements3

Veja a construção e a aplicação dos princípios acima na marca:

Para os curiosos que notaram a clara mudança da tipografia, aqui está o documento completo apresentando a nova família desenvolvida, a Product Sans.

google-tipografia

google-tipografia2

Ou seja, no fim das contas, é mais interessante entender o que está por trás da criação de uma nova identidade do que só ver o resultado final. Lógico que justificar o processo e apresentar um resultado duvidoso é um problema. Você se lembra do caso do Bélo, da Airbnb?

airbnb-belo

Para quem quiser saber a defesa completa do Google, acesse o site oficial da equipe de Design deles.