Banco BV é um dos maiores bancos do Brasil, atualmente tem mais de 14 milhões de clientes.
Em 2022, o BV estava passando por um processo de rebranding. Então, a Squad de Design System viu a oportunidade de atualizar sua biblioteca de componente. Fui requisitado pela Squad para atualizar os ícones e criar as regras de documentação.
Nela contava com quatro designers, quatro desenvolvedores, um product manager e um scrum master.
Primeiramente mapeei todos os ícones e percebi que eles atuam como auxílio visual para ajudar os usuários a concluir tarefas ou compreender informações.
Eles devem ser intencionais, informativos e contextuais dentro da interface.
Princípios
A comunicação vem em primeiro lugar. Forma e formato fortes são fundamentais.
Os ícones geralmente podem ser usados para gerenciamento de estado – sozinhos ou em componentes de UI maiores.
Seja intencional, único e funcional. Os ícones são os menores elementos úteis de qualquer UI, nunca devem ser decorativos.
São símbolos visuais cuidadosamente selecionados que comunicam uma ideia, conceito ou função de forma simples e clara.
Alinhe-se com a voz visual da marca. Os ícones definem expectativas. Eles permitem que um usuário preveja o que acontecerá se clicar ou tocar.
Quando não podemos prever o resultado, hesitamos em agir. Os ícones têm a oportunidade de reforçar a voz da marca na UI.
Estilo visual
Ao projetar um novo conjunto, queríamos garantir que ele não refletisse apenas a personalidade da nossa marca, mas também as características da nossa fonte. Analisamos atentamente nossos atributos de logotipo e tipografia e criamos uma fórmula que combinaria os dois:
Bordas nítidas . Cada ícone é criado referenciando elementos nítidos do logotipo para preservar essa qualidade pontiaguda.
Raio de canto suave . Para equilibrar a nitidez e trazer uma sensação lúdica amigável, permitimos um raio de canto de 5 pixels (em bordas menores 3). Isso também dá uma referência aos atributos da tipografia.
Espaçamento . Para garantir que nossos ícones funcionem em escala, a espessura da linha deve ser mantida em 2 pixels com 2 pixels de distância entre os elementos.