Algumas verdades sobre Design System

Tiago Costa
Sep 5, 2018 · 4 min read

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!

Tiago Costa

Written by

User Experience and User Interface Designer @ TOTVS

UX LAB

UX LAB

Pensamentos e insights do time de UX da TOTVS

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