Ilustrações Conta Azul: detalhando o processo criativo

No último artigo (A nova biblioteca de ilustrações da Conta Azul: Da conceituação à implementação de um modelo customizável e escalável), contei sobre o processo inicial de criação das novas ilustrações da Conta Azul. Neste próximo artigo, vou detalhar um pouco mais como trabalhamos com os grafismos, paleta de cores, estilos e construção dos personagens.

Vamos comigo?

O processo da construção das ilustrações

Após a etapa de pesquisa com os clientes e validações internas, partimos para a construção de fato das ilustrações. Para isso, determinamos as guidelines (diretrizes) que iriam definir a linguagem visual das ilustrações:

• Paleta de cores;
• Grafismos;
• Base de construção de personagens;

Paleta de cores

Para realçar objetos na cena, usamos tons de amarelo/laranja, desta maneira conseguimos fazer com que objetos se sobressaiam.

A aplicação principal de cores nas ilustrações é azul seguindo a regra dos 60/40. Desta forma foi possível manter o azul como tom de cor principal e damos destaques e contrastes aos acessórios e pequenos objetos, muitas vezes com caráter funcional para auxiliar a interpretação das mensagens e tarefas dentro do produto.

Paleta de cores. #ParaCegoVer: paleta de cores disposta em quadrados em linha horizontal.

Acessibilidade em cores

Uma das primeiras ilustrações que fizemos utilizando o novo conceito foram as medalhas do nosso programa de parceria. Durante o processo, percebemos que a escolha de cores poderia ser um problema do ponto de vista de acessibilidade — as cores ficariam semelhantes ou iguais para casos de daltonismo.

Medalhas antigas. #ParaCegoVer: seis medalhas redondas dispostas em duas linhas, em uma animação que alternas as cores entre as originais e três tipos de visão daltônica.

Neste contexto a aplicação de cores e a distinção entre elas era uma característica funcional, já que as medalhas comunicam os diferentes níveis de parceria dos nossos clientes, portanto era fundamental a inclusão das pessoas com limitações visuais como o daltonismo.

Como auxílio da ferramenta Toptal, testamos diferentes composições de tons de cores até chegarmos em uma solução que apresentasse contraste suficiente para comunicar as suas diferenças.

Símbolos principais das medalhas. #ParaCegoVer: seis medalhas em forma de diamante dispostas em duas linhas, em uma animação que alternas as cores entre as originais e três tipos de visão daltônica.

Para garantir que as cores estavam de fato funcionando, identificamos e testamos com pessoas reais que tivessem daltonismo, para não depender apenas da ferramenta de teste. O recrutamento foi realizado dentro da empresa e identificamos várias pessoas com diferentes tipos de daltonismo, inclusive, o próprio CEO.

Esta etapa de experimentação foi de extrema importância, pois, contribuiu para que a acessibilidade nas cores se tornasse uma das prioridades na definição da paleta de cores.

A partir daí, demos sequência ao desenvolvimento das ilustrações.

Medalhas atuais. #ParaCegoVer: seis medalhas em forma de diamante, nas cores amarelo, preto, cinza, laranja, azul escuro e azul claro, dispostas em duas colunas com suas respectivas descrições ao lado, nível ouro, nível platina, nível prata, nível bronze, nível diamante e certificado.

Grafismos: elementos que passam emoção

Para os grafismos, mantivemos os mesmos que já utilizamos anteriormente, porém com novo estilo visual.

Grafismo antes e depois. #PraCegoVer: grafismos plim, tcharam e uau, em uma animação que alterna entre antes de depois. Plim são três estrelas amarelas e roxo, tcharam são três linhas azuis, e uau é um círculo levemente torto com contorno que não acompanha o objeto corretamente.

Cada grafismo representa uma emoção e uma sensação. Eles são de extrema importância para o nosso padrão, pois, ajudam a criar consistência para as ilustrações e manter unidade na biblioteca.

Ícones com grafismos. #PraCegoVer: cinco ícones exemplificando a aplicação dos grafismos. Ícone do Excel, máquina de cartão mais símbolo bluetooth, mulher de braços aberto, atendente com headphone e janela de navegador com lupa mais símbolo de cifra.

Personagens: abstração da figura humana

Para manter um padrão de largura, os membros do corpo, como braços e pernas, são criados a partir de stroke paths (formas criadas a partir de contornos) com medidas específicas. A partir desta estrutura, é possível criar novas posições para os personagens.

Base da construção dos personagens. #PraCegoVer: Seis personagens desenhados em linhas grossas, sem detalhes, em cor azul. O terceiro personagem contém um texto ao lado, com o número da espessura em pixels de cada membro do corpo. O quarto personagem é apenas uma silhueta e ao lado dele estão as 8 cabeças medindo sua altura. Embaixo dos seis personagens há sete cabeça mostrando vista frontal, perfil e em ângulo.

Esta foi a parte mais importante no quesito escalabilidade de ilustrações dentro de um produto digital.

Nas navegações pelo produto Conta Azul existem muitos contextos em que as ilustrações devem e podem ser aplicadas e tem um papel complementar instrucional muito importante para entregar a experiência UAU, mas seria um enorme desafio ter apenas uma pessoa para criar as ilustrações específicas para cada caso de uso.

Para integrar os atributos da nossa marca ao traço das ilustrações, os detalhes também foram inspirados nas características redefinidas no processo de rebranding:

• Simples — porque é objetiva; Traçados em giz, expressão e formas simples, sem muitos detalhes, sem rosto, sombra simples e sem degradê. A ideia é transmitir a simplicidade de um desenho feito à mão.
• Parceira — porque é boa ouvinte; Emoções expressadas através da posturas corporais, adicionando detalhes em cores quentes e vivas com contraste para dar destaque e apoio complementar, neutralizando a frieza no uso dos tons de azul.
• Transformadora — porque olha para o futuro; Estilo gráfico orgânico, com linhas curvas. Ao passo que linhas retas mudam de direção, linhas curvas se transformam.
• Segura — porque inspira confiança; Braços e pernas possuem largura fixa e estável, guiam e indicam ações.

Personagens finalizados. #PraCegoVer: seis personagens aos pares, em três situações diferentes. Na primeira, dois personagens batem as mãos em sinal de comemoração, na segunda dois personagens seguram juntos um livro amarelo, e na terceira dois personagens estão abraçados lado a lado.

Contornos: adicionando identidade

Para dar mais autenticidade aos desenhos, consideramos os contornos como parte importante da nossa linguagem visual . Utilizamos eles na forma do contorno de giz, expressando e reforçando nossos atributos de marca transformadora, que experimenta e desenha o futuro, e simples.

Definimos que todas as ilustrações devem possuir algum detalhe com este contorno.

Brush. #PraCegoVer: linha reta azul, desenhada com brush que imita um traçado simples de um risco de giz.

Este brush foi desenhado no Adobe Illustrator, com um traço que imita o risco de giz de cera, porém simplificado, para evitar complicações com o formato svg e deixar os arquivos vetoriais um pouco mais leves por conter menos nós.

Nos personagens, o contorno é sempre utilizado no contorno do rosto, fios de cabelos, mãos, dedos e partes do corpo. As roupas não possuem contornos, mas podem conter detalhes desenhados com o brush, como bolsos e cadarços.

Refatoração

Como já tínhamos uma biblioteca de ilustrações com várias composições, objetos e ícones, começamos a fazer a refatoração aplicando a estes todas as recomendações definidas no processo de construção. Nesta etapa, não foi feito apenas um redesenho, mas houve um processo de avaliação para cada ilustração. Em cada caso foram avaliadas as possibilidades de trazer mais simplicidade visual e quais detalhes receberiam o contorno.

Antes e depois de algumas ilustrações. #PraCegoVer: Nesta animação, diversas ilustras modificadas, entre elas: janela de navegador online com lupa, calendário, máquina de cartão mais símbolo bluetooth, janela de navegador mais timer.

Ilustrações personalizáveis

Com as definições das partes móveis das figuras humanas e os diversos objetos que foram criados, foi possível transformar as nossas ilustrações em átomos, dentro do Figma, e podemos fazer a troca dos corpos, cabeça, braços, etc e ainda combinar com os demais objetos existentes de maneira simples e ágil habilitando qualquer Designer a "ser um ilustrador”.

Nossas ilustrações já se tornaram átomos. #ParaCegoVer: Animação do Figma mostrando a possibilidade de trocar as partes do corpo de um boneco de uma ilustração

Para garantir o bom uso dos padrões, e que todo o time entendesse os porquês de cada coisa, escrevemos um guia de ilustrações detalhando as decisões que tomamos com as ilustrações e o que eles deveriam fazer caso queiram fazer suas ilustrações usando nosso padrão. Esta foi uma parte importante no processo, afinal, de nada adianta criar um padrão em que as pessoas não conseguem usar e replicar.

Guia de ilustração. #ParaCegoVer: recorte de imagem com parte da captura de tela de navegação do guia de ilustrações. No lado esquerdo há um menu lateral com as abas do guia, e no restante da tela há um exemplo de aplicação das ilustrações citando onboarding de usuários.

Em um próximo post eu conto sobre a documentação e como disponibilizamos ela para o time, mas, se você quiser um spoiler da uma olhada aqui: contaazul.design

Obrigada por ler!

Foi bastante divertido escrever estes dois últimos artigos e contar para vocês sobre os processos que utilizamos para as ilustrações aqui na Conta Azul. Se você tiver algum feedback ou algo para contribuir, por favor, escreva pra mim nos comentários :)

Até um próximo artigo!