Escalando ilustrações, sem um ilustrador

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
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
  • 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.

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.

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!”
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.

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
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
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

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.