Motion · interface e produto digital
Screenshot não mostra
como o produto se comporta.
Interface é feita de transição, resposta e microinteração. Uma imagem parada mostra o estado final e esconde justamente o que faz o produto parecer bom de usar: o que acontece entre um clique e o resultado.
Movimento é parte do produto, não enfeite
Quando alguém avalia um software, o que forma a impressão de qualidade é a fluidez. Botão que responde, transição que orienta, carregamento que informa. Nada disso cabe em captura de tela.
Existe também o caso de produto que ainda não foi construído. Em validação, em captação ou em apresentação interna, a animação da interface permite mostrar a experiência antes de existir código.
E há o uso didático. Explicar um fluxo com a interface animada, destacando o que muda a cada passo, é muito mais claro que a mesma explicação sobre gravação de tela real, que vem com cursor tremido e elemento desnecessário.
O que a gente anima nessa frente
Da microinteração ao fluxo completo do produto.
Fluxo de uso animado
O percurso do usuário reconstruído em movimento, limpo, com destaque no que importa em cada etapa.
Microinteração e resposta
Botão, transição, estado de carregamento e feedback, que é o que comunica qualidade de produto.
Interface de produto que ainda não existe
Protótipo animado a partir do design, para validação, captação e apresentação antes do desenvolvimento.
Destaque sobre gravação real
Quando existe captura de tela, entra ampliação, marcação e cursor tratado, corrigindo o que a gravação bruta tem de ruim.
Comparativo de versões
Antes e depois da interface, lado a lado, para comunicar evolução de produto à base de clientes.
Animação de app e mobile
Interface em moldura de dispositivo, com gesto e transição próprios de mobile.
Como a gente produz
A partir do design, não da gravação improvisada.
- Recebimento do material de designArquivo de design, protótipo ou biblioteca de componentes. Quanto mais próximo da origem, melhor o resultado.
- Definição do fluxo a mostrarQual percurso e até onde. Animação de interface que tenta mostrar o produto inteiro não comunica nada.
- Reconstrução limpaA tela é remontada em animação, sem elemento desnecessário, sem dado real de cliente e sem notificação atravessando.
- Ritmo pensado para quem não conheceCada passo com tempo de leitura. O desenvolvedor conhece o caminho; quem assiste está vendo pela primeira vez.
- Identidade preservadaCor, tipografia e componentes exatamente como no produto, para o material não parecer de outra ferramenta.
- Entrega em formatos de usoVídeo para site e apresentação, versão curta para redes e, quando pedido, arquivo leve para embutir na própria aplicação.
Perguntas frequentes
Só temos o design, o produto não existe
É um dos melhores momentos para usar animação de interface. Serve para validar com usuário, apresentar a investidor e alinhar o time antes de escrever código.
Já gravamos a tela, precisa animar?
Depende do estado da gravação. Muitas vezes o melhor caminho é tratar a captura existente com destaque e ampliação, que sai mais rápido e mais barato que reconstruir.
Nossa interface muda toda sprint
Por isso trabalhamos em blocos por tela. Mudou uma, se refaz aquela, e o restante continua servindo.
Dá para usar dentro do produto?
Dá, e é um uso eficiente. Animação curta na primeira vez que o usuário chega numa tela reduz muito a curva de aprendizado e o chamado de suporte.
Quem aprova o resultado?
Design e produto, de preferência os dois. Design confere fidelidade visual e produto confere se o fluxo mostrado corresponde ao real.
Veja também
Conta o que você precisa
Mande os detalhes do seu projeto que a gente devolve uma proposta com escopo e valores. Sem compromisso.
Pedir orçamentoFale com nosso time
A gente responde no seu WhatsApp. Ou fale agora pelo botão flutuante.