O que é design system e porque você precisa de um na sua empresa.
Nos dias atuais, algumas empresas e startups, principalmente da área de tecnologia, vivem uma verdadeira guerra em alguns setores do mercado nacional e/ou global, em um ambiente de negócios cada vez mais desafiador com uma concorrência transversal, cada uma busca incansavelmente uma forma de se destacar no mercado consumidor, visando o seu crescimento, com objetivo de se tornar referência na área que atua. O design é uma das ferramentas utilizadas como meio-fim. Mas o desenvolvimento de qualquer design não é escalado com facilidade, muitas vezes não acompanhando o ritmo de crescimento da empresa.
Desenvolvedores e designers recém-chegados trazem novas ideias para o produto, “Talvez uma nova cor? Que tal mudarmos esse componente para x?”, e isso acaba tornando o design do site inconsistente, o que acaba como consequência aumentando também a inconsistência do design do produto, isso gera um resultado catastrófico, principalmente se for uma empresa que oferece produtos/serviços online (E-commerce, SaaS). Você com toda certeza já entrou naqueles sites que tem 99 estilos diferentes de botões e se perguntou “como alguém pode deixar isso acontecer?”, acredite, isso também pode acontecer com você, e isso é devido a um conceito lá da física do nosso ensino médio, de uma forma simples, pode se dizer que a cada novo desenvolvedor/designer, há um aumento da entropia, sabemos que a entropia determina o grau de desordem de um determinado sistema, a diferença é que aqui esse “determinado sistema” é o produto da sua empresa, sendo bem possível ele se tornar um caos completo.
Atualmente, umas das ferramentas mais utilizadas para criação de websites é o Bootstrap, segundo o próprio website deles: “Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web”. Ele foi criado por dois engenheiros do Twitter como uma solução interna para resolver problemas de inconsistência de desenvolvimento dentro da sua equipe, vale lembrar que ele não era inicialmente projetado para ser uma solução voltado para o design, mas sim focada em resolver problemas de escalabilidade e manutenção das aplicações internas do Twitter.
O Bootstrap foi o resultado que eles acharam como solução, com o desenvolvimento dele, foi possível o uso de uma única estrutura pela equipe de desenvolvimento, reduzindo as inconsistências que antes eram dor de cabeça. A solução foi tão bem aceita que hoje esse framework está disponível no Github em código aberto. :D
Com esse pontapé inicial do Twitter em 2007, outros frameworks foram desenvolvidos pela comunidade e até mesmo por outras empresas que sentiram a mesma necessidade passada por eles, assim nasceu também o Material Design (Google), Metro UI(Microsoft), dentre outros. O uso de frameworks se popularizou e é utilizado praticamente em tudo, afinal de contas, ele diminui consideravelmente o tempo de desenvolvimento além de proporcionar uma interface agradável à aplicação sem a necessidade de uma segunda pessoa como design.
Boa! Agora que já entendemos um pouco do contexto, está na hora de voltarmos para nosso ponto: “Como eu faço para escalar meu design de forma consistente e torná-lo referência!!!”. Uma das maneiras de fazer isso é através de um Design System.
Design System vs Style Guide vs Pattern Library
Em um primeiro momento todos esses conceitos podem parecer totalmente complicados para quem não está habituado, mas vamos pegar alguns deles para você ver como é fácil:
- Design System é o conjunto completo de padrões do projeto, documentação e princípios, tudo que é relacionado a design está aqui.
- Pattern Library se traduzirmos para o português, seria “Biblioteca de Padrões”, e é literalmente isso, uma biblioteca que reúne todos os elementos utilizados no site, como slideshows, aqueles botões de mídias sociais, etc.
- Style Guide se traduzirmos também, seria um “Guia de Estilo”, e novamente, só pelo nome já conseguimos ter uma ideia da função, essa é uma documentação que descreve como visualmente as páginas devem se comportar.
Viu como ficou mais fácil com a gente apenas fazendo a tradução das palavras? Podemos dizer que a Pattern Library e o Style Guide são apenas elementos que estão contidos em um Design System muito mais completo.
Agora vamos voltar para onde estávamos antes, um framework é um design system? Não. “Mas Lucas, você falou do desenvolvimento do Bootstrap do Twitter e blábláblá, e ele não é um design system?” Não é, vamos ver alguns exemplos do motivo disso?
Site: https://getbootstrap.com/
Já na sua página inicial é apresentado alguns conceitos do Bootstrap, vamos dar uma olhada?
Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
Conseguimos perceber já nessa descrição que ele é um framework dedicado exclusivamente ao desenvolvimento, com até alguns conceitos de design, mas você vai ter que literalmente caçar em sua documentação, e é diferente do tipo de design escalável que estamos tratando aqui, ele pode ser uma das ferramentas de desenvolvimento dentro do Design System, mas ele sozinho não é suficiente para ser um Design System em sí.
Para pegarmos bem a diferença, vamos ver o design system da SalesForce:
Site: lightningdesignsystem.com
Vamos pegar novamente os conceitos apresentados nessa página inicial e depois comparamos com o Bootstrap:
The Salesforce Lightning Design System includes the resources to create user interfaces consistent with the Salesforce Lightning principles, design language, and best practices. Rather than focusing on pixels, developers can focus on application logic, while designers can focus on user experience, interactions, and flows.
A diferença é nítida, aqui é a consolidação de todos os conceitos relacionados ao sistema de design da empresa, se você observar nem sequer há linguagens de programação nessa descrição, pois é uma proposta diferente.
Me explica mais sobre esse design system
O Design System é a consolidação de todos os princípios, identidade e melhores práticas com os componentes e padrões (patterns, que vimos lá atrás) de desenvolvimento e design.
- Contém ferramentas para todo o público de criação do produto, de designers a desenvolvedores, lá é onde está os guidelines e componentes;
- Conceitos como valores da empresa, cultura da empresa, do time e do produto também estão contidos no design system;
“Mas qual as vantagens, Lucas?”:
- Reduz o custo de design: o desenvolvimento de um design system resulta em uma redução de custo de design, pois vão existir padrões fundamentados disponíveis para aplicar em todos os projetos, não necessitando desenvolver do zero para cada um deles.
- Reduz o custo de desenvolvimento: Com um design system é possivel reduzir a duração de um projeto em até 40%. TUDO ISSO? Sim, um dos principais motivos é devido os desenvolvedores não precisarem mais tomar decisões de design, perguntas do tipo: “Como vou construir a estrutura de uma nova página” irá desaparecer, possibilitando assim o desenvolvedor ter um foco maior em implementar os componentes já existentes e documentados.
- Diminui a curva de aprendizado: Como tudo já está documentado, desde os pilares do design da empresa, até os frameworks utilizados, o tempo de aprendizagem necessário para o desenvolvedor/designer entender o produto caí drasticamente, isso também acontece com os recém-contratados, que terão a sua disposição informação abundantes sobre o funcionamento do sistema, reduzindo assim curva de aprendizado.
- Permite reutilizar componentes: Possibilita que com a criação de um único componente ele seja utilizado em todo o projeto, reduzindo assim o retrabalho.
E por fim, um dos pontos principais: Reduz a inconsistência de layout, sabe lá no começo do artigo quando falamos sobre aqueles sites que tem 99 botões diferentes e relacionamos com a entropia? Se essas empresas tivessem um design system isso não existiria. O uso de um design system ajuda a manter a identidade, ele cria padrões e regras para orientar não só aqueles que são da área de design ou desenvolvimento, mas sim o público interno da sua empresa de todas as áreas, seja o marketing, financeiro, comercial, etc…
Exemplos de alguns designs systems: Atlassian Design, Material Design, Apple iOS, Shopify Polaris. Caso queira se aprofundar ainda mais, existe um repositório que reúne o design system de várias empresas :D
Você já reparou, por exemplo, como os serviços do Google seguem um padrão de design? Independentemente se é o google brasileiro (google.com.br), ou se é o google coreano (google.co.kr), a identidade visual em todos os seus sites são a mesma, mesmo com desenvolvedores e designers do mundo inteiro, eles tiveram um processo de transformação bem legal, e você pode conferir como foi diretamente no blog oficial deles :D
E a VISA? Sabe aquela bandeira de cartões? É bem possível que você tenha nesse momento um cartão com essa bandeira na sua carteira, agora vou lançar um desafio para você, supondo que você se tornasse o mais novo CEO da VISA, e tivesse como seu primeiro desafio uma missão importantíssima: Desenvolver um novo padrão de design, que seja totalmente escalável para todos os seus 1.1 bilhões de cartões de crédito e/débito em todo o planeta? Como você chegou até aqui, você já deve saber a resposta na ponta da lingua: Desenvolver um design system! E foi justamente isso que a VISA fez:
“Mas Lucas, só empresas tem um design system?” Não! Até mesmo o governo australiano tem um (e muito bem feito por sinal!), o governo do Reino Unido também, e adivinha quem mais tem um? Nossa pátria amada, Brasil!
Se começarmos a procurar, existem milhares e milhares de empresas que passaram pela mesma problemática: o design do seu produto chegou a um ponto de entropia caótica, como vimos no começo desse artigo, ou de um crescimento exponencial na qual os processos e tecnologias já existentes não conseguem acompanhar o ritmo.
Mas eu preciso mesmo de um design system?
Chegamos naquele momento que você deve se perguntar:
“Ok, entendi tudo isso, será que eu preciso mesmo de um para minha empresa?”
Se você é uma pequena empresa, que possui um site simples para expor alguns dos seus serviços, provavelmente você não precisa de um. Se seu produto/serviço possui uma grande variedade de componentes, telas, padrões e é necessário escalar designs, então provavelmente você precisa.
Lembrando que: “Design System não é um projeto, é um produto servindo outros produtos.” (Nathan Curtis), por isso é necessário que ele seja tratado como um por toda a empresa, assim como os outros produtos da empresa geralmente têm roadmaps, um design system também deve ter. Não precisa ser um roadmap de longo prazo (2+ anos), se você for iniciar o desenvolvimento de um, é legal começar tendo uma lista dos problemas que podem ser solucionados no curto prazo (3–6 meses), e se tudo der certo, aí sim realizar um roadmap mais estruturado.
Por fim, se você ainda tem dúvida se existe essa necessidade ou não, converse com pessoas, não é porque você é desenvolvedor ou designer que você é o usuário/consumidor final ideal. Comece pelo seu público interno, o design system é criado de pessoas para pessoas, e elas devem estar envolvidas desde o início do processo.
Acabamos por aqui a primeira parte do artigo! Agora é o momento de você análisar os prós e contras com sua equipe, e se assim decidir, construir seu primeiro design system, e para não perder a parte 2 siga o Medium da Intelipost :D
