Contente
- 01. Você pode misturar e combinar componentes
- 02. Criar um guia de estilo é simples
- 03. Layout de fácil compreensão
- 04. O código é mais consistente
- 05. Sem foco em designs perfeitos
- 06. Prototipagem mais rápida
- 07. Mais fácil de atualizar e remover partes do site
- 08. Estrutura de arquivo mais modular
- 09. Menos componentes no geral
- 10. Explore o Laboratório de Padrões
Você provavelmente já ouviu falar do Atomic Design se já faz algum tempo que faz parte da comunidade de desenvolvimento de front-end. O Atomic Design é uma metodologia inspirada na química. Assim como toda matéria é feita de átomos que se combinam para formar moléculas, que por sua vez formam organismos mais complexos, o Atomic Design envolve quebrar um site em seus componentes básicos e, a partir daí, trabalhar para criar um site.
Há muitos benefícios em usar o Atomic Design; continue lendo para descobrir 10 motivos pelos quais isso tornará sua vida mais fácil.
Se você quiser alguns conselhos gerais sobre a criação de sites, consulte nossa postagem sobre como criar o layout de site perfeito, além de nossos construtores de sites favoritos.
01. Você pode misturar e combinar componentes
Ao quebrar os componentes em átomos básicos, é fácil ver quais partes do local podem ser reutilizadas e como elas podem ser misturadas e combinadas para formar outras moléculas e até organismos.
Por exemplo, digamos que um site contenha apenas cinco átomos: uma imagem pequena, imagem grande, parágrafo, item de lista e um link. Você poderia criar uma página da web muito útil, duplicando e combinando esses átomos para formar moléculas.
02. Criar um guia de estilo é simples
Se um site for criado de acordo com os princípios do Atomic Design desde o início, todos os átomos e moléculas criados antes da construção do site podem servir como um guia de estilo básico. Mesmo para sites que não foram construídos atomicamente, não é difícil extrapolar os componentes básicos e colocá-los juntos para construir mais páginas. Porém, tenha em mente que é sempre melhor criar um site atomicamente desde o início, em vez de tentar introduzir os princípios do Atomic Design em um site posteriormente.
03. Layout de fácil compreensão
O código de um site projetado atomicamente é normalmente muito mais fácil de ler do que um criado de forma mais tradicional. Isso é verdade não apenas durante o tempo de criação, mas também no futuro, quando um site for revisado para referência ou pequenos ajustes.
Por causa da documentação sobre quais moléculas de átomos e organismos estão sendo usados e onde, é fácil ver o que cada parte do código representa. Outro bônus disso é que torna mais fácil explicar a base de código para um novo desenvolvedor.
04. O código é mais consistente
Com o Atomic Design, você usa átomos predefinidos para criar o layout do site, é fácil ver quais componentes estão sendo usados para as diferentes partes do site. Isso reduz a probabilidade de escrever código duplicado.
Por exemplo, se alguém criar um site sem usar o Atomic Design e exigir, digamos, um botão vermelho, será necessário examinar todo o site para tentar encontrar um existente. Se isso existisse, eles precisariam copiar e colar esse código na nova instância. Se não houvesse botões vermelhos, eles precisariam criar um novo. Com o Atomic Design, no entanto, é fácil voltar atrás na lista de átomos e encontrar o botão vermelho exato.
Isso se torna um processo muito mais fácil quando a biblioteca do Pattern Lab está envolvida. O Pattern Lab é uma coleção de ferramentas que torna o Atomic Design mais fácil.Em nosso exemplo, ele forneceria uma barra de pesquisa para átomos, tornando mais fácil pesquisar e encontrar aquele botão vermelho exato.
05. Sem foco em designs perfeitos
Como a ideia por trás do Atomic Design é usar átomos como blocos de construção para a criação de sites, é menos provável que um desenvolvedor da web crie muitos átomos para algo semelhante. Em vez disso, eles podem simplesmente examinar a lista de átomos existentes e ajustá-los para criar novos átomos, se necessário.
Um ótimo exemplo disso seria para títulos em um site. Digamos que um criador tenha uma lista de títulos usados para o site, todos em preto: um cabeçalho principal, subcabeçalho e título de parágrafo. Eles não funcionam no site há algum tempo e precisam voltar ao site para adicionar um novo título em azul. Eles podem dar uma olhada nos títulos que já existem e personalizar um deles para obter o resultado que desejam.
06. Prototipagem mais rápida
Ter uma lista de átomos antes do início da criação do site significa que você pode simular páginas com rapidez e facilidade - tudo o que é necessário é selecionar e combinar os elementos necessários para a página. A maquete pode então ser personalizada e refinada para o site final.
07. Mais fácil de atualizar e remover partes do site
Como apenas um átomo, molécula ou organismo está sendo alterado a qualquer momento, é fácil garantir que todas as atualizações de um componente sejam transportadas para todas as outras instâncias do site. Da mesma forma, componentes indesejados podem ser facilmente removidos.
08. Estrutura de arquivo mais modular
Embora o Atomic Design seja muito prevalente quando se trata de marcação (HTML), acredito que essas técnicas também podem ser usadas para CSS, JavaScript ou qualquer outra linguagem usada para criar um site para tornar o código geral mais modular e reutilizável.
Eu mesmo uso CSS atômico para sites que crio e descobri grandes benefícios com essa abordagem. No entanto, acredito que com a chegada de coisas como componentes HTML, faria sentido separar CSS e JavaScript específicos de um átomo em sua própria pasta junto com o HTML, então, se algo precisar ser atualizado ou excluído, você sabe exatamente aonde ir e o que mudar.
09. Menos componentes no geral
Se um criador tem uma lista de átomos, moléculas e organismos apresentados a eles antes do início da criação do local, é mais provável que eles usem o que já existe do que criem novos componentes para pequenas variações.
Se um título com tamanho de fonte 4.5em for necessário para um design, mas já houver um título de tamanho 4em existente na lista de átomos, é mais provável que o criador escolha o 4em do que criar um título completamente novo. Isso resultará em menos átomos sendo usados em geral, tornando o site mais limpo e enxuto.
10. Explore o Laboratório de Padrões
Este não é realmente um benefício tanto do Atomic Design, mas uma ótima ferramenta criada por Brad Frost (que cunhou o termo Atomic Design) e Dave Olsen para ajudar no processo. É essencialmente um gerador de site estático que usa bigode para modelos e um visualizador de JavaScript para interatividade. Ele é criado com o design que prioriza os dispositivos móveis em mente, com opções para redimensionar páginas, adicionar comentários a seções do site e snippets de código.
A versão original é escrita em PHP, mas existem duas versões do Node: uma para gulp e outra para Grunt. Eu recomendo fortemente mexer com a demonstração no site do Pattern Lab para dar a você uma melhor compreensão de como ele funciona e do Atomic Design em geral.
Quer saber mais? Leia a postagem original de Brad Frost sobre o Atomic Design.
