Mediapapa est un plugin WordPress qui agit comme un copilote pour votre médiathèque. Il aide les administrateurs, contributeurs et agences à trier, otpimiser et gérer leurs fichiers médias facilement. Le projet a été pour nous l’occasion de mettre en oeuvre une approche motion design web / lottie, dévoilée en mai dernier lors du WordCamp Toulouse 2025.
Nous avons participé à ce lancement en collaboration avec l’agence Be-Beau, en réalisant le teaser vidéo en motion design, visible en haut de la page d’accueil de wp-mediapapa.com.
Mais notre mission ne s’arrêtait pas là. Dès les premières phases de création, nous avons adopté une logique de production hybride, en pensant les animations pour le web en parallèle de la réalisation du motion design.
Une production motion design pensée dès le départ pour le web
Le défi ? Créer une vidéo explicative tout en anticipant l’adaptation des animations en format Lottie (Lire l’article, “Qu’est-ce qu’une animation Lottie ?“)
Nous avons donc intégré les contraintes du web dès le storyboard. Cette méthode nous a permis de produire des animations compatibles avec le format Lottie, connu pour sa légèreté, sa compatibilité web, et ses performances optimales.
Cependant, Lottie impose des limites. Certains effets, courants en motion design, ne peuvent pas être exportés tels quels. Il faut donc les anticiper, les simplifier, ou les adapter intelligemment.
Notre approche :
- Production simultanée : chaque animation devait fonctionner à la fois dans le teaser vidéo et dans l’interface du site.
- Optimisation des assets : nous avons préparé les éléments graphiques (formes, calques, structures) pour garantir leur compatibilité avec Lottie.
- Adaptation ciblée : certaines animations ont été ajustées pour le web, afin d’en tirer le meilleur parti tout en respectant les contraintes techniques.
En résumé, ce projet représentait un vrai cas d’école en matière de motion design destiné au web (Animations Lottie), où design vidéo et design d’interface se nourrissent mutuellement.
Résultat : une identité animée, fluide et performante
Cette méthode nous a permis de :
- Créer une expérience utilisateur vivante, avec des animations légères et interactives.
- Mutualiser les efforts de production entre vidéo et web.
- Renforcer l’identité visuelle sur tous les supports.
En somme, ce projet illustre parfaitement comment le motion design (à destination du web) peut devenir un langage graphique transversal, entre narration vidéo et expérience numérique.
Une belle collaboration
Merci à l’agence Be-Beau (dirigée par Antoine Paufichet) pour leur confiance et leur direction créative inspirée et exigeante, et bravo à l’équipe Mediapapa pour avoir donné vie à ce plugin malin et attachant.
👉 Pour nous, ce projet confirme l’intérêt de penser le motion design comme un pont entre les formats, au service d’interfaces cohérentes et engageantes.