Design System
CG Contadores – 2024/25
Overview
O Design System da CG Contadores foi desenvolvido com o intuito de facilitar a criação de elementos gráficos de interface para diversos projetos, mantendo a essência da marca e seus tokens. Apresenta componentes que podem ser utilizados da forma como apresentado ou como base para criação de elementos mais complexos, buscando a padronização visual e da lógica de funcionamento dos mesmos.
Especificações
- Pesquisa de UX focada em componentes específicos
- UI Design
- QA de implementação
- Guia de Estilo
- Biblioteca de Padrões
- Inventário de UI
- Auditoria de UX
Softwares
O Desafio
Em um cenário de múltiplos produtos digitais e times distribuídos, surgia a necessidade de consolidar a linguagem visual e funcional da empresa. A ausência de um sistema centralizado exigiu a criação de um Design System do zero, adaptável, escalável e fácil de aplicar.
Principais desafios:
- Criar componentes do zero sem uma base pré-existente ou documentação anterior.
- Garantir consistência visual e técnica entre produtos construídos por diferentes squads.
- Equilibrar velocidade de entrega com qualidade, acessibilidade e manutenção futura.
Benefícios
- Um único ponto de referência para visualizar componentes, padrões e estilos.
- Mudanças em projetos existentes podem ser redesenhadas e gerenciadas em escala por meio do design system.
- Com uma base visual sólida, os times de design podem focar menos em ajustes visuais e mais em problemas complexos e soluções estratégicas, garantindo consistência visual e funcional nos projetos.
- Possibilidade de replicar telas e fluxos rapidamente com o uso de componentes e elementos prontos.
- Reduz a necessidade de reinventar a roda e elimina inconsistências na interface.
- Diminui o desperdício de tempo em design e desenvolvimento causado por ruídos de comunicação entre times.
Abordagem
Começamos pela criação do style guide do sistema. Felizmente, essa etapa já havia sido desenvolvida anteriormente. Nosso foco foi implementar novos elementos e ajustes necessários, conectando tudo ao guia de estilos existente.
O estilo visual consiste em
Documentamos cada componente com anotações em página, incluindo regras de uso, variações e boas práticas. Também definimos os fundamentos visuais do sistema: branding, grids de layout, diretrizes de espaçamento, border radius, e uma biblioteca de ícones consistente para Web e Mobile.
Toda a equipe se reuniu para criar uma lista de componentes com base nos componentes comuns usados nos projetos e em quaisquer novos componentes que sejam necessários no futuro. A criação desta biblioteca consumiu tempo e recursos significativos.
A biblioteca de componentes consiste em
Nome dos Componentes
Nome único e específico do componente de UI, evitando ruídos entre designers e desenvolvedores. A nomenclatura clara garante que o componente funcione conforme o esperado, sem erros.
Estado dos componentes
Definição dos estados recomendados (default, hover, ativo, desabilitado etc.) e suas variações visuais.
Tomando notas
Anotações diretas na página e descrições para facilitar o entendimento de cada componente no layout.
Responsvidade
Indicação de tamanhos e breakpoints utilizados, pensados para orientar o time de desenvolvimento em diferentes dispositivos.
Documentação
A documentação era sempre incluída na mesma página do componente, com o objetivo de explicar os casos de uso criados. Ela continha:
- Uma explicação clara sobre o que é o elemento, como ele é usado e, quando necessário, exemplos de boas práticas e erros comuns (dos and don’ts).
- Exemplos visuais para facilitar o entendimento.
- Regras de quando e como usar o componente de forma correta.
