O que é Atomic Design?
Atomic Design é uma metodologia utilizada para criação de interfaces e sistemas padronizados. Foi criada em 2013 por Brad Frost, que inspirou-se nas aulas de química que tinha quando mais novo para nomear as 5 divisões do processo: Átomos, Moléculas, Organismos, Templates e Páginas.
A ideia do autor é que a construção de interfaces deve partir de elementos menores e mais simples (átomos) que agrupam-se e formam componentes maiores e mais complexos. É importante lembrar que esse processo não é linear e talvez seja necessário voltar e rever algumas escolhas, considerando que o objetivo final é garantir uma interface coesa e componentes que adaptam-se e conversam entre si.
Por se tratar de uma metodologia modular, o Atomic Design cria uma estrutura e consistência necessária para desenvolver produtos padronizados, onde os componentes podem ser modificados e adaptados. Além disso, por sua modularidade, o sistema passa a ter maior escalabilidade, já que os elementos não serão feitos especificamente para um device e poderão ser utilizados em diversas plataformas.
“As the range of user devices grows, creating static layouts for every other website page becomes impractical. The view of the layouts on powerful designer PCs doesn’t tell us much because it doesn’t show the way the website works across different devices in real life.” — Brad Frost
As 5 etapas do Atomic Design
1. Átomos
São os elementos que servem como base para tudo que será feito na interface. Esses átomos incluem elementos básicos de HTML que não podem ser quebrados sem que percam sua funcionalidade, como botões, inputs e labels.
Ok, mas as cores e a tipografia seriam consideradas Átomos?
Já vi alguns artigos e sites que categorizam as cores como Átomos por serem indivisíveis e servirem de base para outros elementos, como a cor de fundo dos botões. Mas, de acordo com o site oficial do criador do Atomic Design, apesar de sua enorme importância, a cor seria uma propriedade de um átomo, uma vez que, por si só, não possui funcionalidade intrínseca e precisa ser aplicada para ganhar significado e vida. Alguns até a classificam como um “sub-átomo”.
“In the world of UI, design tokens are subatomic particles. The design token
color-brand-blueis a critical ingredient of a UI, but it’s not exactly functional on its own. It needs to be applied to an “atom” (such as the background color of a button) in order to come to life.” — Brad Frost
Em 2014, enquanto trabalhava no Design System da Salesforce, a designer Jina Anne sugeriu o termo “Design Tokens” para referir-se a essas partes indivisíveis de um produto, como as cores, tipografia, espaçamentos, etc. Caso queira estudar mais sobre isso, a própria Jina explica um pouco sobre o tema em um vídeo no seu canal do Youtube:
2. Moléculas
Moléculas são componentes de interface criados pelo agrupamento de átomos. Por exemplo, se juntarmos um botão, um input e um label, podemos criar uma barra de pesquisa.
3. Organismos
São grupos de moléculas e/ou átomos que se juntam como uma unidade funcional. Exemplos: headers, menus e grades de produtos.
Os organismos servem como padrões distintos que podem ser usados repetidas vezes. Então, uma grade de produtos, por exemplo, pode ser utilizada em outros lugares da interface e com outras funções, desde lista de categorias até resultados de pesquisa.
4. Templates
Saindo um pouco da analogia com a química, entramos nos templates, onde construímos a estrutura da página. Basicamente, são grupos de organismos diagramados para formar o layout da interface.
Trazendo mais clareza de qual será a versão final da tela, os templates ajudam na comunicação com stakeholders e com a equipe.
5. Páginas
É o nível de fidelidade mais alta e uma evolução dos templates. Agora, aplica-se o conteúdo real, como textos e imagens.
As páginas são essenciais para testar a eficácia do design system, pensar e produzir as variações de componentes que serão necessários (por exemplo, um carrinho de compras que não tem nenhum produto dentro e um que tem cinco) e receber avaliações e feedbacks dos usuários.
Conclusão
Atomic Design é uma metodologia que vem ganhando bastante espaço por ajudar na consistência, padronização e escalabilidade de produtos digitais. Ele nos ajuda a navegar pelas partes e pela totalidade dos nossos projetos enquanto torna a etapa de prototipação mais rápida e organizada.
Talvez seja inicialmente mais difícil aplicá-lo em um projeto já complexo e avançado, mas, depois que a estrutura encontra-se estabelecida dentro de um produto, toda a equipe poderá partilhar dos benefícios técnicos, da agilidade e economia de dinheiro dentro do processo.
Caso queira saber mais sobre o assunto, você pode ler o livro de Brad Frost online (só clicar aqui), onde ele explica todo o processo em detalhes.
