Olá, meu nome é Fábio, eu trabalho na Taqtile, e esse é mais vÃdeo do curso onde nós vamos falar sobre modelo atômico. Modelo atômico é conceito que permite com que você crie um sistema de design de forma mais metódica, eficiente, e reaproveitável. Então, ao invés de você criar telas customizadas, isoladas, o modelo atômico permite que você crie estruturas, padrões de componentes que vão poder ser reaproveitados no projeto ou até projetos no futuro. Mas o que que é de fato o modelo atômico? O modelo atômico ele foi inspirado na forma como o universo também é feito. O universo é feito de estruturas básicas mais simples, os átomos, que se unem para formar estruturas mais complexas, como as moléculas, os organismos, eu ou você que também está assistindo esse vÃdeo. Modelo atômico é um sistema, ele é formado por cinco categorias de conceitos, como nessa imagem que está aparecendo para você. O conceito mais simples é o átomo, a primeira categoria é o átomo, e nesse bloco é o fundamental do seu sistema de design, a partir do qual todos os outros componentes vão ser criados. A união dos átomos vai formar as moléculas, que são mais complexas. A união de moléculas vai formar organismos. Os organismos atuando coordenação vão formar os templates, ou padrões, gabaritos, e quando você preenche o template com conteúdo, como imagem e texto, você chega na página. Então são essas cinco categorias que definem a ideia de modelo atômico. É muito importante ressaltar que o modelo atômico é muito interessante para que você consiga organizar cada desses elementos, identificar os seus elementos de acordo com essas categorias, organizar eles, de forma que você consiga ter um processo criativo mais organizado, eficiente, consistente, flexÃvel também, podendo reaproveitar os seus componentes, sejam eles botões ou telas. Mas também é muito importante ressaltar que o modelo atômico ele não é exatamente uma fórmula pronta que você define os seus componentes de acordo com as categorias, e pronto, e você simplesmente vai unindo e o seu design está pronto. É importante ressaltar que ele é um método, mas depois que você começar a identificar os seus componentes, construir eles, chegar na inclusão das telas, você deve de novo verificar suas hipóteses, fazer testes, avaliar, para que você consiga verificar se você realmente está atendendo aos requisitos do que você precisa. Então ele é um processo iterativo, tanto quando você chega no final da construção de uma tela, quanto enquanto você está ali detendo os componentes, as estruturas que você vai usar. Tendo isso consideração, vamos falar então sobre o componente mais simples, o elemento mais simples que é o átomo. A palavra átomo está associada à palavra de indivisÃvel, e essa é a palavra-chave aqui. O átomo ele vai ser o componente básico, fundamental do seu sistema de design. É a partir dele que você vai formar todos os outros. Então, por exemplo, se a gente imaginar um botão ou uma caixa de texto, ou mesmo texto, você pode pensar que eles são os átomos do seu sistema de design. De novo, repetindo, a palavra fundamental é que ele é indivisÃvel, porque se você, por exemplo, pegar botão e tentar separar os elementos dele, texto e tudo, ele deixa de fazer sentido, então ele é um átomo. A seguir, como eu falei, a união dos átomos vai formar as moléculas, que são componentes já mais complexos, e diferente dos átomos são divisÃveis. Então, por exemplo, se a gente pegar, como eu falei, o botão, a caixa de texto e texto que identifica aquela caixa de texto, por exemplo, e juntar eles, a gente vai ter a formação de um componente que pode ser utilizado para realizar buscas, então a gente digita o texto no formulário, na caixa de texto, aperta o botão, e a gente vai ter aà um componente funcional que é a molécula, que diferente do átomo é divisÃvel. Quando a gente junta as moléculas, como eu comentei também, a gente vai chegar na formação do organismo. Então, por exemplo, se a gente juntar esse componente de texto com uma listagem com várias células ali, vamos supor que a gente está site de compras, então aà a gente fez a nossa busca, deu enter ali no botão e apareceu uma listagem. Então ali a gente pode imaginar a formação de organismo aqui, que são duas moléculas interagindo entre si, de forma coordenada, de uma forma que faça sentido. A união dos organismos vai formar o padrão, ou template, inglês, que vai ser realmente a união desses organismos, atuando também de forma coordenada. Então, por exemplo, se a gente imaginar o caso anterior, a caixa de texto, algumas células, o menu de navegação, a gente vai ter esses vários organismos interagindo e formando o template. A diferença do template para a página é que o template é uma estrutura, é como se fosse o esqueleto da página, a gente ainda não preencheu ele do conteúdo de fato, como imagens, textos, então essa é a definição do template. E por fim, a página é quando a gente pega o nosso template e começa a preencher com imagem, com texto, com realmente o conteúdo que você quer mostrar para o usuário. A página vai ser efetivamente o que vai ficar visÃvel para o seu usuário, vai ser o resultado final que vai ser mostrado para ele. Tendo consideração esses conceitos, é muito importante ressaltar, como eu falei, que não é só porque você chegou nessa definição, nessa categorização de cada um deles, que o seu design está pronto, eu juntei aqui os átomos, as moléculas, cheguei na página e está pronto. Como eu falei, é processo bastante iterativo, então você vai precisar realmente colocar esses componentes na tela e testar, porque, por exemplo, você pode chegar a ter uma imagem na tela, porque você definiu de acordo com o seu sistema, mas aquela imagem tem muito mais destaque do que texto que você gostaria que tivesse, o texto está pouco destaque e tal. Então essa categorização, esse método não garante que no final você vai chegar e vai estar tudo certo, você precisa realmente ainda validar, iterar sobre aquilo que você fez, pra realmente ver se está tudo certo. Tendo vista esses conceitos, vamos analisar aqui um exemplo que eu peguei do Instagram. A gente pode ver aqui na imagem, a gente tem à esquerda os átomos definidos, então Ãcones, botões, textos, que são realmente os blocos fundamentais desse sistema, a partir dos quais vão surgir os outros. Ali já na direita dos átomos a gente tem as moléculas, então a gente pegou ali a iteração de Ãcone com o texto, pesquisador de imagem, abaixo do pesquisador de imagem a gente tem uma espécie de footer com botões ali, então a complexidade aqui aumentou e a gente formou esses componentes, que poderiam ser novamente divididos e voltando aos átomos. Depois disso a gente tem os organismos, então a gente pegou todas essas moléculas que a gente tinha montado e juntou de forma a criar um componente coeso, coerente, que essas moléculas interagem de forma funcional, segundo contexto, então a gente pode ver ali que no meio da tela a gente tem o conteúdo de fato, que é composto ali de uma imagem, tem a estrutura aqui no topo da tela do usuário, tem os botões, então a gente formou o organismo aqui, que vai interagir com os outros também que estão na tela, que são aqui, por exemplo, o menu lateral e embaixo. Depois disso, unindo tudo mesmo, esse componente de conteúdo que está ali no meio da tela, a barra de navegação ali cima, que tem o botão de voltar e atualizar, e a barra de navegação embaixo, a gente vai ter a formação de um template, que é quase a página mas é a estrutura dela, ainda não é pronta, ainda não tem conteúdo ali de fato, então a gente vê ali que a imagem, por exemplo, não tem imagem, tem fundo cinza ali. Finalmente, quando a gente coloca o conteúdo, a gente vai ter a formação da página, da tela, da UI que vai realmente ficar visÃvel ao usuário. A gente pode ver ali já tem a imagem do usuário, tem o nome do usuário, a imagem do cachorro, e os comentários ali. A gente pôde observar aqui esse sistema de design adequado, adaptado ao modelo atômico do Instagram. A partir de elementos muito simples, que são os átomos, a gente conseguiu formar estruturas muito mais complexas, como as moléculas que a gente viu, por exemplo, onde tinha o nome do usuário, o Ãcone, então a gente pôde fazer todo esse processo de pegar componentes simples e aumentar a complexidade. O interessante aqui é que a gente não precisa pensar desenhar a tela direto, a gente não precisa já pensar eu quero desenhar, por exemplo, nesse caso o perfil do usuário, eu vou pensar já direto na tela. A gente pensa primeiro nos componentes, nos pedaços que a gente vai querer que ela tenha, que seriam interessantes, e a partir desses pedaços, desses blocos, a gente vai montando e iterando sobre aquilo. Além disso é muito interessante porque os componentes montados ali eles podem inclusive ser reaproveitados ao longo seja do aplicativo, seja da página, e isso é muito interessante, porque evita você ter que ficar refazendo várias vezes componentes customizados, você pode acabar perdendo consistência quando você tenta fazer várias vezes a mesma, você tenta refazer várias vezes o mesmo processo para chegar no componente que na verdade você já tinha, então isso é muito interessante. Uma outra coisa que eu queria ressaltar é que você não precisa exatamente ficar se preocupando muito com categorizar precisamente, exatamente cada dos componentes das categorias. O importante aqui é ter em mente que você tem o método, você tem o método pra criar um sistema de design que você vai utilizar no seu processo criativo, então não ficar necessariamente se atendo muito a detalhes, por exemplo, isso é um átomo, isso é uma molécula, isso é um organismo, o mais importante não é exatamente definir precisamente cada um dos componentes de acordo com as categorias, mas sim a ideia no geral de que é um método, de que tem um sistema ali que você vai poder utilizar para construir as suas interfaces. Pensa na frase dita pelo designer Stephen Hay, "nós não estamos fazendo o design de páginas, nós estamos fazendo o design de estruturas de componentes". O que eu quero dizer com isso? Ao invés de construir uma tela direto, pensa como você pode definir os seus blocos fundamentais, as suas estruturas básicas, para que você possa ir iterando sobre elas, construindo componentes mais complexos, até chegar ao seu resultado final. Então pensar nessa ideia de uma metodologia, de um sistema que você tenha para que você possa chegar e fazer um processo criativo mais eficiente, mais organizado, inclusive reaproveitável. Até a próxima.
