SaaS Motion Design
Erstelle Produktfilme, in denen die echte Produkt-UI die Hauptrolle spielt und jede Bewegung etwas erklärt.
Standardeinstellungen auf einen Blick
| Einstellung | Standard | Nur ändern wenn |
|---|---|---|
| Seitenverhältnis | 16:9 (1920×1080) | Der Nutzer explizit nach 9:16 fragt |
| Bildrate | 60 fps | Der Nutzer nach etwas anderem fragt |
| Hintergrund | Off-white | Der Nutzer einen anderen Hintergrund angibt |
| Farben | Aus dem UI-Theme des Produkts selbst | Niemals Farben fest codieren |
| Verläufe | Keine | Der Nutzer explizit danach fragt |
| Voice-Over | Kein | Der Nutzer explizit danach fragt |
| Musik | Ein energiegeladener Mixkit Track, den der Nutzer auswählt | Der Nutzer eine ruhigere Stimmung wünscht, nichts passt oder der Film ausgestrahlt wird (siehe Audio) |
Ein Video pro Durchlauf. Rendere ein einzelnes Seitenverhältnis. Erzeuge niemals 16:9 und 9:16 zusammen; ein 9:16-Schnitt wird nur dann gemacht, wenn der Nutzer danach fragt.
Tech-Stack
| Tool | Version | Verwendet für |
|---|---|---|
| Remotion | 4.0.535 | Jede Szene als React-Komponente bauen, in Remotion Studio Vorschau anzeigen, Stills exportieren und rendern |
| FFmpeg | Aktuelle stabile Version | Audiomischung, Ducking der Musik unter der Stimme, Kontaktbögen, finale Encodings |
| Node.js | 24 | Ausführen von Remotion und der Build-Skripte |
- Remotion genau festlegen. Installiere jedes
remotionund@remotion/*Paket mit4.0.535ohne^oder~. Nicht passende Remotion-Paketversionen brechen Renderings. - Node zuerst prüfen. Führe
node -vaus, bevor du etwas installierst. Wenn es nicht v24 ist, informiere den Benutzer, bevor du fortfährst. - Leite alle Bewegungen vom Frame ab. Animieren mit
useCurrentFrame()undinterpolate()/Easing.bezier()unter Verwendung der untenstehenden Easing-Voreinstellungen, niemals CSS-Übergänge oder Timer, damit jedes Rendern Frame-genau herauskommt. - Setze die Komposition standardmäßig auf 1920×1080 bei 60 fps, oder 1080×1920 nur wenn 9:16 angefordert wird.
- Stills für den Überprüfungsschritt:
npx remotion still <composition> --frame=<n>. - Finaler Render:
npx remotion render <composition> out/<name>.mp4 --codec=h264.
Arbeitsablauf
- Planen. Sammle das Briefing und schreibe den Plan und den Drehplan (siehe Planung unten). Hole die Zustimmung des Benutzers ein.
- Das Produkt lesen. Lies das Frontend-Codebase, falls vorhanden, andernfalls die Live-UI, und extrahiere das Theme (siehe Produktzugriff und Branding unten).
- Das Drehbuch schreiben und die Zustimmung des Benutzers einholen (siehe Drehbuch unten).
- Den Film bauen unter Verwendung der untenstehenden Bewegungs-, Choreographie-, Kamera- und Übergangsregeln, im Geiste der Inspirations-Referenzen.
- Audio hinzufügen: Erstelle eine Shortlist von Mixkit-Tracks, aus denen der Benutzer auswählen kann (siehe Audio unten), füge dann SFX und, nur wenn gewünscht, das Voice-Over hinzu.
- Die Qualitätskontrolle durchführen.
- Stills zeigen und warten. Zeige dem Benutzer die Überprüfungs-Stills, beantworte seine Fragen und nimm ggf. Änderungen vor (siehe Stills-Überprüfung unten). Rendere erst, wenn der Benutzer zustimmt.
Überspringe keinen Freigabeschritt. Jeder ist günstiger zu ändern als der darauf folgende Schritt.
Planung
Bevor du ein Drehbuch schreibst, lege fest, wofür der Film gedacht ist.
1. Das Briefing sammeln
Frage den Benutzer nur nach dem, was du nicht selbst herausfinden kannst:
| Frage | Standard, falls nicht angegeben |
|---|---|
| Was ist das Produkt, und kannst du sein Frontend-Codebase teilen? Falls nicht, wo ist die Live-UI erreichbar (URL, lokaler Build, Login)? | Erforderlich. Frage nach. Bevorzuge das Codebase. |
| Für wen ist der Film? | Potenzielle Kunden |
| Was ist das Eine, an das sich der Zuschauer erinnern sollte? | Erforderlich. Frage nach. |
| Welche Funktionen oder Abläufe sollen gezeigt werden? | Die 2–3 Abläufe, die die Kernbotschaft am besten beweisen |
| Wie lang soll er sein? | 30–45 s |
| Wo wird er veröffentlicht? Wird er im Fernsehen oder Radio ausgestrahlt? | Webseite und X/LinkedIn (16:9), nur online |
| Soll es ein Voice-Over geben, und wenn ja, männlich oder weiblich? | Kein Voice-Over |
| Was ist der Aufruf zum Handeln? | Besuche die URL des Produkts |
2. Den Plan schreiben
Gib dem Benutzer einen kurzen Plan zur Genehmigung:
- Ziel: ein Satz, was der Film erreichen muss
- Zielgruppe: wer zusieht und was sie bereits wissen
- Kernbotschaft: der eine Satz, den der Zuschauer sich merken soll
- Format: Länge, Seitenverhältnis (16:9, außer 9:16 wurde gewünscht), Voice-Over ja oder nein
- Handlungsbogen: die Strukturvorlage (siehe Drehbuch), ausgefüllt für dieses Produkt, ein Satz pro Abschnitt
- Abläufe, die aufgezeichnet werden sollen: die genauen UI-Bildschirme und Interaktionen, die aufgezeichnet werden sollen, mit dem Datenstatus, den jeder benötigt (z.B. „Projektboard mit 12 Aufgaben, 3 davon überfällig“)
- Beweis: der Nachweis, den der Film zeigen wird, falls vorhanden (eine Metrik, Kundenlogos, ein Zitat, ein Benchmark oder eine Auszeichnung), und woher er stammt
3. Den Drehplan schreiben
Unterteile den Handlungsbogen in Einstellungen, eine Zeile pro Einstellung:
| # | Abschnitt | Einstellung | Bewegung | Dauer |
|---|---|---|---|---|
| 1 | Aufhänger | Getippte Frage in der Suchleiste des Produkts | Cursor tippt, Antwort strömt ein | 4 s |
Der Drehplan wird zur Spalte „Was auf dem Bildschirm zu sehen ist“ des Drehbuchs.
Produktzugriff
Der Film ist nur so gut wie dein Zugriff auf das Produkt. In der Reihenfolge der Präferenz:
| Zugriff | Was es dir gibt |
|---|---|
| 1. Frontend-Codebase (am besten) | Exakte Design-Tokens, echte Komponenten, echte Texte, Symbole und Logodateien. Die UI kann pixelgenau in Remotion nachgebaut und frei animiert werden. |
| 2. Laufende App (URL oder lokaler Build, mit einem Test-Login) | Das echte Theme und die Abläufe, aus dem Browser erfasst. Treu, aber schwieriger Element für Element zu animieren. |
| 3. Screen Recordings oder Screenshots | Eine letzte Option. Baue die Bildschirme daraus so genau wie möglich nach und teile dem Benutzer mit, dass das Ergebnis weniger genau sein wird. |
Wenn du das Codebase nicht hast, frage danach, bevor du dich mit einer schlechteren Option zufriedengibst.
Vom Codebase aus arbeiten
- Theme: Lies die Design-Tokens dort, wo das Projekt sie aufbewahrt, z. B. CSS Custom Properties, die Tailwind-Konfiguration, eine Theme-Datei oder ein Design-Tokens-Paket.
- Komponenten: Verwende die eigenen UI-Komponenten des Produkts in den Remotion-Kompositionen wieder, wo sie außerhalb der App sauber rendern. Andernfalls erstelle sie originalgetreu aus ihrer Quelle nach.
- Inhalt: Nimm echte Labels, Leerzustände, Symbole und Logodateien aus der Quelle, anstatt sie zu erfinden. Verwende Seed- oder Fixture-Daten für die Datenzustände, die der Plan benötigt.
- Nur lesen. Bearbeite niemals das Codebase des Produkts. Baue den Film in seinem eigenen Remotion-Projekt.
Branding
Verwende keine festen Markenfarben. Jede Farbe stammt aus dem gezeigten Produkt.
- Lese die Kern-UI des Produkts, aus dem Codebase, wenn du es hast, und extrahiere sein Theme: Primär-/Akzentfarbe, Neutrale, Oberflächenfarben, Rahmenfarben, Typografie, Eckenradien und Schattenstil.
- Hintergrund: Bevorzuge standardmäßig einen off-weißen Hintergrund, es sei denn, der Benutzer gibt etwas anderes an.
- Akzent: Verwende die eigene Akzentfarbe des Produkts für Hervorhebungen, Cursorringe, Carets und Hervorhebungen.
- Keine Verläufe in Hintergründen, Text, Leuchteffekten oder Übergängen, es sei denn, der Benutzer bittet explizit darum. Verwende flache Füllungen.
- Typografie: Verwende nach Möglichkeit den eigenen Schrifttyp des Produkts, damit Bildunterschriften sich nativer für die UI anfühlen.
- Logo und Wortmarke: Verwende die echten Assets des Produkts. Zeichne sie niemals neu und nähere sie nicht an.
Drehbuch
Das Drehbuch treibt alles an: Bildunterschriften, Timing und das Voice-Over, falls vorhanden. Schreibe es aus dem genehmigten Plan und Drehplan, bevor du eine Szene baust, und hole die Zustimmung des Benutzers ein, bevor du baust.
Format
Schreibe das Drehbuch als Tabelle, eine Zeile pro Zeile:
| # | Zeile (gesprochen oder auf dem Bildschirm) | Was auf dem Bildschirm zu sehen ist | Dauer |
|---|---|---|---|
| 1 | Dein Team verliert sechs Stunden pro Woche mit Status-Updates. | Zähler steigt auf 6 über einer unübersichtlichen Aufgabenliste | 3 s |
Regeln
- Aufhänger in den ersten 7 Sekunden. Beginne mit dem Problem, einer überraschenden Zahl oder dem Produkt, das etwas Erfreuliches tut, nicht mit dem Produktnamen.
- Jede Zeile hat ein Bild. Wenn eine Zeile keinen passenden visuellen Beat hat, streiche sie oder schreibe sie um.
- Klare Sprache. Kurze Sätze, eine Idee pro Zeile, kein Fachjargon, den der Zuschauer entschlüsseln muss.
- Tempo: etwa 2,5 Wörter pro Sekunde bei gesprochenem Text. Kalkuliere die Dauer der Zeile aus ihrer Wortanzahl.
- Markiere Betonung mit Sternchen, höchstens ein Schlüsselsatz pro Zeile.
- Jede Behauptung ist wahr. Zahlen und Benchmarks müssen echt und bei Bedarf mit Fußnoten versehen sein.
- Halte die im Briefing festgelegte Länge ein. Kürze Zeilen, bevor du Bewegungen beschleunigst.
- Standardmäßig kein Voice-Over. Ohne eines erscheint das Drehbuch nur als On-Screen-Bildunterschriften.
Klinge wie ein Mensch, nicht wie ein Modell
Jede Zeile muss sich so anhören, als würde eine echte Person sie einem Kollegen laut sagen. KI-klingende Texte lassen Zuschauer abschalten und lassen das Produkt generisch wirken. Dies ist eine harte Regel, keine Stilpräferenz.
Schreibe so:
- Sei konkret. Verwende die echten Feature-Namen des Produkts, echte Zahlen und die tatsächliche Aktion des Benutzers („Ziehe eine Aufgabe auf Freitag“, nicht „Verwalte mühelos deinen Workflow“).
- Nenne den spezifischen Schmerz, den das Publikum fühlt, in seinen Worten („Dein Standup lief wieder 40 Minuten“).
- Verwende Kontraktionen und alltägliche Wörter: „du wirst“, „es ist“, „tut nicht“. (Anmerkung: Im Deutschen sind Kontraktionen weniger üblich, daher auf natürliche Kurzformen achten, z.B. „das ist“ zu „das ist“ oder „das wird“ zu „das wird“ – hier besser bei natürlicher, lockerer Sprache bleiben, ohne künstliche Kontraktionen)
- Ziehe Verben Adjektiven vor. Zeige, was das Produkt tut, anstatt zu beschreiben, wie gut es ist.
- Kurze Zeilen sind in Ordnung, wenn sie etwas Spezifisches sagen („Besprechungen verschieben sich.“ funktioniert, weil das Bild genau das zeigt).
Schreibe niemals diese:
| Muster | Beispiele |
|---|---|
| Kontrast-Rahmung | „Nicht X, sondern Y“, „Es ist nicht nur X, es ist Y“, „Nicht X. Nicht Y. Z.“, „X ist nicht das Problem. Y ist es.“ |
| Dreier-Rhythmus-Listen | „Schneller, schlauer, besser“, „Planen. Bauen. Ausliefern.“ wenn die drei Wörter nichts Spezifisches sagen |
| Gestapelte Adjektiv-Fragmente |
… [für die Übersetzung gekürzt]