Motion design

Motion Design per Promo di Prodotto

Una promo di 15 secondi passa da una mascotte halftone e dalle card dei prodotti a un checkout in scena, per poi risolvere il messaggio nel wordmark Pennyflow.

OpenDesignAdattamento in codice e produzione

Ufficiale

Motion Design per Promo di Prodotto15s · Motion design

Scarica OpenDesign Unisciti a Discord

Board di checkout Pennyflow con prezzo del corso, campi di pagamento, prodotti opzionali e un pannello con la mascotte.

Un fotogramma del motion design

Pensato per

Film di lancio prodottoPromo brevi che presentano un'offerta, ne mostrano il flusso e si chiudono su un brand.
Sistemi di identità in movimentoMotion di brand costruito su regole ricorrenti di tipografia, personaggio, colore e transizione.
Studi video basati su codiceComposizioni guidate dal tempo che devono riprodurre lo stesso fotogramma dopo una ricerca.

Punti di forza del motion design

Sei capitoli in 15 secondiAggancio, offerta, store, checkout, messaggio e chiusura del brand hanno ciascuno un battito definito.
Reazioni del personaggio halftoneUna mascotte con dithering annuisce, ammicca, saltella e segue gli oggetti che compaiono intorno a lei.
Il testo diventa il wordmarkIl “flow.” finale si sposta dal messaggio e forma la coda del lockup Pennyflow.

Anteprima del motion design per promo di prodotto

Mostra anteprima Condividi

Come è strutturata la storia di 15 secondi

Il film comprime una narrazione di vendita in sei capitoli. Parte da una domanda diretta, mostra tre formati vendibili, assembla uno store mobile, si espande nelle operazioni di checkout e termina con un messaggio creator contro piattaforma. La progressione è leggibile perché ogni capitolo cambia la composizione dominante, invece di sostituire soltanto il testo in un unico layout.

Mappa dei battiti della promo di prodotto
Tempo	Capitolo	Cambiamento visibile	Compromesso pratico
0:00–0:02.45	Aggancio	La mascotte entra con “psst…” prima di “Got something to sell?” e una sottolineatura blu.	La pausa crea attesa, ma lascia poco tempo per una domanda iniziale più lunga.
0:02.45–0:04.45	Anything	Le card di corso, ebook e app compaiono una alla volta sul campo blu.	Le rivelazioni in sequenza rendono leggibile ogni categoria; aggiungere altre card indebolirebbe il ritmo.
0:04.45–0:06.95	Store	Uno stacco rapido al bianco introduce uno store su telefono che si riempie di indirizzo, stato, avatar e prodotti.	L'assemblaggio veloce comunica la configurazione senza spiegare ogni campo.
0:06.95–0:11.20	Handled	La vista si allarga dall'express pay a una board di checkout con prezzi, upsell, IVA, pagamenti e segni di completamento.	Più operazioni stanno in una sola scena, anche se si leggono come istantanee illustrative e non come una transazione completa.
0:11.20–0:15.00	Flow ed End	Una scena nera con il messaggio lascia spazio a un wipe con dithering e al wordmark Pennyflow completo.	Gli ultimi secondi concedono al wordmark più tempo di lettura, a scapito del tempo disponibile per i dettagli di prodotto.

Personaggio, tipografia e movimento condividono il battito

La mascotte non è usata come presentatrice statica. Si alza accanto alle card dei prodotti, segue con lo sguardo i nuovi oggetti e punteggia le rivelazioni con saltelli, cenni, ammiccamenti e schiacciamenti. Queste reazioni offrono allo spettatore un secondo segnale di tempo, ma competono anche con i piccoli dettagli dell'interfaccia. Tenere il personaggio su un lato dell'inquadratura protegge da questa competizione le card dei prodotti e il testo del checkout.

Intorno ai tre secondi, la prima card di prodotto compare accanto alla mascotte halftone nel capitolo blu “anything”.

Halftone a scala display

Il personaggio e gli oggetti dei prodotti sono disegnati in grigio a risoluzione ridotta e convertiti con un passaggio di dithering ordinato per livello. La texture grossolana resta riconoscibile nelle inquadrature ampie, mentre le minuscole etichette dell'interfaccia restano pulite e tipografiche.

La tipografia cambia voce

Inter regge titoli e testi dell'interfaccia, Instrument Serif Italic enfatizza parole come “create”, JetBrains Mono etichetta capitoli e timecode e Fraunces dà forma al wordmark finale. Il contrasto aggiunge espressività, ma troppi stili aggiuntivi frammenterebbero la breve sequenza.

L'HUD come aiuto alla navigazione

Un'etichetta di capitolo sta in alto a sinistra, mentre Pennyflow e un timecode a 60 fps stanno in alto a destra. Rimuovere questo HUD nella end card permette al lockup finale del brand di leggersi come destinazione e non come un altro fotogramma di produzione.

Un checkout mostrato come pezzo di scena in movimento

Il capitolo del checkout parte vicino al controllo express-pay, poi rivela una board più grande. In view-2 convivono il Design Course da 149 $, il pulsante Apple Pay, il campo carta, subtotale, totale, upsell e il pannello broadcast della mascotte. I battiti successivi aggiungono valori e segni di completamento. Il movimento di camera trasforma una singola azione in una storia di servizio più ampia, senza richiedere una sessione di checkout end-to-end realistica.

La board di checkout combina pagamento, un pannello on-air con la mascotte e offerte opzionali in un'unica composizione in scena.

Cosa comunica l'immagine del checkout
Elemento	Ruolo nel movimento	Nota di adattamento
Corso da 149 $	Mantiene visivamente coerenti il prodotto selezionato e il totale.	Sostituisci insieme prodotto, prezzo e periodo di fatturazione, così i valori non entrano in conflitto.
Apple Pay e campo carta	Offre un percorso di pagamento immediato seguito da un'alternativa manuale.	Trattali come oggetti di scena del film, a meno che il progetto ricreato non sia progettato e testato separatamente come checkout.
Upsell Workbook e Coaching	Aggiunge prodotti opzionali senza uscire dalla board.	Limita il numero di offerte perché etichette e prezzi restino leggibili durante il movimento.
Segni Paid e timbro “Handled.”	Converte diversi dettagli operativi in un unico battito decisivo di completamento.	Usa un'affermazione di completamento solo per la storia fittizia mostrata, non come prova di un'integrazione reale.

La riga finale diventa il brand

Sul nero, “You create.” colloca la parola in corsivo accanto a una grande frase sans-serif, mentre la mascotte occupa il lato opposto, come mostrato in view-3. La riga successiva inizia con “We handle the,” permettendo a “flow.” di diventare più di un testo: va al centro, forma la coda del wordmark e riceve le lettere restanti. Questo riuso rende la transizione continua, anche se i nomi di brand sostitutivi potrebbero richiedere un ponte diverso se nessuna parola può servire sia alla frase sia al logo.

La scena nera “You create.” riduce la palette e prepara la trasformazione da testo a wordmark.

Riduci prima del logo
Passa dalla board di checkout ricca di dettagli a un campo nero con una riga e un personaggio. Il carico visivo ridotto crea spazio per la trasformazione finale.
Porta avanti una parola
Scegli dal messaggio una parola che possa diventare fisicamente parte del lockup del brand. Conserva posizione e stile abbastanza a lungo perché gli spettatori seguano il movimento.
Concludi con un accento del personaggio
Dopo l'atterraggio delle lettere, la mascotte spunta da dietro il wordmark, saltella e fa l'occhiolino. Aggiunge un battito finale senza riaprire la spiegazione del prodotto.

Fonte e ambito

Questo è un remake in codice ufficiale di OpenDesign di un riferimento motion di terze parti pubblicato da @achxvi. La composizione è adattata con il brand fittizio Pennyflow e una colonna sonora di sottofondo originale; il credito non implica l'approvazione del creator citato. È un film promozionale renderizzato, non uno store funzionante, un flusso di pagamento o un prodotto di commercio connesso. Il relativo flusso di lavoro video è associato alla PR8619 non ancora integrata, quindi non va descritto come disponibile nell'attuale versione stabile di OpenDesign.

Come creare un motion design per promo di prodotto in OpenDesign

Scarica e installa OpenDesign
Scarica l'app desktop, installala e completa la configurazione. Crea un progetto per il tuo design.
Scarica OpenDesign
Definisci i capitoli e i tempi esatti
Pianifica un video di 15 secondi come sei scene a tempo: aggancio, gamma di prodotti, assemblaggio dello store, board del checkout, messaggio e chiusura con il wordmark. Assegna a ogni scena un solo compito comunicativo dominante. Tieni prezzi, etichette e durate dei capitoli in una configurazione centrale, così un adattamento al brand può essere rivisto senza cercare nel codice di animazione.

Prompt suggerito

Crea un film promo di prodotto di 15 secondi, a tutto schermo, per un brand fittizio. Usa sei schermate: 0–2,45 secondi per una domanda guidata dalla mascotte, 2,45–4,45 per tre card di prodotto, 4,45–6,95 per uno store su telefono che si assembla, 6,95–11,2 per una board di checkout in scena, 11,2–13,3 per un messaggio del creator e 13,3–15 per la chiusura con il wordmark. Mostra prodotti di esempio chiamati Course, Ebook e App, con un corso da 149 $ e un workbook opzionale da 19 $. Anima un puntatore che clicca “Get it now”, poi rivela i dettagli di pagamento ed evasione. Usa una palette blu, bianca e nera con una mascotte halftone monocromatica. Presenta il checkout solo come motion graphics renderizzata; non suggerire funzionalità reali di pagamento, account o negozio. Mantieni ogni fotogramma deterministico anche dopo una ricerca all'indietro. Se l'esportazione video non è disponibile nella versione di OpenDesign installata, conserva la composizione a tempo e cattura i fotogrammi con il flusso locale supportato.
Costruisci le reazioni attorno alle rivelazioni dei prodotti
Posiziona la mascotte lontano dalle etichette attive, poi coordina ammiccamenti, cambi di sguardo, cenni del capo e brevi saltelli con ogni apparizione. Verifica se le card restano leggibili senza il personaggio; in caso contrario, semplifica il movimento o aumenta il tempo di permanenza. Ritemporizzare un testo sostitutivo può richiedere anche di regolare i gesti visivi della bocca, che non sono una sincronizzazione vocale.
Verifica la ricerca nel tempo, la leggibilità e il passaggio finale
Controlla fotogrammi rappresentativi attorno a tre, otto e dodici secondi, poi cerca all'indietro e conferma che gli stessi istanti riproducano immagini identiche. Carica i font inclusi prima della riproduzione e tieni i controlli fuori dai fotogrammi catturati. Verifica che i totali coincidano, che le etichette piccole reggano il contrasto halftone e che il messaggio finale possa trasformarsi nel wordmark sostitutivo senza un salto inspiegato.
Esporta e ottieni un link di condivisione
Esporta il design completato, quindi usa Condividi in OpenDesign per ottenere un link di condivisione. Apri il link in una finestra del browser separata e verifica che la versione prevista e le sue risorse siano disponibili prima di inviarlo.