Design e Experiência
Design de Interações
Interação é onde a interface “responde”: cliques, arrastos, teclado, voz e tempo de resposta percebido. Desenhamos comportamentos que reforçam modelo mental (o que aconteceu, o que falta, o que é irreversível) sem animação gratuita que distrai ou atraso que parece bug.
Útil em checkouts, editores, ferramentas de dados e qualquer fluxo com confirmações sensíveis. Especificamos durações, curvas de easing, foco para teclado e fallbacks quando a rede falha — para engenharia não improvisar frame a frame em produção.
Para produtos com marca forte, alinhamos motion a guidelines de brand; para SaaS utilitário, priorizamos clareza e performance (reduzir repaint, respeitar prefers-reduced-motion).
Portfólio de Design de Interações
Entregáveis
Catálogo de padrões de interação
Componentes com comportamento descrito (não só pixels).
Storyboards de microinterações
Sequência frame-a-frame ou estados-chave para dev.
Guia de motion
Quando animar, quando não animar, e respeito a reduced motion.
Matriz de feedback por contexto
Toast vs inline vs modal — critérios de escolha.
Checklist de teclado e foco
Tab order, atalhos e armadilhas de foco em overlays.
Biblioteca de referências Lottie/CSS (opcional)
Quando o projeto exige assets animados reutilizáveis.
Metodologia de execução
-
Inventário de momentos críticos
Onde o usuário hesita, desfaz ações ou comete erros caros — priorização por frequência e severidade.
-
Princípios de feedback
Regras para loaders, skeletons, toasts, modais e confirmações; hierarquia de interrupção.
-
Especificação de microinterações
Trigger, regras, feedback e modo (ex.: hover vs touch); estados de foco e ARIA quando aplicável.
-
Protótipo de interação
Figma com Smart Animate ou vídeo de referência para motion complexo.
-
Handoff e motion tokens
Durações e curvas nomeadas para reutilização; notas de acessibilidade e performance.
