Introdução à problematização da integração design e código
Você sabe como melhorar a integração design e código? No mundo do design e desenvolvimento de aplicativos e websites, é essencial a colaboração entre designers e desenvolvedores. Recentemente, me deparei com uma postagem que mostrava um app de entrega de pizza com uma animação interativa bem interessante, mas nos comentários percebi grande tensão com objeções do tipo “coitado do dev”, “quero ver na hora de implementar isso o pesadelo”, etc.
Comentários do tipo não são raros. Confesso que ouço isso há sete anos e parece que pouco mudou no senso comum a respeito do motion centrado nas interações e na experiência. Isso reflete um sentimento comum na indústria. Ou seja, a ideia de que designers criam conceitos visionários, enquanto os desenvolvedores fazem a tarefa quase hercúlea de dar vida a essas visões.
A questão é: essa percepção é realmente precisa? Os designers estão realmente jogando ideias de qualquer jeito sem consideração pela implementação? Os desenvolvedores estão realmente à mercê dos caprichos criativos dos designers?
Este artigo toca nessas questões. Ou seja, exploramos mais a realidade da colaboração entre designers e desenvolvedores, destacando como essa parceria beneficia a todos, incluindo o usuário final.
1. A importância do UX motion
Atualmente, vivemos numa era onde a atenção do usuário é uma das moedas mais preciosas e uma interface que seja apenas atraente e funcional já não é mais o suficiente para isso. Por isso, hoje, é necessário criar experiências. E uma ferramenta poderosa é o UX motion, um campo que combina a arte do movimento com a ciência da experiência do usuário.
Definição e Propósito das Animações e Interações no Design
UX motion é basicamente o uso estratégico de animações (interativas ou não) em interfaces visando melhorar a experiência do usuário. Ou seja, essas animações são cuidadosamente planejadas e implementadas com um propósito real de alterar positivamente o estado emocional do usuário.
Importante lembrar que, como qualquer ferramenta, o UX motion requer responsabilidade. Animações excessivas ou mal projetadas podem causar o efeito inverso e irritar os usuários. Por isso, é aqui que a parceria entre designers e desenvolvedores se torna vital. Ou seja, ambos devem trabalhar juntos para garantir que o movimento centrado na experiência sirva ao propósito definido, melhorando a experiência do usuário ao invés de prejudicá-la.
2. Ferramentas disponíveis para facilitar a integração design e código
Primeiramente, quando falamos de animação em interfaces, existem coisas que os desenvolvedores conseguem executar facilmente e outras que não. Felizmente, o bom é que graças à tecnologia, no passar dos anos surgiram ferramentas que finalmente solucionam o problema da implementação de animações interativas.
Ou seja, enquanto antigamente o designer criava um conceito e o desenvolvedor tinha que tentar reproduzir aqueles movimentos e interações direto no código, hoje você temos ferramentas que já são entregues para serem implementadas de forma mais fácil, rápida e precisa.
Abaixo, listamos três das mais conhecidas, mas existem outras:
Lottie
Primeiramente, uma das ferramentas pioneiras nesse espaço é o Lottie, um plugin desenvolvido pela Airbnb. Com ele, as animações criadas no After Effects se tornam arquivos JSON na exportação. Estes arquivos são leves e integráveis em aplicativos web e móveis, reproduzindo animações com precisão.
Caso a animação seja interativa, aqui o desenvolvedor se depara apenas com uma tarefa bem menos árdua, talvez apenas de implementar os gatilhos e tocar na animação em si.
Inspector Spacetime
Muitas vezes, o UX motion designer criou uma animação que é simples. Ela não necessita se tornar um código, mas foi toda bem pensada a respeito de duração, curvas de aceleração e desaceleração, ritmo, etc.
Neste caso, o que ajuda o dev é uma pequena documentação do movimento indicando a duração, o cubic bezier dos movimentos, parâmetros, offsets, nome das camadas… e é o Inspector Spacetime que vai ajudar nesse aspecto, gerando um documento detalhado baseado nas camadas e keyframes da animação.
Rive
Outra ferramenta que tem crescido bastante nos últimos tempos é o Rive. Esta é uma poderosa alternativa e complemento ao Lottie. Ao contrário de outras ferramentas, Rive não é apenas sobre exportar animações, mas também sobre criar interações em tempo real. Designers manipulam animações diretamente na plataforma e exportam um arquivo controlável programaticamente por desenvolvedores.
3. Comunicação na integração design e código é a chave
Em qualquer projeto colaborativo, seja na construção de uma catedral ou no design de um app, a comunicação é o pilar fundamental que sustenta todo o processo. No mundo digital, a relação entre designers e desenvolvedores não é exceção. Ou seja, estes profissionais, embora possuam diferentes competências, devem sempre trabalhar juntos.
Designers e desenvolvedores têm perspectivas diferentes. Enquanto o designer se concentra na estética, na experiência do usuário e na narrativa, o desenvolvedor se preocupa com a funcionalidade, a otimização e a integridade técnica. Estas diferentes abordagens levam a conflitos ou mal-entendidos se não conversados e bem definidos.
Por isso, é essencial que haja um diálogo contínuo desde o início.
Conclusão
Chegou a hora de abandonarmos a ideia de que os designers são insensíveis ao criarem conceitos de animação árduos e complexos na fase da implementação. A realidade da indústria hoje é bem diferente. Com as novas ferramentas disponíveis, o abismo que antes existia entre a visão criativa e a implementação técnica diminuiu consideravelmente.
Ambos, designers e desenvolvedores, têm agora meios mais eficientes de concretizar juntos a missão de melhorar a experiência do usuário.
