Desenvolvimento para Designers: Pensando em Design Atômico

Bem vindo ao segundo artigo do Desenvolvimento para Designers! Se não leu o primeiro artigo, por favor, faça-o agora. Nesse, discutiremos sobre uma escola de pensamento que, indiscutivelmente, preenche o vão entre desenvolvimento e design.

O slogan, palavra-chave ou conceito que precisamos tornamo-nos familiar é "Design Atômico". Design Atômico foi inventado como:

"...uma metodologia para criar sistemas de design." – Brad Frost

Para mim, isso foi um avanço. Como desenvolvedor, sei que lógica é construida a partir dos menores conceitos: variáveis, vetores, funções e classes. Como designer, o mesmo se aplica. Podemos construir algo complexo escolhendo cores complementares, fontes, espaço positivo ou negativo, e formas. Até é uma metáfora gigante quanto nossa própria existência.

Essencialmente, Design Atômico funciona assim: átomos formam moléculas, moléculas formas organismos. Organismos podem ser complexos ou simples. Uma bacteria ou ser humano sentado na frente de um computador escrevendo sobre esse conceito. Todos somos exemplos de Design Atômico.

Essa mesma metodologia é caracterizada, perfeitamente, para experiências web, a IdC (Internet das Coisas) ou desenvolvimento móvel, provendo uma arquitetura que solidifica a simplicidade para criar algo complexo. No fim das contas, não é a simplicidade a sofisiticação máxima?

Sistemas, Não Páginas

Design Atômico é um sistema. Um sistema que funciona usando múltiplas partes para criar algo único. É um sistema que pode ser entendido, seja você designer ou desenvolvedor e, assim, tornando ambos serviços fáceis de manter, mudar e dar continuidade. Sem mencionar que também alivia o estresse e pressão se, digamos, um designer ou desenvedor chave precisarem ser substituídos.

Eis um visão rápida:

Átomos

Átomos são os blocos base: entidades que não podem ser dividas para continuarem funcionais. São elementos HTML como <p>, <label>, <input> e <span>.

Átomos podem ser usados para paletas de cores ou fontes. Vale ressaltar que átomos são bem abstratos por conta própria, sem contexto. Um átomo bem definido produzirá uma molécula bem definida.

Moléculas

Moléculas são combinações e arranjos de átomos. Em essência, a espinha dorsal do sistema de design. Uma molécula seria algo como uma navegação ou formulário de pesquisa composto, por exemplo, de um átomo <input>, átomo <label> e átomo <button>. E alguns outros, caso queiramos uma molécula complexa.

Organismos

Um organismo é algo mais, dando-nos uma combinação de moléculas. O cabeçalho inteiro de um site podemos considerar um organismo. Em sua estrutura base, ele envolve um arranjo único de átomos e moléculas para criar organismos complexos. Um rodapé seria considerado um organismo. Se analisamos no contexto, a grade de produtos em um modelo do WooCommerce poderia ser considerada um organismo: ela repete a mesma moléculas com conteúdo diferente ou até os mesmos átomos com valores diferentes.

Modelos

Embora essa seção não tenha ligação com a analogia que Brad tem construído, modelos podem ser usados ou reusados para mostrar arranjos de organismos. Agora, o layout tornar-se algo realmente essencial. Humanos começam como células simples, viram fetos, bebê completo, criança, adolescente, adulto jovem e paramos a analogia ao alcançar a apoteose. O modelo apotético sendo um arranjo semântico de organismos, moléculas e átomos, agradáveis visualmente. Essencialmente, refirimo-nos aos wireframes desenvolvidos ao longo do tempo.

Páginas

Quando um modelo atinge a apoteose e o preenchemos com imagens e conteúdo, temos uma página. Uma página, por exemplo, seria enviada para uma ferramenta como o InVision para teste básico de usuário antes de ser desenvolvida.

Conclusão

Deixarei alguns pensamentos. Não há maneira correta de lidar com a relação entre desenvolvedores e designers. Construir uma experiência web, seja um site, plataforma, rede social, SaaS ou PaaS, é combinar os talentos e conhecimentos de ambos designer e desenvolvedor. Um não pode viver sem o outro. Assim, nenhum projeto deve evitar qualquer um que seja. Espero que ao final da série entenda o que quero dizer e, talvez, terá algumas ideias como trabalhar melhor com seus colegas de equipe.

Também gostaria de mencionar que embora a série foque em desenvolvedores e designers, não esqueci dos administradores e criadores de conteúdo. O trabalho de vocês é tão importante quanto os outros na criação de uma ótima experiência web.

Agora que temos um entendimento de Design Atômico, podemos trabalhar sua transcendência em design e desenvolvimento.

Nos artigos seguintes, aprofundaremo-nos nos mundos dos desenvolvedores frontend e backend. Caso seja um designer ou desenvolvedor iniciante, os dois próximos artigos ajudarão a aumentar seu conhecimento base. Se vier do mundo do design ou até do impresso, rumo ao do desenvolvimento, os conceitos a serem explicados ajudarão a preencher as lacunas da transição entre design e desenvolvimento.