Set de ícones BV

Planejamento
User Interaction
Design System

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.

Banco BV

Pesquisa, design e testes de fluxos web/mobile app do banco digital.
Ver case

Fatura Simples

Rebranding, brand guidelines e design system para o produto.
Ver case

U+ Seguro

Concepção da Landing Page com foco em conversão em venda.
Ver case

CMV Audio

Estratégia e design do primeiro e-commerce da marca.
Ver case

Contato

saulordf@gmail.com

Obrigado!
Recebemos sua mensagem. Retornaremos o mais breve possível (até 24h).
Oops! Algo deu errado.
Caso precise envie um email para myself@saulorodrigues.com