Motion design

Vidéo animée de jalon communautaire

Une vidéo animée OpenDesign de 30 secondes passe d'un compteur de 100K étoiles à une mosaïque de contributeurs, un montage produit, puis une invitation à écrire un prompt.

OpenDesignMotion design et production
Officiel
Conception d'une vidéo animée de jalon communautaire30s · Motion design
Un grand titre 100K au-dessus de GitHub stars sur un fond côtier pâle et peint.
Une image de la vidéo animée

Idées de conception pour

  • Annonces de jalons open sourceCourts films qui marquent un seuil de dépôt et rendent hommage aux personnes qui l'ont rendu possible.
  • Vidéos de remerciement à la communautéSéquences finales qui associent le nombre de contributeurs à un message de remerciement direct.
  • Montages narratifs de produitCompilations de cartes d'interface, d'exemples de résultats et de noms d'outils au sein d'un même récit.

Points forts de la vidéo animée

  • Un seul chiffre ouvre le filmLe titre 100K se place au-dessus de GitHub stars, avec le nom du dépôt, une date et une période de mai à octobre de 163 jours.
  • Une mosaïque de contributeurs en toile de fondUne grille dense de petits avatars ronds remplit le cadre, et un panneau dépoli porte le message Built by 436.
  • Le vert signale l'idée d'open sourceLe vert apparaît sur l'expression open-source soulignée et sur le 436 en italique, puis revient dans une scène en aplat de couleur.

Comment le jalon est mis en scène à l'écran

Le film s'appuie sur un seul fond côtier pâle et peint, en bleu doux, pêche et menthe, pour relier des scènes très différentes. Une typographie sombre et grasse s'y superpose, le vert étant réservé à l'accent. Il en résulte un cadre calme qui laisse un grand chiffre porter l'ouverture.

Il s'agit d'une vidéo animée OpenDesign fournie sous forme de MP4 final. Les notes ci-dessous décrivent uniquement ce qui est visible dans ce fichier et dans les trois images de référence.

Le chiffre d'ouverture : un énorme 100K au-dessus de GitHub stars, avec un soulignement vert tracé à la main sous open-source.
Le chiffre d'ouverture : un énorme 100K au-dessus de GitHub stars, avec un soulignement vert tracé à la main sous open-source.

Cinq temps en trente secondes

Le film passe d'un compteur à des personnes, à des exemples de produit, à une rupture de couleur, puis à une invitation. Chaque temps change ce que le spectateur est invité à remarquer.

Ordre des scènes et rôle de chacune
TempsCe qui est visibleRôle dans le design
Nombre d'étoilesUne carte de publication sociale et d'étoile de dépôt, puis 99K Day 163 qui se résout en 100K GitHub stars.Établit l'échelle avec un seul chiffre surdimensionné.
Mosaïque de contributeursDes rangées d'avatars ronds avec Built by 436 et le mot contributors sur un panneau dépoli.Fait passer le crédit d'un chiffre à des personnes.
Montage produitInterfaces produit flottantes, cartes de type citation, maquettes de sites en hauteur et noms de modèles à côté d'exemples de résultats.Montre ce que produit l'outil sans longue explication.
Pont vertUne scène Open source d'un vert vif face à la côte pâle.Relance l'attention grâce au plus fort contraste de couleur du film.
Invitation finaleUne grille de noms d'agents, un message de remerciement, puis Your turn. Describe it. avec un champ de type prompt.Transforme une célébration en appel à l'action.

La mosaïque de contributeurs et ses compromis

Le mur d'avatars est l'image la plus singulière. Photos, illustrations, icônes pixelisées et simples substituts s'alignent dans une grille régulière, de sorte qu'aucun visage ne domine. La grille se lit comme une foule avant même qu'on lise le texte.

Un panneau arrondi et dépoli interrompt les rangées centrales et accueille Built by 436 en grands caractères, le nombre étant en italique vert. Le panneau garde le message lisible, mais il masque un bloc d'avatars. À cette densité, les avatars sont difficiles à identifier, ce qui convient mieux à une impression de foule qu'à un générique de remerciements.

Built by 436 : un panneau dépoli sur une grille complète d'avatars de contributeurs.
Built by 436 : un panneau dépoli sur une grille complète d'avatars de contributeurs.

Conclure sur un merci, puis sur un prompt

Les dernières images réduisent la mise en page à deux moitiés. À gauche, le logo et le nom OpenDesign. À droite, une petite ligne indiquant 100K stars et 436 contributors, un filet fin, et le message Thank you for building it with us, le mot with étant en italique vert.

Ensuite, le film affiche Your turn. Describe it. à côté d'un champ de type prompt. Cette formulation invite les spectateurs à lancer leur propre travail et reprend l'idée du produit présentée dans le film : décrire, puis recevoir un design.

L'image de remerciement : le logo à gauche, le bilan chiffré et le message à droite.
L'image de remerciement : le logo à gauche, le bilan chiffré et le message à droite.

Lire les chiffres et la bande-son

Les chiffres 100K, 436, 163 jours et 21 agents sont des contenus créatifs historiques propres à cette vidéo. Ce ne sont ni des indicateurs produit actuels vérifiés ni des règles de quota. Une bande-son est présente, mais ni son genre, ni son tempo, ni son minutage n'ont été établis ici.

Ce qui peut être adapté

Remplacez le chiffre du jalon, la période et le nombre de contributeurs, conservez l'ordre chiffre, personnes, produit, invitation, et remplacez les avatars par ceux de votre propre communauté.

Ce qui demande de l'attention

Utilisez uniquement des avatars et des témoignages que vous avez l'autorisation de publier. Indiquez clairement les citations d'exemple et ne présentez pas un texte inventé comme un véritable témoignage.

Comment créer une vidéo animée de jalon communautaire dans OpenDesign

  1. Télécharger et installer OpenDesign

    Téléchargez l'application de bureau, installez-la et finalisez la configuration. Créez un projet pour votre design.

    Télécharger OpenDesign
  2. Planifier les cinq temps et réunir les éléments

    Listez le chiffre du jalon, la période concernée, le nombre de contributeurs, un ensemble d'avatars que vous avez le droit d'utiliser et quelques captures du produit. Décidez de l'ordre avant de demander l'animation : compteur, personnes, produit, rupture de couleur, invitation.

  3. Décrire les scènes dans un seul prompt

    Il s'agit d'une recréation proposée, et non du prompt original retrouvé. Collez-le dans OpenDesign et adaptez les chiffres à votre propre projet.

    Invite suggérée

    Crée une vidéo animée de 30 secondes au format 16:9 sur un fond côtier pâle, peint, dans des tons bleu doux, pêche et menthe. Scène 1 : une carte de dépôt avec une étoile, puis un compteur qui grimpe jusqu'à un énorme 100K au-dessus des mots GitHub stars, avec un soulignement vert sous open-source et une petite ligne indiquant une période. Scène 2 : une grille complète d'avatars ronds de contributeurs avec un panneau central dépoli affichant Built by 436 contributors, le nombre en italique vert. Scène 3 : des cartes d'interface produit flottantes, des maquettes de sites web en hauteur et des cartes courtes de type citation. Scène 4 : une scène Open source en plein cadre, d'un vert vif. Scène 5 : une grille de noms d'outils, puis le logo OpenDesign avec un message de remerciement et un champ de prompt affichant Your turn. Describe it. Utilise une typographie sans empattement, grasse et sombre, du vert uniquement pour l'accent, et ajoute une bande-son. Utilise des avatars fictifs et des citations d'exemple.

  4. Vérifier la lisibilité et ajuster le rythme

    Vérifiez que le grand chiffre et le texte du panneau dépoli restent lisibles sur la partie la plus chargée de l'arrière-plan. Demandez à OpenDesign d'allonger toute scène où de petits libellés, comme les noms de modèles ou la grille d'outils, défilent trop vite, puis confirmez que la bande-son convient toujours au montage.

  5. Exporter et obtenir un lien de partage

    Exportez votre design finalisé, puis utilisez Partager dans OpenDesign pour obtenir un lien de partage. Ouvrez le lien dans une fenêtre de navigateur distincte et vérifiez que la version souhaitée ainsi que ses ressources sont disponibles avant de l'envoyer.