Design Systems: exemplos práticos

Design System é uma coleção de componentes reutilizáveis, padronizados para determinado produto, site ou sistema web. Diferente de um style guide (guia de estilos), um design system vai além: o design system unifica a linguagem de um determinado produto.

Encare o design system não como um projeto, mas como um produto interno da empresa, que precisa de pessoas que o atualizem enquanto desenvolvem soluções novas, novos componentes, novos guias de estilo. De botões arredondados e snippets de códigos a concepções de aplicação de marca, tom de voz de texto e o microcopy.

Exemplos de Design Systems

Como a definição de design system ainda é viva, o ideal é enxergar exemplos conhecidos na comunidade, que possuem seu sistema publicado:

Stack Overflow

O Stack Overflow possui um Design System com padrões que vão de classes CSS, uso de marca e até mesmo e-mail marketing. Muito completo e é um exemplo bastante conhecido na comunidade de UX e design:

https://stackoverflow.design/

Adobe Spectrum

Na seção sobre cores do Design System da Adobe ela se preocupa com o modo noturno da aplicação.

https://spectrum.adobe.com/

Claro Mondrian

Exemplo brasileiro, a Claro também fez seu próprio Design System, inclusive com bibliotecas em React de componentes específicos que eles criaram e usam:

https://mondrian.claro.com.br

Podcast Design System

E para saber mais, gravamos um podcast focado no assunto que pode te ajudar nos primeiros passos:

Referências Design System

• Dicas UX - Design System
• Diferença entre um style guide e um Design System
• O que é, e porque criar um Design System?

Leia também:

• Entendendo o Material Design
• Veja como a tecnologia 3D cresce no meio do design
• Um panorama sobre o design da Apple — O design que mudou os padrões de consumo
• Mercado de design 2017: saiba as principais novidades para o ano
• Entenda, de fato, o que é o design thinking?