Algumas verdades sobre Design System

Tiago Costa
Hub de Design TOTVS
4 min readSep 5, 2018

Muito se tem falado sobre Design System.

Penso que tenha nascido com a ideia de unificar as "pontas soltas" entre um processo/projeto de Design e o desenvolvimento da solução em si.

E para compartilhar um pouco sobre minha experiência, aqui vão algumas verdades que tenho sobre o assunto.

O que é e o que não é Design System

É muito comum encontrarmos alguns termos misturados com certa frequência no grande leque do Design.

Por isso, vamos lá:

  • Atomic Design Design System
  • Arquivos de Sketch / Photoshop / Adobe XD / Figma Design System
  • Design Thinking Design System
  • E por aí vai…

Design System, segundo Nathan Curtis, em tradução livre:

Uma estrutura escalável de decisões e comportamentos do time em um portfólio de produtos que convergem em uma experiência concisa.

Ou seja…

Design System deve unir o Style Guide, guia de boas práticas, estados e comportamentos de componentes, templates, códigos e, por fim, os componentes vivos (codados) feito por uma equipe multidisciplinar visando criar uma experiência única.

Todos podem e devem ajudar na criação

UXs, IxDs, UIs, pessoas de negócios e desenvolvedores.

Para auxiliar neste processo criamos um modelo de trabalho no qual cada perfil é responsável por uma etapa da criação.

  • O UX Designer é responsável pela pesquisa inicial sobre o componente utilizado no projeto X;
  • O Designer de Interação é responsável pela prototipação e validação do protótipo com os usuários;
  • O Designer de Interface é responsável pela entrega visual. Transformar o conceito em componente visual, sem esquecer de todas as interações pensadas pelo IxD;
  • E neste ínterim, estamos diariamente em contato com pessoas ligadas pelo produto, seja da parte técnica (POs e Devs) como da parte de negócios.

Dividindo a criação tudo se torna mais ágil e colaborativo, além de todos os envolvidos sentirem-se co-criadores e donos do Design System.

Designers e desenvolvedores precisam trabalhar juntos

Um Design System só é um Design System se os componentes estiverem desenvolvidos.

Tem uma frase que já li em alguns posts que o define muito bem:

Design System é um conjunto de componentes codados a partir de semânticas de design.

Frase de Thiago Hassu da Meiuca Design — Um laboratório especializado em escalar design.

Dito isto, quem irá codar os componentes?

Os desenvolvedores.

Por isto, tenha um ótimo relacionamento com eles e por mais que esteja tudo bem, sempre é preciso ajustar algum ponto.

No nosso dia a dia é uma das áreas que temos maior interação, seja propondo melhorias, analisando um bug, tomando um café. Se aproxime, de verdade, deles!

Bônus pela leitura até aqui 😝

Eis um artigo feito pela TechCrunch, afirmando que as 6 maiores companhias de tecnologia dobraram o time de Designers na última década. Abaixo a relação de Designers Versus Desenvolvedores:

  • IBM passou de 1:72 para 1:8;
  • Atlassian passou de 1:25 para 1:9;
  • Dropbox passou de 1:10 para 1:6.

O artigo completo está no link abaixo:

Consumidores devem ser os maiores impactados

Um Design System bem empregado no desenvolvimento aumenta a qualidade das interfaces e consequentemente melhora a interação humano-computador.

As bases de um Design System são padronizar e escalar (ganhar escala).

Como consequência o consumidor aprenderá mais rápido a "usar" a Interface completando tarefas mais rapidamente e de forma assertiva. Tornando, assim, a experiência única.

O objetivo é elevar o nível na hierarquia das necessidades do consumidor chegando no topo, como mostra a imagem a seguir:

http://uxmovement.com/thinking/are-you-meeting-the-user-experience-hierarchy-of-needs/

Concluindo, minhas recomendações:

Não é pra ser verdade absoluta, e nem quero que seja, mas com a experiência que temos tido durante a criação do nosso Design System, seguem algumas recomendações para a criação:

  1. Conheça, pesquise e estude sobre Design System. Não faça somente pelo "hype" ou por quê a empresa Y tem um. Entenda o momento do seu produto/empresa e veja se é realmente necessário.
  2. Comece com um Style Guide, e após isto, evolua até chegar a um Design System.
  3. Como visto no artigo da TechCrunch, Designers e DEVs precisam trabalhar juntos! Já foi o tempo em que cada um tinha uma função e a realizava sem se preocupar com o trabalho do outro. (Recomendo a leitura de A Empresa Conectada de Dave Gray sobre a interação e mudança de estrutura para criar soluções inovadores).
  4. Por último, nunca esqueça dos usuários/consumidores. Eles são o foco, sempre! O processo de criação de um Design System será bem “técnico” em alguns momentos, porém, tenha sempre em mente o objetivo de simplificar a vida do usuário solucionando necessidades de maneira simples.

Ainda estamos aprendendo muito, mas estes pontos já nos chamam muito a atenção na criação de um Design System. Se atente à eles. 😉

Obrigado pela leitura, comente no post e vamos trocar ideias!

--

--