Atomic Design: redesenhando os entregáveis de designers e desenvolvedores

Então Brad Frost foi lá e fez.

Desde que começou-se a falar em Responsive Design, muita gente tem se perguntado (e me perguntado) como fica a documentação e a entrega das telas de determinado produto. Já falamos sobre isso aqui no blog, e também como Designers e Desenvolvedores têm se aproximado cada vez mais para fazer isso acontecer.

“Até alguns anos atrás era muito comum que em um projeto fossem desenvolvidos wireframes, layouts e depois mockups clicáveis de uma determinada interface. Um processo de trabalho em cascata, onde cada entrega é validada com o cliente para que a etapa seguinte se inicie. Essa é uma forma segura de garantir que o visual designer só começará a trabalhar quando o wireframe tiver sido aprovado pelo cliente e pelo restante do time, evitando horas desperdiçadas em refação.

Acontece que no exemplo citado acima, o time acaba desenvolvendo 3 protótipos sequenciais. O wireframe nada mais é do que um protótipo, uma simulação de como a interface deve funcionar. O layout em jpg também é um protótipo, uma segunda simulação da mesma interface. E quando o UX utiliza uma ferramenta de criação de layouts clicáveis ou wireframes clicáveis, ele acaba criando um terceiro protótipo da mesma tela.”

Daqui

Então Brad Frost foi lá e fez.

E usando uma metáfora bastante conhecida da gente: átomos, moléculas, organismos, templates e páginas.

Átomos são os elementos mínimos presentes em uma página. No exemplo citado por ele em seu blog, pense nos diversos elementos que compõem um campo de busca: o campo texto, o botão “buscar”, o label que aparece próximo ao campo dizendo aos usuários o que eles podem fazer ali.

Moléculas são a junção desses elementos em um padrão de interação que faça sentido para a pessoa que está usando. No exemplo dos átomos acima, quando eles se juntam eles formam o módulo que permite que as pessoas iniciem uma busca no site.

Organismos são os agrupamentos dessas moléculas em elementos que norteiam a navegação e a leitura do conteúdo nessa interface. No mesmo exemplo: a busca faz parte do header do site, que é replicado em todos os templates do site — seja na homepage, seja na página de um artigo, na página de resultados da busca, na página de Dúvidas Frequentes, e por aí vai. E esses nomes que eu acabei de citar são as páginas propriamente ditas. Esses dois últimos conceitos já devem ser familiares para você, designer.

Recomendo fortemente que você visite o post onde Brad explica melhor cada um desses elementos, caso você ainda tenha dúvidas de como eles funcionam.

E como fica o entregável?

Partindo do pressuposto mencionado no início do post de que formalizar a entrega de wireframes, depois layouts no photoshop e depois templates em HTML é um fluxo de trabalho que pode se tornar redundante e que vai contra a abordagem de métodos ágeis na direção para qual vários times de design estão caminhando, a ideia do Atomic Design é agilizar as duas entregas inicias (wireframes e layouts) e focar a maior parte do tempo na última entrega (os templates em HTML).

A diferença é que você entrega um repositório de padrões de interação usado por aquele site (ou aplicativo, ou qualquer-que-seja o produto), em formato HTML e com as interações (que dependem apenas de front-end) já funcionando. Fica muito mais fácil para os desenvolvedores, quando chegada a hora de montar as páginas propriamente ditas, somente brincarem de copy+paste desses elementos e de juntarem os blocos de uma forma que faça sentido para o produto.

O entregável fica com essa cara aqui: http://patternlab.bradfrostweb.com/

Uma espécie de styleguide (aquele que os times de Design montam na hora de definir a identidade visual da interface), mas agora dinâmico.

Ou uma espécie de biblioteca de padrões de interação (aquela que os times de AI/UX montam na hora de garantir a consistência do produto), também dinâmica.

Repare que todo o raciocínio de responsividade da página já foi pensada em cada um dos átomos, moléculas e organismos, e que quando eles são reunidos em páginas e templates, é só uma questão de afinar a coregrafia e a sincronicidade do aspecto responsivo dela.

Por que usar esse método?

Tentei reunir em uma lista as vantagens mencionadas pelo Brad e também as que eu já tive a oportunidade de vivenciar:

• Esse é o jeito o qual nós já estamos pensando no design e implementação desses elementos, mas talvez não de forma consciente e não de forma tão específica.
• Os membros do time de design e do time do cliente conseguem visualizar melhor o sistema de design, sem necessariamente precisar ver todos os layouts salvos em .jpg em frente a eles.
• A combinação desses dois documentos (styleguide e biblioteca de padrões de interação), aliada à dinamicidade desses novo jeito de entregar a interface é uma ótima forma de centralizar a documentação em um único repositório e agilizar as etapas iniciais de wireframing e design visual.
• Nesse formato, o sistema passa a ter maior escalabilidade. Você não está escolhendo breakpoints ou devices específicos para montar a sua interface, mas sim criando elementos que se comportam adequadamente a todos (ou quase todos) eles.

Mas como eu chego nesse resultado?

Não existe fórmula mágica. O Atomic Design e o Pattern Lab não eliminam o pensamento do Designer de Interação, mas podem sim eliminar a necessidade de um deck completo de wireframes. Eles também não eliminam a possibilidade ou necessidade do Visual Designer criar a página em Photoshop para ver como todos esses elementos conversam hierarquicamente. Mas quando o layout inicial (ou o Key Visual, como esse layout é chamado em alguns times) é aprovado, a replicação de telas fica muito mais rápida.

Especificamente sobre a etapa de UX, o caminho é utilizar muito mais sketches e workshops que incluam os Visual Designers e Desenvolvedores. Definidas as principais interações, o trabalho de UX passa a ser menos de documentar formalmente todas elas e mais de guiar o trabalho do restante do time, como uma espécie de consultor interno.

[slideshare id=22077743&doc=atomic-design-130528111733-phpapp02]

(Se você estiver lendo este post por email ou RSS e a apresentação acima não abrir, veja-a no blog)

E funciona mesmo?

Agora vem o relato de quem já utilizou esse método em dois projetos diferentes e também conseguiu se envolver um pouco em mais dois outros lá dentro da agência. O fato do Brad Frost ainda fazer parte do time da R/GA de certa forma (apesar de não ser mais full-time) facilitou bastante o acesso ao método e permitiu usá-lo antes dele ter sido anunciado oficialmente na semana passada.

Funciona. E tem todas as vantagens citadas anteriormente.

Existem, sim, alguns pré-requisitos para que ele funcione melhor:

• Um time de UX, Visual Designer e Desenvolvedor que saiba trabalhar bem em sintonia e confiem bastante um no outro. Afinal, você não está documentando tudo o que você pensou; você está deixando essa documentação em rabiscos no papel, whiteboards, conversas, e você não tem como “provar” que aquilo foi ou não discutido. Se existe esse tipo de necessidade no seu time, talvez não seja o momento de aplicar esse processo.
• Um certo nível de experiência das partes envolvidas e conhecimento de como a tecnologia funciona. Não acho recomendado para designers que ainda tenham dúvidas sobre como HTML responsivo é implementado, ou que não tenham nenhuma noção de código.
• Um desenvolvedor que tenha bom senso na hora de tomar decisões de design sozinho. Claro que os designers estão acessíveis na maior parte do tempo para consultoria, mas um desenvolvedor que tenha noções de design consegue agilizar ainda mais o trabalho.
• Projetos de médio e grande porte. Não faz sentido criar um Pattern Lab desses para um site que tem apenas um ou dois templates.

Abaixo o vídeo onde Brad apresenta o Atomic Design em uma conferência em Düsseldorf, na Alemanha.

Dúvidas, sugestões, críticas — podem usar o espaço aí embaixo dos comentários. Se você já usou o método ou algo similar, também fique à vontade para contar a experiência. Vou fazer mais alguns posts a respeito, à medida em que puder compartilhar mais material com vocês.