Usando o Design Atômico no Desenvolvimento Web Moderno
Se há algo que aprendi trabalhando para uma empresa de tecnologia, é que, para construir um site - um site realmente incrível, bonito e de alto funcionamento -, vários talentos e elementos diferentes precisam se unir e trabalhar em harmonia. Às vezes, pode parecer como trabalhar na Torre de Babel: uma pessoa está vasculhando uma paleta de códigos hexadecimais, os caras do outro lado da sala estão mexendo em uma sopa de letrinhas com diferentes acrônimos de codificação, e o gerente de contas está ao meu lado no telefone explicando como usar um sistema de gerenciamento de conteúdo para um cliente, tudo isso enquanto estou tentando escrever este artigo em linguagem simples.
Todos esses elementos precisam de uma maneira de se juntar sem que nada se perca na cacofonia, e há um conceito relativamente novo que realmente nos ajudou a trabalhar melhor como equipe: designers, desenvolvedores, testadores ... todos.
É chamado Atomic Design .
O que é o Atomic Design?
Os componentes do Atomic Design foram derivados do designer Brad Frost O fascínio pela química; átomos são a menor unidade, ligando-se a moléculas, que por sua vez formam organismos mais complexos, acabando por criar toda a matéria no universo.
Então, se estamos na Estação Espacial Internacional, olhando para todo o projeto como um todo, aqui está a arte da página inicial concluída para um projeto recente no qual aplicamos o Atomic Design, Route 93 Pizza Mill :
A homepage da Route 93 Pizza consiste em todos os nossos elementos como um website unificado e funcional. Agora, se colocarmos o site sob um microscópio, poderemos ver seus componentes granulares:
Átomos: Abaixo estão os átomos para o site da Route 93 Pizza Mill. Os átomos são os blocos de construção básicos, como tags, rótulos de formulário, botões, paleta de cores e fontes. Embora não sejam muito úteis sozinhos, os átomos são o seu ponto de referência preliminar - o começo da sua criação.
Moléculas: moléculas são onde os átomos são colocados para funcionar - onde o design do site concluído começa a se sentir tangível. Nas moléculas do Route 93, é possível ver a paleta de cores, as fontes e a iconografia se reunirem em campos de formulário, sobreposições de imagem e botões. Eles são, como Frost coloca, sua ferramenta para “fazer uma coisa e fazer bem”.
Organismos: no momento em que chegamos aos organismos, podemos criar o rodapé inteiro para a Rota 93. Ele combina todos os componentes acima mencionados em um site funcional e estético.
O Inventário da Interface: agora que temos todos os ingredientes, precisamos de um menu tangível para organizá-los em algo digerível; um documento que contém todos os elementos acima como um recurso utilizável e legível - um inventário de interface.
Enquanto algumas organizações chamam isso de Biblioteca de Padrões ou Guia de Estilos e usam Inventário de Interface especificamente para se referir a uma auditoria realizada em um site existente, usamos o termo Inventário de Interface para nossos próprios projetos (bem como auditorias de outros sites). parte de um processo contínuo de avaliação.
Como o fluxo de trabalho do Atomic Design de certa forma imita um dilema do tipo frango ou ovo, o inventário da interface geralmente toma forma de forma orgânica depois da criação da home page e de uma outra página do site, mas não muito tempo depois disso. Conforme essas duas páginas iniciais tomam forma, o designer garante que os elementos em ambos sejam consistentes. Para todas as páginas posteriores, eles podem extrair do inventário. Isso produz uma fonte canônica de como estilos visuais devem ser aplicados em todo o projeto, uma linguagem comum literal, em inglês simples, de códigos hexadecimais, estilos de botões, larguras de preenchimento, etc. aos quais os desenvolvedores - e toda a equipe - podem se referir.
Ao projetar um Inventário de Interface com o processo Atomic Design, podemos começar com módulos primitivos e montá-los em elementos completos. Este processo melhora a eficiência, a comunicação entre os membros da equipe e produz um site mais bonito em geral.
O que a Atomic Design faz por nós
O Atomic Design nos ajuda a descobrir “verdades” sólidas sobre o design do projeto em que estamos trabalhando, além de criar um vocabulário comum entre seus aspectos artísticos e técnicos. Ele incentiva um sistema mais robusto em geral que melhora o UX e fornece uma metodologia para que os designers possam aderir às diretrizes baseadas em componentes dos desenvolvedores, mantendo a criatividade.
Naturalmente, os desenvolvedores codificam a partir do zero, enquanto a abordagem de um artista geralmente começa de uma forma mais nebulosa, que depois se solidifica em uma página funcional depois de algumas moldagens. A Atomic Design incentiva - e exige - que os projetistas trabalhem a partir do zero, para tornar todos os componentes da interface consistentes e propositais no nível mais baixo possível.
O estabelecimento dessa linguagem comum, representada pelo Inventário de Interface, garante que designers e desenvolvedores não estejam inventando novas soluções para problemas que já foram solucionados. Por exemplo, se um novo formulário de contato for adicionado a um projeto, os estilos necessários para criar esse formulário já existirão e poderão ser facilmente empregados para criar a página, considerando desnecessário que o designer faça um esforço adicional. Isso não necessariamente tira o trabalho do designer, mas torna mais fácil para os desenvolvedores criar soluções rapidamente, em vez de exigir que o designer faça um mock de cada página - ou organismo - primeiro. O papel do designer é então transferido para algo mais como direção de arte depois que as páginas foram construídas. Essas "verdades" tangíveis também eliminam a necessidade de usar o designer como árbitro. Questões como “essa escolha de projeto é intencional?” Ou “qual cor devemos usar neste elemento em particular?”, Bem como alterações ou adições de última hora a uma página são respondidas pelo Inventário da Interface.
A linguagem comum também leva em garantia de qualidade. Ao testar uma página da Web para conteúdo e funcionalidade, puxo o Inventário da interface na tela como guia. Embora seja uma ferramenta de designer e, em segundo lugar, uma ferramenta de desenvolvimento, permite que todos da equipe participem com confiança em conversas sobre design e consistência, garantindo que nossos sites estejam impecáveis e prontos para serem entregues ao cliente.
Conclusão
A fim de garantir a execução adequada de um projeto, especialmente alguns dos maiores, muitas vezes nos encontramos enfrentando, a comunicação é fundamental; Se você está gritando uma série de idéias diferentes na sala, nada é possível. A Atomic Design ajuda a atuar como um tradutor para esses diferentes departamentos e as “linguagens” que os acompanham para manter a consistência no design. Estabelece um recurso modular para a equipe, permitindo coerência e resultados em recuperação eficiente, menos erros e um produto acabado mais polido.