Aprenda a construir um design system em 7 passos
E como os usamos para projetar o Bold
Esta é a parte dois da nossa série sobre a construção do Bold, o design system do Laboratório Bridge. Acesse o primeiro e o terceiro conteúdos.
Design systems nos ajudam a organizar padrões de design, tornando o processo de trabalho mais eficiente. Eles funcionam como um conjunto de padrões de componentes interligados e práticas compartilhadas que servem o propósito de um produto digital — é o que nos diz Alla Kholmatova.
Mas além destes padrões, baseamos o Bold, nosso design system open source, nos princípios de design e do próprio Laboratório Bridge. Sua criação envolveu uma equipe com designers, desenvolvedores e analistas. Hoje, nosso design system representa os valores e estilo do Bridge para os nossos usuários, e se encaixa de maneira única na nossa realidade.
Para chegar ao resultado que temos atualmente, foi preciso percorrer um longo caminho — mas com estas dicas e planejamento, ele encurta um pouquinho.
Confira agora os sete passos que nos ajudaram a construir nosso design system, e vão te ajudar com o seu:
1. Faça um levantamento de normas de usabilidade
Primeiro, listamos tudo o que sabemos, que aprendemos no mercado de trabalho, e tudo o que encontramos de novo relacionado à usabilidade. Listar essas diretrizes é essencial para entender por que elas existem, como aplicar corretamente, quais são os custos e o impacto positivo que causam na experiência dos seus usuários.
2. Liste os componentes
Encontramos uma série de referências de design systems em repositórios gratuitos de empresas do mundo todo. Através delas e das nossas necessidades, criamos uma lista de componentes. Essa etapa é importante para o planejamento das atividades — a partir dessa lista, pudemos analisar quantidade, complexidade e variedade dos componentes.
As referências que mais usamos foram o design system Carbon, criado pela IBM, e o design system da empresa Atlassian, pela variedade e complexidade dos componentes. Mas buscando nestes repositórios, você encontra o que mais se adequa às suas necessidades :)
3. Descubra quais são seus requisitos prioritários
Para essa etapa, a participação dos colaboradores é essencial. Aqui no Bridge conversamos com designers, programadores e analistas sobre quais os componentes mais importantes nos produtos desenvolvidos no Laboratório. Priorizamos o que foi listado, para suprirmos as necessidades de variação dos componentes e flexibilidade de desenvolvimento. Aí surgem os mais diferentes tipos de prioridades.
Exemplo prático: um dos componentes discutidos aqui foi a tabela. Foram mapeados requisitos como permitir paginação, grande quantidade de colunas, rolagem, opções de filtragem, inserção de dados e ordenação. Suprir essas necessidades, portanto, seria desenvolver um componente de tabela flexível, que pudesse ser adaptado à complexidade da demanda do produto.
4. Pesquise referências visuais
No Bridge, prezamos por um visual moderno, e por isso estamos sempre acompanhando as tendências de design. Através de sites como o Dribbble, pudemos selecionar várias referências direcionadas ao estilo que gostaríamos de aplicar. Se seu estilo é mais sério ou descontraído, transmita isso no design system!
5. Lembre-se dos requisitos de acessibilidade
Quando começamos a testar o visual de alguns componentes, logo veio a tona um assunto muito importante: acessibilidade.
Queríamos tornar o Bold acessível, e por isso viramos de cabeça para baixo todos os guias de acessibilidade na web — faça o mesmo quando construir o seu design system.
O Bold teve suas bases criadas considerando critérios de acessibilidade correspondentes ao nível AA, garantindo o acesso sem barreiras à maior parte dos usuários.
(Fique ligado: nosso terceiro artigo fala sobre como construir um design system acessível!)
5 tarefas da gestão de pessoas que você provavelmente não conhecia
6. Mão na massa: construa os componentes
Há muitas formas para isso, mas aqui vamos explicar o passo-a-passo que realizamos — e que deu certo. Para testar e construir os componentes, usamos o Sketch App, um software maravilhoso que nos permite utilizar o design system vinculado a vários arquivos.
Na hora de enviar essas specs para os desenvolvedores, importamos os componentes para o Zeplin. Assim, foi possível realizar a inspeção de elementos, garantindo fidelidade entre o aspecto visual do componente construído pelo time de design e o desenvolvido pelo time de desenvolvedores front-end.
7. Documente tudo
Essa é a etapa que mais nos demandou trabalho e manutenção. A documentação do Bold contém um compilado de boas práticas de uso dos componentes relacionado à código, acessibilidade e padrões de linguagem. Além disso, é fundamentada nos princípios de design, com a intenção de refletir os valores do Bridge e a linguagem utilizada nos nossos produtos.
Resultado: essa documentação acaba funcionando como um guia para que os profissionais apliquem os componentes da maneira mais adequada. Por isso é muito importante dedicar-se para construir uma (boa) documentação. Caso esteja curioso, a nossa está disponível.
Ah, e uma última dica! A tecnologia escolhida para o desenvolvimento do Bold foi o React, uma biblioteca JavaScript para construção de interfaces mantida pelo Facebook e de código aberto :)
Extra: continue a pesquisar
Além deste sete passos, é importante sempre continuar pesquisando para criar um design system que se adeque à sua organização. Para dar um ponta pé inicial nesse processo, aqui vão alguns artigos que nos ajudaram:
- Sobre design system em si, nos ajudaram os artigos de Audrey Hacq, Lara Tacito, Amilton Paglia e Mariah Muscato
- Sobre cores, veja os artigos de Kevyn Arnott e de Jeeyoung Jung
- Se o assunto são ícones, recomendamos Anthony Collurafici e Budi Tanrim
Também usou estes passos? Então conta pra gente como foi sua jornada!
Acesse a versão em inglês deste artigo.
O Laboratório Bridge atua no Centro Tecnológico da Universidade Federal de Santa Catarina (CTC/UFSC), com equipes formadas por bolsistas graduandos, pós-graduandos e profissionais contratados. É orientado por professores do CTC e do Centro de Ciências da Saúde (CCS/UFSC).
Desde 2013, desenvolvemos sistemas e aplicativos para gerenciamento da saúde pública em parceria com o Ministério da Saúde e a Agência Nacional de Vigilância Sanitária (ANVISA).
