Motion design et animation vectorielle pour expliquer votre offre

Le motion design, c’est du graphisme qui bouge pour faire passer un message. L’animation vectorielle en est la technique la plus répandue : on anime des formes dessinées mathématiquement au lieu de redessiner chaque image. J’en ai produit une pour Sup’Saint-Dominique, entièrement en code. Cet article vous aide à savoir si cette technique convient à votre communication.

Je fais surtout des sites internet. Mais un site, ce sont aussi des icônes qui réagissent au survol, des transitions entre sections, des chiffres qui défilent. Depuis quelques années, j’écris ces animations à la main, en CSS et en JavaScript. Le pas vers la vidéo était plus court que je ne le pensais.

En septembre 2026, j’ai réalisé une vidéo motion design pour la campagne taxe d’apprentissage de Sup’Saint-Dominique : trente secondes, une voix off, une scène illustrée, deux formats de diffusion. Je m’appuie sur ce projet pour expliquer l’animation vectorielle et dire quand elle vaut l’investissement.

C’est quoi,
le motion design ?

Le mot est anglais, l’idée est simple : prendre les éléments du design graphique (textes, formes, pictogrammes, illustrations, logos) et les mettre en mouvement. Le motion design sert à expliquer quelque chose vite et clairement, là où un dessin animé raconte une histoire avec des personnages qui parlent.

Un exemple aide à faire la différence. En motion design, un chiffre grossit au moment où la voix le prononce, et une icône apparaît pour illustrer un mot. Chaque mouvement porte une information, alors que dans un dessin animé il porte le récit.

On en croise partout sans y prêter attention : génériques d’émissions, tutoriels, vidéos explicatives sur les pages d’accueil, écrans dans les halls d’entreprise, publications sponsorisées. Quand c’est bien fait, on retient le message sans penser à la technique.

L’animation vectorielle,
comment ça marche

Une image peut être stockée de deux façons. En matriciel (JPEG, PNG, WebP), elle est une grille de pixels : si on l’agrandit trop, elle devient floue. En vectoriel (SVG, AI, EPS), elle est une liste d’instructions : « trace un cercle de tel rayon à tel endroit, remplis-le de telle couleur ». On peut l’afficher à n’importe quelle taille, elle reste nette.

Animer du vectoriel revient donc à modifier ces instructions dans le temps : on change des valeurs au lieu de redessiner. Position, taille, rotation, opacité, couleur, épaisseur d’un trait, forme d’un tracé. L’animateur fixe quelques états clés (le logo est petit ici, grand là) et le logiciel calcule toutes les images intermédiaires, ce qu’on appelle l’interpolation.

Les courbes d’accélération

Entre deux états clés, un objet peut se déplacer à vitesse constante. Le résultat est correct sur le papier et raide à l’écran, parce que dans la réalité rien ne démarre ni ne s’arrête d’un coup. Les animateurs utilisent donc des courbes d’accélération (les « easings ») : un départ doux, une arrivée qui ralentit, parfois un léger rebond comme un ressort.

Ce détail échappe au spectateur et sépare pourtant une animation amateur d’une animation soignée. Sur le projet Sup’Saint-Dominique, j’ai passé plus de temps à régler ces courbes qu’à placer les éléments.

Vectoriel, image par image ou 3D,
comment choisir ?

Trois techniques se partagent le terrain. Voici comment je les compare pour un projet de communication d’entreprise :

💡 Faites glisser le tableau vers la droite pour voir plus de colonnes

Pour une PME, une école ou une association, le vectoriel est presque toujours le bon choix. Il reprend l’identité visuelle existante (logo, couleurs, pictogrammes) et se décline facilement dans plusieurs formats, ce qui simplifie les allers-retours de validation. On peut y glisser une touche d’image par image sur un moment précis, pour donner du caractère.

Les outils,
du logiciel au code

L’outil de référence du métier reste Adobe After Effects. On y importe des fichiers Illustrator, on pose des images clés sur une timeline et on exporte une vidéo. La plupart des studios s’en servent, pour sa puissance et le nombre de ses fonctions.

Côté web, deux familles de solutions évitent de passer par un fichier vidéo lourd :

• Lottie : un format d’animation en JSON, lancé par Airbnb. On exporte depuis After Effects avec l’extension Bodymovin, et l’animation est rejouée dans la page, en vectoriel. Idéal pour une icône animée ou une petite illustration.
• SVG animé en CSS ou JavaScript : l’animation est écrite directement dans le code du site. C’est ce que j’utilise pour les micro-animations des sites que je livre. Très léger, mais on ne fabrique pas une vidéo de trente secondes comme ça.

Et il y a une troisième voie, moins connue, que j’ai choisie pour Sup’Saint-Dominique : Remotion. C’est un framework qui produit de vraies vidéos MP4 à partir de code React, la technologie que j’utilise tous les jours pour le web. Chaque image de la vidéo est calculée à partir de son numéro. À l’image 675, le logo grossit de 6 %. À l’image 740, l’appel à l’action s’affiche, et la date limite le rejoint à l’image 823. Tout est écrit dans le code, donc versionné et modifiable.

Remotion ne remplace pas After Effects : un graphiste y perdrait du temps. Un développeur y retrouve un terrain familier, avec des avantages très concrets que je détaille plus bas. Côté licence, Remotion est gratuit pour les indépendants et les petites structures, et payant pour les entreprises plus importantes. À vérifier avant de se lancer.

Les étapes d’une vidéo de 30 secondes,
de l’écriture à la diffusion

Le contexte : chaque automne, les entreprises peuvent choisir l’établissement qui reçoit le solde de leur taxe d’apprentissage, via la plateforme Soltéa. Sup’Saint-Dominique, un établissement d’enseignement supérieur à Pau, voulait montrer aux dirigeants ce que cet argent avait déjà financé, et les inciter à renouveler leur choix avant la clôture de la campagne 2026, le 21 octobre.

Le texte avant l’image

J’ai d’abord écrit le script, et rien d’autre. Il tient en quatre phrases : une accroche sur ce qui a été financé, une énumération rapide (co-working, classes mobiles, matériel informatique, labo de biologie, wifi), une promesse pour la suite, puis l’appel à l’action avec la date. Trente secondes représentent environ 70 mots à l’oral, donc chacun doit être choisi avec soin.

La voix off a ensuite été produite à partir d’un brief d’interprétation précis : une voix qui parle à une seule personne, un ton différent sur chaque réplique, aucun accent publicitaire. Le script a connu deux versions avant validation, ce qui n’a rien d’anormal : les corrections coûtent le moins cher à ce stade.

Caler l’animation sur la voix, au mot près

Une fois la voix enregistrée, je l’ai passée dans Whisper, un outil de transcription qui donne l’horodatage de chaque mot. J’ai reporté ces repères dans le code : quand la voix dit « labo de biologie », la molécule apparaît ; quand elle prononce le nom de l’école, le logo réagit. Cette synchronisation se ressent plus qu’elle ne se voit : l’image et le son disent la même chose au même moment.

L’avantage du code s’est vu quand une nouvelle prise de voix est arrivée : j’ai mis à jour une douzaine de repères au lieu de déplacer à la main des dizaines d’images clés.

Prévoir plusieurs formats dès le départ

Une vidéo en 16:9 posée dans un fil de réseau social sur mobile occupe une bande étroite au milieu de l’écran. J’ai donc produit une seconde version en 4:5 (1080 × 1350), qui prend beaucoup plus de hauteur. Comme tout est vectoriel, j’ai réutilisé les mêmes calques et la même voix : seule la mise en page change. Les sous-titres descendent sous l’illustration, les éléments se resserrent autour du personnage central.

Autre réflexe : les textes à l’écran doivent se suffire à eux-mêmes. Beaucoup de gens font défiler leur fil sans le son. Si le message ne passe que par la voix, il est perdu pour eux.

Ne pas tout animer

Quand on découvre qu’on peut tout animer, on a envie de tout animer, et c’est une erreur. Dans la vidéo, le décor principal (le professeur, l’écran) est présent dès la première image et bouge très peu, ce qui donne à l’œil un point d’ancrage. Seuls les éléments liés au discours entrent et sortent. Quand tout bouge en permanence, l’œil ne sait plus où regarder et le message se dilue.

Quand une vidéo motion design
vaut-elle le coup ?

Je la recommande quand trois conditions sont réunies :

• Un message qui tient en une phrase. Si vous ne parvenez pas à le résumer simplement, la vidéo ne le fera pas à votre place et ne fera que rendre la confusion plus jolie.
• Un sujet abstrait ou peu visuel. Un service, un processus, une démarche administrative comme la taxe d’apprentissage. Pour un restaurant ou un hôtel, une vraie vidéo tournée montrera mieux les lieux.
• Un endroit où la diffuser. Une campagne sur les réseaux, une page d’accueil, un écran sur un salon, une présentation commerciale. Une vidéo que personne ne voit reste une dépense.

À l’inverse, je la déconseille quand le site lui-même ne fait pas son travail. Une belle vidéo qui renvoie vers une page confuse ou lente ne convertira pas. Dans le cas de Sup’Saint-Dominique, la vidéo donne envie de cliquer et une page dédiée du site explique la procédure pas à pas. Le raisonnement rejoint celui d’une landing page : chaque support a un seul objectif.

Ce que pèse une vidéo
sur votre site

Une vidéo de trente secondes pèse quelques mégaoctets. Ce n’est rien sur YouTube, c’est beaucoup sur une page d’accueil qui doit s’afficher vite sur un téléphone en 4G. Quelques règles que j’applique :

• ne jamais lancer le téléchargement complet de la vidéo au chargement de la page : on précharge seulement ses informations et on affiche une image fixe en attendant ;
• ne jamais confier le message principal de la page à la seule vidéo, puisque Google lit du texte et ne comprend pas les images animées ;
• pour une petite animation décorative, préférer un SVG animé ou un fichier Lottie à une vidéo ;
• éviter les animations qui prennent le contrôle du défilement : elles fatiguent vite et retardent l’accès au contenu.

J’en parle plus en détail dans ma page sur la performance des sites internet, où l’animation passe toujours après la vitesse d’affichage.

Questions fréquentes
sur le motion design

Faut-il une vidéo motion design
pour votre entreprise ?

Oui, si votre message est difficile à montrer en photo. En communication externe, c’est le cas de la plupart des services : un accompagnement, un logiciel, une démarche administrative comme la taxe d’apprentissage. Une vidéo de 30 secondes en tête d’une campagne LinkedIn ou sur la page d’un service fait comprendre l’offre avant même qu’on lise le texte. Elle resservira ensuite sur un salon ou en ouverture d’une présentation commerciale.

En interne, on y pense moins, alors que c’est souvent là qu’elle rapporte le plus vite. Une nouvelle procédure, l’accueil d’un nouvel arrivant, les résultats de l’année : ces messages se perdent dans un long e-mail ou un PDF que personne n’ouvre. Diffusée sur l’intranet ou sur un écran en salle de pause, une vidéo courte a plus de chances d’être vue jusqu’au bout, et vous n’avez rien à payer pour la diffuser.

Je vous dirais non si l’objectif est seulement de « faire moderne », ou si le message change tous les mois. Même en vectoriel, chaque modification demande un nouveau rendu et une nouvelle validation, alors qu’une page web se corrige en deux minutes.

Je ne conseillerais pas Remotion à tout le monde. Si vous avez un graphiste sous la main, After Effects ira plus vite. Le code m’a surtout fait gagner du temps sur les corrections : une nouvelle prise de voix, une version 4:5, et je n’avais qu’à changer quelques repères. Pour une campagne qui revient chaque année, comme la taxe d’apprentissage, cet argument pèse lourd. Pour une vidéo unique, beaucoup moins.

Vous avez une campagne à lancer, un service difficile à expliquer ou une page d’accueil qui manque de vie ? Je peux vous aider à l’animer de façon cohérente avec votre image de marque et votre site internet. Parlons de votre projet.