< Insights

Documentação de sistemas através do Atomic Design

  • Metodologias

Conheça a Metodologia Atomic Design que possuí 5 níveis distintos e uma evolução de regras compartilhadas

Trabalhar com projetos de desenvolvimento é um grande desafio, não só pela diversidade de usuários, mas também pela infinidade de variáveis que um software pode ter. Para isso, existe um “detalhe” muito importante chamado documentação, onde é possível encontrar informações pertinentes sobre como os componentes de uma interface devem interagir entre si.

A documentação serve tanto para a parte operacional quanto para a parte tática, ajudando no processo de implementação de novos comportamentos de uma forma mais dinâmica e prática.

Uma vez que as interações começam a ser desenhadas lá na etapa de Design, o envolvimento do Designer na construção da documentação tem sido cada mais requisitado, mas a verdade é que a comunicação entre design e desenvolvimento nem sempre é boa.

Por isso, os profissionais sempre estão em busca de alternativas que os auxiliem a conversar na mesma “língua”.

Foi pensando nisso que um moço chamado Brad Frost criou uma metodologia chamada Atomic Design (Design Atômico).

O que é Atomic Design?

De certa forma, o Design Atômico é a maneira como temos feito o nosso trabalho, mesmo sem planejar. Só que o Brad, brilhantemente usa a química que aprendemos no ensino médio para explicar como os diferentes componentes de uma página podem interagir.

Por exemplo, os átomos de hidrogênio e oxigênio poderiam se combinar para se tornar água na forma de duas moléculas de hidrogênio com uma molécula de oxigênio.

Ok, eu copei isso de um livro de química, mas a ideia que ele utilizou foi exatamente a de que, no mundo natural existem elementos atômicos básicos que se juntam para formar moléculas simples ou complexas. Traduzindo… as páginas que vemos na internet ou as telas de um software são compostas por um grupo de elementos que, quando agrupados, formam sistemas complexos que permitem a interação com a interface.

Os 5 níveis da metodologia

O Atomic Design possuí 5 níveis distintos e, entre eles, há uma evolução de regras compartilhadas, como no exemplo abaixo:

Desenho com os 5 níveis do Atomic Desing

Átomos

São os blocos básicos de toda a matéria e cada elemento possuí suas propriedades. Eles são os blocos de construção do universo, como se fossem peças de lego.

No mundo dos componentes eles são labels, inputs, campos de formulário, botões, títulos, parágrafos, etc.

Image com os blocos básicos de toda matéria com Search the site- Label, Enter keyword- input e serach-button
Blocos básicos de toda a matéria

Moléculas

São grupos de dois ou mais átomos mantidos juntos por ligações químicas e são elas que permirtem que os componentes isolados funcionarem com um propósito único.

Neste nível podemos ter um campo de formulário junto com um botão que desenvolvem a função de busca de uma interface.

Exemplo de uma barra de pesquisa
Grupos de dois ou mais átomos

Organismos

São grupos de moléculas que funcionam em conjunto como uma unidade. Ao contrário das moléculas, os organismos podem ter diversos propósitos funcionando paralelamente.

Por exemplo, um cabeçalho pode conter diversos componentes, como um logotipo, navegação primária e um formulário de busca.

Exemplo de um cabeçalho
grupos de moléculas

Templates

Agora a metáfora volta para o mundo digital e, como já conhecemos, os templates consistem em grupos de organismos combinados para formar páginas

Exemplo de um template de página
Grupos de organismos combinados

Páginas

As páginas são uma evolução dos templates, pois os espaços “de marcação” são substituídos por sua representação real. Ou seja, são os layouts em si.

Exemplo de uma página da web
evolução dos templates

Padrões de estilo

A metodologia do tio Brad acaba aqui, ele inclusive sugere que dentro do nível dos átomos pode ser incluso elementos mais abstratos como paletas de cores, fontes e aspectos ainda mais invisíveis de uma interface como animações.

Apliquei essa metodologia pela primeira vez no ano de 2016, mas percebi na prática que esses itens precisam de maior visibilidade e, deste então, nas documentações que tenho criado, faço uma área exclusiva para os padrões de estilo com branding, cores, grid, espaçamentos, tipografia, animações, etc.

Se preferir, você até pode criar mais 2 divisões (ainda com a metáfora da química) e chamá-las de Bósons e Quarks. Explicando melhor…

Bósons

São partículas que dão massa e frequentemente associadas com força. No mundo das documentações são aquelas “coisinhas” que fazem uma grande diferença na leiturabilidade e legibilidade de uma interface.

Ou seja, neste nível podem ser colocados elementos abstratos como paletas de cores, fontes, animações e aspectos ainda mais invisíveis de uma interface como grids.

Quarks

Uma partícula fundamental que se combina para formar uma série de outras partículas, mas nunca são encontrados isoladamente, isto significa que eles irão existir apenas quando existir um elemento completo.

Aqui podem ser inseridos itens que transmitem feedback para o usuário, como status de carregamento, validações, etc.

Como fica o entregável

O Atomic Design visa integrar equipes e agilizar a entrega de wireframes, protótipos e layouts para que a equipe tenha tempo de focar em partes estratégicas e na qualidade do código que será entregue.

Outra diferença é que no lugar de serem entregues inúmeros arquivos em PSDs, você poderá criar um repositório. Só lembre que a documentação deve ser evolutiva, então é importante criar uma estrutura com um formato que permita a atualização das regras de modo fácil por qualquer membro do seu time. Para isso, uma boa alternativa é a criação de uma espécie de site/blog (como quiser chamar), assim como o do Material Design e N outras interfaces, e além das regras de aplicações também pode ser criado um showcase com o HTML e CSS de todos os elementos.

Vantagens

  • Fornece uma metodologia clara para a elaboração de sistemas;
  • Clientes e membros da equipe são capazes de apreciar melhor o conceito de criação de um sistema por realmente visualizarem os passos realizados para construção;
  • Permite a criação de sistemas que promovam consistência e escalabilidade;
  • Centraliza a documentação em um único repositório e agiliza as etapas de Design e Desenvolvimento (front e back-end);
  • Quando bem estruturado, favorece a criação de elementos que se comportam adequadamente a praticamente todas as plataformas.

Dicas para aplicação

Essa metodologia não elimina a atuação de um Designer de interação em um projeto, assim como também não elimina complemente a necessidade de desenhar uma página inteira. Ela dá mais autonomia e agilidade, mas a grande sacada é o controle de aplicação dos componentes e o compartilhamento das informações.

Porém, para que as regras funcionem, logo no inicio da construção de uma biblioteca dessas, é preciso criar uma equipe multidisciplinar (Designers, Desenvolvedores back e front-end, Analistas, etc.) que sejam capaz de validar todas as regras criadas que devem ser iniciadas do menor elemento para o maior.

DICA: comece definindo todos os padrões de estilo e depois passe para os átomos, moléculas e organismos (exatamente nesta ordem).

Outro detalhe é que não é obrigatório utilizar essas nomenclaturas para cada nível. Aliás, eu sugiro que elas sejam adaptadas para a realidade do projeto em que a metodologia será aplicada (o objetivo de uma metodologia é conduzir/melhorar e ela só é realmente boa se permitir evoluções. O Atomic Design permite). Analise com quais nomenclaturas o time já está acostumado e tente aplicar.

EXEMPLOS: no lugar de “átomos” você pode utilizar “elementos básicos”. No lugar de “organismos” você pode utilizar “containers”. E assim por diante…

Por fim, use a sabedoria para aplicar na hora e no projeto certos.

Insights do nosso time

Obtenha insights do nosso time de especialistas sobre metodologias de desenvolvimento de software, linguagens, tecnologia e muito mais para apoiar o seu time na operação e estratégia de negócio.