Atomic Design
Atomic Design nada mais é que uma metodologia para criação de interfaces, na qual seu objetivo é exemplificar os diferentes componentes e como eles interagem. Foi desenvolvida pelo web design Brad Frost na qual foi apresentada em seu palestra na conferência Beyond Tellerrand, na Alemanha, como você pode ver abaixo:
Além da metodologia Frost criou o Pattern Lab que é um guia de estilo que segue os conceitos do design atômico para demonstrar a representação dos componentes em átomos, moléculas, etc sendo uma ótima referência para o desenvolvimento das próprias interfaces.
Átomos
São a menor partícula que compõe um elemento químico.
Seguindo a afirmação acima podemos entender que no Atomic Design átomos são os menores elementos disponíveis e que não precisam de um contexto para existir. Estes irão se juntar a outros átomos criando outras estruturas e gerando assim elementos maiores.
Moléculas
Como mencionado anteriormente, átomos podem se agrupar e criar novas estruturas, estas então são chamadas de moléculas, na qual geram novos componentes para nossa interface que funcionam com um proposito único.
Organismos
Da mesma forma que moléculas são o conjunto de átomos, os organismos são o conjunto de moléculas, mas diferentemente das moléculas eles possuem diversos propósitos paralelamente, ou seja, realizam uma função específica dependendo da situação.
Templates
A partir deste ponto não utilizaremos a nomenclatura científica e você deve estar se perguntando o porquê. Basicamente nesta etapa teremos algo implementado para apresentar ao cliente o qual poderá não entender muito dos conceitos apresentados aqui, por isso utilizaremos o vocabulário usual.
Templates são conjuntos de organismos, é nesta etapa que começamos a realizar a estrutura da interface, podemos considerar estes templates como um wireframe, ou um design de baixa fidelidade como no exemplo a seguir:
Páginas
Já as páginas são a evolução do template, onde temos uma interface um design de alta fidelidade. A partir dela podemos ver todos os elementos, e basta então alguns ajustes e teremos nosso produto final.
Vantagens
Algumas vantagens de utilizarmos o atomic design são:
- Criação de padrões com partes reutilizáveis e que possuem uma progressão no desenvolvimento;
- Estilos mais consistentes em todas as interfaces;
- Facilidade para realizar mudanças e ajustes, tendo assim menos impacto negativo;
- Fácil criação de novas páginas, bastando alterar o local dos elementos.
- Remoção de mockups estáticos, assim tendo ganho de tempo e maior produtividade na equipe.
