• suporte
• 0 Comments
• 59 Views

Design atômico refere-se a um sistema que usa da evolução linear de objetos abstratos para a produção de um produto. A abordagem para o interface foi criada pelo web designer Brad Frost e explicada em detalhes na conferência Beyond Tellerand, na Alemanha.

Assim como os guias de estilo, o atomic design é modular, ou seja, assume-se que as páginas da internet são na verdade sistemas, conjuntos de elementos interconectados que formam um todo organizado.

Inspirado por sua aula de química no ensino médio, Frost percebeu que os componentes de uma página da web se comportam muito como átomos, moléculas e organismos.

Logo surgiu o conceito de design atômico, que pode ser utilizado em diversos projetos gráficos, tanto de para uma empresa de levantamento topográfico como outros negócios que precisam de um projeto gráfico no marketing ou sistemas organizacionais internos.

As páginas da web são basicamente compostas por um conjunto limitado de elementos (marcação HTML) que podem ser agrupados de diferentes maneiras para criar sistemas complexos.

Assim como na segurança do trabalho é solicitado o curso nr 35, para aprender e aplicar o conceito de design atômico é preciso entender de design.

O que é design atômico?

O design atômico é uma abordagem modular para a criação de sistemas de design. Como dito no início, foi criado pelo designer Brad Frost e é semelhante à tabela periódica.

Com o design atômico é possível criar sistemas que melhoram a consistência e a escalabilidade por meio da componentização de elementos de layout.

Em outras palavras, como a emoção e a abstração do design, um layout consistente ainda é baseado em estrutura concreta e lógica repetitiva.

Dito isto, um design visualmente coeso é composto de blocos de construção básicos que podem ser repetidos conforme necessário e ajudam a criar estruturas maiores.

Pense em uma fachada em pele de vidro. No geral, você tem muita repetição em seu layout, que são as placas retangulares. Isso torna mais fácil para os leitores criarem modelos mentais simples e aumentarem a previsibilidade do fluxo de leitura.

Nesse caso, o atomic design ajudará a construir padrões, organizar e permitir a edição de recursos.

Embora bem conhecida entre programadores e designers de interface, essa abordagem também é útil em outras áreas do design (ou da vida).

Ou seja, o design atômico não se limita à tecnologia ou ao resultado final, mas em como pensamos a organização do projeto e o layout na construção do sistema.

Nasceu para desenvolver sistemas de design bem pensados ​​que podem ser facilmente estendidos. Um repositório onde você pode usar componentes reutilizáveis, aumentando a velocidade de entrega de soluções e tornando os resultados mais consistentes.

De acordo com o autor Stephen Hay, “Não estamos projetando páginas, estamos projetando sistemas de componentes.”

Estrutura

A estrutura básica do design atômico consiste nos seguintes níveis:

• Átomo;
• Molécula;
• Organismo;
• Modelo a seguir;
• Página.

Não precisa se preocupar com terminologia, o objetivo é mostrar como o design atômico pode funcionar em projetos gráficos ou mesmo em sistemas de elevador de carga comercial para sinalizar os comandos dos botões, por exemplo.

1- Átomo

Os átomos são os blocos de construção do sistema, e os blocos básicos dão vida a tudo o que vemos nos layouts. Isso inclui fontes, imagens, ícones e outros elementos de design “irredutíveis”.

Essas unidades atômicas se unem para formar moléculas, que por sua vez se combinam e dão vida a outras estruturas. Assim como o átomo é a unidade básica da matéria, nesta metodologia é a unidade básica do design visual. 

A cor, por exemplo, ainda é questionável a este nível, porque ela é uma abstração visual, visto que só podemos vê-la através de objetos refletivos, como os adesivos colados numa porta automática de vidro valor, por exemplo.

Assim podemos entender a cor como uma característica intrínseca dos objetos ou propriedades dos objetos, como é mais adequado para se pensar. Esse raciocínio nos leva a negar que a cor seja um ingrediente, mas um atributo essencial dos projetos.

Assim como disse Aurélio Jota em seu artigo The Missing Link of Atomic Design, “estilos globais não devem ser considerados componentes, portanto não podem ser considerados átomos.”

2- Molécula

Quando os átomos começam a se combinar, as coisas começam a ficar mais tangíveis. Moléculas são grupos de átomos unidos para formar novos elementos, que são diferentes da soma de suas partes.

Apesar de sua aparente complexidade, as moléculas são combinações relativamente simples de átomos “reutilizáveis”.

Em um exemplo prático, podemos pensar em uma fábrica de redes de proteção anti pássaros, uma linha fina é trançada com outras, que formam uma corda, depois dado alguns nós para finalmente virar o produto final. 

3- Organismos

Organismos são grupos de moléculas que trabalham juntas como uma unidade. Pode ser pensado como uma parte diferente da interface ou, em nosso exemplo de menu, categorias de produtos.

Os benefícios do design atômico

O design atômico pode exigir mais reflexão e planejamento, mas de fato pelas muitas vantagens e benefícios de aplicar realmente vale o esforço extra. Confira agora as três principais vantagens do design atômico.

Sistemas baseados em componentes 

Quando dividimos os componentes em seus átomos básicos, fica mais fácil ver quais átomos podem se combinar ou misturar para formar outras moléculas ou organismos.

Isso ajuda a navegar entre as seções atômicas, bem como em toda a interface do usuário. É algo que pode ser utilizado em empresa de projetos hidráulicos e diversos outros tipos de projetos.

Facilidade em criar estilos

Um dos princípios de design atômico é que todos os átomos e moléculas são criados antes que o site seja construído, e você pode incorporar todos os átomos e moléculas em seu guia de estilo. Isso mantém seus designs consistentes em todas as plataformas.

O código é mais consistente e fácil de ler, então o código de um site projetado “atômico” geralmente é mais fácil de ler do que o código criado de maneira mais tradicional.

A consistência é fornecida quando você usa átomos predefinidos para criar layouts de site. 

Ele permite que você veja facilmente quais componentes estão sendo usados ​​em diferentes partes do seu site.

Prototipagem e atualizações mais rápidas 

Definir listas atômicas antes do início do processo de compilação significa que você pode simular páginas de maneira rápida e fácil. Basta selecionar e combinar os elementos necessários do seu site.

Se for necessária uma atualização em um sistema de manutenção em elevadores, por exemplo, só é preciso alterar um átomo, molécula ou organismo de cada vez. Isso simplifica todas as atualizações do componente executadas em todas as outras instâncias.

Design atômico e interface

Como o design atômico e o inventário de interface se encaixam? Primeiro, vamos definir um dos maiores problemas no desenvolvimento de produtos: a falta de consistência no design.

Ao criar uma linguagem comum para equipes de desenvolvimento de produtos, é possível aproveitar os métodos de design atômico para evitar inconsistências.

Essa linguagem comum é chamada de manifesto de interface. Você pode pensar nisso como uma caixa bem organizada com todos os seus produtos.

Uma lista de verificação de interface, por exemplo, funciona como uma ferramenta para designers e desenvolvedores – o que permite que todos participem da conversa, mantendo a consistência e a alta qualidade dos elementos.

Projeto Atômico e Sistemas de Projeto

Se você estiver pensando sobre o que é um sistema de design atômico real e como ele é diferente do UI design ou mesmo do UX design, por exemplo, a melhor coisa é irmos para as definições dos estudiosos, como essa fornecida por Audrey Hacq:

“Um sistema de design é a única fonte de verdade que reúne todos os elementos que permitem a uma equipe projetar, implementar e desenvolver um produto.”

Ela explicou ainda que “um sistema de design não é um sistema de entrega, mas um conjunto de entregas. Ele evoluirá com produtos, ferramentas e novas tecnologias.”

Então como é diferente do inventário de interface? A lista de verificação da interface mostra o status atual e os diferentes estágios do ciclo de vida do produto.

Em contraste, os sistemas de design estão em constante evolução e servem como a única fonte de verdade devolvida a todos os membros da equipe de produto.

Seu objetivo básico é facilitar o trabalho de todas as equipes envolvidas, desde equipes de design até equipes de desenvolvimento, etc. No entanto, uma lista de interfaces bem definida e documentada pode ser um bom ponto de partida para a criação de um sistema de design.

Esse texto foi originalmente desenvolvido pela equipe do blog Guia de Investimento, onde você pode encontrar centenas de conteúdos informativos sobre diversos segmentos.