Sua interface como um organismo que nasce, cresce, se reproduz e não morre!
Projetos grandes e que são atualizados ao longo do tempo exigem uma competência um pouco diferente de nossas interfaces: a sua capacidade de replicação e expansão, sem perder a essência da experiência entregue na primeira versão do projeto.
Colocamos como exemplo o desenvolvimento de um app, que entra na nossa característica de projeto que se expande, por exemplo. Após o período de desenvolvimento da primeira versão, você pode ter projetado todas as telas e ter tido o melhor planejamento possível, porém, fato é que o seu projeto precisará ter a interface atualizada cedo ou tarde e muito provavelmente teremos um gap de tempo relevante entre as atualizações. Mas como manter coesão quando diversos fatores podem ser mutáveis entre a primeira versão e a última atualização?
A resposta é simples: A criação de um sistema de design que resulte em um template saudável e capaz de se replicar.
Atomic Design: Entendendo interfaces como quebra-cabeças
Imaginar um sistema de design a partir de uma metáfora que advém da biologia pode gerar uma sensação de estranheza inicialmente, mas ela deriva do Atomic Design, teoria do designer Brad Frost, que entende que pequenos elementos que se repetem ao longo das interfaces são participantes de grupos maiores de outros elementos.
Podemos exemplificar esta repetição de pequenos elementos com um botão: temos um default de estilização de botões e utilizamos este padrão em diferentes contextos e telas. O botão é um átomo dentro do organismo que é a nossa interface.
Quando juntamos este botão com outro átomo, como por exemplo um padrão de input, nós temos uma molécula. A molécula pode definir como todos os formulários presentes no projeto serão desenhados, ou como o breadcrumb de um app funcionaria por exemplo.
Dica: Características de uma boa User Interface (UI)
Subindo a nossa escala de tamanho biológica, temos os organismos, que são formados por conjuntos de moléculas. Aqui já temos peças bem próximas ao design final para utilizarmos em nossas interfaces, tendo sessões inteiras já moldadas e prontas para a sua montagem. Juntando uma molécula de uma navbar com uma molécula de breadcrumb por exemplo, temos um organismo passível da diagramação presente na etapa seguinte, que é a de templatização.
Juntando os nossos organismos e os organizando de forma adequada, conseguimos criar templates que servirão como base para as páginas que podemos fazer tanto no começo do desenvolvimento quanto em seu futuro.
Mindset e vantagens do projeto em Atomic Design
Ao começar o seu novo projeto ou revisar um já em andamento, independentemente de você estar utilizando Sketch ou Adobe XD para o desenvolvimento do mesmo, é interessante você ter um mindset de trabalho já preparado para o design de pequenos elementos ao invés de iniciar desenvolvendo diretamente as telas.
A criação de styleguides auxilia na criação dos primeiros átomos e padrões para o seu projeto. Defina fontes, cores, padrões de h1e h2 antes de colocar a mão na massa, e a partir destas definições, parta para a criação de elementos básicos isolados. O uso de UI Kits fornecidos pela Apple e pela Google contendo elementos do iOS e do Android também serão de suma importância na sua organização pré-desenvolvimento de design.
Exemplo do UI Kit do iOS. A Apple também usa Atomic Design!
O tempo de adaptação a esta forma de executar design é um dos pontos negativos do Atomic Design para quem tinha um workflow diferente até então, porém, suas vantagens são diversas.
Como os organismos já estão construídos e o processo de templatização envolve apenas uma organização do posicionamento destes, o processo de desenvolvimento de uma eventual nova tela é extremamente simples e pode ser feito por alguém de fora da equipe que originalmente desenvolveu a interface, e ainda assim manter a integridade do projeto original.
Dica: Cuidados que você deve ter ao criar design de sites
O redesign de elementos também é bastante simplificado, pois, ao utilizar a funcionalidade de symbols, presente no Adobe XD, você pode fazer alterações em um átomo, molécula ou organismo e ela será atualizada em todas as telas, em um funcionamento bastante similar ao que encontramos nos Objetos Inteligentes do Adobe Photoshop e Adobe Illustrator.
A criação de padrões em cima do comportamento do usuário é cada vez mais explícita para o designer de interfaces moderno, e, desta forma, um novo mindset e uma nova forma de desenvolvimento alinhada a essa necessidade de entregar boas experiências ao usuário devem ser ferramentas obrigatórias para quem quer manter-se atualizado no mercado.
