PoliDS
- Rony de Freitas
- 5 de jan.
- 2 min de leitura
Atualizado: 6 de jan.
Design system da Polibras software
2023 Digital e-commerce Brasil
Resumo
Padronização da identidade visual dos produtos da empresa Polibras, garantindo coerência entre eles e permitindo que os usuários reconheçam a marca independentemente do produto que estão utilizando.
Facilitar o desenvolvimento de novos produtos e funcionalidades por meio de uma documentação clara e centralizada dos elementos visuais utilizados pela empresa, evitando retrabalho e a criação aleatória de componentes.
Minha atuação
Mapeamento dos componentes utilizados nos sistemas e identificação das inconsistências visuais.
Definição do padrão de grid com base nos produtos e na proposta de negócio.
Workshops para definir as prioridades na criação dos componentes com os demais integrantes do time de desenvolvimento.
Mapeamento de materiais existentes que serviriam como base ou apoio para a criação do Design System (DS).
Definição da plataforma de documentação do DS.
Documentação das definições e padrões dos componentes, incluindo suas aplicabilidades e não aplicabilidades.
Principais problemas
Enfrentávamos muitos problemas devido à falta de um guia de padrões de design.
Um dos mais críticos, que mais impactava a equipe era, a ausência de uma biblioteca de componentes reutilizáveis.
Em cada criação de tela nos produtos, era comum que os componentes fossem criados manualmente, sem possibilidade de reutilização dentro de cada produto, sem documentações.
Isso resultava frequentemente em inconsistências de cores iguais com tons diferentes sendo utilizados em componentes semelhantes, além de variações em fontes, elementos e cores.
Desenvolvimento da solução
Criação de um guia de design, inicialmente focado em atender as demandas mais críticas dos produtos, incluindo botões, inputs, textos, cores, grids, efeitos de sombras e bordas.
Disponibilização do guia de design para todos na empresa, acompanhado de artigos destacando suas vantagens.
Desenvolvimento de uma biblioteca de tokens, disponibilizada via npm, para utilização nos projetos.
Resultados obtidos após o trabalho
Redução no tempo de manutenção dos códigos, novas funcionalidade ou produtos.
Consistência visual nos produtos. Redução na quantidade de biblioteca de terceiros utilizadas nos produtos.
Obrigado pela visita
