Atomic Design como funciona

Atomic Design como funciona:

Primeiro quero agradecer o Jean Carlo Nascimento (Suissa), que me ensinou sobre Atomic Design, e me Propôs esse desafio de escrever sobre o Atomic Design.

Vamos abordar nesse artigo como funciona o Atomic Design criado por Brad Frost, que através de analogias científicas curiosas, e ferramentas inspiradas nos Guias de Estilo, promete modificar a maneira de como organizamos e desenvolvemos interfaces.

Até alguns anos atrás era muito comum que em um projeto fossem criados com o velho esquema em cascata wireframes, layouts e depois mockups clicáveis de uma interface. Porém é fácil se perder, tentando encontrar os arquivos corretos para editar, tentando manter os estilos consistentes em toda interface, e decidir como
os novos recursos devem ser projetados.

Em vez de olhar para sites como um conjunto de páginas, você olha como um sistema de design, que são feitos de pequenos blocos que se juntam para, eventualmente se formar interfaces, ele usa uma metáfora quimica para ilustrar esses conceitos, onde os componentes menores são Átomos(ex: botões), que se juntam para formar Moléculas(ex: forms), os organismos(ex: o cabeçalho), e a interface, eventualmente completa.
Vou explicar como esta metodologia pode ajudar a melhorar o fluxo de trabalho de web design, e nos impedir de ficar retardado por questões acima.

Atomic Design em suma

Estamos familiarizados com a abordagem Mobile-first, que diz para desenvolver primeiro a versão mobile. Atomic Design leva isso ainda mais sério e diz que você deve primeiro criar os elementos básicos de uma interface, como um link, botão ou parágrafo, que ele chama de átomos. Vamos usar esse artigo como exemplo. Os átomos são o cabeçalho principal, cabeçalho secundário, titulo e parágrafos. Esses átomos juntos forma a entrada do blog, que é uma molécula. Esta molécula vem somada á lista de informações sobre o direito e a paginação na parte inferior para informar o blog, que é um organismo. Este Organismo do blog vem somado ao cabeçalho, menu, rodapé para criar o modelo e a interface final. Como esta abordagem ajuda de forma pratica ?

Atomic Design

Atomic Design organizando seu css

É facil escrever o CSS que segue a metodologia do Atomic Design. basta começar por denominar os menores componentes e, em seguida, adicionar estilos a eles. Para ajudar a organizar ainda mais, Brad Frost recomenda colocar cada átomo, molécula ou organismo em um arquivo de estilo separado. Seus includes poderia ser algo como isso:

/ * ----------- Elementos globais (átomos) ------------ * /
@import "headings";
@import "links";
@import "lists";
@import "text";
@import "buttons";

/ * ----------- COMPONENTES (Moléculas) ------------ * / 
@import "forms";
@import "pagination";
@import "article";

/ * ----------- Content / Blocks (organismo) ------------ * / 
@import "header";
@import "footer";
@import "menu";

/*----------- PAGE STRUCTURE (Templates) ------------*/
@import "layout";

Exemplo de como organizar as importações CSS baseado em Atomic design.

Isto torna muito facil encontrar o CSS que você esta procurando. Por exemplo, se eu querer mudar o estilo do título, é só ir até o arquivo headings.

Atomic Design ajuda você projetar novos recursos

Com base no sistema de atomic design posso projetar rapidamente novas funcionalidades para a interface. Digamos que você queira adicionar um formulário de pesquisa no header da interface. O formulário de pesquisa seria uma molécula criada por átomos de input, label e buttons. Desde que já denominou esses átomos. Eu simplesmente precisaria estilizar a molécula do formulário de busca que contém esses átomos. Brad Frost desenvolveu o Pattern Lab para ajudar nesse processo. É um guia de estilo que mostra cada átomo, molécula, etc de uma interface, por si própria. Ele pode ser usado como referência.

Conclusão

Espero que agora você possa ver como a metodologia do atomic design pode ajudar a melhorar o processo de web design. Ele é tão flexível que você pode aplicar os princípios de tudo para um pagina ou um site comporativo de 100 páginas.
Confira a Palestra do Brad Frost e saiba mais sobre o Atomic design e Pattern Lab.

Saiba mais

Palestra do Brad Frost

Brad Frost – Atomic Design