Design atômico: Explodindo o que você pensava que sabia sobre web design

É uma crença comum que flexibilidade é o mesmo que ser desenfreado, que para ser criativo você também precisa ser desenfreado. Para concluir um projeto, no entanto, especialmente um que seja tão complexo quanto o design da web, criar uma estrutura pode realmente dar a você mais flexibilidade. Você precisa de uma estrutura - não é negociável. Exercitar seus músculos artísticos e criativos onde você realmente tem a liberdade resultará em designs tão inspirados quanto funcionais e realistas. O design atômico é uma abordagem sensata e metódica do design da web que ainda dá a você a chance de experimentar dentro da estrutura.

Sistemas de Design

Os designers não simplesmente criam páginas da web; eles criam sistemas de design. Os sistemas de design incluem:

• Cor
• Grades
• Textura
• Tipografia
• Etc.

Eu amo como Jack Strachan no UX Planet descreve sistemas de design: “Resumindo, um sistema de design é uma coleção de componentes reutilizáveis, guiados por padrões claros, que podem ser montados juntos para construir qualquer número de aplicativos. Os sistemas de design são um método para traduzir uma experiência consistente e linguagem visual em um produto ao trabalhar em diferentes pontos de contato. ”

Os elementos do design podem ser subjetivos e podem rapidamente se tornar opressores e caóticos. Para categorizá-los, o design deve ser visto de uma forma mais metódica. Foi isso que o web designer Brad Frost fez.

O Nascimento do Design Atômico

Foi assim que Brad criou o design atômico: “Em busca de inspiração e paralelos, sempre voltei à química. O pensamento é que toda matéria (seja sólida, líquida, gasosa, simples, complexa, etc.) é composta de átomos. Essas unidades atômicas se unem para formar moléculas, que por sua vez se combinam em organismos mais complexos para criar toda a matéria em nosso universo. ”

Ele continua explicando que as interfaces são feitas de componentes que podem ser categorizados em blocos de construção. Aqui está o pedido do menor para o maior:

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

Fonte: BradFrost.com

Os blocos de construção do design atômico

A principal atração do design atômico é que ele promove consistência. Muitos dos elementos que você cria podem ser facilmente replicados, reutilizados ou dimensionados. E para acompanhar todos eles, os designers podem construir uma biblioteca onde podem ver todos os seus elementos e estilos em um só lugar. Também há espaço para personalização, mas apenas à medida que os blocos de construção ficam mais complexos e amplos em escopo. Vamos entrar nos cinco blocos de construção:

1. Átomos

Assim como os átomos são importantes para o mundo natural, as tags HTML são para as interfaces da web. Significado: todas as interfaces da web começam com tags HTML ou elementos fundamentais (animações, botões, paletas de cores, fontes, rótulos de formulários, etc.). Embora esses átomos não sejam benéficos para o design da web por conta própria, eles são necessários para construir a interface da web.

2. Moléculas

As moléculas são mais complexas do que os átomos, mas não são complexas em geral. Quando você agrupa átomos não tão úteis, você tem moléculas mais úteis: Rótulo do formulário de pesquisa + entrada + botão (átomos) = formulário de pesquisa concluído (molécula)

3. Organismos

Quando você agrupa moléculas, obtém organismos, que são mais complexos do que seus predecessores: Logo + Navegação + Formulário de pesquisa + Ícones de mídia social (moléculas) = ​​Masthead concluído (organismo)

Idealmente, você poderá reutilizar organismos no site ou em diferentes sites, mantendo o layout geral e personalizando-o com diferentes textos e imagens. Por exemplo, você pode usar o mesmo tipo de cabeçalho em todos os sites que projeta ou pode criar um organismo específico para o produto (imagem + título + preço) que você repete na página do produto.

É quando a interface da web realmente começa a se formar de uma forma única e personalizada. Antes, sua interface é apenas uma coleção de elementos simples. Durante a fase de organismos, o site fica mais visual.

Se você fosse compartilhar seu processo com um cliente, esta é a parte em que ele diria: “Ah, entendi”. Este é o momento de começar a criar wireframes ou montar maquetes para que o cliente possa dar feedback antes de você prosseguir.

4. Modelos

Quando você agrupa organismos, você tem modelos. É aí que o layout da página real se junta. Embora as moléculas e os organismos tenham seus próprios layouts internos, o estágio de modelos é quando você começa a ver como eles se complementam e interagem entre si; onde eles são colocados em relação um ao outro; e como eles fluem como um todo. O modelo fornece contexto às moléculas e organismos. Observe que os modelos têm conteúdo de espaço reservado, não conteúdo personalizado ou original.

Fonte: BradFrost.com

5. Páginas

As páginas levam os modelos para o próximo nível, substituindo o conteúdo do espaço reservado pelo conteúdo real. Provavelmente não será o conteúdo final, mas será mais representativo do design e do conteúdo final. Adicionar conteúdo permanente de alta qualidade neste momento pode ser um desperdício porque o site ainda precisa ser testado, revisado e ajustado. Dito isto, é possível que você vai conectar o conteúdo finalizado - que depende de onde você está nesse processo.

Esta é a fase em que o site estará sob maior escrutínio. Dependendo das avaliações e feedback que você obtém, as moléculas, os organismos e os modelos podem ter que ser alterados. Este também é um bom momento para testar variações de design.

Pensamentos finais

O problema do design atômico é que ele não é novo - o jargão é, mas a teoria não. É assim que os sites são projetados há muito tempo. Falar em termos de design atômico não fará de você automaticamente um grande designer ou desenvolvedor; não é um substituto para um trabalho sólido.

Um benefício de falar sobre isso dessa maneira, ao usar esse tipo de terminologia para esclarecer a metodologia, é que é mais fácil para os não desenvolvedores entenderem - você pode explicar seu processo aos clientes. E para o desenvolvedor organizado, é uma forma de compartimentar os projetos. Você será capaz de detalhar um componente ou um pequeno grupo de elementos que não estão funcionando. Isso pode ajudá-lo a ver a floresta em busca das árvores, em vez de dizer: "Tudo isso é defeituoso".

O design atômico permite que você abrace a criatividade sem se perder nela. Ele organiza elementos básicos e sistemas de design de forma que você comece um projeto mais rápido para que o tempo possa ser gasto onde sua arte e habilidades são mais necessárias - fazendo adaptações intrincadas, resolvendo problemas, atendendo às necessidades do cliente e, finalmente, criando um site que vai além da norma.

Mantenha o ímpeto do web design e confira as 10 regras de um bom design de interface do usuário para seguir em todos os projetos de web design.

Imagem em destaque via ShadeDesign / shutterstock.com