Existem diversas partes importantes em um projeto de Design System até a entrega do código. Para um bom projeto, é preciso de uma etapa grande de pesquisa, brainstorming, design e desenvolvimento. Mas qual é o resultado de todas essas etapas? Quais documentos são gerados durante o processo de confecção do Design System? Neste post, mostraremos alguns dos documentos elaborados durante o processo de Design System na Tuia.
Relatórios de entrevistas
Parte essencial do início do projeto, as entrevistas com stakeholders são extremamente importantes para compreender o real objetivo do projeto e o nível de conhecimento das pessoas envolvidas em relação ao Design System. Com as entrevistas, podemos gerar relatórios apresentando expectativas, necessidades e pontos de melhorias da empresa e/ou produto.
Na Tuia, fazemos as entrevistas on-line, fornecendo também as gravações das entrevistas para futuras consultas.
Análise de benckmarking
Benchmarking é uma análise onde verificamos pontos de melhoria de produtos concorrentes ou similares. Em alguns projetos de Design System, essa análise pode ser útil para aplicação de melhorias na hora de criar os componentes. A partir da análise fazemos um relatório elencando todos os pontos positivos e negativos do produto estudado e dos concorrentes, sugerindo melhorias a serem implementadas.
Style guide
O Style Guide é uma documentação sobre as diretrizes de design e estilo de uma empresa. Nela você encontra informações importantes para a construção visual de interfaces, banners e produtos digitais como cores, grids, breakpoints e tipografia. Com o style guide você possui um guia para criação, inclusive da biblioteca de componentes.
Biblioteca de componentes
A biblioteca de componentes ou component library é uma biblioteca com todos os componentes criados para o Design System através da etapa de mapeamento dos componentes atuais, após a definição dos tokens de marca e dos estilos que adotaremos no Design System de determinada marca e/ou produto. Ela é composta por todos os componentes com suas variantes, estados, funcionamentos e diretrizes como devem ou não ser usados.
Cada design system pode adotar um modelo de divisão que facilite o seu uso na equipe. Na Tuia, usamos um modelo que consiste em separar estilos de design, componentes simples e componentes mais complexos.
Junto com a biblioteca de componentes temos também a biblioteca de componentes codificados. Eles são desenvolvidos em conjunto para que os mesmos sejam reutilizáveis.
Protótipos
Os protótipos desenvolvidos durante o desenvolvimento são entregues para que os times de design possam trabalhar em alterações futuras nos componentes. Aqui na Tuia usamos o Figma, porém é possível confeccionar os componentes em outros programas de prototipagem, como o Adobe XD ou o Sketch.
Manual de tom de voz
O manual de tom de voz é um manual com diretrizes de escrita, que definem a voz e o tom de uma marca e/ou produto. A voz é fixa, mantendo a consistência e ajudando a fixar a marca, enquanto o tom é mutável e se adapta de acordo com a situação. Durante o processo, também são realizadas entrevistas e dinâmicas para verificar qual é o tom de voz de cada empresa, além de análises de materiais internos já existentes. Esse documento é uma parte importante do Design System, pois auxilia na produção de conteúdo de produtos, redes sociais, sites, comunicação interna, entre outros.
Documentação
Ao final do projeto, o mesmo é documentado com todos os passos feitos para a confecção desde a etapa de Discovery. Na documentação colocamos detalhes importantes como a escolha do nome do Design System, o processo do inventário de componentes, além das bibliotecas de design do projeto. Para a documentação, podemos usar plataformas como o ZeroHeight ou o Storybook. Na Tuia entregamos toda a documentação (style guide, componentes e tokens) no mesmo repositório.
Aprenda mais sobre Design System
Acompanhe nossa série de posts sobre o assunto:
UI Kit e Design System: quais são as diferenças entre os dois e quando aplicar.
Design Principles: o que são e qual a sua importância para o Design System
Design System: quais são os seus componentes principais?
O que é o Manual de Tom de Voz e seus benefícios
Nós da Tuia
Na Tuia temos soluções para empresas em busca de um Design System. Você pode conferir acessando a nossa página de serviços.
Nos acompanhe também pelo LinkedIn.
