Comment designers et développeurs transforment des sites en ligne en vidéos de portfolio : quoi capturer, sur quelle durée, quel format pour chaque plateforme, et comment donner une cohérence à une série de projets.
Aviral LakhanpaulMis à jour le 4 min de lecture
Capturez chaque site sous forme de courte vidéo de défilement plutôt que de capture d’écran : 10 à 20 secondes, avec des pauses sur les deux ou trois sections qui montrent le mieux votre travail, au format de l’endroit où elle sera diffusée. Utilisez le même cadre, le même fond et le même mouvement pour chaque projet, pour que le portfolio se lise comme un ensemble. Un outil qui transforme une URL en vidéo fait cela à partir du lien en ligne ; un enregistreur d’écran convient pour les sites qui ne sont plus publics.
Une capture d’écran pleine page est soit réduite jusqu’à devenir illisible, soit recadrée sur l’en-tête, ce qui laisse de côté l’essentiel de votre travail. Une vidéo de défilement montre la page à une taille lisible tout en allant jusqu’au pied de page, et elle montre ce qu’une image fixe ne peut pas montrer : le rythme entre les sections, les éléments fixes, les états de survol et, avec le bon moteur, les animations au défilement.
Quelqu’un qui parcourt un portfolio accorde quelques secondes à chaque projet avant de décider de rester. Commencez à bouger tout de suite, ou après un temps d’arrêt d’une seconde environ sur l’en-tête, et gardez le défilement complet entre 10 et 20 secondes.
Rien n’apporte plus à une vidéo de portfolio que les pauses. Arrêtez-vous une ou deux secondes sur chaque section qui montre un parti pris : l’en-tête, la grille de fonctionnalités, le tableau des tarifs. Une vidéo peut contenir jusqu’à 6 pauses, de 0,5 à 5 secondes chacune. Si la page est longue, coupez le défilement avant le pied de page plutôt que de tout accélérer.
| Destination | Format d’image | Format de fichier |
|---|---|---|
| Votre propre site de portfolio | 16:9 ou 4:3 pour l’ordinateur, 4:5 ou 9:16 pour la version téléphone | MP4, ou WebM pour des fichiers plus légers |
| Dribbble, Behance, Peerlist | 4:3 ou 16:9 | MP4 |
| Une page d’étude de cas | 16:9, avec le cadre de navigateur | MP4 |
| Fil LinkedIn ou Instagram | 4:5 ou 1:1 | MP4 |
| Un e-mail de prospection à un client | 16:9 ou 1:1, court | GIF, qui se lit directement dans la plupart des messageries |
Vérifiez les limites d’import de chaque plateforme avant d’exporter en 4K : un fichier 1080p est généralement le choix le plus sûr pour tout ce qui sera réencodé à l’import.
Douze projets capturés de douze façons différentes ressemblent au travail de douze personnes différentes. Décidez de la présentation une fois pour toutes et répétez-la.
Une vidéo sans son en boucle se comporte comme une image animée et se lance automatiquement dans tous les navigateurs modernes, à condition d’être en sourdine et autorisée à se lire dans la page. Réglez la Lecture sur Aller-retour, pour que la dernière image corresponde à la première et que la boucle ne saute pas.
<video autoplay muted loop playsinline preload="metadata"
poster="project-poster.jpg" width="1920" height="1080">
<source src="project.webm" type="video/webm" />
<source src="project.mp4" type="video/mp4" />
</video>La largeur et la hauteur empêchent la mise en page de sauter pendant le chargement du fichier, et l’image d’affiche (poster) occupe l’emplacement en attendant la première image.
Collez un lien et prévisualisez le défilement gratuitement. 51 crédits offerts à l’inscription, sans carte bancaire, et aucun filigrane sur ce que vous exportez.
Les deux, pour des usages différents. Une image fixe fait une miniature nette ; une vidéo de défilement montre toute la page à une taille lisible, avec en plus les états de survol et le mouvement. La plupart des designers mettent la vidéo en avant et gardent une image fixe comme affiche.
Un outil d’URL ne peut capturer que ce qui est en ligne aujourd’hui. Si vous avez gardé une copie du build, hébergez-la à une adresse publique temporaire et enregistrez celle-ci, ou enregistrez-la en local avec un enregistreur d’écran.
Oui. Lisez la page à la largeur d’un téléphone plutôt que de réduire une capture faite sur ordinateur, pour que le site serve sa vraie mise en page mobile, et exportez en 9:16 ou 4:5.
Automatisez vos enregistrements de sites avec un mouvement personnalisable, des réglages intelligents et des options d’export pensées pour les créateurs d’aujourd’hui.
