Motion design

Motion design promo produit

Une promo de 15 secondes passe d'une mascotte en demi-teinte et de cartes produit à un paiement mis en scène, puis résout son message dans le logotype Pennyflow.

OpenDesignAdaptation en code et production

Officiel

Motion design promo produit15s · Motion design

Télécharger OpenDesign Rejoindre Discord

Tableau de paiement Pennyflow avec prix d'un cours, champs de paiement, produits optionnels et panneau de mascotte.

Une image du motion design

Conçu pour

Films de lancement produitCourtes promos qui présentent une offre, montrent son parcours et se terminent sur une marque.
Systèmes d'identité animéeMouvement de marque fondé sur des règles récurrentes de typographie, de personnage, de couleur et de transition.
Études vidéo en codeCompositions pilotées par le temps qui doivent reproduire la même image après une lecture arrière.

Points forts du motion design

Six chapitres en 15 secondesUne accroche, une offre, une boutique, un paiement, un message et une clôture de marque ont chacun un temps défini.
Réactions d'un personnage en demi-teinteUne mascotte tramée hoche la tête, cligne des yeux, saute et suit les objets qui apparaissent autour d'elle.
Le texte devient le logotypeLe « flow. » final quitte le message et forme la fin du logotype Pennyflow.

Aperçu du motion design promo produit

Afficher l'aperçu Partager

Comment l'histoire de 15 secondes est structurée

Le film condense un récit de vente en six chapitres. Il commence par une question directe, montre trois formats vendables, assemble une boutique mobile, passe aux opérations de paiement et se termine par un message créateur contre plateforme. La progression reste lisible parce que chaque chapitre change la composition dominante au lieu de simplement remplacer le texte dans une même mise en page.

Carte des temps de la promo produit
Temps	Chapitre	Changement visible	Compromis pratique
0:00–0:02.45	Accroche	La mascotte entre avec « psst… » avant « Got something to sell? » et un soulignement bleu.	La pause crée de l'attente, mais laisse peu de temps pour une question d'ouverture plus longue.
0:02.45–0:04.45	Anything	Les cartes cours, ebook et app surgissent une à une sur le fond bleu.	Les apparitions successives rendent chaque catégorie lisible ; ajouter des cartes affaiblirait le rythme.
0:04.45–0:06.95	Store	Un balayage vers le blanc introduit une boutique sur téléphone qui se remplit d'une adresse, d'un statut, d'un avatar et de produits.	L'assemblage rapide évoque la mise en place sans expliquer chaque champ.
0:06.95–0:11.20	Handled	La vue s'éloigne du paiement express vers un tableau de paiement avec prix, ventes additionnelles, TVA, versements et marques de validation.	Plusieurs opérations tiennent dans une scène, mais elles se lisent comme des instantanés illustratifs plutôt que comme une transaction complète.
0:11.20–0:15.00	Flow et fin	Une scène de message noire cède la place à un balayage tramé et au logotype Pennyflow complet.	Les dernières secondes donnent plus de temps de lecture au logotype, au détriment des détails produit.

Personnage, typographie et mouvement partagent le même temps

La mascotte n'est pas une présentatrice statique. Elle surgit à côté des cartes produit, suit du regard les nouveaux objets et ponctue les apparitions de sauts, de hochements, de clignements et d'écrasements. Ces réactions donnent au spectateur un second repère temporel, mais elles concurrencent aussi les petits détails d'interface. Garder le personnage d'un seul côté du cadre protège les cartes produit et le texte du paiement de cette concurrence.

Vers trois secondes, la première carte produit apparaît à côté de la mascotte en demi-teinte dans le chapitre bleu « anything ».

Demi-teinte à l'échelle d'affichage

Le personnage et les objets produit sont dessinés en gris à résolution réduite, puis convertis par un passage de tramage ordonné par calque. La texture grossière reste reconnaissable en plan large, tandis que les minuscules libellés d'interface restent nets et typographiques.

La typographie change de voix

Inter porte les titres et le texte d'interface, Instrument Serif Italic met en valeur des mots comme « create », JetBrains Mono signale les chapitres et le timecode, et Fraunces dessine le logotype final. Le contraste ajoute de l'expression, mais trop de styles supplémentaires fragmenterait cette courte séquence.

Le HUD comme aide à la navigation

Un libellé de chapitre se place en haut à gauche, tandis que Pennyflow et un timecode à 60 fps se placent en haut à droite. Retirer ce HUD sur la carte finale fait lire le logotype comme une destination plutôt que comme une autre image de production.

Un paiement présenté comme un grand moment de motion

Le chapitre du paiement commence près de la commande de paiement express, puis dévoile un tableau plus grand. Dans la vue 2, le cours Design Course à 149 $, le bouton Apple Pay, le champ de carte, le sous-total, le total, les ventes additionnelles et le panneau de diffusion de la mascotte coexistent. Des temps ultérieurs ajoutent des valeurs et des marques de validation. Le mouvement de caméra transforme une action en histoire de service plus large, sans exiger une session de paiement réaliste de bout en bout.

Le tableau de paiement réunit règlement, panneau de mascotte à l'antenne et offres optionnelles dans une composition mise en scène.

Ce que communiquent les images du paiement
Élément	Rôle dans le mouvement	Note d'adaptation
Cours à 149 $	Maintient la cohérence visuelle entre le produit choisi et le total.	Remplacez ensemble le produit, le prix et la période de facturation pour éviter les contradictions.
Apple Pay et champ de carte	Offre une voie de paiement immédiate, suivie d'une alternative manuelle.	Traitez les deux comme des accessoires de film, sauf si le projet recréé est conçu et testé séparément comme un paiement.
Ventes additionnelles cahier d'exercices et coaching	Ajoute des produits optionnels sans quitter le tableau.	Limitez le nombre d'offres pour que libellés et prix restent lisibles pendant le mouvement.
Marques Paid et tampon « Handled. »	Transforme plusieurs détails opérationnels en un temps de conclusion décisif.	N'utilisez une affirmation d'achèvement que pour l'histoire fictive montrée, pas comme preuve d'une intégration réelle.

La phrase finale devient la marque

Sur fond noir, « You create. » place le mot en italique à côté d'une grande phrase sans empattement, tandis que la mascotte occupe le côté opposé, comme le montre la vue 3. La ligne suivante commence par « We handle the », ce qui permet à « flow. » de devenir plus qu'un texte : il gagne le centre, forme la fin du logotype et reçoit les lettres restantes. Ce réemploi rend la transition continue, mais des noms de marque de remplacement peuvent exiger un autre pont si aucun mot ne sert à la fois la phrase et le logo.

La scène noire « You create. » réduit la palette et prépare la transformation du texte en logotype.

Réduire avant le logo
Passez du tableau de paiement détaillé à un fond noir avec une ligne et un personnage. La charge visuelle réduite laisse de la place à la transformation finale.
Emporter un mot
Choisissez dans le message un mot qui peut devenir physiquement une partie du logotype. Conservez sa position et son style assez longtemps pour que le spectateur suive le mouvement.
Terminer par un accent de personnage
Une fois les lettres posées, la mascotte jette un œil derrière le logotype, saute et fait un clin d'œil. Cela ajoute un dernier temps sans rouvrir l'explication du produit.

Source et portée

Il s'agit d'une refonte officielle en code par OpenDesign d'une référence de motion tierce publiée par @achxvi. La composition est adaptée avec la marque fictive Pennyflow et une bande-son de fond originale ; le crédit n'implique pas l'approbation du créateur cité. C'est un film promotionnel rendu, pas une boutique fonctionnelle, un parcours de paiement ou un produit de commerce connecté. Le workflow vidéo associé dépend de la PR8619 non fusionnée ; il ne doit donc pas être présenté comme disponible dans la version stable actuelle d'OpenDesign.

Comment créer un motion design promo produit dans OpenDesign

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
Définir les chapitres et le minutage exact
Planifiez un film de 15 secondes en six scènes minutées : accroche, gamme de produits, assemblage de la boutique, tableau de paiement, message et clôture sur le logotype. Donnez à chaque scène une seule tâche de communication dominante. Gardez les prix, les libellés et la durée des chapitres dans une configuration centrale afin qu'une adaptation de marque puisse être relue sans fouiller le code d'animation.

Invite suggérée

Crée un film promo produit de 15 secondes, plein cadre, pour une marque fictive. Utilise six écrans : de 0 à 2,45 secondes, une question portée par la mascotte ; de 2,45 à 4,45, trois cartes produit ; de 4,45 à 6,95, une boutique mobile qui s'assemble ; de 6,95 à 11,2, un tableau de paiement mis en scène ; de 11,2 à 13,3, un message de créateur ; de 13,3 à 15, une clôture sur le logotype. Présente des produits d'exemple nommés Course, Ebook et App, avec un cours à 149 $ et un cahier d'exercices optionnel à 19 $. Anime un pointeur qui clique sur « Get it now », puis révèle les détails de paiement et de livraison. Utilise une palette bleu, blanc et noir avec une mascotte monochrome en demi-teinte. Présente le paiement uniquement comme un motion design rendu ; n'indique aucune fonction réelle de paiement, de compte ou de boutique. Garde chaque image déterministe après un retour en arrière dans la lecture. Si l'export vidéo n'est pas disponible dans la version installée d'OpenDesign, conserve la composition minutée et capture les images avec le workflow local pris en charge.
Construire les réactions autour des apparitions de produits
Placez la mascotte à l'écart des libellés actifs, puis coordonnez clignements, changements de regard, hochements de tête et petits sauts avec chaque apparition. Vérifiez que les cartes restent lisibles sans le personnage ; sinon, simplifiez le mouvement ou allongez le temps d'affichage. Modifier le minutage d'un texte de remplacement peut aussi obliger à ajuster les gestes de bouche, qui ne constituent pas une synchronisation vocale.
Tester la lecture arrière, la lisibilité et le passage final
Vérifiez des images représentatives vers trois, huit et douze secondes, puis revenez en arrière et confirmez que les mêmes instants reproduisent des images identiques. Chargez les polices incluses avant la lecture et gardez les commandes hors des images capturées. Vérifiez que les totaux concordent, que les petits libellés résistent au contraste de la demi-teinte et que le message final peut se transformer en logotype de remplacement sans saut inexpliqué.
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.