Design System na prática, por designers e desenvolvedores

Aqui na Dito, nos dividimos estruturalmente em squads, o que torna o processo mais ágil e as entregas mais organizadas. No entanto, velocidade não deve ser o único ponto avaliado em um projeto. É necessário traçar uma rota clara para que todos tenham o mesmo objetivo, mantendo a qualidade do design e oferecendo experiências positivas aos nossos usuários.

Com a chegada de novos FERAs* nos time de design e desenvolvimento, algumas preocupações surgiram.

Em uma design review - rito semanal realizado com o intuito de alinhar os processo de design -, identificamos algumas dores comuns nos relatos dos profissionais envolvidos. Entre elas, a dificuldade de se manter a consistência dos componentes e elementos visuais produzido e, por vezes, a duplicidade de trabalhos. E ainda, a dificuldade em escalar o que era desenvolvido e realizar a manutenção de maneira prática e otimizada.

A partir desse entendimento, iniciamos o desenvolvimento de um Design System. Que é uma excelente maneira de reduzir a inconsistência de um produto durante seu crescimento.

O que é um Design System?

De acordo com Nathan Curthis, fundador da Eightshape, empresa responsável por ajudar no desenvolvimento de vários Design Systems em grandes organizações,

“Um Design System não é um projeto, é um produto que serve produtos”.

Certo, mas isso não define o que é, correto?

Explicando de maneira simplificada, um Design System é composto por três blocos:

Building Blocks: Paletas de cores, escalas tipográficas, grids e icones;

UI Patterns: Templates, modulos, componentes e elementos;

Rules: Design principles, Guidelines e voice and tone.

A metodologia tem como objetivo principal documentar e orientar a comunicação e construção de novos produtos e manter a consistência dos ativos.

As etapas na construção de um Design System

1) Entender

No primeiro ponto, nos concentramos em reunir um time de FERAs para entender com profundidade as dificuldades diárias do desenvolvimento e design.

Cada participante descreveu suas dores e desafios cotidianos. Além dos benefícios que um Design System traria para a rotina no desenvolvimento e, consequentemente, para a empresa como um todo.

Isso nos ajudou a criar os princípios do nosso Design System. São eles:

Clareza

Escalabilidade

Consistência

Qualidade

^{Imagem: Desenvolvimento de um design system. Design System na Prática, por Designers e Desenvolvedores, Lucas Ribeiro - Dito CRM. As etapas na construção de um Design System, etapa 1 - Entender.}

2) Discovery

Realizamos um benchmarking para entender como empresas que passavam pelos mesmos problemas que nós eram estruturadas e buscavam resolver tais questões.

Vimos que empresas que investiram no desenvolvimento de um Design System foram capazes de ter resultados não só no desenvolvimento do produto, mas também financeiros. Pois somente reduzindo a redundância de códigos é possível poupar até 20% do tempo de um desenvolvedor, proporcionando à equipe mais tempo para se dedicar na melhoria da experiência e outras questões estratégicas.

Precisamos também analisar o cenário em que a empresa se encontrava, as perspectivas de crescimento dos times e determinar os recursos necessários para desenvolver o nosso Design System.

Foi necessário refletir sobre as ações do time, criar ritos de alinhamento e garantir uma data na agenda para que todos estivessem focados no projeto para manter a sintonia, garantindo as entregas no desenvolvimento do produto.

3) Inventário de conteúdo

Após entender o que deveríamos atacar, realizamos um inventário de UI. Nesta etapa, tínhamos a necessidade de classificar e reconhecer todos os componentes, estilos e padrões usados. Para isso, foi necessário imprimir parte das telas do nosso produto Dito PDV, além de recortar, aplicando o Atomic Design como método para entender as partes e agrupar os semelhantes.

Foi uma etapa importante para colocar a mão na massa. Enquanto recortávamos, refletíamos acerca dos padrões usados e como poderíamos melhorar a consistência dos elementos.

4) Construindo paletas de cores

O processo anterior de construção do inventário nos permitiu sair do ambiente da tela e visualizar de maneira clara todas as cores da paleta. Assim, pudemos realizar escolhas mais assertivas, reduzindo o que não se aplicava ou contribuia para o produto.

O trabalho entre designers e desenvolvedores lado a lado e na mesma sala, trouxe uma visão completa para a discussão, e nos possibilitou criar nomenclaturas e pesos para cada cor, facilitando o processo no momento em que o pixel se torna código.

5) Definindo estilos tipográficos

Com todos os estilos catalogados, definimos às famílias tipográficas pesos e espaçamentos. Durante o processo de imersão, foi possível identificar estilos muito próximos e então, excluir o que não fazia sentido ou não oferecia a legibilidade necessária.

Quem trabalha com produtos sabe a infinidade de estilos de textos necessários para criar interações com os usuários:

Primary

Secondary

Tertiary

Disable

Error

Esses são só alguns dos que podem surgir no caminho.

Diante disso, todo cuidado é pouco no momento de definir os estilos.

As escolhas durante o processo sempre eram pautadas pelos princípios do design, definidos no início do desenvolvimento do produto.

6) Definindo a documentação e processos

Após definir os princípios e catalogar tudo, realizamos a documentação necessária para detalhar como aplicar e definir os processos de versionamento, handoff, Tokens e guidelines.

É extremamente importante entender que o Design System é um produto vivo e está constantemente está em construção.