Como criar interfaces incríveis com o Atomic Design

Usando a química como metáfora, o conceito de Atomic Design se mostra uma ferramenta excelente para auxiliar na construção e na evolução das interfaces digitais. Nesse artigo apresento os 5 elementos que compõem essa abordagem e como o modelo pode colaborar e otimizar o processo de desenvolvimento de um produto digital.
Giovana Schnorr Vendramini | 17 de dezembro de 2020

A primeira vez que o termo ‘Atomic Design’ apareceu na web foi em 2013, num artigo publicado por Brad Frost. O tema alcançou grandes proporções gerando vários fóruns de discussão entre as comunidades de design e desenvolvimento, resultando em palestras, como na conferência Beyond Tellerrand, na Alemanha, e um livro mais detalhado sobre o assunto.

No artigo, o autor ressalta claramente a importância de um design bem documentado, mas foge de pensamentos subjetivos como a escolha de cores, tipografias e grids. Ele está mais empenhado em entender do que as interfaces são compostas e, a partir desse ponto, como construir Design Systems de uma forma mais sistemática.

‘Não estamos projetando páginas, estamos projetando sistemas de componentes’, Stephen Hay.

Em sua busca, Brad encontrou na química uma forma de expressar sua ideia. A analogia aponta um conceito separado em 5 fases que simulam o processo evolutivo de uma interface. Resultando nessa sequência: Átomos, Moléculas, Organismos, Templates e Páginas.

Blog Post _ 22.12.2020_Você conhece o Atomic Design-_1.png

Átomos

Na química, o átomo se resume à unidade básica da matéria. Em produtos digitais pense num átomo como uma peça de lego: eles são considerados os componentes básicos das interfaces, que não precisam de outro elemento para existirem. Portanto, cores, tipografias, logotipos, botões, ícones, caixas de seleção são alguns dos exemplos que entendemos por átomos.

Blog Post _ 22.12.2020_Você conhece o Atomic Design-_2.png

Moléculas

O agrupamento entre dois ou mais átomos, iguais ou diferentes, assumem uma nova propriedade, que na química denominamos de moléculas. Voltando para nosso contexto, moléculas para nós (designers e desenvolvedores) seria a junção dos componentes básicos da interface passando uma ideia mais tangível aos elementos.

Blog Post _ 22.12.2020_Você conhece o Atomic Design-_3.png

Organismos

Os átomos e as moléculas em conjunto formam uma estrutura material organizada e complexa. Como um ‘corpo’ na biologia ou como um ‘organismo’ na química, entendemos que nas interfaces essa estrutura consiste na mescla entre átomos e moléculas, formando componentes mais complexos que norteiam a navegação dentro de um layout.

Blog Post _ 22.12.2020_Você conhece o Atomic Design-_4.png

Templates

A comparação com a química não se estende às próximas fases. Formado pela união dos organismos, os templates (que nada mais são que wireframes de baixa ou média fidelidade) possuem o intuito de exibir a estrutura de um layout de forma simplificada. O importante nessa etapa é entender como os componentes vão interagir entre si e se a composição faz sentido.

Blog Post _ 22.12.2020_Você conhece o Atomic Design-_5.png

Páginas

Com os organismos, moléculas e átomos se comportando harmonicamente entre si, os templates evoluem para páginas - e é aqui que acrescentamos o conteúdo real. A última fase é a etapa mais concreta do Atomic Design, pois é com esse layout que os usuários vão se deparar ao acessarem seus site, sistema ou aplicativo.

Blog Post _ 22.12.2020_Você conhece o Atomic Design-_6.png

É importante ressaltar que o Atomic Design não é um processo linear. É perfeitamente possível modificar seus componentes nas diferentes fases do processo.

Encoraje você e seu time a abandonar retrabalhos

Sabemos que os produtos digitais evoluem em tempo recorde e por isso precisam estar bem estruturados e documentados. Antigamente, era muito difícil termos esse controle. Porém, alterar tela por tela é coisa do passado. O Atomic Design chegou pra nos ajudar nesse processo.

Criar um Design System é trabalhoso, até mesmo um desafio, mas é essencial para qualquer produto digital. E é aí que o Atomic Design entra. Se você ainda não se convenceu, abaixo separei algumas vantagens do conceito:

1. A interação dos Componentes

Os átomos podem ser reutilizados e misturados, formando várias combinações de moléculas e organismos sem comprometer a estrutura da interface. Aqui é importante lembrarmos que o Atomic Design não segue um processo linear. Logo, é possível chegar na última etapa e acabar voltando para a primeira etapa e realizar alterações sem isso parecer um bicho de sete cabeças.

2. Comunicação entre Design e Desenvolvimento

A documentação é como uma biblioteca do produto. Assim é fácil compreender quais componentes estão sendo usados em diferentes seções da interface e onde encontrá-los. Facilitando o entendimento do código para novos desenvolvedores, que chegam com o produto já começado. Ou até mesmo para evitar duplicidade de código.

3. Velocidade na prototipagem

Gastar tempo na documentação pode economizar muito tempo na etapa de prototipação de um produto. Na ateliware, por exemplo, nós usamos como ferramenta o Figma, que nos ajudou tanto na comunicação com os desenvolvedores quanto na aceleração do processo de prototipação devido a algumas funcionalidades da plataforma (como o auto layout e as variantes) focadas em Design Systems.

Nesse artigo não vou me estender sobre os benefícios do Design System. Em vez disso, indico outro artigo aqui no blog da ateliware: Os benefícios do Design System na construção e manutenção de um produto digital.

Espero ter introduzido, a quem acompanhou a leitura, os princípios do Atomic Design e suas vantagens. Portanto, mãos à obra!

Pense bem na documentação do produto, aborde a maior quantidade de cenários que conseguir e crie um Design System consistente.

Referências:

Giovana Schnorr Vendramini
UX/UI Designer | Adoro divagar sobre os mais diversos assuntos. Sou fascinada por design, cultura geek, viagens e não saio de casa sem meus fones de ouvido.