Vidéo et Visuels de Lancement
Cette compétence couvre la création d'actifs visuels et vidéo pour les lancements de produits. Ce sont les actifs à plus fort impact que vous créerez — une excellente vidéo de démonstration ou un bon GIF arrête le scroll, communique la valeur plus vite que des mots, et se partage. Un mauvais actif peut activement nuire au lancement en donnant l'impression que le produit est confus ou négligé.
La hiérarchie des médias
Pour la plupart des lancements, la décision de ce qu'il faut créer suit cet ordre :
- Vidéo de démonstration — Montre le produit en action avec du contexte. Idéal pour expliquer comment quelque chose fonctionne.
- GIF animé ou boucle d'enregistrement d'écran — Plus court, se joue automatiquement en ligne sur les réseaux sociaux. Idéal pour montrer une interaction spécifique.
- Capture d'écran annotée — Statique, rapide à produire, idéal pour montrer un état ou une fonctionnalité spécifique.
- Diagramme ou illustration — Pour l'architecture, les concepts ou les choses qui ne peuvent pas être capturées par une capture d'écran.
En général : utilisez une vidéo quand le flux compte, un GIF quand une interaction unique communique la valeur, et des captures d'écran quand un état spécifique est le point important.
Vidéo de démonstration
Durée par plateforme
| Plateforme | Durée cible | Limite stricte |
|---|---|---|
| Product Hunt | 60-90 secondes | 3 minutes |
| Page d'accueil (hero) | 60-90 secondes | 2 minutes |
| X/Twitter intégré | 30-45 secondes | 2 minutes 20 secondes |
| 45-90 secondes | 10 minutes | |
| YouTube (démo complète) | 3-5 minutes | — |
Les limites strictes des plateformes ne sont pas seulement techniques — l'engagement chute fortement au-delà. Une vidéo PH de 4 minutes est effectivement une non-vidéo.
Structure du script (pour démo courte)
Tenez-vous en à 5-7 temps :
- Problème (5-10 secondes) — Énoncez le problème à résoudre. Une phrase. Pas de longue introduction.
- Présentez la solution (5-10 secondes) — Nommez le produit et la proposition de valeur principale.
- Démo : parcours heureux (30-60 secondes) — Montrez le cas d'utilisation principal de bout en bout. C'est le cœur de la vidéo.
- Fonctionnalités clés (10-20 secondes) — 2-3 coupes rapides montrant des fonctionnalités secondaires. Restez rapide.
- Preuve (5-10 secondes) — Une métrique, une citation client ou un benchmark. Une diapositive ou une ligne de voix off.
- Appel à l'action (CTA) (5 secondes) — Une action. "Essayez gratuitement à [URL]" ou "Inscrivez-vous à [URL]".
À éviter : longues introductions, logos animés (le public clique ailleurs), écrans de démarrage lents du produit, et tout ce qui ne montre pas le produit en action.
Conseils d'enregistrement
- Utilisez un environnement de démonstration, pas la production. Données propres, pas d'informations client embarrassantes, état fiable.
- Ralentissez les interactions délibérées. Les gens suivent mieux les mouvements du curseur lorsque vous vous déplacez intentionnellement, pas à la vitesse de travail normale.
- Enregistrez à 2x votre résolution cible. Enregistrez en 2880×1800 ou 1440×900 (Retina), puis réduisez pour la diffusion. Cela vous donne de la marge pour zoomer et rend l'image plus nette.
- Cachez tout ce qui est superflu. Fermez les notifications Slack, cachez la barre de favoris du navigateur, utilisez un profil de navigateur propre. Les distractions dans l'enregistrement nuisent à la confiance.
- Capturez plus que ce que vous utiliserez. Enregistrez des flux de travail complets et coupez au montage. C'est plus rapide que de ré-enregistrer parce que vous avez manqué un temps.
Voix off vs. silencieux
Les deux fonctionnent. Le choix dépend du contexte :
- Voix off : Plus chaleureuse, plus explicative, fonctionne mieux sur YouTube et les pages d'accueil. Nécessite un environnement d'enregistrement propre et une bonne qualité audio. Un mauvais son est pire que l'absence de son.
- Silencieux avec superpositions de texte : Fonctionne mieux dans les contextes de lecture automatique avec son coupé (flux sociaux). Plus rapide à produire. Nécessite des étiquettes claires à l'écran.
Si vous n'êtes pas sûr : enregistrez la démo en silence, ajoutez des superpositions de texte pour les moments clés, puis décidez d'ajouter ou non une voix off en fonction de la plateforme.
Outillage
- Enregistrement d'écran : Loom (rapide), Screen Studio (sortie soignée, bon pour le marketing), QuickTime (brut), OBS (contrôle total)
- Montage vidéo : CapCut (rapide, facile), DaVinci Resolve (professionnel, gratuit), Final Cut Pro, Adobe Premiere
- Motion design / animations de logo : After Effects, Motion (Mac), Jitter (basé sur le web)
- Sous-titres / légendes : Descript (également bon pour le montage par transcription), application Captions, Rev
- Vidéo programmatique : Remotion (basé sur React — voir section ci-dessous)
Vidéo programmatique avec Remotion
Pour les équipes qui livrent rapidement et ne veulent pas attendre un motion designer pour chaque lancement, la vidéo programmatique vous permet d'écrire des composants React et de les rendre sous forme de fichiers MP4. La vidéo est du code : versionnée, paramétrée et itérable sans éditeur de timeline.
Quand utiliser la vidéo programmatique
Fonctionne bien pour :
- Extraits d'annonces de lancement (15-45 secondes) pour les réseaux sociaux
- Vidéos de démonstration de produit montrant l'interface en action
- Bandes-annonces de fonctionnalités avec superpositions de texte et captures d'écran
- Vidéos basées sur des données (comparaisons de benchmarks, métriques de croissance)
- Vidéos modèles que vous réutiliserez d'un lancement à l'autre (il suffit d'échanger le contenu)
Moins adapté pour :
- Vidéos de marque cinématographiques nécessitant un motion design complexe
- Vidéos narratives de fondateur avec séquences filmées
- Vidéos nécessitant des illustrations personnalisées étendues ou de la 3D
Pour les lancements majeurs de niveau 1, vous pouvez combiner les approches : vidéo programmatique pour les clips sociaux et un motion designer professionnel pour la vidéo hero.
Configuration de Remotion
npx create-video@latest my-launch-video
cd my-launch-video
npm start # Ouvre Remotion Studio pour l'aperçu
Concepts clés :
- Composition : Une vidéo est un composant React avec une durée définie (en images) et une fréquence d'images
- useCurrentFrame() : Hook qui retourne le numéro d'image actuel — utilisez-le pour piloter les animations
- Sequence : Composant qui décale ses enfants dans le temps — utilisez-le pour séquencer les scènes
- spring() : Utilitaire d'animation pour un mouvement naturel (ease-in/out)
- Assets : Les images, captures d'écran et audio vont dans le dossier
public/
Modèle de planification des scènes
Avant d'écrire du code, planifiez la vidéo scène par scène :
| Champ | Description |
|---|---|
| Scène n° | Numéro séquentiel |
| Durée | secondes (ex. "3s") |
| Objectif | Ce que cette scène communique (une phrase) |
| Contenu textuel | Texte exact qui apparaît à l'écran |
| Éléments visuels | Captures d'écran, icônes, extraits de code, diagrammes |
| Style d'animation | Apparition en fondu, glissement depuis la gauche, machine à écrire, zoom avant, etc. |
| Transition de sortie | Comment cette scène se termine (fondu, coupe, glissement) |
Modèles de code
Scènes séquencées :
<Sequence from={0} durationInFrames={90}>
<HookScene />
</Sequence>
<Sequence from={90} durationInFrames={120}>
<DemoScene />
</Sequence>
<Sequence from={210} durationInFrames={90}>
<CTAScene />
</Sequence>
Révélation de texte :
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 20], [0, 1], {
extrapolateRight: 'clamp',
});
return <h1 style={{ opacity }}>Votre proposition de valeur principale ici</h1>;
Workflow d'itération
- Planifiez les scènes en utilisant le modèle ci-dessus
- Collectez les actifs — captures d'écran, logos, images produit → dossier
public/ - Écrivez ou générez le premier brouillon — obtenez la bonne structure et le bon contenu
- Prévisualisez dans Studio — regardez-le en entier, notez les problèmes de timing et visuels
- Itérez — ajustez le timing, l'animation et le contenu. Prend généralement 2 à 4 tours
- Rendez —
npx remotion render src/index.ts MyComposition out/video.mp4 - Vérifiez les spécifications de la plateforme — vérifiez que la résolution et la taille du fichier correspondent à votre plateforme cible
GIFs et boucles courtes
Les GIFs se jouent automatiquement sur la plupart des plateformes et sont idéaux pour montrer une interaction unique — un changement d'état d'interface utilisateur, une sortie de commande CLI, une réponse API. Ils sont plus rapides à produire qu'une vidéo et souvent plus efficaces pour les publications sociales.
Quand utiliser un GIF vs. une vidéo
Utilisez un GIF quand :
- La valeur totale peut être communiquée en 3-8 secondes
- Vous montrez une interaction UI unique, pas un flux de travail
- L'actif sera intégré dans un tweet ou un README où la lecture vidéo est moins fiable
Utilisez une vidéo quand :
- La valeur nécessite du contexte (problème → solution)
- L'interaction prend plus de 8 secondes à démontrer
- Vous avez besoin d'audio
Enregistrement de GIFs
- Capturez à 2x, réduisez à la résolution cible
- Restez sous 5 Mo pour les performances web (utilisez la réduction de palette ou moins d'images)
- Bouclez de manière transparente — l'état de début et de fin doit correspondre pour que la boucle ne soit pas saccadée
- Options d'outils : CleanShot X (recommandé pour Mac), Kap, Giphy Capture, Gifski (pour convertir des clips vidéo)
Optimisation de la taille des fichiers GIF
- Réduisez la palette de couleurs (256 → 128 ou 64 couleurs pour de nombreux enregistrements d'interface)
- Supprimez des images (30 fps → 15 fps est rarement perceptible dans les enregistrements d'interface)
- Recadrez de manière agressive — montrez uniquement ce qui change, pas tout l'écran
- Convertissez en MP4 avec lecture automatique/boucle au lieu de GIF lorsque la plateforme le supporte (le MP4 est ~10x plus petit qu'un GIF équivalent)
Captures d'écran
Les captures d'écran sont sous-utilisées dans les lancements. Une capture d'écran bien composée avec une annotation claire communique une fonctionnalité plus vite qu'un paragraphe.
Composition
- Montrez le produit dans un état significatif — pas un écran vide, pas un état de chargement, pas un écran rempli de données factices qui rendent les fonctionnalités difficiles à voir
- Utilisez un environnement propre — navigateur sans onglets, mode sombre ou clair appliqué de manière cohérente, aucune donnée personnelle visible
- Mettez en évidence la zone pertinente — boîtes d'appel, flèches ou surlignages dirigent l'attention sur ce qui compte
Outils d'annotation
- CleanShot X (Mac) — capture, annote et exporte en un seul flux
- Skitch — annotations simples
- Figma / Sketch — pour des captures produit plus soignées avec un style personnalisé
Cadrage du navigateur
Pour les produits web, utilisez un cadre de navigateur pour donner aux captures d'écran un aspect intentionnel plutôt que brut. Des outils comme Screely, Browserframe ou des modèles Figma personnalisés ajoutent une superposition de chrome de navigateur.
Captures d'écran multiples pour les grilles de fonctionnalités
Les pages d'accueil et les galeries Product Hunt ont souvent besoin de 3 à 5 captures d'écran montrant différents aspects du produit. Planifiez-les en tant qu'ensemble :
- Chaque capture d'écran montre une capacité distincte
- Traitement visuel cohérent (même niveau de zoom, même thème de navigateur, même style d'annotation)
- Racontez une progression : entrée → action clé → résultat
Liste de contrôle par niveau
Niveau 1
- Vidéo de démonstration (60-90 secondes, adaptée à PH et à la page d'accueil)
- Court extrait social (30-45 secondes du même enregistrement)
- 3-5 captures d'écran annotées pour la page d'accueil et la galerie PH
- 1-2 GIFs pour les publications sociales (montrant les interactions clés)
- Image Open Graph pour l'article de blog et les aperçus de liens sociaux
Niveau 2
- 1-2 GIFs ou court enregistrement d'écran
- 2-3 captures d'écran pour la section de la page d'accueil
- Image Open Graph
Niveau 3
- 1 capture d'écran
- Optionnel : GIF court si le changement est visuel
Images Open Graph
Chaque contenu partagé sous forme de lien (article de blog, page d'accueil, entrée de changelog) doit avoir une image Open Graph (OG) personnalisée. L'image OG est ce qui apparaît lorsque le lien est collé dans Twitter, Slack, iMessage ou LinkedIn.
- Taille : 1200×630px
- Contenu : Nom du produit + proposition de valeur principale. Traitez-la comme un panneau d'affichage — lisible en petite taille
- Cohérence : Utilisez un modèle pour que tout votre contenu de lancement ait un aspect cohérent
- Outils : Modèle Figma, Vercel OG (généré par code), Bannerbear (automatisé)
Spécifications vidéo par plateforme
| Plateforme | Résolution | Durée max | Format | Notes |
|---|---|---|---|---|
| X/Twitter | 1280×720 ou 1920×1080 | 2:20 | MP4 (H.264) | Lecture automatique muette — ajoutez des sous-titres |
| 1920×1080 | 10 min | MP4 (H.264) | Le format carré (1080×1080) fonctionne bien dans le flux | |
| Product Hunt | 1920×1080 | 90 sec | MP4 | Restez sous 50 Mo |
| Hero de site web | 1920×1080 | Pas de limite | MP4/WebM | Envisagez une boucle de lecture automatique (sans audio) |
Compétences compagnes
- launch-strategy — détermine quels actifs sont nécessaires pour le niveau de lancement
- launch-tweet — les GIFs et vidéos vont dans le tweet (en pièce jointe, pas en lien)
- launch-landing-page — la vidéo de démonstration et les captures d'écran vont sur la page
- launch-distribution — exigences de format par plateforme