Design atômico

O design atômico é uma metodologia de design de interface do usuário para construir um sistema de design da maneira mais eficiente possível. O conceito foi formulado pelo designer de interface Brad Frost, citando Stephen Hay: “Não estamos projetando páginas, estamos projetando sistemas de componentes.” Em outras palavras, em vez de projetar uma página de interface inteira de uma só vez, faz mais sentido montá-la peça por peça. Os elementos menores são combinados em outros maiores, formando páginas e blocos modulares que podem ser facilmente alterados em qualquer lugar e em qualquer medida, removendo ou substituindo o elemento relevante.

Os átomos são os blocos básicos de construção (elementos HTML) que compõem uma interface. Eles não podem ser divididos em partes menores sem perderem seu significado funcional. Entre eles estão botões, ícones, campos de entrada, paletas de cores e animações. Assim como na natureza, os átomos da interface não podem existir isoladamente e só ganham sentido quando combinados entre si. Eles funcionam como uma biblioteca de padrões.

As moléculas são os grupos mais simples de átomos que atuam em conjunto como uma única unidade funcional. Essa unidade pode ser inserida, movida e copiada como um todo, sempre que a interface precisar de sua função. As moléculas são a base dos sistemas de design, pois foram concebidas para serem reutilizadas várias vezes dentro de uma única interface. Elas formam blocos de construção completos com os quais se pode trabalhar, e os organismos são construídos a partir delas.

Os organismos são agrupamentos mais complexos de átomos e moléculas que compõem seções relativamente complexas e distintas de uma interface. Eles podem consistir em tipos de moléculas idênticos e/ou diferentes. Por exemplo, um organismo de cabeçalho de site pode incluir muitos componentes diferentes: um logotipo, uma barra de navegação, um formulário de busca e um bloco de links para redes sociais. Um “organismo” de grade de produtos, por outro lado, consiste em uma molécula repetida várias vezes, contendo, por exemplo, uma foto do produto, o nome e o preço. Nesta fase, o design se torna concreto o suficiente para definir o estilo visual da interface, fazer alterações e discutir o projeto com o cliente.

É aqui que termina a analogia com a química e começam os aspectos específicos do design de interface do usuário. Os modelos consistem, em sua maioria, em grupos de organismos dispostos de forma a formar layouts de página sem conteúdo real. Eles mostram esquematicamente como os organismos e o conteúdo são posicionados nas páginas da interface: seu tamanho, formato e assim por diante. Os modelos conferem especificidade ao trabalho com moléculas e organismos relativamente abstratos e lhes dão estrutura.

As páginas são instâncias específicas de modelos preenchidos com conteúdo real. Essa é a fase em que a eficácia de todo o sistema de design se torna mais visível. Uma página real revela quaisquer erros cometidos nas fases anteriores, e um sistema de design baseado nos princípios do design atômico permite corrigi-los de forma rápida, precisa e sem complicações, seja no nível dos átomos, das moléculas ou dos organismos.