Contexto

Em 2022, ao ingressar na Lucree como único designer UX/UI, encontrei a empresa em pleno processo de rebranding liderado pela equipe de marketing. O novo manual de marca já apresentava diretrizes de identidade visual — cores, tipografia, ícones e outros elementos — mas ainda não havia uma tradução consistente para o ambiente digital.

Desafio

1. Unificar a identidade visual em todos os canais digitais (WEB e Mobile).

2. Traduzir um manual de marca impresso para um guia digital aplicável.

3. Criar bibliotecas reutilizáveis para acelerar o desenvolvimento front-end.

4. Manter o projeto em sigilo até o lançamento oficial.

5. Gerenciar prazos para coincidir com a data de lançamento definida.

2. Definição de cores

• Comparativo entre paleta antiga e a nova.

• Adaptação para padrões digitais (contraste, acessibilidade e consistência).

• Validação das cores principais e secundárias com marketing.

Antiga Paleta de cores

Único guia de cores que existia da paleta de cores anterior, tive que elaborar um novo guia com base na nova marca do zero.

Processo

1. Alinhamento inicial

• Estudei profundamente o novo manual de marca.

• Reuniões com marketing para entender tom, ritmo e intenção da nova identidade.

• Testes rápidos com colaboradores para captar percepções iniciais.

3. Tipografia

• Escolha da nova fonte conforme diretrizes do rebranding.

• Criação de tabela tipográfica com tamanhos, pesos (bold, italic) e aplicações.

• Testes de legibilidade em diferentes dispositivos.

Nova Paleta de cores

Agora um guia completo, onde estou prevendo o uso de 3 cores principais, definido no guia da marca, cores neutras para texto e background e cores de alerta de sistema, que geralmente é padrão.

Novo guia Tipográfico

Com o novo guia tipográfico, previ as possível hierarquia entre as fontes, definindo regras claras de como funcionaria os tipos nos produtos digitais.

Guia Tipográfico anterior.

Sim, o guia tipográfico anterior não era muito exigente, mas funcionava bem até onde chegou.

4. Iconografia

• Revisão do novo set de ícones. (não existia uma anterior)

• Definição de regras de uso por categoria e função.

• Validação com marketing para garantir coerência visual.

5. Biblioteca de elementos

• Redesenho de componentes herdados da identidade anterior.

• Criação de novos elementos: botões, modais, cabeçalhos, rodapés, efeitos (sombras, espaçamentos etc.).

• Documentação detalhada para uso no front-end.