Já pensou em como seria bom se você pudesse otimizar o tempo na busca por soluções visuais, manter seu design consistente e tornar os elementos mais dinâmicos e simples de editar?
Agora imagina tudo isso em uma tacada só! Massa, né? Pois isso existe e é sobre isso que falaremos hoje.
O que é Design Atômico
Design atômico é uma metodologia modular para criação de sistemas de Design.
Ele foi criado pelo designer Brad Frost e, imagino que tenha percebido, é uma analogia à tabela periódica.
Através do Design Atômico podemos criar sistemas que promovem consistência e escalabilidade a partir da componentização dos elementos de um layout.
Em outras palavras, por mais emocionais e abstratos que tentemos ser no design, um layout consistente ainda tem por base uma estrutura concreta e lógica de repetição.
Isto é, um design visualmente coeso é feito a partir de blocos de construção fundamentais que se repetem quando necessário e ajudam a criar estruturas maiores.
Pense em um cardápio. No geral, existe muita repetição no seu layout.
Isso facilita o leitor a criar um modelo mental simples e aumentar a previsibilidade do fluxo de leitura.
Neste caso, o Design atômico vai ser útil para construir padrões, organizar e possibilitar editabilidade dos recursos.
Pra quê serve
Apesar de ser muito mais conhecida no meio dos programadores e designers de interface, essa metodologia pode ser útil em outras áreas do Design (ou da vida).
Design Atômico não é restrito apenas à técnica ou ao resultado final, mas sobre como pensamos a estrutura organizacional de um projeto e o layout na construção metódica de um sistema.
Ele nasceu da necessidade de desenvolver sistemas de Design mais bem pensados e que podem ser facilmente escaláveis.
Grave essa palavra: “sistema”.
Uma biblioteca de recursos onde você consegue utilizar componentes reutilizáveis, aumentando a rapidez na entrega de soluções e tornando o resultado mais consistente.
Segundo o escritor Stephen Hay: “Não estamos projetando páginas, estamos projetando sistemas de componentes.”
Estrutura
A estrutura básica do Design Atômico possui 5 níveis:
- Átomos
- Moléculas
- Organismos
- Modelos
- Páginas
Não precisa se preocupar com os termos, a proposta deste artigo continua a mesma: mostrar como o Design Atômico pode ser útil em projetos gráficos.
Mas antes de chegar na prática, deixa eu explicar esses conceitos.
1- Átomos
Átomos são elementos-base de um sistema, blocos básicos de construção que dão vida a tudo que vemos em um layout.
Isso inclui fontes, imagens, ícones e outros elementos “irredutíveis” de Design.
Essas unidades atômicas se unem e formam moléculas, que por sua vez se combinam e dão vida às outras estruturas.
Assim como o átomo é a unidade básica da matéria, nessa metodologia, ele é a unidade básica de um Design visual.
A cor ainda é questionada dentro desse nível, mas vou falar minha opinião.
Cor é uma espécie de abstração visual, pois não podemos vê-la senão a partir da reflexão em um objeto.
Então podemos entender a cor como uma característica intrínseca ao objeto, ou como gosto de pensar, uma propriedade do objeto.
Essa linha de raciocínio me faz negar a cor como componente, mas sim como uma propriedade.
Concordo com Aurélio Jota, em seu artigo: o elo perdido do Atomic Design, quando ele diz que “estilos globais não deveriam ser tratados como componentes, logo não poderiam ser tratados como átomos.”
2- Moléculas
As coisas começam a ficar mais tangíveis quando os átomos começam a ser combinados.
Moléculas são grupos de átomos combinados entre si, formando um novo elemento diferente da soma de suas partes.
Embora possam parecer complexas, as moléculas são combinações relativamente simples de átomos “reutilizáveis”.
No exemplo do nosso cardápio, podemos pensar uma molécula como o item de preço. Ele é a combinação do nome do produto, um tracejado e o preço.
Neste caso, estou contando o nome do produto e o preço como o mesmo componente.
3- Organismos
Organismos são grupos de moléculas que funcionam juntas como uma unidade.
Pode ser vista como seções distintas de uma interface, ou no nosso exemplo do cardápio, as categorias de produto.
Problemas conceituais
Apesar de ser uma metodologia incrível, o Design atômico possui problemas de conceito em sua metáfora.
Como você percebeu, os três primeiros níveis condizem com a metáfora químico-biológica, enquanto os dois últimos fogem arbitrariamente disso.
Uma nomenclatura proposta para ajustar esse problema conceitual é: ao invés de modelos, ecossistema, e ao invés de páginas, ambiente.
Como imagino que já entendeu a lógica da metodologia, vou deixar a conceituação desses níveis de lado e seguir com a prática do nosso cardápio.
Concluindo
Já fizemos os itens de lista e criamos um padrão para as categorias dos produtos.
Para finalizarmos, basta colocar as imagens e juntar essas categorias em páginas, ou como expliquei no item anterior, no ambiente.
O ambiente tem o maior nível de fidelidade entre os níveis do Design Atômico, e costuma ser onde testamos a eficácia do sistema de Design.
Este é um resultado simples do que pode ser feito com o Design atômico.
Agora personalize do jeito que achar melhor.
Nos vemos na próxima!
