Spring toggle
A spring, not a tween. It overshoots a hair and settles, so it feels physical.
spring 520 / 30 04.5 / MOTION WEB Y DE INTERFAZ← Motion Graphics
Interfaces quese sienten vivas.
Historias en scroll, microinteracciones y transiciones de página que hacen un sitio más fácil de entender y más difícil de olvidar, sin costar velocidad ni accesibilidad.
MIRA EL OFICIO
El laboratorio de motion: siete interacciones que puedes tocar
Motion de interfaz real y funcional, no un vídeo. Activa, pasa el cursor, arrastra y haz clic. Todo aquí respeta los ajustes de movimiento reducido.
04Depth
0%
- Brief
- Boards
- Animate
- Ship
Hecho por el estudio Roaswell para mostrar cómo trabajamos. No es trabajo de clientes ni una marca real.
QUÉ RECIBESTodo lo necesario
Todo lo necesario
para publicar.
Entregables definidos, acordados antes de empezar, para que el alcance nunca sea una sorpresa.
01
Principios de motion
Curvas, tiempos y tokens de resorte para que cada interacción parezca parte de un mismo producto.
02
Transiciones de scroll y de página
Secuencias de scroll narrativas y transiciones de ruta que guían la atención, como las de este sitio.
03
Biblioteca de microinteracciones
Botones, interruptores, menús, tarjetas y formularios que responden con propósito.
04
Código de producción o exportaciones
CSS y JavaScript limpios, o exportaciones Lottie y de vídeo, listos para tu stack.
05
Variantes de accesibilidad
Alternativas de movimiento reducido y comportamiento del foco diseñados desde el inicio, no parcheados después.
06
Presupuesto de rendimiento
El motion se mide frente al tiempo de carga y la latencia de interacción antes de publicarse.
CÓMO FUNCIONADel briefing
Del briefing
al resultado final.
Cuatro etapas, cada una con un resultado claro, para que siempre sepas qué se hace y por qué.
Auditoría
Encontrar dónde el motion aclararía algo y dónde solo añadiría ruido.
Fijar los principios
Definir el vocabulario de curvas y tiempos para que las decisiones dejen de tomarse caso por caso.
Prototipar en el navegador
Construir en el medio real para que lo que apruebas sea lo que se publica.
Publicar y medir
Lanzar con un presupuesto de rendimiento y observar lo que los usuarios hacen de verdad.
DÓNDE SE CONECTAUn estudio.
Un estudio.
Un sistema.
El motion rinde más cuando lo guían los datos y se entrega donde está el presupuesto.
PREGUNTASBuenas preguntas,
Buenas preguntas,
respuestas directas.
¿No es lo que buscas? Pregúntanos directamente y te responderá una persona senior.
¿Ralentizará la animación nuestro sitio?
No si está bien construida. Fijamos un presupuesto de rendimiento, animamos con las propiedades más baratas y probamos en dispositivos reales.
¿Escribís el código?
Sí. Podemos entregar código listo para producción, o pasar especificaciones y exportaciones para que las implemente tu equipo.
¿Y la accesibilidad?
Cada motion tiene una alternativa de movimiento reducido, y el comportamiento con teclado y lector de pantalla se diseña junto con la animación.
¿Funciona con nuestro CMS o framework?
Trabajamos con la mayoría de los stacks modernos. Dinos qué usas y confirmaremos el mejor enfoque.
¿Puedo verlo funcionando?
Lo estás viendo. Las secuencias de scroll, contadores y revelados de este sitio están construidos con el mismo enfoque.