O que é Design System?

O que é Design System?
Laís Cavalcanti
Laís Cavalcanti

Compartilhe

Resumindo

O Design System é uma ferramenta essencial que pode ser usada durante a construção e manutenção de um produto e é por meio dele que vários elementos são padronizados.

Se você tem curiosidade em saber mais sobre o assunto, esse artigo é para você!

Ao longo do texto, traremos conceitos e exemplos práticos de aplicações do Design System.

Vamos lá?

Contextualizando

Existem milhões de aplicativos e bilhões de sites no ar e cada um deles se desdobram, por sua vez, em muitas páginas ou telas. Ou seja, há um universo em expansão de telas, interfaces e outros produtos digitais.

Claro, isso é um ótima notícia, pois é sinal que o Design de Interface (interação do ser humano com um produto físico ou virtual) evoluiu bastante, se tornando, inclusive, mais acessível nos últimos anos. Porém, todo esse crescimento pressiona a demanda de trabalho de designers que sentem dificuldade em aliar a escalabilidade e coesão de um produto.

Então, como simplificar o trabalho de designers e garantir um bom gerenciamento de produtos em escala? O Design System é a nossa resposta. Vamos descobrir a seguir!

O que é o Design System?

Imagem que mostra duas pessoas trabalhando em uma mesa, com folhas impressas representando telas de celular. Uma das pessoas segura um celular na mão enquanto coloca um papel sobre essas telas impressas.

Design System é um documento unificado de práticas e padrões a serem adotadas em relação ao design de um produto, acessível para profissionais de vários setores da criação (UX writers, pessoas desenvolvedoras, UI designers, UX researchers, designers gráficos, redatores e gerentes de projeto).

É um produto interno da empresa, um documento vivo mantido por uma equipe de designers que vai se debruçar sobre o produto digital para projetar e construir uma documentação atualizada, a fim de garantir que todos os estilos e interações estejam alinhados e ajudem na criação de novas soluções e na manutenção das existentes.

O conteúdo de um Design System pode incluir guia de estilo, tom de voz da marca, princípios de conteúdo, padrões de e-mail, biblioteca de componentes, trechos de código e mais elementos que podem ser padronizados.

Portanto, é um documento dedicado às equipes que vão trabalhar diretamente com a realização de um produto digital. Por isso, é de suma importância que seja acessível e de fácil entendimento.

Quais os benefícios de usar Design System?

O Design System pode ser um importante aliado, sobretudo em grandes empresas em que a rotatividade de equipes é maior.

Imagine que você acaba de ser contratado(a) como desenvolvedor(a) Front End de uma grande empresa de streaming de música. Sua primeira demanda será desenvolver um chatbot.

Em vez de desenvolvê-lo do zero, com um documento como o Design System você terá uma fonte única de componentes, padrões, procedimentos e estilos que ajudarão a tornar o chatbot coeso com as demais funcionalidades do produto.

Para quem gerencia e desenvolve, isso significa economia de tempo, pois não será necessário participar ou oferecer longos treinamentos. Muitas das dúvidas e problemas poderão ser sanados rapidamente com uma consulta ao Design System do produto.

Nem preciso dizer o quanto o Design System pode ser útil nesse contexto de popularização do trabalho remoto, não é mesmo? Uma linguagem unificada de referência ajuda com que uma equipe separada por milhares de quilômetros possa se comunicar de um jeito eficiente!

Exemplos de Design System

Nasa

Qualquer produto ou empresa, dos mais diferentes ramos, pode se beneficiar de um ecossistema de componentes padronizados. A NASA, por exemplo, foi uma pioneira no uso do Design System para unificar a sua comunicação visual.

Print dos uniformes da Nasa, mostrando diversos modelos e a inserção da logo nesses modelos

Na imagem acima, vemos que a NASA se preocupou com a coesão visual e criou uma padronização de seus uniformes de trabalho, definindo cores e tamanhos da Logomarca.

Stack Overflow

Print da tela inicial do site Stack Overflow, que mostra o Design System da empresa

O Stack OverFlow é uma plataforma gratuita de perguntas e respostas sobre tecnologia e desenvolvimento de software, utilizado por programadores, estudantes ou entusiastas da área, e é um caso muito conhecido por designers UX e UI por ser bastante completo, trazendo elementos visuais e até princípios de uso do email-marketing.

Em seu Design System bem completo há um guia de como usar as logos da plataforma. Confira!

Atlassian

Atlassian é uma empresa de software que desenvolve produtos de gerenciamento de projetos, como o Jira e o Trello.

Print da tela inicial do site Atlassian, que mostra o Design System da empresa

No Design System da Atlassian, há uma sessão dedicada à Linguagem e Gramática para tornar a escrita clara e consistente de acordo com o público.

Material Design

Material Design é o Design System desenvolvido pela Google para ajudar os times e a comunidade de tecnologia a criar interfaces de alta qualidade para diferentes plataformas.

Print da tela inicial do site Material Design, que mostra o Design System do produto

Além de cores, tipografias, etc, esse Design System abrange Machine Learning. Acesse e explore o conteúdo!

Mas nem tudo são flores no Design System…

Um dos grandes desafios de se ter um Design System é a sua manutenção. Manter o documento atualizado diante das novas modificações do produto demanda o trabalho de uma equipe exclusiva.

Não pense que o DS é um produto estático, como um guia de estilos. Ele é, na verdade, um aglomerado de componentes que precisam ser reutilizados em novos produtos. Por isso, uma boa aplicação do DS envolve uma renovação da estratégia de comunicação entre as diversas equipes, algo que é bastante desafiador para ser incorporado na rotina de trabalho.

Concluindo

Você deve ter notado que o Design System não é um produto que pode ser implementado de um dia para o outro. Por se tratar de uma ferramenta importante durante a construção e manutenção de um produto, ter um DS demanda toda uma mudança de gerenciamento e cultura organizacional, uma vez que, para que possa funcionar é preciso que todos estejam cientes de sua utilidade e o acessem, de fato, como referência.

Caso você queira se aprofundar mais em Design System, aqui na Alura temos os cursos:

Ouça também os podcasts do Layers Ponto Tech sobre o assunto:

Venha estudar conosco e se aprofundar ainda mais no universo de Design System!

Até o próximo artigo!

Laís Cavalcanti
Laís Cavalcanti

Como uma boa curiosa, gosto de ler, ver, ouvir e experimentar. Uma entusiasta da web acessível a todos. Hoje, faço parte da Escola de UX e Design na Alura.

Veja outros artigos sobre UX & Design