Spring toggle
A spring, not a tween. It overshoots a hair and settles, so it feels physical.
spring 520 / 30 04.5 / MOTION WEB E DE INTERFACE← Motion Graphics
Interfaces queparecem vivas.
Histórias de scroll, microinterações e transições de página que tornam um sítio mais fácil de perceber e mais difícil de esquecer, sem custar velocidade nem acessibilidade.
VÊ O OFÍCIO
O laboratório de motion: sete interações que podes tocar
Motion de interface real e funcional, não um vídeo. Alterna, passa o cursor, arrasta e clica. Tudo aqui respeita as definições de movimento reduzido.
04Depth
0%
- Brief
- Boards
- Animate
- Ship
Feito pelo estúdio Roaswell para mostrar como trabalhamos. Não é trabalho de clientes nem uma marca real.
O QUE RECEBESTudo o que é preciso
Tudo o que é preciso
para publicar.
Entregáveis definidos, acordados antes de começar, para que o âmbito nunca seja uma surpresa.
01
Princípios de motion
Curvas, tempos e tokens de mola para que cada interação pareça fazer parte do mesmo produto.
02
Transições de scroll e de página
Sequências de scroll narrativas e transições de rota que guiam a atenção, como as deste sítio.
03
Biblioteca de microinterações
Botões, interruptores, menus, cartões e formulários que respondem com propósito.
04
Código de produção ou exportações
CSS e JavaScript limpos, ou exportações Lottie e de vídeo, prontos para a tua stack.
05
Variantes de acessibilidade
Alternativas de movimento reduzido e comportamento do foco pensados desde o início, não remendados depois.
06
Orçamento de desempenho
O motion é medido face ao tempo de carregamento e à latência de interação antes de ser publicado.
COMO DECORREDo briefing
Do briefing
ao trabalho final.
Quatro etapas, cada uma com um resultado claro, para saberes sempre o que está a ser feito e porquê.
Auditoria
Descobrir onde o motion clarificaria algo e onde apenas acrescentaria ruído.
Definir os princípios
Fixar o vocabulário de curvas e tempos para que as decisões deixem de ser caso a caso.
Prototipar no navegador
Construir no meio real para que o que aprovas seja o que é publicado.
Publicar e medir
Lançar com um orçamento de desempenho e observar o que os utilizadores realmente fazem.
ONDE SE LIGAUm estúdio.
Um estúdio.
Um sistema.
O motion rende mais quando é orientado por dados e entregue onde está o orçamento.
PERGUNTASBoas perguntas,
Boas perguntas,
respostas diretas.
Não é o que procuras? Pergunta-nos diretamente e uma pessoa sénior responderá.
A animação vai abrandar o nosso sítio?
Não, se for bem construída. Definimos um orçamento de desempenho, animamos com as propriedades mais baratas e testamos em dispositivos reais.
Escrevem o código?
Sim. Podemos entregar código pronto para produção, ou passar especificações e exportações para a tua equipa implementar.
E a acessibilidade?
Cada motion tem uma alternativa de movimento reduzido, e o comportamento com teclado e leitor de ecrã é desenhado em conjunto com a animação.
Funciona com o nosso CMS ou framework?
Trabalhamos com a maioria das stacks modernas. Diz-nos o que usas e confirmamos a melhor abordagem.
Posso vê-lo a funcionar?
Estás a vê-lo. As sequências de scroll, contadores e revelações deste sítio são construídos com a mesma abordagem.