Uma introdução ao design atômico para web designers

Átomos não são simplesmente os elementos HTML, mas também seus estilos de pertencimento: fontes, cores, dimensões e outras regras de estilo CSS. Com as próprias palavras de Brad, átomos “demonstrar todos os seus estilos básicos de relance”.

Átomos - exemplo

Aqui está um exemplo do nosso site. As manchetes das postagens recomendadas podem responder por um tipo de átomo; eles usam o mesmo código HTML e CSS e pode ser facilmente distinguido do resto do conteúdo.

Observe que Hongkiat.com não foi projetado com design atômico em mente, aqui é usado apenas para fins de demonstração.

A essência do design atômico é projetar a interface do usuário de baixo para cima usando esses cinco estágios, não identificar os componentes do design atômico depois.

2. Moléculas

UMA molécula é formado por um grupo de átomos. Moléculas constituem o próximo estágio na hierarquia de design atômico. Pense nos elementos de interface do usuário mais simples que já estão feito de mais de um elemento HTML, como um formulário de pesquisa ou uma postagem recomendada na barra lateral.

Estar organizado em uma molécula dá um propósito para cada átomo. Em um grupo maior (molécula), os átomos devem apoiar e complementar uns aos outros, eles devem trabalhar bem juntos a fim de criar um design utilizável.

Por exemplo, o título (um átomo) deve obter mais ênfase (fontes maiores, mais peso, etc.) do que o nome do autor (outro átomo) no bloco de postagem recomendado. Desta forma, os dois átomos são “significava” para trabalhe em equipe para obter o melhor resultado.

Moléculas - Exemplo

Usando nosso exemplo anterior, você pode ver que na barra lateral de Hongkiat, um bloco de post recomendado poderia ser visto como uma molécula. Uma molécula post recomendada é construído de três átomos: uma miniatura, um título e um nome de átomo do autor.

3. Organismos

Organismos são compostos de um grupo de moléculas, átomos (e às vezes outros organismos). Em web design, os organismos são componentes de interface do usuário mais complexos que representam seções definitivas da página, como cabeçalho, rodapé ou barra lateral.

Organismos podem ser feitos de diferentes tipos de moléculas, por exemplo, uma barra lateral pode consistir em uma barra de pesquisa e diferentes tipos de widgets, ou de a mesma molécula repetida várias vezes, por exemplo, um punhado de blocos de postagem relacionados um ao outro. E pode ser a combinação desses dois.

Organismos - Exemplo

No site da Hongkiat, a barra lateral pode ser um organismo. É composto por um Barra de pesquisa (um tipo de molécula, exibido apenas uma vez) e vários posts recomendados (outro tipo de molécula, exibido muitas vezes).

No entanto, o organismo da barra lateral também pode ser visto como a composição de um molécula (a barra de pesquisa) e outro organismo (o post post recomendado com vários posts recomendados). O design atômico é um modelo flexível, as regras não são muito rigorosas, então neste caso podemos definir o mesmo bloco de construção tanto como molécula quanto como organismo.

4. Modelos

O próximo estágio na hierarquia de design atômico é modelos. Como você pode ver, isso é quando o design atômico pára de usar a analogia química. Brad se abstém da terminologia neste momento, como ele acha que é menos compreensível para clientes e outras partes interessadas, e são essencialmente os dois últimos estágios (modelos e páginas) que os designers precisam vender.

Modelos são construídos de organismos. Eles são objetos no nível da página mas sem o conteúdo final. O objetivo dos modelos é representam a estrutura do conteúdo subjacente.

Modelos exibem como diferentes átomos, moléculas, organismos “funcionam juntos no contexto de um layout”. Eles basicamente representam o esqueleto de uma página.

Modelos - exemplo

Por exemplo, pense em um modelo de página inicial com imagens de espaço reservado e blocos de texto lorem ipsum.

Abaixo, você pode ver um exemplo do livro Atomic Design. É o modelo de home page da revista TimeInc. Átomos, moléculas e organismos estão todos em seu lugar, mas somente com conteúdo esquemático.

5. Páginas

Páginas representam o último estágio da hierarquia de projeto atômico. Páginas são as “instâncias específicas de modelos”. No palco da página, os modelos são preenchido com conteúdo real (cópia, microcópia, imagens, vídeos, etc.), assim como eles aparecerão na interface do usuário real.

As páginas permitem que os designers vejam como experiência do usuário final vai parecer, para testar o design com usuários reais e para medir o quão bem ele executa em termos de usabilidade, conversão, acessibilidade e outras métricas.

Páginas e variações de modelo

O outro objetivo do palco da página é fazer variações de modelo possível. Falamos sobre variações de modelos quando o subjacente modelo é o mesmo mas o povoamento o conteúdo é (ligeiramente) diferente. Por exemplo, se você deseja mostrar um conteúdo diferente para grupos de usuários diferentes (por exemplo, para visitantes versus usuários conectados), ou quando um título é muito mais longo do que os outros.

Usar variações de modelo é crucial se quisermos criar consistente e resiliente interfaces de usuário. Componentes menores (átomos, moléculas, organismos) devem funcionar bem em diferentes cenários.

Por exemplo, um botão deve parecer clicável seja qual for os elementos circundantes ao redor. Se não parecer acionável em uma determinada variação, será necessário reprojetar o átomo do botão até cabe todos os casos de uso.

Páginas - exemplo

Abaixo, você pode ver o estágio da página do modelo de página inicial do TimeInc anterior. Parece diferente, né? Isso é apenas uma variação de modelo, Apesar. Para ter uma interface eficaz, a equipe de design tem que pensar muito sobre o que pode mudar no site real. Então, eles precisam testar o design para essa variação de modelo (página), também.