Compreendendo a aplicabilidade do Design System

Sara Vendramini
designdasa
Published in
6 min readApr 19, 2022

É comum notar evoluções nos processos de desenvolvimento de produtos de software, nesse meio diferentes metodologias têm contribuído para produções de software mais rápida e que mantém o nível de qualidade dos produtos, como por exemplo, a aplicação do Design System, que visa criar produtos que mantenham a consistência visual.

Descrição: Peças de lego colorida.

O que é Design System?

De acordo com Kholmatova, o Design System é definido como um conjunto de padrões e práticas de design compartilhados de forma consistente para auxiliar as equipes no desenvolvimento de produtos digitais.

Ou seja, podemos definir o Design System como um produto que serve produtos.

Por quê a adoção de um Design System?

Várias empresas além de possuir um crescimento contínuo, também possuem várias linhas de produtos dentro de um único ecossistema, e muitas vezes manter uma consistência na usabilidade se torna uma tarefa difícil.

Por isso, dentro desse contexto essas companhias buscam abordagens que as auxiliem nesses aspectos, e com o uso do Design System foi possível notar diferenças positivas porque podem manter uma experiência padronizada em todos os produtos.

Além disso, essas discussões incentivaram ao desenvolvimento dessa pesquisa que une aspectos da academia com o meio empresarial sobre esse tema, e objetiva que os profissionais exponham suas experiências sobre a utilização do Design System no mercado de trabalho, gerando debates e entendimentos sobre o posicionamento das empresas em relação à adoção do Design System.

Overview da Pesquisa

Das 23 fontes, 26% (6/23) foram selecionadas da literatura formal, que foram publicados em conferências e revistas; e 74% (17/23) da literatura cinzenta, publicados em sites específicos como blogs, essas fontes estão distribuídas entre os anos de 2016 e 2020. A partir dessa seleção foram respondidas as seguintes questões:

1. Quais são os elementos-chave de um Design System?

A partir da análise feita nos estudos foi possível encontrar semelhanças entre os termos utilizados possibilitando a definição de 3 categorias, e como resultado encontramos 36% para o uso combinado de ambas.

Para contexto, podemos defini-las da seguinte forma:

  • Components Libraries: Inclui todos os componentes de User Interface Design utilizados para prototipação, como Button, Radio Button, Dropdown, Input, Table, Form, Checkbox, Toast, entre outros.
  • Design Guidelines: Traz princípios de design baseados no contexto de uso que funcionam como recomendações sobre como aplicar as boas práticas, objetivos, valores e propósitos do design system.
  • Style Guide: Refere-se à documentação que auxilia na definição de como o estilo visual do Design System deve ser aplicado, contemplando tópicos como comportamento, princípios, paleta de cores, tipografia, iconografia, entre outros.

2. Quais são os recursos essenciais para o uso do Design Syste na prática?

Na análise, encontramos duas categorias, sendo elas a categoria de Ferramentas e de Recursos Humanos.

Dentro da categorias de Ferramentas, foi possível dividir a mesma em dois subgrupos:

  • Ferramentas de prototipação: Esta categoria inclui as ferramentas utilizadas para criação de protótipos de software;
  • Ferramentas de documentação: Esta categoria inclui ferramentas utilizadas para criar documentações de Sistemas de Design;

Como resultados foi encontrado o destaque de 22% para o uso combinado de ferramentas de prototipação e documentação, e isso ocorre pois com elas é possível criar as três categorias citadas na questão anterior. Além disso, dentro das ferramentas de prototipação teve um destaque para as ferramentas do Figma e Sketch, e nas ferramentas de documentação é encontrado o Storybook e ZeroHeight como maior destaque.

Quando falamos da categoria de Recursos Humanos, encontramos os seguintes subgrupos:

  • Designers, Desenvolvedores e Líderes;

Como resultados, temos o destaque para os cargos de Design e Desenvolvedores, e isso se dá pois quando pensamos na definição dada para o Design System no inicio desse artigo, onde o DS é definido como um produto que serve outros produtos, fica fácil entender o motivo, já que quando pensamos em um produto também temos esses dois principais papéis a frente da execução.

3. Quais são as necessidades dos Designers e Desenvolvedores?

Analisando essa questão, foi possível encontrar 7 principais necessidades, sendo elas:

  • Redesign de Interfaces: É uma prática que consiste em propor novas soluções para uma interface já existente;
  • Melhoria do processo de produção de software: Aperfeiçoamento das atividades envolvidas no processo de desenvolvimento de software;
  • Consistência no design: Padronização da interface de usuário;
  • Redução de esforço: Diminuir custos relacionados a tempo de desenvolvimento, a recursos humanos, e a treinamento;
  • UX Design: Melhoria na usabilidade e experiência do produto;
  • Documentação do produto: Criação de um documento de apoio para o desenvolvimento do produto;
  • Escalabilidade do produto: Promover o crescimento em escala do produto.

Observando os resultados, foi possível notar que a categoria de Melhoria do processo de produção de software é a de maior destaque com 43%, seguida por Consistência no Design com 39%, e finalizada por Escalabilidade do Produto com 17%, essas necessidades estão totalmente totalmente ligadas com os motivações citadas ao inicio desse artigo, como tornar os produtos escaláveis e melhorar a consistência dos mesmos.

4. Como o Design System auxilia os Designers e Desenvolvedores nessas necessidades?

Após identificar as necessidades dos designers e desenvolvedores, foi buscado nesta questão, compreender quais são as possíveis soluções decorrentes da utilização do Design System. Após a análise, foi encontrado as seguintes soluções:

  • Componentização e reutilização de elementos da interface: Transformar em componentes os elementos utilizados frequentemente nas interfaces possibilita a reutilização na criação de novas interfaces;
  • Processo de desenvolvimento otimizado: Possibilita economia de tempo ao reutilizar componentes e módulos já existentes;
  • Definição de padrões e regras de uso: Cria diretrizes baseadas em padrões e regras para guiar as equipes durante o desenvolvimento do produto;
  • Simplificação entre a comunicação de Design e Engenharia: Cria uma interação facilitada entre as equipes de design e de desenvolvimento.

Como resultado, identificou-se o destaque de 31% para o uso de uma única solução e dentro delas se teve destaque de 71% para a Definição de padrões e regras de uso, seguido de 29% para a Componentização e reutização de elementos da interface.

Quando relacionamos as soluções com as necessidades, podemos encontrar os seguintes dados:

Vimos as necessidades de Melhoria do processo de produção de software e Consistência no Design, ligadas com as quatro soluções citadas, Componentização e reutilização de elementos da interface, Processo de desenvolvimento otimizado, Definição de padrões e regras de uso e Simplificação entre a comunicação de Design e Engenharia.

5. Quais são os impactos da adoção do Design System?

A partir da relação observada entre as necessidades e as soluções, foi analisado quais são os principais impactos gerados na adoção do Design System. As categorias identificadas são apresentadas abaixo:

  • Otimização de tempo: Relacionados a velocidade e eficiência do desenvolvimento;
  • Redução de esforços: Relacionado a redução de custos de tempo de desenvolvimento, recursos humanos, e treinamento;
  • Cultura: Compartilhamento de conhecimentos e práticas, comunicação e colaboração entre equipes.
  • Escalabilidade: Relacionado a possibilidade de crescimento em escala do produto.
  • Usabilidade: Relacionado com o nível de facilidade de uso do produto;
  • Consistência: Padronização da interface de usuário;
  • Qualidade do Processo: Relacionado à melhoria das atividades envolvidas no processo de desenvolvimento de software;

Como resultado, temos 52% das fontes citando a Consistência como o principal impacto, seguindo para Redução de esforços, cultura e escalabilidade com 22% e por fim, Otimização de tempo com 17%.

Nesse caso, podemos relacionar a Escalabidade e Consistência com a necessidade de Consistência no Design e com a solução de Componentização e reutilização de elementos da interface, já quando observamos a Redução de esforços, cultura e otimização do tempo ai podemos relacioná-las com a necessidade de Melhoria do Processo.

Conclusão

As analises coletadas visam auxiliar na criação e implementação de um Design System em equipes de desenvolvimento de software. Espera-se que esta pesquisa seja um ponto de partida para investigar as melhores formas de adoção de Design System entre as organizações. Além disso, os elementos e recursos apresentados neste estudo podem ajudar as organizações a identificar quais dessas evidências podem ser adotadas para melhorar a qualidade de seus produtos digitais.

Caso você tenha interesse em ler esse artigo de forma mais detalhada, disponibilizo o link abaixo.

https://dl.acm.org/doi/10.1145/3493244.3493260

--

--