Produkt-Promo Motion Design

Wie die 15-Sekunden-Geschichte aufgebaut ist

Der Film verdichtet eine Verkaufsgeschichte in sechs Kapitel. Er beginnt mit einer direkten Frage, zeigt drei verkäufliche Formate, baut einen mobilen Shop auf, erweitert sich zu Checkout-Abläufen und endet mit einer Botschaft über Creator versus Plattform. Die Abfolge bleibt nachvollziehbar, weil jedes Kapitel die dominante Komposition verändert, statt nur Text in einem Layout auszutauschen.

Figur, Schrift und Bewegung teilen sich den Takt

Das Maskottchen ist kein statischer Präsentator. Sie erhebt sich neben den Produktkarten, folgt neuen Objekten mit dem Blick und setzt Akzente bei den Einblendungen mit Hüpfern, Nicken, Blinzeln und Squash. Diese Reaktionen geben dem Publikum einen zweiten Timing-Hinweis, konkurrieren aber auch mit kleinen Interface-Details. Hält man die Figur auf einer Seite des Bildes, bleiben Produktkarten und Checkout-Texte von dieser Konkurrenz geschützt.

01

Halftone im Display-Maßstab

Figur und Produktobjekte werden in Grau mit reduzierter Auflösung gezeichnet und mit einem geordneten Dither-Durchgang pro Ebene umgewandelt. Die grobe Textur bleibt in Totalen erkennbar, während winzige Interface-Labels sauber und typografisch bleiben.

02

Typografie wechselt die Stimme

Inter trägt Headlines und Interface-Text, Instrument Serif Italic betont Wörter wie „create“, JetBrains Mono kennzeichnet Kapitel und Timecode, und Fraunces formt die abschließende Wortmarke. Der Kontrast verleiht Ausdruck, doch zu viele zusätzliche Stile würden die kurze Sequenz zerfasern.

03

HUD als Navigationshilfe

Oben links steht ein Kapitel-Label, oben rechts Pennyflow und ein Timecode mit 60 fps. Wird dieses HUD auf der Endkarte entfernt, wirkt das finale Marken-Lockup wie das Ziel statt wie ein weiterer Produktions-Frame.

Ein Checkout als Motion-Set-Piece

Das Checkout-Kapitel beginnt nah am Express-Pay-Element und enthüllt dann ein größeres Board. In view-2 existieren der Design Course für 149 $, der Apple-Pay-Button, das Kartenfeld, Zwischensumme, Gesamtsumme, Upsells und das Broadcast-Panel des Maskottchens nebeneinander. Spätere Beats ergänzen Werte und Abschlussmarkierungen. Die Kamerabewegung macht aus einer einzelnen Handlung eine breitere Servicegeschichte, ohne eine realistische Ende-zu-Ende-Checkout-Sitzung zu erfordern.

Die Schlusszeile wird zur Marke

Auf Schwarz stellt „You create.“ das kursive Wort neben eine große serifenlose Phrase, während das Maskottchen die gegenüberliegende Seite einnimmt, wie in view-3 zu sehen. Die nächste Zeile beginnt mit „We handle the“, sodass „flow.“ mehr als Text sein kann: Es wandert in die Mitte, bildet das Ende der Wortmarke und erhält die übrigen Buchstaben. Diese Wiederverwendung lässt den Übergang fließend wirken, auch wenn Ersatz-Markennamen eine andere Brücke brauchen, falls kein Wort sowohl Satz als auch Logo dienen kann.

1. Vor dem Logo reduzieren

   Wechseln Sie vom detaillierten Checkout-Board zu einem schwarzen Feld mit einer Zeile und einer Figur. Die geringere visuelle Last schafft Raum für die finale Verwandlung.

2. Ein Wort weitertragen

   Wählen Sie ein Wort aus der Botschaft, das physisch Teil des Marken-Lockups werden kann. Behalten Sie Position und Stil lange genug bei, damit das Publikum der Bewegung folgen kann.

3. Mit einem Figurenakzent abschließen

   Nachdem die Buchstaben gelandet sind, lugt das Maskottchen hinter der Wortmarke hervor, hüpft und zwinkert. Das setzt einen letzten Beat, ohne die Produkterklärung neu zu öffnen.

Quelle und Umfang

Dies ist ein offizieller OpenDesign-Code-Remake einer Motion-Referenz eines Dritten, veröffentlicht von @achxvi. Die Komposition wurde mit der fiktiven Marke Pennyflow und einem eigenen Hintergrund-Soundtrack adaptiert; die Nennung impliziert keine Billigung durch den referenzierten Urheber. Es handelt sich um einen gerenderten Werbefilm, nicht um einen funktionierenden Shop, Zahlungsablauf oder ein angebundenes Commerce-Produkt. Der zugehörige Video-Workflow ist mit dem noch nicht gemergten PR8619 verbunden und sollte daher nicht als in der aktuellen stabilen OpenDesign-Version verfügbar beschrieben werden.