Victor Zanini
Feb 28 · 6 min read
Objetos da nossa Biblioteca de Ilustrações / #PraCegoVer: ilustrações diversas, entre elas uma caixa de presentes, moedas, cartões de crédito, uma mão abrindo uma porta, todas pertencentes a biblioteca de ilustras da Conta Azul

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.

Cami, nossa assistente virtual, após as definições de ilustração. Contamos sobre ela neste post / #PraCegoVer: Cami em diversos momentos, entre eles de pé, segurando um lápis azul grande, e usando o computador. Veste camisa azul com a sigla “CA” e calça ou saia pretas, além de coque no cabelo, também preto

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.
Animação mostrando o capítulo sobre ilustrações dentro do Magica, nosso Design System / #PraCegoVer: à esquerda, vê-se o menu do Magica, e à direita a página rolando ao clicar em cada um tópicos do capítulo Ilustrações

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.

Exemplo de conteúdo que orienta designers sobre como usar ilustrações / #PraCegoVer: Ilustra de papel com lupa em cima à esquerda, e título em vermelho à direita, onde se lê “Muito Errado”, seguido de explicação

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.

Grafismos utilizados nas ilustrações / #PraCegoVer: Grafismos de estrelas com a palavra “Plim!” embaixo, seguido de traços em direções opostas com a palavra “Tcharam!”, e dois balões, verde e azul, com “Uau!”

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.

Exemplo de case “Correto” da nossa Biblioteca / #PraCegoVer: Print de ilustra de lista, dentro de um balão, com um xis vermelho; e de outra lista, dentro de um balão, com interrogação amarela, seguidas de texto “Correto”, explicando porque essas ilustras estão no padrão

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.

Exemplo com o antes e o depois de algumas ilustrações / #PraCegoVer: Três animações mostrando mudanças, nas ilustras. A partir da esquerda: mão segurando tablet, maquina de cartão e tela de computador com gráfico

E disponibilizamos toda a nossa biblioteca para download pelos nossos designers, permitindo a eles criarem novas ilustrações a partir das existentes.

Mais exemplos de antes e depois de ilustrações / #PraCegoVer: Nesta animação, a partir da esquerda: cartas representando recebimento de e-mail, mão segurando telefone com check verde e lupa sobre computador

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.

Antes e depois de algumas ilustrações / #PraCegoVer: Nesta animação, diversas ilustras modificadas, entre elas: cartões, moedas, cofre de porquinho com moedas ao lado, maquina de cartão com comprovante impresso

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 👏


Conta Azul Design

Conectando donos de negócio e contadores por meio do Design. Somos o chapter de Design da Conta Azul.

Thanks to Ludmila Rocha

Victor Zanini

Written by

UX Manager, ContaAzul

Conta Azul Design

Conectando donos de negócio e contadores por meio do Design. Somos o chapter de Design da Conta Azul.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade