Atomic Design é uma metodologia para criar Design System, foi desenvolvida por Brad Frost que utilizou os a Química como inspiração por isso utilizasse Átomos, Moléculas e Organismos no Atomic Design. Desta forma temos nosso projeto mais estruturado e limpo ao criar componentes pequenos que vão formar uma interface completa.

Em Atomic Design ou Design Atômico temos 5 estágios para a criação de um design de Interface:

• Átomos
• Moléculas
• Organismos
• Templates
• Páginas

Vamos entender cada uma, pois é de extrema importância, pois cada um possui um papel importante na criação de uma interface.

Átomos

São componentes isolados, que não é possível mais ‘quebrá-los’ ou fragmentá-los, por isso o nome Átomos. São eles por exemplo, um ícone, botão, input, label dentre outros.

Segundo BradFost:

Os átomos de nossas interfaces servem como os blocos de construção fundamentais que compõem todas as nossas interfaces de usuário.

Moléculas

Os átomos sozinhos não têm tanto sentido, porém ao juntarmos alguns formamos um grupo simples que denominamos Moléculas. Quando combinados corretamente damos proposito ao conjunto.

Um exemplo básico é uma parte do cabeçalho de um site que possui uma label, campo de pesquisa e um botão.

Organismos

Se um conjunto de átomos formam uma molécula, logo um conjunto de moléculas e/ou átomos formam um Organismo. Nisso já possuímos uma seção da nossa interface.

Um exemplo de Organismo é um cabeçalho de um site, na qual ele possui a Logo, os botões das páginas, a label, campo de pesquisa e o botão. Da mesma maneira temos como exemplo o rodapé do site.

Templates

A referência a química tem por fim nos organismos, a partir de agora a linguagem utilizada fará mais sentido com design de interfaces. Juntando o nosso cabeçalho, footer e os componentes criados, todos formam um templates.

Juntos eles fornecem o contexto necessário para o entendimento do objetivo final.
Mark Boulton cita a importância de definir uma boa estrutura

Você pode criar boas experiências sem conhecer o conteúdo. O que você não pode fazer é criar boas experiências sem conhecer sua estrutura de conteúdo. Do que é feito o seu conteúdo, não do que é o seu conteúdo.

O que ele quis dizer é que, criando um bom template, podemos ter uma variedade de conteúdo.

Páginas

As páginas são a interface com o conteúdo do usuário, ou seja, o nosso cabeçalho terá a imagem definida do logo, o corpo da da página terá as imagens dos conteúdos e os parágrafos, tudo em seu estágio final. É o que o usuário final utiliza.

Segundo Brad Foot

As páginas são essenciais para testar a eficácia do sistema de design subjacente

Abaixo deixarei breves definições retiradas do artigo do Brad Frost.

• Átomos são elementos de interface do usuário que não podem ser divididos mais e servem como blocos de construção elementares de uma interface.
• Moléculas são coleções de átomos que formam componentes de interface do usuário relativamente simples.
• Os organismos são componentes relativamente complexos que formam seções discretas de uma interface.
• Os modelos colocam componentes em um layout e demonstram a estrutura de conteúdo subjacente do design.
• As páginas aplicam conteúdo real aos modelos e articulam variações para demonstrar a interface do usuário final e testar a resiliência do sistema de design.

Referência: Atomic Desing