Motion design
L'animation qui sert le message
Wizz You produit vos animations Lottie, Rive et After Effects pour landing pages, applications et social media. 60fps stable sur mobile, poids inférieur à 200 Ko, compatibilité prefers-reduced-motion garantie.
Selon Wyzowl 2024, les sites avec animations soignées augmentent l'engagement de 47% en moyenne. Bien intégrées (Lottie 50 à 200 Ko, lazy loading, scroll-triggered), elles n'impactent pas les Core Web Vitals — mal intégrées, elles tuent le LCP en 2 secondes.
Du storyboard
au Lottie optimisé en prod
Brief & storyboarding
Atelier de cadrage : objectif communication, plateforme(s) cible(s), contraintes techniques (poids max, framerate, durée), ton de marque. Storyboard sur 6 à 12 keyframes, validation par stakeholders avant production.
- Brief stratégique
- Storyboard 6-12 frames
- Plateformes cibles
- Validation avant prod
Animatique low-fi
Animatique basse fidélité (After Effects ou Figma) pour valider le rythme, le timing et les transitions clés avant le rendu haute fidélité. 1 à 2 itérations sur l'animatique avant lancement de la production finale.
- After Effects ou Figma
- Validation timing
- 1-2 itérations
- Avant production HD
Production After Effects
Animation finale dans After Effects : courbes d'easing soignées, timing précis, hiérarchie de mouvements, cohérence avec la charte graphique. Rendu 60fps pour mobile et desktop, optimisation des fichiers source pour évolutions futures.
- After Effects pro
- Easings soignés
- 60fps mobile
- Sources évolutives
Export Lottie & Rive
Export en Lottie (JSON vectoriel léger 50 à 200 Ko) ou Rive (animations interactives 30 à 150 Ko) pour intégration web/mobile sans perte de qualité. Tests de compatibilité sur Safari, Chrome, Firefox, iOS, Android.
- Lottie 50-200 Ko
- Rive interactif
- Tests cross-browser
- iOS + Android
Intégration web & app
Intégration dans votre stack (React, Vue, Webflow, Wordpress) avec lazy loading, lecture au scroll, contrôle programmatique. Compatibilité prefers-reduced-motion respectée pour l'accessibilité.
- React/Vue/Webflow
- Lazy loading
- Scroll-triggered
- prefers-reduced-motion
Motion design system
Pour les marques produisant beaucoup d'animations : système de composants animés réutilisables, durées et easings standardisés, library Lottie indexée, documentation Figma. Cohérence et productivité multipliées.
- Library composants
- Easings standards
- Library Lottie
- Doc Figma
Ce que nos clients disent
de leurs animations
"Le hero animé Lottie de 130 Ko produit par Wizz You a fait passer notre conversion landing de 2,1% à 3,4%. Aucun impact négatif sur le LCP, intégré en lazy loading scroll-triggered. Le ROI a couvert le coût en 9 jours."
"Wizz You a animé nos 8 pictogrammes principaux en Rive interactifs. L'effet hover sur le menu nous a valu plusieurs commentaires utilisateurs spontanés sur la qualité perçue de l'app. Détail mais signal fort."
"Notre animatique de 35 secondes pour TikTok et Instagram Reels a généré 220 000 vues organiques en 2 semaines. Le storyboard solide et le rythme proposés par Wizz You ont fait toute la différence vs nos précédentes vidéos."
L'animation utile
vs l'animation décorative
Selon Wyzowl 2024, les sites avec animations soignées augmentent l'engagement de 47% en moyenne (temps passé, scroll depth, interactions). Les pages produit avec micro-interactions sur les éléments clés voient leur taux de mise en panier monter de 8 à 15%. Sur les landing pages B2B, un hero animé bien conçu peut faire passer la conversion de 2% à 3,5%. Mais l'animation gratuite (rotation infinie d'un logo, parallax sans information) consomme du compute et fatigue les utilisateurs : chaque animation doit servir un message.
La rupture technologique 2022-2025 vient de Lottie et Rive. Avant, animer en web exigeait soit du Flash (mort en 2020), soit du SVG animé (limité), soit de la vidéo MP4 (lourde, non vectorielle). Lottie permet d'exporter une animation After Effects en JSON vectoriel léger (50 à 200 Ko) qui scale parfaitement à toute taille et joue sans perte de qualité. Rive ajoute l'interactivité (animations qui réagissent au scroll, hover, données utilisateur) avec un runtime web inférieur à 100 Ko. Sur mobile, ces formats tiennent 60 frames par seconde stable même sur des appareils mid-range.
L'enjeu performance reste critique. Une intégration ratée (vidéo MP4 4 Mo en autoplay, animation lourde au-dessus du fold sans lazy loading) dégrade le LCP de 1 à 2 secondes et augmente le taux de rebond de 15 à 25%. Les bonnes pratiques 2025-2026 : Lottie ou Rive par défaut sur le web, lazy loading via Intersection Observer, scroll-triggered au lieu d'autoplay agressif, prefers-reduced-motion respecté pour l'accessibilité (et critère WCAG 2.1), tests sur mobile mid-range avant chaque livraison. Bien fait, le motion design enrichit sans pénaliser ; mal fait, il tue silencieusement les conversions.
Du brief storyboard
à l'optimisation perf
Une démarche structurée en 6 étapes pour livrer des animations qui servent le message et tiennent en production.
Brief & storyboard
Atelier de cadrage de 2 à 4 heures avec les parties prenantes : objectif communication, plateforme(s) cible(s) — landing web, social media, app mobile, signalétique digitale —, contraintes techniques (poids max, framerate, durée), ton de marque. Production d'un storyboard sur 6 à 12 keyframes pour valider la narration avant la production.
Animatique basse fidélité
Production d'une animatique basse fidélité (After Effects ou Figma) pour valider le rythme, le timing et les transitions clés avant le rendu haute fidélité. Cette étape critique permet de détecter les problèmes de narration en 4 heures plutôt qu'en 4 jours sur la version finale. 1 à 2 itérations attendues.
Production After Effects
Animation finale dans After Effects avec courbes d'easing soignées (cubic-bezier réfléchi, jamais linéaire), timing précis (souvent 300 à 800 ms par mouvement), hiérarchie de mouvements respectant la charte graphique. Rendu 60 frames par seconde pour mobile et desktop, conservation des fichiers source structurés pour évolutions futures.
Export Lottie ou Rive
Export en Lottie (JSON vectoriel léger 50 à 200 Ko, idéal pour des animations linéaires non interactives) ou Rive (animations interactives 30 à 150 Ko, idéal pour des micro-interactions sur états utilisateurs). Tests de compatibilité sur Safari, Chrome, Firefox, iOS et Android avant livraison.
Intégration web ou app
Intégration dans votre stack (React via lottie-react, Vue, Webflow, Wordpress, app native iOS et Android) avec lazy loading pour ne charger l'animation que quand visible, lecture déclenchée au scroll si pertinent, contrôle programmatique pour pause/play. Compatibilité prefers-reduced-motion respectée pour l'accessibilité.
Optimisation performance
Vérification des KPI performance : poids final inférieur à 200 Ko par animation, 60fps stable sur mobile mid-range, démarrage en moins de 200 ms après mount, pas de jank au scroll. Compression Lottie via lottie-files ou Skottie si besoin, fallback statique pour les navigateurs très anciens.
5 erreurs qui plombent
une animation web
Les fautes que nous corrigeons en priorité quand un client nous reprend des animations qui pénalisent son site.
Animations trop lourdes
Une vidéo MP4 de 4 Mo en autoplay dégrade le LCP de 1 à 2 secondes et augmente le taux de rebond de 15 à 25%. Préférer Lottie (JSON vectoriel 50 à 200 Ko) ou Rive (30 à 150 Ko) pour les animations courtes et linéaires. Pour les animations plus longues : codec AV1 ou WebM, lazy loading systématique, autoplay uniquement sur condition stricte (intersection observer). Le poids visible doit rester sous 200 Ko par animation embarquée.
Pas de fallback prefers-reduced-motion
Une partie significative des utilisateurs (vestibulaires sensibles, certains seniors, utilisateurs en environnement bruyant) activent la préférence systeme prefers-reduced-motion. Ignorer cette préférence rend votre site désagréable voire physiquement inconfortable pour ces utilisateurs. La règle : toujours fournir une version statique (image fixe ou animation très réduite) quand prefers-reduced-motion: reduce est détecté. C'est aussi un critère WCAG 2.1.
Pas de lazy loading
Charger toutes les animations Lottie/Rive d'une page à l'initialisation tue les performances : 5 animations de 150 Ko chacune c'est 750 Ko bloquants au-delà du DOM ready, dévastateur pour le Largest Contentful Paint. La règle : lazy loading via Intersection Observer (l'animation ne se charge et ne joue qu'à 50px de la viewport), priorisation strict des animations above-the-fold, fallback statique pour le reste.
Animation sans message
Une animation gratuite (rotation infinie d'un logo, effet de parallaxe sans information) consomme du compute, distrait l'utilisateur et fatigue à la longue. Chaque animation doit servir un message : guider l'attention sur le CTA, signaler un changement d'état, hiérarchiser une information complexe, créer une émotion mémorable. Sans intention narrative, l'animation est juste du bruit visuel coûteux.
Mobile cassé
Tester uniquement sur desktop puis pousser en production sans vérifier sur mobile mid-range (un smartphone 4 ans d'âge avec processeur correct mais pas haut de gamme) garantit du jank et du framerate dégradé sur 40 à 60% de votre audience. Les animations doivent tenir 60fps sur un Pixel 6, un iPhone 11, un Galaxy A52. Tester sur device réel ou throttling Chrome DevTools (4x CPU slowdown) avant chaque livraison.
Questions fréquentes sur
le motion design
Prêt à animer
vos messages clés ?
Audit gratuit sous 24h. On évalue les opportunités d'animation à plus fort ROI sur votre site — sans engagement.