Eae, tudo bele?
Neste artigo você vai aprender o que é e a importância do Design System em um projeto de design que visa manter a consistência visual e de interação de uma organização.
O termo Design System vem ganhando cada vez mais notoriedade, principalmente graças aos produtos digitais que vem sendo criados nesse cenário tecnológico que vivemos.
Antes de começar, quero salientar que este artigo não tem a pretensão de definir ou determinar todos os aspectos de um Design System, já que se trata de um complexo trabalho de design e que pode sim ter variações e abordagens diferentes dependendo da forma de pensar e de criá-lo.
A ideia aqui é te apresentar para que você aprenda sobre o que é, para que depois você mesmo possa continuar estudando, fazer seus experimentos e testar as suas decisões de design, ok?
Portanto, neste artigo você aprenderá sobre:
- O que é Design System.
- Como surgiu o Design System
- Quando construir um Design System
- O Design System e Atomic Design
- A diferença entre Design System e Style Guide
- Os elementos que compõem um Design System
O que é um Design System?
Design System – ou sistema de design – trata-se de um conjunto de padrões de componentes de design elaborados a fim de manter a consistência visual e funcional de um certo produto, sistema ou organização.
Um exemplo clássico para se explicar o Design System é pensar em peças do brinque Lego.
Seguindo essa analogia, imagina esse sistema de design, como um conjunto de pecinhas padronizadas, que seguem a mesma consistência de design. Cada pecinha poderia ser considerada um componente.
Mas não para por aí. As peças de lego (ou componentes) já estão predefinidas, você precisa apenas selecionar as que você precisa e montá-las dentro de um padrão. Esses componentes podem se relacionar, se juntando e criando a partir disso novos componentes. E esses novos componentes por sua vez poderiam se juntar com outros e assim por diante.
Outro exemplo que temos, e que lidamos no dia a dia, são alguns softwares, como o Microsoft Office e o Creative Cloud Adobe. Essas famílias de programas seguem uma linha visual e todos estão dentro de uma consistência de visual e funcional, por exemplo, desde o visual até atalhos pré-definidos por seus criadores .
Independente de quando você adquiriu o programa ou de que país seja ou de que língua você fale, esses padrões serão os mesmo para cada ferramenta. Isso facilita bastante a vida de quem vai utilizar esses programas, pois possibilita a uma coerência de uso e estética.
Com isso essa famílias formam um padrão que facilita a execução de tarefas, além de tornar o sistema atrativo e organizado visualmente.
Uma frase muito famosa dita por Nathan Curtis sobre o assunto é que “o Design System é um produto servindo outros produtos”.
Portanto o Design System é um projeto de design que abastece outros projetos visando sempre manter a consistência de design e proporcionando mais rapidez para as equipes de design e de tecnologia criarem os projetos ou protótipos.
O Design System é um documento de extrema importância para empresas que querem uma maior integração de suas ideias no desenvolvimento de produtos.
Como surgiu o Design System?
Não se tem uma definição fechada do que seja o Design System, porém sabe-se que não se trata de um conceito tão inovador como se vende. Ao longo da história encontramos projetos de sistemas de design.
Se você procurar sobre a escola alemã “Bahaus”, se estudar os manuais de marca de projetos do grande Designer Gráfico brasileiro Alexandre Wollner, se olhar o projeto para as olimpíadas de Munich de 1972, Otl Aicher , ou analisar o projeto de design do metrô de Nova York…Entre tantos outros exemplos que temos por aí… Você encontrará Design System, ou seja, algo que foi planejado de forma pragmática, calculada afim de manter uma consistência visual.
A demanda por produtos bem construídos, marcas consolidadas e design cada vez mais inovadores fez com que os grandes designers buscassem automatizar o máximo possível sem perder a consistência de design em grandes projetos.
E nos dias atuais, com o avanço da tecnologia, e o advento de produtos digitais, o ramo tecnológico precisou se adaptar e começou a utilizar cada vez mais o Design System.
O Design System e Atomic Design
O Design System conversa muito com outra abordagem de design que é conhecido como Atomic Design (design atômico).
O Atomic Design, como o próprio nome já nos indica, utiliza de uma analogia entre elementos e componentes de um projeto de design com o comportamento dos átomos, moléculas e organismos.
Portanto, assim como vimos no exemplo do brinquedo lego, aqui lidamos com os componentes de forma crescente, saindo do menor para o maior. Portanto temos dentro dessa ordem os átomos, moléculas, organismos, templates e páginas (como visto na imagem dentro deste tópico).
- Átomos: aqui podemos incluir ícones, botões, cores, imagens, tipografia etc.
- Moléculas: aqui seria o resultado da interação dos itens pertencentes a categoria átomos. Então poderíamos citar como exemplo uma sidebar, um card, uma barra de menu.
- Organismos: aqui se enquadra os resultados da interação das moléculas, como exemplo podemos citar um header de um site, que contém um menu e outros ícones.
- Templates: aqui seria o resultado da interação de todos os componentes citados anteriormente, montando um produto modelo que pode ser utilizado por qualquer pessoa, sofrendo alguns ajustes.
- Páginas: já essa etapa seria mais próximo do produto pronto final, sendo o mais completo do que um template
Essa forma de lidar com os elementos do design, dentro de um projeto, trata-se de uma metodologia estruturada, racional e lógica de dar função e forma ao projetos, com base conceitual e de forma relativamente simples de entender.
O pensamento do Atomic Design encaixa bem com o que se propõe quando estamos criando um Design System. Por isso, um bom caminho para iniciar um sistema de design é justamente começar estudando sobre design atômico.
Quando construir um Design System?
Imagine que uma empresa sempre está modificando seus times, seja demitindo ou
contratando novas pessoas. Imagine também que sempre que novas pessoas aparecem, também surgem novas ideias e palpites acerca de um projeto.
Muita das vezes essas ideias que surgem, já foram discutidas e definidas; mas com a correria da rotina e a falta de um documento contendo essas informações, um membro do time de design – por exemplo – irá gastar mais tempo testando novas ideias, que talvez nem tenha coerência com o projeto. Para evitar situações como essas, é necessário ter um bom Sistema de Design.
Outro ponto que já citamos aqui no artigo é para manter uma consistência e coerência de design, seja visual, funcional e até mesmo de padrões de códigos. A ideia é manter um organismo homogêneo, mesmo ele sendo composto por elementos diferentes.
Portanto a construção do Design System é ideal para projetos maiores, onde existem vários produtos ou pontos de contato com a marca e é preciso evitar uma incoerência visual. Também quando envolvem várias profissionais e é preciso criar uma padronização para ser seguida pela equipe.
Por demandar mais tempo e estudo, para projetos menores é mais provável que um Style Guide (guia de estilo) já seja o suficiente.
A diferença entre Design System e Style Guide
Ao estudar o design, nos deparamos com o Style Guide, que é facilmente confundido com o Design System. Na prática, o Style Guide também compõe com informações dentro do Design System.
O Style Guide ou Guia de estilo é um sistema de organização menor e mais restrito para a parte visual que o Design System. Isso porque ele é responsável por criar um estilo de trabalho de um produto, permitindo que apenas os designers e criadores entendam o que está acontecendo.
É como se o Style Guide fosse uma fatia e o Design System uma pizza
inteira. O Sistema de Design é um apanhado de informações de várias áreas do design, como o Motion, UI Design e até códigos de programação.
A ideia é que o Design System seja um documento que garanta uma melhor consistência nos projetos, produtos e que dialogue com todas as áreas envolvidas, não somente a identidade visual ou com características visuais.
Os elementos que compõem um Design System
Como dito anteriormente, o sistema de design é como se fosse uma pizza e cada fatia é um setor que agrega informações. Sendo assim, é essencial que o Design System possua:
Objetivos e valores
Antes de pensar em grid, tipografia e cores precisamos pensar nos objetivos e valores da empresa. Esses fundamentos guiarão todas as escolhas feitas, evitando projetos sem coesão com os princípios da instituição.
Guia de Estilo
Aqui os designers irão pensar na identidade visual, seguindo os objetivos e valores. Um guia de estilo é fundamental para definir os princípios de design, identidade da marca, cores, tipografia, etc. Esse é o momento de definir diretrizes, para que todos os designers envolvidos usem as combinações estabelecidas.
Em um primeiro momento, isso pode soar como se precisasse seguir rigidamente regras determinadas e deixar de fora a criatividade dos designers. Pode ter certeza que a criatividade não ficará de fora.
Na verdade quando esses elementos visuais são definidos, a criatividade será utilizada para definir combinações e como será usado as cores, ilustrações, ícones, tipografias, animações – por exemplo – criando, assim, uma identidade visual coesa.
Biblioteca de componentes e padrões
Após ter estabelecido a identidade visual, é hora de definir como será construído esse projeto e, nesse momento, uma biblioteca de componentes e padrões podem ajudar.
Na prática, uma biblioteca de componentes e padrões são elementos que serão utilizados no desenvolvimento de um produto. Imagine que você precise de um componente para criar um site, por exemplo, e lembra especificamente de um que utilizou em projetos anteriores. Até você procurar os projetos que ele foi utilizado, observar como ele se comporta, custaria um tempo precioso dentro do seu prazo.
Para aumentar sua produtividade, uma boa solução é ter em mãos todos os
componentes e padrões que serão utilizados na construção do seu produto. Para criar essa biblioteca podem entrar desenvolvedores e UI Designers.
Os componentes e padrões são essenciais na construção do sistema e em como ele irá funcionar. Ui/Web kit: esses seriam um kit desses componentes citados acima, interligados, formando um template construídos com base nos componentes do sistema.
Portanto, estamos falando sobre UI kit, que seria um kit de componentes de UI Design citados acima, e também estamos falando sobre os estados dos componentes que aqui é relativo ao estado dos componentes citados, se estão ativos, se são o padrão, se estão inativos, dentre outros.
Ao criar uma biblioteca com esses elementos, você irá garantir uma experiência
consistente no seu produto. Não acaba por aqui, você pode adicionar mais informações que achar necessário.
Isto é somente um pontapé inicial, ajudando a condensar todas as ideias, princípios e valores da empresa em todos os seus produtos.
Códigos
Dependendo do projeto podemos incluir padrões de códigos, como nome de classes, ids, indentação, formatação e organização. Um projeto de um sistema de design pode lidar com a integração entre design e a parte de desenvolvimento front-end.
É super importante, quando há a necessidade, que a integração entre as áreas para que o Design System funcione como o esperado. Apesar do nome (Design System) poder lembrar em um primeiro momento apenas a questão visual, design não se trata apenas disso e questão funcional também é importante.
Você pode conferir alguns exemplos de Design System disponíveis na internet no site Adele UX Pin.
Vídeo – O que é Design System
Para complementar esse artigo eu gravei um vídeo para explicar de forma mais didática e também para complementar o que foi dito neste artigo. Então, confira o vídeo abaixo e complemente os seus estudos sobre Design System.
Considerações Finais
Percebemos que o Design System é uma forma de organização para grandes empresas que não é novidade. Novidade mesmo é sua forma de uso na atualidade, aplicada a produtos digitais.
O uso desse sistema traz inúmeros benefícios para o produto, bem como para a equipe engajada no projeto, permitindo que todos contribuam para o produto final, mesmo tendo visões e profissões diversas, mantendo a consistência do projeto.
Por isso, o Design System possui inúmeros benefícios, tais como dinamicidade, fácil atualização, redução de custos e de tempo de trabalho, otimização de tarefas e da força de trabalho, dentre outros.
Você já criou o particiou de um projeto de design ssytem? Qual a sua opinião sobre o assunto? Você pode deixar aqui nos comentários a sua dúvida ou relato sobre.
Até mais.
Forte abraço.
Fontes:
Diego Prado – Design Systems: organização e escalabilidade para design e desenvolvimento: https://medium.com/trinca137/design-systems-organiza%C3%A7%C3%A3o-e-escalabilidade-para-design-e-desenvolvimento-6a0a4d8780b
Ux Collective Br – Entendendo Design Systems : https://brasil.uxdesign.cc/entendendo-design-system-f375bbb6f704
Also published on Medium.