No post de hoje falaremos sobre Atomic Design, uma metologia criada por Brad Frost com finalidade de aumentar e simplificar produção de páginas web. Antes de começar a falar sobre está incrível metologia gostaria de indicar um grupo de desenvolvimento web o nome é: (Desenvolvimento WEB - Do iniciante ao avançado), este grupo tem como foco ajudar desde novatos e até mesmo os mais experientes na área que tem dúvidas ou buscam aprender algo novo. Bom sem mais delongas vamos ao post.
Talvez Brad Frost já tivesse uma visão do que a web se tornaria hoje, com páginas melhores projetadas e usando cada vez mais componentes detalhados. Uma das frases que se destacam nesse projeto e que por sinal está no topo da página é:
“Não estamos criando páginas, estamos projetando sistemas de componentes.”
_ Stephen Hay
Está metodologia é voltada para criação de sistemas para design de páginas, muito indicada para sistemas médios e grande porte, mas nada impede que você use em pequenos sistemas. O Atomic Design usa 5 níveis para elaboração de páginas.
1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages
Para que você possa entender melhor como funciona o Atomic Design aqui está uma imagem que demonstra as estapas de desenvolvimento.
<header class="topo">
<div class="logo"><!--/átomo-->
<img src="" alt="">
</div><!--/molecula-->
<ul class="links">
<a href=""></a><!--/átomo-->
<a href=""></a><!--/átomo-->
<a href=""></a><!--/átomo-->
</ul><!--/molecula-->
<form action="" class="search">
<input type="search" name="" id=""><!--/átomo-->
<input type="submit" value=""><!--/átomo-->
</form><!--/molecula-->
</header><!--/organismo-->Explicação de cada etapa
Atoms
Caso não saiba átomos são unidades básica da matéria presente no nosso espaço. Eles são componentes de moléculas e da matéria comum (Isso dentro da Química), mas que serve como base para o entendimento do Atomic Design. Na metologia podemos dizer que esses nossos átomos são nossos “objetos de tags” representados por exemplo por um input de um formulário, cores e até mesmos tipos de fontes Até então Brad Frost demonstra isso em seu site (http://bradfrost.com/blog/post/atomic-web-design/).
Molecules
Como estamos seguindo um exemplo a partir de um input não irei sair desse rumo. As moléculas são átomos são espécies químicas neutras que são formadas por pelo menos dois átomos que no nosso exemplo podemos colocar um input de pesquisa mais um input do tipo submit.
Organisms
Depois de obtermos as moléculas, então vem agora a parte de combinação de vários grupos de moléculas para termos nosso organismo como no exemplo do próprio site do Brad Frost um simples cabeçalho.
Templates
Estamos quase em nossa etapa final de criação. Vamos agora a parte de template. O template é formado por vários organismos, mas se analisarmos bem quando chegamos em nosso modelo quebramos a analogia química que até então estavamos tendo até o momento, só que simplifica melhor o entendimento para nossos clientes.
Pages
Por fim chegamos a nossa parte final. O resultado de nossas combinações anteriores que nos retorna um resultado para podermos finalizar nossa interface. Nessa etapa iremos colocar backgrounds e adequar o design em cima da imagem da empresa. Geralmente este processo é o mais demorado, pois, acertar a harmonia não é lá uma das tarefas mais faceis de serem feitas.
Conclusão
O Atomic design foi algo incrível feito pelo Brad Frost e sua equipe! Simplifica bastante no desenvolvimento de sistemas de design, mas assim como qualquer outra metologia deve ser bem estudada em certos cases. Bom por hoje foi só espero que tenha gostado e até próximo post :).
