Escalando ilustrações, sem ilustrador
No passado, tivemos ilustradores dedicados a criar ilustrações e definir os nossos padrões para elas. Entretanto, na redefinição do nosso branding (posicionamento da marca), passamos a trabalhar com agências terceiras, aproveitando as definições conceituais que o time tinha criado até então. Também optamos por priorizar fotografias como apoio aos nossos conteúdos. Fizemos isso por acreditar que fotos se conectam melhor à realidade dos nossos usuários do que ilustrações.
Ainda durante o processo de rebranding, definimos um novo estilo visual para ilustrações a serem usadas em casos específicos. No entanto, a medida que novas ilustras eram criadas, percebíamos que elas não seguiam essas especificações, principalmente em relação a cores, traços e caso de uso. A falta de um guia detalhado de especificações as fragmentava.
Por isso, no fim de 2018, o nosso time de Design Ops (escrevi sobre este time aqui) liderou um estudo relacionado aos principais problemas de uso das nossas ilustrações, a fim de (re)definir um padrão consistente com a nossa marca e, principalmente, fácil de replicar e de escalar sem a necessidade de um ilustrador dedicado.
A nossa intenção era que qualquer designer fosse capaz de criar uma ilustração, seguindo um estilo e combinações entre elementos predeterminados. Assim, nasceu a nossa Biblioteca de Ilustrações.
Separamos o conteúdo desta biblioteca — espécie de guia sobre como utilizar ilustrações — pelos seguintes tópicos:
- Sobre as ilustrações;
- Quando usar;
- Grafismos & cores;
- Contornos & cantos;
- Sombras & textos;
- Topos/hero;
- Objetos;
- Como exportar;
- Biblioteca para download.
Definindo princípios para ilustrações
Antes de abordarmos a parte mais técnica das ilustrações, definimos princípios básicos que devem guiar os designers durante a criação desses elementos. Eles conferem agilidade para as implementações e eliminam viéses pessoais. De acordo com esses princípios, nossas ilustrações devem ser:
Atraentes
Para chamar a atenção dos usuários ou de clientes em potencial. Consideramos ilustrações atraentes as que têm contexto com o conteúdo, mas sem tirar o foco dele, e que respeitam os padrões de cores, de combinações entre elementos e de tamanhos mostrados no nosso guia.
Úteis
Para apoiar os usuários em suas ações. Sempre nos certificamos se as ilustras são a melhor opção para comunicar o que queremos em determinado contexto. Em diversos casos, podemos substituir ilustrações por imagens.
Consistentes
Ilustrações necessitam seguir um mesmo padrão visual, mesmo sendo produzidas por diferentes designers. Precisam aparentar vir da mesma fonte, pertencer a mesma empresa, marca, voz (literalmente, aparentar terem sido feitas por uma única pessoa).
Confiáveis
A fim de fazerem o usuário se sentir confiante ao realizar tarefas, além de inspirá-lo a descobrir mais sobre os nossos produtos e sobre a nossa empresa. As ilustrações podem apoiar uma comunicação de sucesso ou diminuir a frustração no caso de um erro.
Quando usar ilustrações
Em alguns casos, ilustrações tendem a funcionar melhor do que imagens, como ao ajudar o usuário a seguir um determinado fluxo na navegação ou a cumprir um passo a passo para superar um desafio.
Utilizar ou não ilustrações depende, portanto, do olhar crítico e técnico de cada designer para um contexto específico. Tudo isso, levando em consideração tanto o estado emocional do usuário, quanto a gravidade e dificuldade da tarefa que ele está tentando realizar.
Grafismos e cores
Um conceito que une as pessoas da Conta Azul é o “Efeito UAU” que sempre queremos causar nos nossos clientes. Este conceito também foi evidenciado nas ilustrações, por meio de pequenos elementos que representam movimento, surpresa e encanto.
Nós já havíamos utilizado esses grafismos em 2016, pois acreditamos que eles humanizam o conceito ilustrado e geram identidade à linguagem. Por isso resolvemos resgatá-los.
Além disso, para criar unidade entre as ilustrações, entendemos que — principalmente — as cores devem seguir um padrão. Durante o redesenho das ilustrações, definimos que as cores de objetos refletiriam a marca Conta Azul. Para isso, utilizamos o esquema de cores “flat” — com ilustrações neutras e somente alguns objetos em destaque.
Também mostramos, com exemplos na nossa biblioteca, o que está certo e o que está errado ao utilizar ilustras. Isto facilita a compreensão e a percepção dos designers quanto aos nossos padrões.
Tão importantes quanto as cores…
Da mesma maneira que definimos cores, também documentamos contornos, cantos, sombras e pequenos textos para as ilustrações.
Nossas ilustrações seguem nosso tom e voz, e são super simples. Desta maneira, não recomendamos usar contornos nas ilustrações e evitamos ao máximo cantos retos. Acreditamos que estes “elementos” conferem uma complexidade imprópria para a nossa linguagem de ilustrações. Queremos que elas sejam simples e suaves, por isto, evitamos cantos retos. Cremos que o canto reto pode passar uma comunicação dura sobre a ilustração. Desta maneira, sempre que possível, priorizamos cantos redondos.
E disponibilizamos toda a nossa biblioteca para download pelos nossos designers, permitindo a eles criarem novas ilustrações a partir das existentes.
Para facilitar a construção de algo que ainda não existe em nossa biblioteca, assinamos dois serviços com empresas de ilustrações e fazemos as adaptações conforme descrito no nosso guia.
Definir esses padrões foi extremamente importante para criarmos um estilo unificado e alinhado aos nossos valores. Atualmente, já possuímos cerca de 300 ilustrações prontas.
Agora, os designers sabem exatamente o que fazer para as ilustrações ficarem ainda mais com a cara da Conta Azul e oferecerem a experiência UAU que tanto valorizamos aos nossos usuários.
E você, já passou por um desafio parecido na sua empresa? Escreva para mim nos comentários :)
Quer conhecer os outros guias que nós criamos?
Confira no nosso site: contaazul.design
Gostou? Não esquece de 👏
Links úteis:
