Artigo - Atomic Design

Atuação:

Product Designer

Ano:

2023

Todos nós, já ouvimos falar sobre átomos durante a nossa vida, principalmente durante o tempo escolar. E assim como vimos na química, os átomos representam a menor parte da matéria, e a formação de todos os elementos e organismos surge a partir da combinação de átomos. Mas o que isso tem a ver com Design?

Em 2013, o designer Brad Frost propôs a metodologia do Atomic Design baseada na organização dos átomos como forma de padronizar elementos de design e desenvolvimento de produtos digitais. Podendo ajudar a construir projetos mais consistentes e em menos tempo.

Todos nós, já ouvimos falar sobre átomos durante a nossa vida, principalmente durante o tempo escolar. E assim como vimos na química, os átomos representam a menor parte da matéria, e a formação de todos os elementos e organismos surge a partir da combinação de átomos. Mas o que isso tem a ver com Design?

Em 2013, o designer Brad Frost propôs a metodologia do Atomic Design baseada na organização dos átomos como forma de padronizar elementos de design e desenvolvimento de produtos digitais. Podendo ajudar a construir projetos mais consistentes e em menos tempo.

Todos nós, já ouvimos falar sobre átomos durante a nossa vida, principalmente durante o tempo escolar. E assim como vimos na química, os átomos representam a menor parte da matéria, e a formação de todos os elementos e organismos surge a partir da combinação de átomos. Mas o que isso tem a ver com Design?

Em 2013, o designer Brad Frost propôs a metodologia do Atomic Design baseada na organização dos átomos como forma de padronizar elementos de design e desenvolvimento de produtos digitais. Podendo ajudar a construir projetos mais consistentes e em menos tempo.

Mas afinal, o que é Atomic Design?

Atomic Design, também conhecido como Design Atomico é uma metodologia desenvolvida e publicada pelo web designer Brad Frost.

O AD foi baseado em uma analogia com a tabela periódica, em que cada elemento é disposto de maneira independente, porém é possível combiná-los com a finalidade de criar organismos mais complexos, sempre de forma organizada e padronizada.

Mas afinal, o que é Atomic Design?

Atomic Design, também conhecido como Design Atomico é uma metodologia desenvolvida e publicada pelo web designer Brad Frost.

O AD foi baseado em uma analogia com a tabela periódica, em que cada elemento é disposto de maneira independente, porém é possível combiná-los com a finalidade de criar organismos mais complexos, sempre de forma organizada e padronizada.

Mas afinal, o que é Atomic Design?

Atomic Design, também conhecido como Design Atomico é uma metodologia desenvolvida e publicada pelo web designer Brad Frost.

O AD foi baseado em uma analogia com a tabela periódica, em que cada elemento é disposto de maneira independente, porém é possível combiná-los com a finalidade de criar organismos mais complexos, sempre de forma organizada e padronizada.

Ao utilizar o Design Atômico, você garante a coerência do projeto e a consistência dos elementos visuais, garantindo que cada recurso utilizado seja replicado igualmente, e que todas as estruturas sigam uma padronização.

Essa metodologia é composta por cinco estágios distintos que trabalham juntos para criar sistemas de interface digital de uma maneira mais estruturada e hierárquica, auxiliando na categorização e padronização de elementos de uma interface, e por consequência, na criação de um Design System, Style Guides e documentações em geral.

E quais são os níveis do atomic design?

A estrutura do Design Atômico é baseada na química molecular, que parte de elementos mais simples e indivisíveis, e conforme se agrupa, vai formando componentes mais complexos.
Seu criador Brand Frost, define que o atomic design é uma metodologia para criar sistemas de design, de tal forma que possa ser subdividido em 5 níveis, que são:

Ao utilizar o Design Atômico, você garante a coerência do projeto e a consistência dos elementos visuais, garantindo que cada recurso utilizado seja replicado igualmente, e que todas as estruturas sigam uma padronização.

Essa metodologia é composta por cinco estágios distintos que trabalham juntos para criar sistemas de interface digital de uma maneira mais estruturada e hierárquica, auxiliando na categorização e padronização de elementos de uma interface, e por consequência, na criação de um Design System, Style Guides e documentações em geral.

E quais são os níveis do atomic design?

A estrutura do Design Atômico é baseada na química molecular, que parte de elementos mais simples e indivisíveis, e conforme se agrupa, vai formando componentes mais complexos.
Seu criador Brand Frost, define que o atomic design é uma metodologia para criar sistemas de design, de tal forma que possa ser subdividido em 5 níveis, que são:

Ao utilizar o Design Atômico, você garante a coerência do projeto e a consistência dos elementos visuais, garantindo que cada recurso utilizado seja replicado igualmente, e que todas as estruturas sigam uma padronização.

Essa metodologia é composta por cinco estágios distintos que trabalham juntos para criar sistemas de interface digital de uma maneira mais estruturada e hierárquica, auxiliando na categorização e padronização de elementos de uma interface, e por consequência, na criação de um Design System, Style Guides e documentações em geral.

E quais são os níveis do atomic design?

A estrutura do Design Atômico é baseada na química molecular, que parte de elementos mais simples e indivisíveis, e conforme se agrupa, vai formando componentes mais complexos.
Seu criador Brand Frost, define que o atomic design é uma metodologia para criar sistemas de design, de tal forma que possa ser subdividido em 5 níveis, que são:

Átomos

Os átomos podem ser representados como aqueles que servem de base para tudo o que será feito no sistema, o menor elemento de interface do usuário. Entre eles, podemos ter fontes, imagens, formas, ícones e cores. Em produtos digitais, dificilmente eles teriam uma função, mas ao serem combinados a outros elementos semelhantes, formam estruturas mais complexas (como as moléculas).

Já em termos de desenvolvimento, os átomos também podem ser representados por tags HTML, como label, input ou botão, isto é, elas passam a ser algo mais visual do que funcional.

Átomos

Os átomos podem ser representados como aqueles que servem de base para tudo o que será feito no sistema, o menor elemento de interface do usuário. Entre eles, podemos ter fontes, imagens, formas, ícones e cores. Em produtos digitais, dificilmente eles teriam uma função, mas ao serem combinados a outros elementos semelhantes, formam estruturas mais complexas (como as moléculas).

Já em termos de desenvolvimento, os átomos também podem ser representados por tags HTML, como label, input ou botão, isto é, elas passam a ser algo mais visual do que funcional.

Átomos

Os átomos podem ser representados como aqueles que servem de base para tudo o que será feito no sistema, o menor elemento de interface do usuário. Entre eles, podemos ter fontes, imagens, formas, ícones e cores. Em produtos digitais, dificilmente eles teriam uma função, mas ao serem combinados a outros elementos semelhantes, formam estruturas mais complexas (como as moléculas).

Já em termos de desenvolvimento, os átomos também podem ser representados por tags HTML, como label, input ou botão, isto é, elas passam a ser algo mais visual do que funcional.

Moléculas

Já as moléculas, são a junção de átomos para a formação de um novo elemento, portanto as moléculas são grupos dessas partículas ligadas entre si. Elas formam elementos de interface do usuário relativamente simples funcionando juntos como uma unidade.

Um exemplo seria unir uma forma e um texto para criar um botão, ou um input aliado a tipografia e uma imagem para gerar um formulário.

Moléculas

Já as moléculas, são a junção de átomos para a formação de um novo elemento, portanto as moléculas são grupos dessas partículas ligadas entre si. Elas formam elementos de interface do usuário relativamente simples funcionando juntos como uma unidade.

Um exemplo seria unir uma forma e um texto para criar um botão, ou um input aliado a tipografia e uma imagem para gerar um formulário.

Moléculas

Já as moléculas, são a junção de átomos para a formação de um novo elemento, portanto as moléculas são grupos dessas partículas ligadas entre si. Elas formam elementos de interface do usuário relativamente simples funcionando juntos como uma unidade.

Um exemplo seria unir uma forma e um texto para criar um botão, ou um input aliado a tipografia e uma imagem para gerar um formulário.

Organismos

Organismos são componentes consideravelmente mais complexos, compostos por um grupo de moléculas, átomos ou até mesmo outros organismos. Esses organismos funcionam juntos como uma unidade. A maioria dos organismos podem funcionar por conta própria, sem depender de outros elementos na página.

No Design Atômico, são representadas por estruturas como menu, header, footers, CTAs…

Um header por exemplo pode ter elementos diferentes como a imagem do logo, lista de navegação e formulário de busca.
Podemos facilmente encontrar um exemplo de organismo que repete as mesmas moléculas em uma página de categoria em um site de e-commerce, onde teremos a listagem de produtos exibidos de uma mesma forma em um grid.

Construir organismos mais elaborados a partir de moléculas proporciona a designers e desenvolvedores um importante senso de contexto. Organismos demonstram componentes menores e mais simples em ação, servindo padrões distintos que podem ser reutilizados.

Organismos

Organismos são componentes consideravelmente mais complexos, compostos por um grupo de moléculas, átomos ou até mesmo outros organismos. Esses organismos funcionam juntos como uma unidade. A maioria dos organismos podem funcionar por conta própria, sem depender de outros elementos na página.

No Design Atômico, são representadas por estruturas como menu, header, footers, CTAs…

Um header por exemplo pode ter elementos diferentes como a imagem do logo, lista de navegação e formulário de busca.
Podemos facilmente encontrar um exemplo de organismo que repete as mesmas moléculas em uma página de categoria em um site de e-commerce, onde teremos a listagem de produtos exibidos de uma mesma forma em um grid.

Construir organismos mais elaborados a partir de moléculas proporciona a designers e desenvolvedores um importante senso de contexto. Organismos demonstram componentes menores e mais simples em ação, servindo padrões distintos que podem ser reutilizados.

Organismos

Organismos são componentes consideravelmente mais complexos, compostos por um grupo de moléculas, átomos ou até mesmo outros organismos. Esses organismos funcionam juntos como uma unidade. A maioria dos organismos podem funcionar por conta própria, sem depender de outros elementos na página.

No Design Atômico, são representadas por estruturas como menu, header, footers, CTAs…

Um header por exemplo pode ter elementos diferentes como a imagem do logo, lista de navegação e formulário de busca.
Podemos facilmente encontrar um exemplo de organismo que repete as mesmas moléculas em uma página de categoria em um site de e-commerce, onde teremos a listagem de produtos exibidos de uma mesma forma em um grid.

Construir organismos mais elaborados a partir de moléculas proporciona a designers e desenvolvedores um importante senso de contexto. Organismos demonstram componentes menores e mais simples em ação, servindo padrões distintos que podem ser reutilizados.

Modelos/Templates

A partir deste nível do atomic design é abandonada a analogia com a química, visando deixar a linguagem mais apropriada para o resultado e para que faça sentido aos seus usuários.

Ao agrupar mais de um organismo você cria os templates, que são elementos unidos em forma de página, porém ainda sem todos os recursos necessários. É nesse estágio que o produto começa a se tornar mais elaborado.

Templates são objetos a nível de página que demonstram o posicionamento de componentes em um layout e articulam a estrutura de conteúdo subjacente do design (textos, imagens e demais mídias). Seguindo com o exemplo anterior, temos o header aplicado a um template de homepage.

Ao aplicar estratégias de Atomic Design em um produto digital, os templates podem ser utilizados para a criação de wireframes e protótipos.

Paginas

Por fim, no AD, as estruturas mais complexas são as páginas. Tratam-se de instâncias específicas do template, porém com características mais próximas da versão final, ou seja uma interface com alto nível de fidelidade e combinam todos os itens anteriores.

É no estágio de página que somos capazes de analisar como o conteúdo real se comporta dentro das estruturas definidas pelo design system.

É comum encontrarmos as páginas sendo mescladas ao conceito de protótipos de alta fidelidade. Embora seja possível trabalhar os dois separadamente, tendo as páginas como templates orientadores e os protótipos para apresentação e handoff, em equipes menores este nível de trabalho pode não ter espaço dentro do backlog, sendo que os protótipos podem suprir essa função de modo mais orgânico.

Mas qual a diferença entre Atomic Design e Design System?

Muito falamos sobre AD e DS, mas afinal, qual é a diferença entre eles?

Ambas as metodologias tem similaridades, o que é normal confundirmos e acharmos a mesma coisa, mas na verdade elas são complementares!

O Design System é um conjunto de padrões de arquiteturas, componentes e interfaces criado como forma de auxiliar o desenvolvimento de um produto ou sistema. De maneira geral, ele funciona como um documento que reúne as melhores práticas de design naquele projeto, desde questões técnicas até bibliotecas de padrões.

Já o Atomic Design é uma técnica que se relaciona diretamente com os elementos visuais. Dentro do contexto do Design System, a metodologia pode ser usada para definir esses padrões de forma mais assertiva, garantindo que todos os itens se relacionem entre si.

Além disso, ao criar o documento de Design System, você pode organizar os elementos de forma progressiva, assim como proposto pela estrutura atômica. Isso tornará a visualização mais fácil e lógica, o que pode proporcionar inúmeros benefícios durante o desenvolvimento de produtos.

Porém há vantagens e desvantagens!

Vantagens

  • Menos custos, pois alguns módulos podem ser reutilizados;
    Relativamente fácil de manter, podendo resolver os problemas num módulo, sem afetar os outros;

  • É adaptável, pois os módulos podem ser montados nas diferentes maneiras para que atendam as necessidades de diferentes usuários;

  • Pode ter uma qualidade generativa, o que significa que você pode criar resultados totalmente novos, introduzindo diferentes padrões ou combinando-os de várias maneiras.

  • Maior organização, ao empregar essa metodologia, padrões são definidos para cada um dos elementos, e isso ajuda a manter um sistema de design mais alinhado e consistente.

  • Agilidade, isso porque ao trabalhar pensando nesses elementos como complementares, fica mais fácil fazer ajustes quando necessário, diminuindo as chances de retrabalho. O que aumenta a agilidade no desenvolvimento.

Desvantagens

  • Divergências, que podem ser causadas pela falta de alinhamento. Isso não tem a ver necessariamente com a metodologia, porém com a forma como ela é aplicada. Se o Atomic Design não for alinhado com todo o time e não estiver bem documentado, ele pode acabar ocasionando mais problemas do que benefícios ao time.

  • Dificuldades, ocasionadas ao categorizar determinados elementos. Nesse sentido, o mais importante é que você defina a que grupo ele pertence (átomo, molécula, organismo, template ou página) de acordo com os objetivos da sua equipe, e mantenha todos cientes disso.

  • Atenção ao cronograma, por se tratar de um processo que antecede o desenvolvimento, caso você esteja trabalhando em um produto de menor complexidade ou com tempo escasso, ele pode acabar sendo desfavorável e atrasando a criação como um todo.

O que podemos concluir com isso?

A ideia do Atomic Design não é ser um modelo rígido e imutável que toda a equipe deve incorporar para desenvolver um bom design system. Como qualquer prática de desenvolvimento de produtos digitais, devemos adaptar a metodologia à nossa realidade e necessidades. Além disso, outros conceitos e metodologias podem ser combinados para otimizar o nosso fluxo de trabalho.

Notas

Este artigo foi desenvolvido com fins educacionais e de estudo pessoal. Seu conteúdo foi elaborado a partir da leitura e análise de artigos e livros de referência na área, servindo também como base para um webinar apresentado por mim a mais de 50 designers.

As ideias aqui expostas foram construídas a partir dessas fontes, devidamente referenciadas ao final do texto.

Referências utilizadas:

Sistemas de Design para Interfaces

Atomic design - uma metodologia para construção de Design Systems | Lambda3

Atomic Design: O que é design atômico e por que utilizá-lo?

4 Coisas Que Você Precisa Saber Sobre Design Atômico

Design em escala

Mas qual a diferença entre Atomic Design e Design System?

Muito falamos sobre AD e DS, mas afinal, qual é a diferença entre eles?

Ambas as metodologias tem similaridades, o que é normal confundirmos e acharmos a mesma coisa, mas na verdade elas são complementares!

O Design System é um conjunto de padrões de arquiteturas, componentes e interfaces criado como forma de auxiliar o desenvolvimento de um produto ou sistema. De maneira geral, ele funciona como um documento que reúne as melhores práticas de design naquele projeto, desde questões técnicas até bibliotecas de padrões.

Já o Atomic Design é uma técnica que se relaciona diretamente com os elementos visuais. Dentro do contexto do Design System, a metodologia pode ser usada para definir esses padrões de forma mais assertiva, garantindo que todos os itens se relacionem entre si.

Além disso, ao criar o documento de Design System, você pode organizar os elementos de forma progressiva, assim como proposto pela estrutura atômica. Isso tornará a visualização mais fácil e lógica, o que pode proporcionar inúmeros benefícios durante o desenvolvimento de produtos.

Porém há vantagens e desvantagens!

Vantagens

  • Menos custos, pois alguns módulos podem ser reutilizados;
    Relativamente fácil de manter, podendo resolver os problemas num módulo, sem afetar os outros;

  • É adaptável, pois os módulos podem ser montados nas diferentes maneiras para que atendam as necessidades de diferentes usuários;

  • Pode ter uma qualidade generativa, o que significa que você pode criar resultados totalmente novos, introduzindo diferentes padrões ou combinando-os de várias maneiras.

  • Maior organização, ao empregar essa metodologia, padrões são definidos para cada um dos elementos, e isso ajuda a manter um sistema de design mais alinhado e consistente.

  • Agilidade, isso porque ao trabalhar pensando nesses elementos como complementares, fica mais fácil fazer ajustes quando necessário, diminuindo as chances de retrabalho. O que aumenta a agilidade no desenvolvimento.

Desvantagens

  • Divergências, que podem ser causadas pela falta de alinhamento. Isso não tem a ver necessariamente com a metodologia, porém com a forma como ela é aplicada. Se o Atomic Design não for alinhado com todo o time e não estiver bem documentado, ele pode acabar ocasionando mais problemas do que benefícios ao time.

  • Dificuldades, ocasionadas ao categorizar determinados elementos. Nesse sentido, o mais importante é que você defina a que grupo ele pertence (átomo, molécula, organismo, template ou página) de acordo com os objetivos da sua equipe, e mantenha todos cientes disso.

  • Atenção ao cronograma, por se tratar de um processo que antecede o desenvolvimento, caso você esteja trabalhando em um produto de menor complexidade ou com tempo escasso, ele pode acabar sendo desfavorável e atrasando a criação como um todo.

O que podemos concluir com isso?

A ideia do Atomic Design não é ser um modelo rígido e imutável que toda a equipe deve incorporar para desenvolver um bom design system. Como qualquer prática de desenvolvimento de produtos digitais, devemos adaptar a metodologia à nossa realidade e necessidades. Além disso, outros conceitos e metodologias podem ser combinados para otimizar o nosso fluxo de trabalho.

Notas

Este artigo foi desenvolvido com fins educacionais e de estudo pessoal. Seu conteúdo foi elaborado a partir da leitura e análise de artigos e livros de referência na área, servindo também como base para um webinar apresentado por mim a mais de 50 designers.

As ideias aqui expostas foram construídas a partir dessas fontes, devidamente referenciadas ao final do texto.

Referências utilizadas:

Sistemas de Design para Interfaces

Atomic design - uma metodologia para construção de Design Systems | Lambda3

Atomic Design: O que é design atômico e por que utilizá-lo?

4 Coisas Que Você Precisa Saber Sobre Design Atômico

Design em escala

Mas qual a diferença entre Atomic Design e Design System?

Muito falamos sobre AD e DS, mas afinal, qual é a diferença entre eles?

Ambas as metodologias tem similaridades, o que é normal confundirmos e acharmos a mesma coisa, mas na verdade elas são complementares!

O Design System é um conjunto de padrões de arquiteturas, componentes e interfaces criado como forma de auxiliar o desenvolvimento de um produto ou sistema. De maneira geral, ele funciona como um documento que reúne as melhores práticas de design naquele projeto, desde questões técnicas até bibliotecas de padrões.

Já o Atomic Design é uma técnica que se relaciona diretamente com os elementos visuais. Dentro do contexto do Design System, a metodologia pode ser usada para definir esses padrões de forma mais assertiva, garantindo que todos os itens se relacionem entre si.

Além disso, ao criar o documento de Design System, você pode organizar os elementos de forma progressiva, assim como proposto pela estrutura atômica. Isso tornará a visualização mais fácil e lógica, o que pode proporcionar inúmeros benefícios durante o desenvolvimento de produtos.

Porém há vantagens e desvantagens!

Vantagens

  • Menos custos, pois alguns módulos podem ser reutilizados;
    Relativamente fácil de manter, podendo resolver os problemas num módulo, sem afetar os outros;

  • É adaptável, pois os módulos podem ser montados nas diferentes maneiras para que atendam as necessidades de diferentes usuários;

  • Pode ter uma qualidade generativa, o que significa que você pode criar resultados totalmente novos, introduzindo diferentes padrões ou combinando-os de várias maneiras.

  • Maior organização, ao empregar essa metodologia, padrões são definidos para cada um dos elementos, e isso ajuda a manter um sistema de design mais alinhado e consistente.

  • Agilidade, isso porque ao trabalhar pensando nesses elementos como complementares, fica mais fácil fazer ajustes quando necessário, diminuindo as chances de retrabalho. O que aumenta a agilidade no desenvolvimento.

Desvantagens

  • Divergências, que podem ser causadas pela falta de alinhamento. Isso não tem a ver necessariamente com a metodologia, porém com a forma como ela é aplicada. Se o Atomic Design não for alinhado com todo o time e não estiver bem documentado, ele pode acabar ocasionando mais problemas do que benefícios ao time.

  • Dificuldades, ocasionadas ao categorizar determinados elementos. Nesse sentido, o mais importante é que você defina a que grupo ele pertence (átomo, molécula, organismo, template ou página) de acordo com os objetivos da sua equipe, e mantenha todos cientes disso.

  • Atenção ao cronograma, por se tratar de um processo que antecede o desenvolvimento, caso você esteja trabalhando em um produto de menor complexidade ou com tempo escasso, ele pode acabar sendo desfavorável e atrasando a criação como um todo.

O que podemos concluir com isso?

A ideia do Atomic Design não é ser um modelo rígido e imutável que toda a equipe deve incorporar para desenvolver um bom design system. Como qualquer prática de desenvolvimento de produtos digitais, devemos adaptar a metodologia à nossa realidade e necessidades. Além disso, outros conceitos e metodologias podem ser combinados para otimizar o nosso fluxo de trabalho.

Notas

Este artigo foi desenvolvido com fins educacionais e de estudo pessoal. Seu conteúdo foi elaborado a partir da leitura e análise de artigos e livros de referência na área, servindo também como base para um webinar apresentado por mim a mais de 50 designers.

As ideias aqui expostas foram construídas a partir dessas fontes, devidamente referenciadas ao final do texto.

Referências utilizadas:

Sistemas de Design para Interfaces

Atomic design - uma metodologia para construção de Design Systems | Lambda3

Atomic Design: O que é design atômico e por que utilizá-lo?

4 Coisas Que Você Precisa Saber Sobre Design Atômico

Design em escala

Outros projetos

Payble Framer Website

1° Portal do Brasil para abertura de contas

Plywood Artist Potrtfolio made in Framer

LTD Commodities — Redesign E-commerce B2C

Artigo - Atomic Design

Predict 01

Predict Website made in Framer