fbpx

Design System: Compartilhando a experiência na criação do DS

Trabalhar com desenvolvimento de sistemas é desafiador, principalmente se o sistema é complexo e com diversos comportamentos de interação e componentes visuais para conduzir o usuário em sua jornada. Imagine só: você, designer, inicia os trabalhos com um sistema complexo e não tem nenhum tipo de documentação sobre ele, ou apenas textos com uma linguagem de ambiente de desenvolvimento. Não seria bem mais interessante ter um documento que demonstre comportamentos e ofereça os componentes de maneira rápida e efetiva?

Claro que sim! E é por esse e outros motivos que o Design System (DS) vem sendo cada vez mais utilizado pelos designers. Para ilustrar, o case mais famoso de um Design System é o bootstrap, criado pelo Twitter, que no princípio tinha o objetivo de organizar o projeto. Ele, porém, evoluiu tanto, conquistou tanto espaço, que hoje não há desenvolvedor ou designer que não o conheça. Outro case famoso é o Material Design, do Google.

Qual é o objetivo do Design System?

O objetivo do Design System, portanto, é organizar o trabalho dos designers, padronizando componentes e comportamentos, o que facilita a comunicação entre esses profissionais, desenvolvedores e toda a empresa, fazendo com que todos falem a mesma língua. 

Um DS bem completo carrega muito mais do que informações sobre style guide, conceitos sobre a construção dos componentes, orientações de como e quando usar e escalabilidade. Ele também leva em conta a manutenção e a evolução, o aprendizado dos usuários, a renovação da tecnologia, o aumento de recursos e funcionalidades, assim como as constantes mudanças de necessidades do mercado. 

Por isso, o DS precisa de melhoria contínua, especialmente em cenários de sistemas complexos, construído a várias mãos, em diversos lugares do planeta. O Design System é um processo contínuo e sua manutenção pertence à toda equipe. 

Repassando a experiência do Ideativo!

Nós, do Ideativo, sabemos que na prática, a teoria é outra, e entendemos que para muitos profissionais nem sempre é viável ter um DS completo e cheio de recursos para ajudar na manutenção. Pensando nisso, criamos um passo a passo para que, de uma forma simplificada, você obtenha o mínimo dos benefícios e facilidades do DS no seu dia a dia.


1. Organização do Design System

Um dos princípios para organizar o DS que utilizamos aqui no Ideativo é a análise da estrutura do sistema, para entendermos como ele está distribuído e qual é a base em que os elementos estão aplicados. Então, navegamos pelo sistema e mapeamos toda a estrutura, momento no qual percebemos espaços em branco, sem nenhum tipo de condução ao usuário, como na primeira imagem abaixo. Algumas vezes nós inclusive imprimimos as telas e as colamos na parede, para melhor visualizarmos e discutirmos a organização, conforme mostramos na imagem 2. No caso do Spotify, marcamos digitalmente também.

Esse processo auxilia o designer a entender o funcionamento da interface, onde estão todos os elementos, como eles estão diagramados e como o usuário interage com os componentes, entre outros fatores. Além dessa análise, construímos pequenos wireframes simbolizando a estrutura do sistema, contemplando toda a diagramação macro.

Com esse exercício, evidenciamos onde estão localizados os menus e a existência ou não de menus laterais suspensos, barra de ferramentas, pop-ups ou alguma outra variável de estrutura. 

Aqui no Ideativo trabalhamos muito com sistemas legados, e é bem comum encontrar estruturas bem diferentes dentro de um mesmo sistema. Isso acontece porque o sistema foi crescendo organicamente. Por isso, é bastante necessário organizar essa estrutura e trazer visibilidade para essas questões, auxiliando o designer a ousar dentro das diretrizes do sistema, com consistência e padronização. 

2. Design visual 

Depois dessa análise, entramos nos detalhes gráficos da interface, iconografia, alinhamentos, cores, tipografia e organizamos o style guide. Segundo a designer Patrícia Panza, esse processo pode ser chamado de inventário e categorização, e assim, antes de partir para a construção efetiva, o ideal é criar uma planilha e anotar tudo que é encontrado nesse processo. Esse detalhamento nos deixa antenados nos padrões estéticos.

Mas aqui vai uma dica: em alguns sistemas, esses padrões simplesmente não existem, e assim, é preciso realizar essa análise e identificar os elementos repetitivos, formando um padrão. Portanto, é papel do designer transformar o caos em um padrão. Então, não se intimide, tenha paciência e coloque a mão na massa!

Depois de organizar os elementos, fica mais fácil localizar e utilizar os estilos de maneira assertiva. Além disso, se você estiver com um legado na mão, não será necessário buscar esses elementos o tempo todo, já que você os terá concentrados em um único lugar.

3. Componentes

Tendo analisado a estrutura do sistema e a parte estética, agora é hora de trabalhar nos componentes. Quais são eles? Existem variáveis? Um mesmo componente possui ações diferentes? Exemplos:

  • Uma grid que tem checkbox em um determinado local e em outro o checkbox não é necessário, por isso, não está visível. 
  • Em um ambiente o menu tem busca em outro não. 

Tudo depende do contexto, mas para componentizar é importante elencar todas as funções e documentar no DS essas variações. Sabemos que sim, é difícil fazer isso sozinho. Por isso, não hesite em questionar os DEVs ou mesmo o time de QA.

Nos componentes, o ideal é criar uma maneira de explicitar o comportamento. Por exemplo, quando clicar em um menu suspenso, como ele vai aparecer? De cima pra baixo? Com easy in e out? Por isso, ter um protótipo funcional dos componentes em ação é legal para os DEVs saberem como utilizar.

Para finalizar…

Esse é o processo que criamos para entregar o mínimo de um DS para os nossos clientes. Sempre documentamos todos os processos de construção, as análises que fazemos no sistema, estruturamos todos os componentes que encontramos nos estudos e desenvolvemos o DS. 

Outros pontos importantes que não abordamos aqui, mas para o DS ficar completo, ele precisa ter bem claro os princípios e conceitos do sistema, tokens, componentes, padrões e comportamentos. Existem alguns DS que trazem o tom de voz de como o sistema se relaciona com o usuário. Enfim, é gigante, mas para você que está na luta pra conseguir organizar a casa, esses tópicos que trouxemos já ajudam. É o começo do caminho pra você conseguir focar em outros campos do UX, como, por exemplo, a pesquisa e cultura.

Também achamos relevante comentar que alguns clientes preferem que esse processo seja realizado no Adobe XD, quando a equipe já é familiarizada com essa ferramenta; já outros preferem que façamos uma migração para o Figma. Nossa equipe particularmente atua bastante com o Figma, principalmente  pela questão da colaboração, trabalhando junto com a equipe interna dos designers e DEVs. No entanto, como prestamos serviço para diversos clientes, temos que conhecer muitas ferramentas, pois cada empresa tem sua preferência, e precisamos nos adaptar. Isso é muito bom, já que acabamos tendo experiência com diversas ferramentas diferentes.

E você? Já tem na rotina o DS? Compartilha aí a sua experiência!

Fontes: O dia a dia do Ideativo design, junto com os companheiros de profissão que compartilham suas experiências, como o pessoal do Coletivo UX, Muzli, Eightshapes, Booking, Collective UX e o checklist criado pelo pessoal da Booking.

Outros conteúdos que podem ajudar: Construindo um DS na prática – Zap Imóveis. Mito do Design System sob a ótica do Rodrigo Lemes, do Design Team.

Patricia Prado
patricia@ideativodesign.com.br

Co-fundadora do Ideativo Design e do UX Overtake. Doutoranda em Linguística (UFSC), mestre em Interfaces e Interações Comunicacionais (UDESC), especialista em UX Design (UFSC). Trabalha com design há mais de 15 anos, já foi líder local do IxDA, Diretora da ADG Brasil e organizadora geral do Interaction South America - Florianópolis.

Saiba tudo sobre UX design e como aplicar na sua equipe. Então, cadastre-se na nossa news ;)