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.
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.
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.
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.
Grafismos: elementos que passam emoção
Para os grafismos, mantivemos os mesmos que já utilizamos anteriormente, porém com novo estilo visual.
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.
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.
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.
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.
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.
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”.
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.
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!