O elo perdido do Design Atômico

Aurélio Jota
Jul 11, 2017 · 3 min read

O sistema de design criado por Brad Frost e Dave OlsenDesign Atômico — inspirado pelas aulas de biologia no colegial, possui alguns problemas de conceito em sua metáfora, que também traz um débito arquitetural ao Pattern Lab.

Problema 1

Primeiramente, parte dos problemas na metáfora já foram bem resolvidos. Entenda neste artigo:

No conceito atual do Design Atômico, temos dois níveis que não fazem nenhuma relação com a metáfora: Templates e Páginas.

No artigo acima, essas nomenclaturas foram ajustadas para ter uma relação mais próxima da metáfora, então temos: Ecossistema e Ambiente.


Problema 2

O Pattern Lab trata todos os estilos globais (paleta de cores, famílias de fonte e animações) no mesmo nível dos átomos. Porém, esses elementos visuais, tecnicamente, não são componentes, mas sim estilos. Como eles mesmos afirmam:

“The global category defines visual elements such as color, font families, and motion. While not technically UI components, these elements are critical to document in the pattern library.”

Pattern Lab - Categoria "Global" no mesmo nível dos átomos.

Os estilos globais não deveriam ser tratados como componentes. Logo, também não podem ser tratados como átomos. Faz sentido?

Resolvendo o problema

Seguindo a metáfora biológica por trás da metodologia, o que mais se assemelha com estilos visuais são nossas características genéticas hereditárias. Nosso genoma. Ou seja, é o responsável por dizer qual a cor dos nossos olhos, cabelo, tom de pele e dita até o nosso comportamento. Biologicamente, os genes ficam na cadeia de DNA (e RNA).

O DNA é uma molécula, portanto, para encaixar isso ao fluxo do Design Atômico, teremos algo assim:

Adicionando o DNA ao fluxo do Design Atômico.

Podemos assimilar que os genes, tecnicamente, seriam temas. Assim, todo o estilo visual personalizado seria inserido desta maneira. E não seria mais necessário declarar a categoria global, como está escrito no Pattern Lab. Inicialmente, todos os átomos nasceriam com estilo visual padrão dos browsers (nativo), mas por fim receberiam o estilo personalizado definido por um tema.


Ajustando a arquitetura do Pattern Lab

Adicionando o DNA à arquitetura do Pattern Lab.

Um exemplo usando Mustache (para entender, assista o vídeo da apresentação do Brad Frost), teríamos algo assim:

{{> dna-gene-global}}Output:
<link rel="stylesheet" src="/dna/genes/global.css" />

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store