A velha história sobre a comunicação entre designers e programadores volta a ser contada quando o assunto é animações para a web. Como garantir a consistência entre design e código? Para saber mais sobre isso, continue lendo.
A lacuna entre design e desenvolvimento
Recentemente, surgiram muitas novas ferramentas de design. Agora, é mais fácil do que nunca criar ótimas animações e transições com todos os detalhes que se poderia desejar.
Animações web: o problema
Tudo vai bem até o momento em que é preciso entregar as animações web para os desenvolvedores para que eles a recriem no produto web final. Esses aplicativos são ótimos para criar diferentes ideias de animação, mas a única opção para exportar é geralmente apenas um gif ou um vídeo.
Enviar um gif para um desenvolvedor e esperar que ele recrie a mesma animação com código é simplesmente irrealista. A maior parte do tempo gasto trabalhando em uma animação é ajustando pequenos problemas de tempo ou movimentos sutis para tornar a animação adequada à experiência do usuário. No final, é tudo sobre mudanças sutis na forma como os elementos da interface se movem.
Essas pequenas coisas basicamente não são possíveis de se comunicar apenas olhando para um gif. No entanto, quando se coloca tudo junto, a diferença de 0.1 na transição pode fazer ou quebrar o sentimento geral que se está almejando/planejando.
Para superar esse problema, a maneira óbvia é documentar as transições para cada camada envolvida. Acontece que não é tão fácil quanto parece… Primeiro de tudo, há muitas partes móveis na maioria das animações e leva muito tempo para escrever tudo.
A segunda coisa (e mais problemática) é que as camadas que se tem em um arquivo Sketch, por exemplo, não coincidem com os blocos HTML que os desenvolvedores usam. Portanto, mesmo que se escreva que essa caixa específica precisa se mover 10 pixels para a direita em 0,4s, essa caixa não existe no código. E, como em todos os processos manuais, isso é muito propenso a erros e depende apenas da clareza com que se descreve a animação web com a documentação e com que cuidado o desenvolvedor aplicou o que está escrito lá.
Portanto, antes que a tarefa seja concluída, também será preciso examinar a animação com muito cuidado depois que o desenvolvedor terminar e talvez até verificar o código para garantir que os tempos de transição e as atenuações estejam corretos.
É um fato bem conhecido que design e desenvolvimento de produto é um processo iterativo, o que significa que será preciso voltar e fazer alterações nessas animações com base no feedback recebido. Não importa o quanto se mantenha os arquivos limpos, quase sempre não é possível evitar a re-documentação da animação após as alterações. E com o processo manual em vigor, torna-se preciso pegar todas as alterações feitas ou simplesmente refazer todo o trabalho inicialmente feito para criar a documentação.
Como fica evidente, geralmente é necessário muito esforço e tempo para fazer uma pequena animação ou transição. Mas existe outra abordagem.
Animações web: escrevendo o código
Há uma grande discussão sobre se os designers devem ou não codificar. A teoria da coisa é: você não deveria estar codificando a mesma coisa para a qual você fez o design, pois os 2 exigem mentalidades completamente diferentes e fazer tudo ao mesmo tempo reduz muito a qualidade em ambos.
Deixando essa discussão de lado, na verdade, criar suas animações em um ambiente isolado não é a mesma coisa que codificar sozinho. Escrever código de produção requer muitas coisas diferentes do que apenas criar um único componente e a animação para ele em HTML/CSS — e nem é preciso ser um expert em codificação para criar animações para entregar ao desenvolvedor.
Claro, também existem algumas desvantagens nessa abordagem. Primeiro de tudo, é preciso recriar designs com HTML antes de começar a animação web. Você pode até optar por mais de uma replicação de baixa fidelidade do design para a animação, pois a maioria dos detalhes não afetaria a animação que você está criando. Outra opção seria copiar alguns trechos de código do produto real.
Mantendo a inspiração
Dependendo do que você faz, experimentar ideias diferentes pode levar mais tempo com o código. Então, se não está muito claro sobre os tipos de animações web que gostaria de ter, use os aplicativos de design como um “rascunho”. E quando decidir qual escolher, crie animação polida com código e entregue para os desenvolvedores a partir daí.
Conclusão
Geralmente, desenvolvedores não se sentem à vontade em manter um snippet de código gerado a partir de uma ferramenta de design, independentemente de quão limpa ou “pronta para produção” ele seja. Cada equipe usa tecnologias diferentes, tem diferentes convenções de codificação e/ou tem diferentes entendimentos sobre como estruturar as coisas e, portanto, é muito difícil gerar trechos de código que desenvolvedores mais responsáveis gostariam de copiar e colar.
Experimente, mesmo que você nunca tenha escrito uma única linha de código antes. Aprender essas coisas ficou muito mais fácil com mais recursos do que você gostaria hoje em dia. Há uma tonelada de material de qualidade disponível para aprender. E você nem precisa aprender tudo o que há sobre HTML/CSS/JS; com o básico, já é possível pode criar muitas animações e, para o resto, é possível aprender o que for preciso à medida que se precise fazer coisas diferentes.
Mas qual é o seu processo de codificar animações web? Faz de algum jeito diferente ou tem alguma técnica especial? Conta pra gente nos comentários!