Sistemas de Design: a evolução do Atomic Design

Quem acompanha as discussões das comunidades de design digital nos últimos quatro anos, certamente já escutou os termos “sistemas de design”, “atomic design” e “guia de estilo”. Inclusive, aqui no blog já tratei desses assuntos em uma série de textos onde narrei o processo de redesign do nosso site. Recentemente o pessoal da Impulso me convidou para compartilhar em um hangout um pouco do que sabia sobre o tema mais quente do momento: sistemas de design.

Como ainda noto uma certa confusão no uso de alguns termos, resolvi fazer um complemento ao texto que escrevi em 2017, e, à partir dele e do hangout com a Impulso, abordar outros temas e referências que estão em ebulição neste exato momento.

(O vídeo da minha talk estará no final do texto.)

A motivação inicial

Os últimos 15 anos foram de transformações intensas para aqueles que trabalham com design digital. Na verdade, podemos assumir o lançamento do iPhone como um marco importante para a nossa profissão, uma vez que a adoção dos smartphones cresceu significativamente depois da chegada da Apple no mercado mobile, o que exigiu dos profissionais de criação de interfaces digitais uma abordagem que levasse em consideração os diversos tamanhos de tela e as novas interações dos usuários com os mais variados tipos de aparelhos.

Foram períodos conturbados na relação tripla entre designer, desenvolvedores e clientes. Primeiro, porque as ferramentas que estavam disponíveis na época ainda tinham o designer gráfico em mente, ou seja, focadas no processo de impressão; segundo, porque as metodologias de trabalho eram lineares (cascata) emulando o processo de impressão, que não aceita mudanças depois que o arquivo vai para a gráfica. Com o tempo, as abordagem metodológicas dos desenvolvedores ganharam terreno dentro da comunidade de design de interface e usabilidade, o que estimulou um convergência para as seguintes questões: como diminuir o desperdício de tempo e energia na relação com os desenvolvedores, e como abraçar os ajustes (as temíveis refações) dentro do nosso processo de trabalho?

Em meados de 2012, ganhou força a adoção dos guias de estilos modelo (frameworks). O mais conhecido foi o Bootstrap do Twitter. Hoje esses guias estão no repertório de referências do senso-comum para quem atua na área do design digital, mas quando surgiram eram a resposta para os problemas mais cabeludos que estávamos enfrentando. E com esse guias, ficou claro que uma abordagem por componentes faria muito mais sentido do que a clássica abordagem por páginas (resquícios ainda das metáforas com o mundo físico dos livros).

A gênese de um novo movimento

Posteriormente, entre 2013 e 2015 a conversa sobre guia de estilos ganhou força por conta de dois eventos: a apresentação do conceito de interface modular atômica (Atomic Design, do Brad Frost) e lançamento – finalmente! – de uma ferramenta feita para interfaces responsivas e componetizadas, o Sketch. De lá pra cá, as novidades são diárias: Plugins, discussões, novas ferramentas, palestras, meetups temáticos, livros, séries em vídeo… Se antes o assunto ainda estava restrito a um nicho de curiosos, hoje já podemos dizer que é mainstream nas comunidades de profissionais que trabalham criando para web e desenvolvendo software.

Por estar em constante debate, gradativamente os conceitos de guia de estilo se expandiram para a ideia de um sistema de design. Uma evolução natural, que engloba o guia de estilo, e permite que outras diretrizes sejam acopladas – como por exemplo, o “tom de voz” dos textos de um sistema, ou os elementos da marca gráfica (branding assets).

Uma definição importante a ser feita é o da própria palavra sistema de design. Por sistema me refiro a elementos que interagem; e design como sendo a intenção de comunicar. Então o sistema de design são as diretrizes de como certos elementos de interface vão interagir para comunicar algo para o usuário. Este algo pode ser uma orientação para ação, por exemplo.

Para sair do campo abstrato e ir para a aplicação concreta desses conceitos, nada melhor do que observar alguns bons sistemas de designs:

(Bridge) https://bold.bridge.ufsc.br 

(IBM) https://www.carbondesignsystem.com

(Atlassian) https://atlassian.design

(Adobe) https://spectrum.adobe.com/

O estado atual do debate

Atualmente, em 2019, ainda estamos presenciando a chegada de novas – e melhores – ferramentas de desenho de interface (oi, Figma! 👋), bem como o amadurecimento de conceitos que foram úteis por um tempo, mas se mostraram limitados. É o caso do próprio Atomic Design. Brad Frost, o front-end designer que popularizou o termo, já nos alertou que não devemos encarar o conceito como uma metodologia fechada, mas sim uma maneira de encarar a modularização das interfaces. Tanto é que existe uma outra abordagem (Component Based Design) que incrementa o Atomic Design, cobrindo aspectos que estavam sendo negligenciados: as cores, tipografia e família de ícones, que seriam pré-requisitos para os “átomos”.

A seguir, um resumo que a página UILab fez para explicar melhor a ideia de usar os componentes para hierarquizar a interface:

fonte: https://www.instagram.com/p/B1G28L9gz0I/

Sugestões e recomendações

Para aqueles que quiserem se aprofundar no tema, sugiro a leitura do texto “How we’re using Component Based Design”, escrito pelo pessoal da Heavyweight.

Para encerrar, vou deixar algumas recomendações para começarmos a pensar sobre alguns desafios que ainda temos pela frente. 

1. Como vender a ideia de sistema de design internamente? Esse é o tema de uma recente palestra do Brad Frost: The Technical Side of Design Systems;
2. As etapas para lançamento do sistema de design, com o mestre Nathan Curtis: Releasing Design Systems;
3. A interação na prática entre devs e designers: Designer + Developer Workflow;
4. Fica a recomendação para assistir o hangout que o Rafael Caceres, CEO aqui da Taller, fez sobre Gestão Ágil com Fluxo Unificado com o pessoal da Impulso também;
5. E finalmente, o hangout que fiz com o pessoal da impulso: Atomic Design no contexto de times ágeis;

Concluindo, fica meu convite para quem se interessa pelo tema: escreva, palestre, converse com os parceiros de trabalho. A comunidade brasileira está bem ativa, e todo conteúdo será bem-vindo. Espalhar esses conceitos de modularidade é, no fim das contas, benéficos para toda a cadeia de profissionais envolvidos no planejamento e construção de softwares, aplicativos e websites. Melhorar nossa forma de trabalhar é, por tabela, melhorar a qualidade das nossas vidas.

Grande abraço e boa semana! 👊