Porque mesmo sendo iniciante em UX é importante estudar sobre Design System?
Uma abordagem sobre o Design System na visão de uma iniciante no aprendizado de UX
A princípio, você pode ter lido o título principal e pensou: "Mas creio que isso, todos que estão na área de UX, sejam iniciantes ou com senioridade na carreira, deveriam saber".
Concordo que todos deveriam saber sobre Design System, que é importante se adquirir conhecimento sobre o assunto porém, realizando alguns cursos de UX (para minha migração de carreira), notei que ainda se fala pouco sobre o assunto.
Através da bolsa fornecida pela PretUX em parceria com Alura Cursos Online, realizei o curso Introdução ao Design System: escalando seu produto, que possui carga horária de 9 horas.
O que você verá por aqui
- O que é Design System?
- Insumos para construir o Design System.
- Organizando seus elementos com o conceito de Atomic System.
- Exemplos de Designs System de grandes empresas.
O que é?
Nesse texto fiz um merge da definição passada no curso e o que compreendi sobre o assunto:
O Design System é o agrupamento da biblioteca de componentes de interface de usuário, na qual é possível encontrar o guia de estilos, a identidade visual da marca, as diretrizes da marca, estrutura css, imagens e tudo aquilo que se julga necessário para a padronização de um produto, seja ele construído do zero ou existente.
Construindo um Design System?
Antes de entender o que Design System deve ter, é importante entender como criá-lo, e alguns dos itens são:
- Contextualize o porquê dele ser necessário;
- Envolva o time para a tomada de decisão de qual documentação será inserida;
- Já possui um produto? Sem design system? Aprenda com ele seus padrões e documente;
O que um Design System deve ter?
Como citado anteriormente, é necessário o envolvimento do time para a definição dessa documentação ou, caso a empresa tenha uma área específica para isso, o time inserido nesse contexto deve definir os artefatos da documentação.
O curso faz uma sugestão de subitens baseado no que os principais systems de mercado levam em consideração em seu conteúdo.
Atomic System
O Atomic Design é uma metodologia que nos ajuda a pensar na interface do usuário (UI) de maneira hierárquica e reforça a importância da qualidade de pattern libraries eficazes, e apresenta técnicas para otimizar o fluxo de trabalho do design e desenvolvimento em equipe. O Atomic Design também detalha o que acontece durante a criação e manutenção de sistemas de design, permitindo a implementação de UIs com mais consistência e qualidade.
No curso há uma passagem super rápida sobre o atomic system, e nela pude entender que sua função é auxiliar a construção do design system.
Exemplos de sistemas de design
Muitas equipes tem tornado seus design systems públicos, ou seja, você pode acessá-lo e ver o que as empresas têm feito em seus sistemas. Com isso, é possível ter uma base das melhores práticas.
- Atlassian Design System — Elaborado por Atlassian, um dos mais completos
- Carbon — Elaborado por IBM
- Diretrizes de Interface Humana — Elaborado por Apple, sistema de Design para todas as suas plataformas
- Nachos — Elaborado por Trello, contém os princípios de ilustração na documentação.
Concluindo
O Design System é uma ferramenta importante que garante a agilidade na construção do produto pelo time responsável por design, desenvolvimento e validação do produto. Auxilia na identidade visual da marca, garantindo que ela não será perdida sempre que forem necessárias manutenção ou criação de novas funcionalidades.
Gostaria de agradecer imensamente à comunidade PretUX que trabalha na inserção de pessoas pretas no mercado, acreditando que um dos caminhos (de muitos que existem) é a capacitação dos membros. Ao Rodrigo Muniz que me ajudou muito revisando meu texto e me dando dicas para que ele ficasse mais coerente e a você que está usando uns minutos do seu dia para ler meu artigo.
