Spring toggle
A spring, not a tween. It overshoots a hair and settles, so it feels physical.
spring 520 / 30 04.5 / MOTION WEB & UI← Motion design
Des interfaces quisemblent vivantes.
Récits au défilement, micro-interactions et transitions de page qui rendent un site plus facile à comprendre et plus difficile à oublier, sans sacrifier la vitesse ni l’accessibilité.
VOIR LE SAVOIR-FAIRE
Le labo du motion : sept interactions à toucher
Du vrai motion d’interface qui fonctionne, pas une vidéo. Basculez, survolez, glissez et cliquez. Tout ici respecte les réglages de réduction des animations.
04Depth
0%
- Brief
- Boards
- Animate
- Ship
Réalisé par le studio Roaswell pour montrer notre façon de travailler. Ce n’est ni un travail client, ni une vraie marque.
CE QUE VOUS OBTENEZTout ce qu’il faut
Tout ce qu’il faut
pour livrer.
Des livrables définis, convenus avant le début du travail, pour que le périmètre ne devienne jamais une surprise.
01
Principes de motion
Courbes, durées et tokens de ressort pour que chaque interaction ait l’air de faire partie du même produit.
02
Transitions de défilement et de page
Séquences de défilement narratives et transitions de route qui guident l’attention, comme celles de ce site.
03
Bibliothèque de micro-interactions
Boutons, interrupteurs, menus, cartes et formulaires qui réagissent avec intention.
04
Code de production ou exports
CSS et JavaScript propres, ou exports Lottie et vidéo, prêts pour votre stack.
05
Variantes accessibles
Alternatives en mouvement réduit et comportement du focus pensés dès le départ, pas ajoutés après coup.
06
Budget de performance
Le motion est mesuré par rapport au temps de chargement et à la latence d’interaction avant d’être livré.
COMMENT ÇA SE PASSEDu brief
Du brief
au résultat final.
Quatre étapes, chacune avec un livrable clair, pour toujours savoir ce qui est fabriqué et pourquoi.
Audit
Repérer où le motion clarifierait quelque chose et où il ne ferait qu’ajouter du bruit.
Fixer les principes
Définir le vocabulaire des courbes et des durées pour que les décisions cessent de se prendre au cas par cas.
Prototyper dans le navigateur
Construire dans le vrai support pour que ce que vous validez soit ce qui est livré.
Livrer et mesurer
Publier avec un budget de performance et observer ce que les utilisateurs font réellement.
OÙ CELA SE CONNECTEUn studio.
Un studio.
Un système.
Le motion est plus efficace quand il est briefé par la donnée et diffusé là où se trouve le budget.
QUESTIONSDe bonnes questions,
De bonnes questions,
des réponses franches.
Ce n’est pas ce que vous cherchez ? Posez-nous la question et un senior vous répondra.
L’animation va-t-elle ralentir notre site ?
Pas si elle est bien construite. Nous fixons un budget de performance, animons avec les propriétés les moins coûteuses et testons sur de vrais appareils.
Écrivez-vous le code ?
Oui. Nous pouvons livrer du code prêt pour la production, ou remettre spécifications et exports pour que votre équipe les intègre.
Et l’accessibilité ?
Chaque motion a une alternative en mouvement réduit, et le comportement au clavier et avec un lecteur d’écran est conçu en même temps que l’animation.
Cela fonctionne-t-il avec notre CMS ou notre framework ?
Nous travaillons avec la plupart des stacks modernes. Dites-nous ce que vous utilisez et nous confirmerons la meilleure approche.
Puis-je le voir fonctionner ?
Vous le regardez. Les séquences de défilement, compteurs et révélations de ce site sont construits avec la même approche.