Aprenda a construir um design system em 7 passos

E como os usamos para projetar o Bold

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.

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.

A imagem mostra o design da tabela projetada no laboratório e os tipos de filtros que podem ser aplicados nela.
Algumas variações da nossa tabela: filtragem, paginação, inserção de dados e seleção.

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.

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.

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.

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:

--

--

Soluções tecnológicas inovadoras para qualificar a gestão pública, visando o benefício social.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Laboratório Bridge

Soluções tecnológicas inovadoras para qualificar a gestão pública, visando o benefício social.