Design System: definindo os Princípios de Motion

O desenvolvimento de um sistema de motion dentro de um Design System começa com a definição de seus princípios. Os Motion Principles (princípios de motion) são diretrizes de alto nível para guiar decisões de design em torno da animação, além de serem o ponto de partida para algumas definições e valores relativos à animação.

Estes princípios focam no porquê do uso de animação dentro de um determinado design system e o propósito com base na usabilidade (UX) ao qual essas animações estão servindo. Além disso, em muitos casos, design systems listam os motion principles logo como o primeiro item na sua sessão de motion.

A importância dos Princípios de Motion (Motion Principles)

Para que suas animações possam funcionar como um sistema, elas precisam ter a mesma base, o mesmo ponto de partida. Os Princípios de Motion servem para isso. Eles garantem que suas animações compartilhem não só a mesma mensagem entre si, mas também entre todos seus esforços de design. Definir o que o seu design system pretende comunicar em movimento estabelece o “porquê” em seu motion guideline – conceitos que representam os elementos e parâmetros comuns que suas animação devem seguir.

Os Motion Principles devem cobrir de forma ampla tanto o propósito de se usar animação bem como que tipo de emoções essas animações devem passar. E uma vez definidos estes princípios, você pode usá-los para focar suas animações em um sistema coerente e que considera também designs futuros.

Como criar seus motion principles

Seus princípios de motion podem ser moldados a partir dos princípios globais de design da sua marca. Isso pode ser feito seguindo outros aspectos como tom e voz da marca, ou simplesmente de padrões das animações de UI já pré-existentes no seu app. No entanto, não é preciso escolher somente apenas um ou outro, você pode combinar diferentes aspectos para servirem como seu guais na construção desses princípios.

Traduzindo Princípios de Design Globais

Uma das formas mais comuns de se estabelecer princípios é usar como referência os princípios de design de seu produto e adaptá-los para o movimento. Um exemplo que já abordamos aqui em outros artigos seria um Design Principle que tem como base a simplicidade como:

“Nós Simplificamos: Construir algo simples não é nada simples. Sendo assim, somos honestos sobre nosso impacto na vida das pessoas. Respeitamos o tempo delas e usamos cada momento do nosso dia para fazer as coisas mais simples.”

Este princípio de design se traduziria para um princípio de motion da seguinte maneira:

Simplicidade: usamos um movimento que é claro e direto ao ponto com ações simples e fáceis de serem seguidas, que não distraem os usuários de suas tarefas principais.

Tom e voz da marca

Nem sempre os documentos de tom e voz de uma marca estão diretamente ligados aos princípios de design da marca. No entanto, basear-se no tom e voz pode ser um excelente caminho para estabelecer seus princípios de motion. Com isso, você consegue conectar a personalidade e o tom da marca que você deseja transmitir com o papel que o movimento deve desempenhar para passar essa mensagem.

Exemplos de Motion Principles

Entendendo melhor o que são os Princípios de Motion e como construí-los, fica mais fácil analisar e compreender alguns motion principles existentes.

É importante ressaltar que nem toda marca trata os princípios de motion da mesma maneira. Alguns os chamam especificamente de Motion Principles, enquanto outras os mencionam dentro de seu design system de forma mais geral.

No caso da Microsoft em seu Fluent Design System, eles listam seus princípios de motion como sendo físico, funcional, contínuo e contextual. Cada um possui uma pequena descrição com ilustrações para mostrar como funcionam na prática.

Já a Audi, no qual já fizemos um artigo inteiro focado em seu sistema de motion, não possui uma seção separada para seus princípios. Ela traz isso como a primeira coisa em sua seção de animação, como se fosse uma declaração do porquê eles usam animação. Essa pequena declaração (estatement) define que tipo de movimento será usado em seu design system, assim como um princípio de motion mais denso faria. A Audi diz:

Somo conhecidos por nossa mobilidade dinâmica premium. Desta maneira, os movimentos na Audi devem ter tipicamente este caráter dinâmico.

O que define um bom Princípio de Motion

Como foi possível ver nos casos anteriores, podemos ter Motion Principles de todos os tipos de tamanho. O número de princípios e o quanto você articula cada um deles no seu design system pode ser customizado para as necessidades da sua equipe.

Com isso, existem alguns pontos chaves para se ficar atento para garantir que você crie princípios de motion sólidos.

• Opositório: Um princípio forte deve ser ago fácil de se dizer o que seria seu oposto. Por exemplo, se um de seus princípios de motion diz que “o motion não deve criar distrações,” este princípio possui um oposto que seria: o motion que distrai o usuário de sua tarefa atual.
• Objetivo: Eles também precism ser objetivos, você vai usá-los para guiar que tipo de animação fazer em seus design systems, mas também pra julgar se a proposta das interações animadas se encaixam nos princípios do seu sistema. Tendo um princípio do tipo “todo motion utilizado precisa ser um bom motion” acaba não sendo objetivo o suficiente pois é difícil de definir o que seria “bom” aqui – porém, começar dominando o conceito de “Nem tão rápido, nem tão devagar”, é um excelente ponto de partida para um bom motion. Já por outro lado um princípio que diz algo como “animações suportam a UX(experiência do usuário) ao ajudar usuários a alcançarem seus objetivos” acaba por ser algo bem mais concreto e fácil de compreender.

Conclusão

Ao olhar para os exemplos que mencionamos antes, dá pra notar que os princípios definidos são uma mão na roda pra avaliar as animações de UI que podem surgir no futuro pra um produto específico. Por exemplo, digamos que um designer, seguindo o sistema Fluent, quer introduzir uma animação de uma bola quicando dentro de um componente. Isso provavelmente vai gerar uma discussão: “Essa animação está alinhada com o princípio de ser funcional e contínua?”.

Isso é ótimo porque ajuda a sair daquela conversa baseada em gostos pessoais, tipo “o que você acha?”, e dá uma estrutura bem mais firme pra avaliar as animações de uma forma mais prática e focada no design.

Uma das principais vantagens de estabelecer um sistema de design bem estruturado é justamente essa: ele torna as conversas sobre animação mais diretas e significativas, até mesmo para aqueles que não têm muita experiência técnica com animação. Portanto, estabelecer princípios de motion claros e fortes é o primeiro e crucial passo para a criação de um Design System bem-sucedido.