Construindo Design Systems Para Produtos, Não Para Designers

Fernando Lins
Aug 29, 2018 · 5 min read

Design Systems são bem conhecidos hoje em dia, com grandes empresas apoiando este método de documentação e especificação do design. Caso você não saiba, um Design System é uma coleção de documentos que definem um padrão visual e de comportamento para uma plataforma, produto ou serviço, seja ele digital ou não. Familiar, não? Basicamente, o Design System é utilizado como um guia de identidade para interfaces.

“Basicamente”, pois é assim que muitas destas empresas definem o sistema de design que utilizam, e também é como muitos designers defendem esta prática. O sistema de design empregado geralmente se limita a dizer quais cores, fontes, estilos gráficos e configurações visuais utilizar. Ele ajuda os desenvolvedores a manter um padrão visual e de comportamento para uma plataforma digital, por exemplo. O Airbnb, inclusive, apresenta o sistema deles como uma “linguagem visual”. Mas isto está longe do que um sistema de design deveria ser.

Image for post
Image for post
O sistema de design do Salesforce mostra elementos, cores e fontes.

A evolução de um guia de identidade em PDF para um guia visual em HTML não justifica a criação de um sistema de design. Para que o sistema exista, mais do que especificações visuais devem existir.

Para quem?

Image for post
Image for post
O Shopify especifica qual é o público, como escrever para ele, qual terminologia utilizar.

Porquê?

Contudo, arquivos de Sketch e exemplos de código ainda são modelos rasos. É importante que o sistema indique os objetivos de se utilizar os elementos que estão listados nele. Por quê um botão assim ou assado foi escolhido? Quais são os benefícios que isso traz para o usuário final? Quais são os princípios de usabilidade que guiam esta escolha? Quais métricas a comprovaram?

Como?

Image for post
Image for post
O Google explica porquê certos elementos de interface são utilizados em em quais contextos.

Quando?

Onde?

Como isto melhora o produto?

Image for post
Image for post
Um dos objetivos da Microsoft é que pessoas com limitações motoras ou de comunicação possam usar seus produtos, e isto reflete diretamente nas decisões de design.

Testes utilizados


Resumindo

  • Inclua o contexto de utilização e como o sistema beneficia a experiência e resolve problemas únicos nessa situação
  • Explique a razão de cada elemento ser utilizado, tanto do ponto de vista de usabilidade, quanto de objetivo do produto e dos resultados dos testes
  • Além da razão, o modo de aplicação de cada elemento em relação a outros elementos do sistema e suas qualidades técnicas

Criar sistemas de design pode ser muito mais do que tabelas de cores e fontes. Podemos utilizar eles como ferramentas eficientes de contextualização do produto, juntando diversos pontos de decisão que formaram a experiência entregue, e também como documentação da evolução não apenas visual mas dos objetivos e dos usuários.

Se você tiver sugestões ou comentários, adoraria lê-los! Obrigado.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store