Le site d’un studio 3D, de motion ou d’effets : la démonstration d’abord

Un studio de motion design, d’images de synthèse ou d’effets visuels vend quelque chose qui bouge. Le producteur, l’agence ou la marque qui arrive sur son site veut le voir bouger tout de suite, et en bonne qualité. Il cherche aussi des indices plus terre à terre : ce studio sait-il livrer dans les délais, dans les bons formats, pour un budget proche du mien ?

Le site est donc la première démonstration du savoir-faire. S’il met dix secondes à montrer une image, c’est la technique du studio qu’on soupçonne.

Ce que le client vient chercher

1. La bande démo, courte, avec les meilleurs plans en premier.
2. Des projets du même genre que le sien : publicité, clip, architecture, produit, jeu, habillage d’émission.
3. Ce que vous avez fait sur chaque projet : la modélisation, l’animation, l’éclairage, le compositing, ou tout de bout en bout.
4. Votre chaîne de production : les étapes, les délais, les formats livrés.
5. Les clients et les équipes avec qui vous avez travaillé.
6. Un contact qui répond vite, et la façon dont vous établissez un devis.

La mise en page « Studio 3D »

C’est la mise en page que l’atelier propose au motion, à l’image de synthèse et aux effets, là où la démonstration est le produit. La voici de haut en bas :

• La navigation minimale se réduit au nom du studio et à un bouton menu : rien ne passe devant l’image.
• Le hero bas-gauche pose le nom et une phrase dans le coin bas, la variante faite pour les fonds vidéo. Son bouton mène à la bande démo complète, là où elle est hébergée.
• Le manifeste retient une phrase à l’écran et l’allume mot à mot pendant qu’on descend : ce que votre studio sait faire mieux que d’autres. Il n’y en a qu’un par page.
• La galerie en mosaïque compose une grande case et des petites, pour cinq ou neuf images : à tout autre compte, la dernière rangée reste orpheline. Mettez-y le plan le plus fort de chaque projet.
• Le bandeau fait défiler une bande de mots : vos disciplines, vos outils, ou les noms de vos clients s’ils vous y autorisent. N’y mettez rien d’indispensable : un texte qui défile se lit mal.
• Les chiffres alignent quelques preuves justifiables : années d’existence, projets livrés, pays des clients.
• Le contact réunit courriel et téléphone en vrais liens.
• Le pied à signature géante termine sur le nom du studio, coupé par le bas de la page.

Le fond de cette mise en page est la vidéo scrubbée : les images du film avancent et reculent avec le défilement. Le mot vient du montage, où l’on scrubbe une timeline en faisant glisser la tête de lecture, et c’est le visiteur qui la tient. Si le visiteur a demandé moins d’animations, le film s’efface et son affiche reste. Ce film est une scène créée par un modèle de génération vidéo d’après votre description, pas un extrait de vos projets : il installe l’ambiance, vos images restent dans la galerie. Deux matières s’y posent, le maximum permis : la halation, la lueur qui déborde des sources de lumière comme sur une pellicule, et la trame, de fines lignes horizontales façon moniteur, un choix d’époque assumé.

Une bande démo qui se charge vite

Le plus beau plan ne sert à rien s’il arrive après le départ du visiteur. Sur le web, neuf vidéos sur dix durent moins de deux minutes (HTTP Archive, 2024) : la vôtre aussi, avec le meilleur dans les premières secondes. Ensuite, quatre réglages :

1. Une affiche choisie. L’attribut poster affiche une image le temps que la vidéo arrive ; sans lui, rien ne s’affiche avant la première image du film, qui sert alors d’affiche, qu’elle soit belle ou non (MDN). Il reste rare : on ne le trouve que sur 3 % des éléments vidéo des pages mobiles (HTTP Archive, 2024). Choisissez votre plan le plus fort : c’est lui qu’on verra si la vidéo ne part pas.
2. Muette si elle démarre seule. Chrome autorise toujours la lecture automatique d’une vidéo muette ; avec le son, seulement dans certains cas, par exemple après une interaction du visiteur avec le site.
3. La version complète au clic, avec ses commandes : lecture, pause, volume, avance (attribut controls).
4. Pas de téléchargement forcé. L’attribut preload n’est qu’une indication au navigateur. La spécification recommande metadata par défaut, qui ne récupère que les informations du fichier, comme sa durée, et le Web Almanac suggère de laisser le navigateur décider.

Le format le plus sûr reste le MP4, qui porte à lui seul 68 % des vidéos des pages mobiles (HTTP Archive, 2024). Pour le reste de la page, voyez animer un site sans le ralentir.

Le lecteur d’une plateforme vidéo

Héberger la version longue sur une plateforme vidéo vous épargne le stockage et adapte la qualité au réseau du visiteur. Mais un lecteur intégré coûte cher à la page qui l’accueille : web.dev estime qu’en différant le chargement d’un lecteur YouTube, on évite environ 500 Ko au premier affichage. Il conseille une façade : une image avec un bouton lecture, remplacée par le vrai lecteur au clic.

Ces lecteurs viennent d’un autre site et peuvent déposer des traceurs. La CNIL demande que le consentement soit recueilli avant qu’un contenu externe intégré n’active des traceurs qui y sont soumis, dans le bandeau cookies ou au moment d’activer le contenu, et qu’un refus ne bloque pas l’accès au reste du site (2026).

Les pages composées par l’atelier n’intègrent pas le lecteur d’une autre plateforme : le bouton du hero mène à votre bande démo là où elle est hébergée.

Les erreurs qui coûtent des projets

• Une bande démo de cinq minutes qui garde le meilleur pour la fin.
• Une vidéo lourde qui démarre seule, avec le son.
• Un écran noir le temps du chargement, faute d’affiche.
• Des crédits flous sur un projet d’équipe : dites ce que vous avez fait, et nommez la production et les autres studios.
• Un projet sous embargo publié avant sa sortie, sans l’accord du client.
• Pas de date : le motion vieillit vite, montrez que votre travail est récent.