Launch-Video & Visuals
Diese Fähigkeit umfasst die Erstellung von visuellen Assets und Video-Assets für Produkteinführungen. Dies sind die wirkungsvollsten Assets, die du erstellst – ein großartiges Demovideo oder GIF stoppt den Scrollvorgang, kommuniziert Wert schneller als Worte und wird geteilt. Ein schlechtes kann die Einführung aktiv untergraben, indem es das Produkt verwirrend oder unausgereift wirken lässt.
Die Medienhierarchie
Für die meisten Einführungen folgt die Entscheidung, was erstellt werden soll, dieser Reihenfolge:
- Demovideo – Zeigt das Produkt in Aktion mit Kontext. Am besten geeignet, um zu erklären, wie etwas funktioniert.
- Animiertes GIF oder Bildschirmaufnahme-Schleife – Kürzer, läuft automatisch inline in sozialen Netzwerken. Am besten geeignet, um eine bestimmte Interaktion zu zeigen.
- Kommentierter Screenshot – Statisch, schnell erstellbar, gut geeignet, um einen bestimmten Status oder eine Funktion zu zeigen.
- Diagramm oder Illustration – Für Architektur, Konzepte oder Dinge, die nicht gescreenshottet werden können.
Im Allgemeinen: Verwende Video, wenn der Ablauf wichtig ist, GIF, wenn eine einzelne Interaktion den Wert vermittelt, und Screenshots, wenn ein bestimmter Zustand der Punkt ist.
Demovideo
Länge nach Plattform
| Plattform | Ziellänge | Harte Grenze |
|---|---|---|
| Product Hunt | 60-90 Sekunden | 3 Minuten |
| Landing Page Hero | 60-90 Sekunden | 2 Minuten |
| X/Twitter eingebettet | 30-45 Sekunden | 2 Minuten 20 Sekunden |
| 45-90 Sekunden | 10 Minuten | |
| YouTube (vollständiges Demo) | 3-5 Minuten | — |
Die harten Plattformgrenzen sind nicht nur technischer Natur – die Interaktion fällt deutlich dahinter ab. Ein 4-minütiges PH-Video ist praktisch kein Video.
Skriptstruktur (für Kurzform-Demo)
Halte dich an 5-7 Beats:
- Problem (5-10 Sekunden) – Nenne das zu lösende Problem. Ein Satz. Keine lange Einleitung.
- Lösung vorstellen (5-10 Sekunden) – Nenne den Produktnamen und das Kernwertversprechen.
- Demo: Happy Path (30-60 Sekunden) – Zeige den primären Anwendungsfall von Anfang bis Ende. Das ist das Herzstück des Videos.
- Schlüsselfunktionen (10-20 Sekunden) – 2-3 schnelle Schnitte, die sekundäre Funktionen zeigen. Halte es schnell.
- Beweispunkt (5-10 Sekunden) – Eine Metrik, ein Kundenstatement oder ein Benchmark. Eine Folie oder Voiceover-Zeile.
- CTA (5 Sekunden) – Eine Aktion. „Teste es kostenlos unter [URL]" oder „Melde dich an unter [URL]."
Vermeide: lange Einleitungen, animierte Logos (das Publikum klickt weg), langsame Produkt-Startbildschirme und alles, was nicht zeigt, dass das Produkt etwas tut.
Aufnahmetipps
- Verwende eine Demo-Umgebung, keine Produktion. Saubere Daten, keine peinlichen Kundeninformationen, zuverlässiger Zustand.
- Langsam bei bewussten Interaktionen vorgehen. Leute folgen Cursor-Bewegungen besser, wenn du dich absichtlich bewegst, nicht mit normaler Arbeitsgeschwindigkeit.
- Mit der doppelten Zielauflösung aufnehmen. Nimm mit 2880×1800 oder 1440×900 (Retina) auf und verkleinere dann für die Auslieferung. Das gibt dir Zoom-Spielraum und sieht schärfer aus.
- Alles Unnötige ausblenden. Slack-Benachrichtigungen schließen, Browser-Lesezeichenleiste ausblenden, ein sauberes Browserprofil verwenden. Ablenkungen in der Aufnahme untergraben das Vertrauen.
- Mehr aufnehmen, als du verwenden wirst. Nimm vollständige Workflows auf und schneide sie in der Nachbearbeitung. Das ist schneller als erneutes Aufnehmen, weil du einen Schritt verpasst hast.
Voiceover vs. Stumm
Beides funktioniert. Die Wahl hängt vom Kontext ab:
- Voiceover: Wärmer, erklärender, funktioniert besser auf YouTube und Landing Pages. Erfordert eine saubere Aufnahmeumgebung und gute Audioqualität. Schlechter Ton ist schlechter als kein Ton.
- Stumm mit Texteinblendungen: Funktioniert besser in Autoplay-Mute-Kontexten (Social Feeds). Schneller zu produzieren. Erfordert klare Bildschirmbeschriftungen.
Wenn du dir unsicher bist: Nimm das Demo stumm auf, füge Texteinblendungen für Schlüsselmomente hinzu, entscheide dann basierend auf der Plattform, ob du Voiceover hinzufügen möchtest.
Werkzeuge
- Bildschirmaufnahme: Loom (schnell), Screen Studio (professionelle Ausgabe, gut für Marketing), QuickTime (roh), OBS (volle Kontrolle)
- Videobearbeitung: CapCut (schnell, einfach), DaVinci Resolve (professionell, kostenlos), Final Cut Pro, Adobe Premiere
- Bewegungsdesign / Logo-Animationen: After Effects, Motion (Mac), Jitter (webbasiert)
- Untertitel: Descript (auch gut zum Bearbeiten per Transkript), Captions App, Rev
- Programmatisches Video: Remotion (React-basiert – siehe Abschnitt unten)
Programmatisches Video mit Remotion
Für Teams, die schnell liefern und nicht bei jeder Einführung auf einen Motion Designer warten möchten, ermöglicht programmatisches Video das Schreiben von React-Komponenten und deren Rendern als MP4-Dateien. Das Video ist Code: versioniert, parametrisiert und ohne Timeline-Editor iterierbar.
Wann programmatisches Video verwenden
Funktioniert gut für:
- Launch-Ankündigungsclips (15-45 Sekunden) für soziale Medien
- Produkt-Walkthrough-Videos, die die Benutzeroberfläche in Aktion zeigen
- Feature-Highlight-Reels mit Texteinblendungen und Screenshots
- Datengetriebene Videos (Benchmark-Vergleiche, Wachstumsmetriken)
- Vorlagen-Videos, die du bei mehreren Einführungen wiederverwendest (einfach Inhalt austauschen)
Weniger geeignet für:
- Kinoreife Markenvideos mit komplexem Bewegungsdesign
- Gründer-Narrativ-Videos mit Live-Material
- Videos, die umfangreiche benutzerdefinierte Illustrationen oder 3D erfordern
Bei großen Tier-1-Einführungen kannst du Ansätze kombinieren: programmatisches Video für Social-Clips und einen professionellen Motion Designer für das Hero-Video.
Remotion-Setup
npx create-video@latest my-launch-video
cd my-launch-video
npm start # Öffnet Remotion Studio zur Vorschau
Wichtige Konzepte:
- Composition: Ein Video ist eine React-Komponente mit einer definierten Dauer (in Frames) und Bildrate
- useCurrentFrame(): Hook, der die aktuelle Frame-Nummer zurückgibt – verwende ihn, um Animationen zu steuern
- Sequence: Komponente, die ihre Kinder zeitlich versetzt – verwende sie, um Szenen zu sequenzieren
- spring(): Animationshilfe für natürlich wirkende Bewegungen (Ease-in/out)
- Assets: Bilder, Screenshots und Audio kommen in den Ordner
public/
Szenenplanungsvorlage
Bevor du Code schreibst, plane das Video Szene für Szene:
| Feld | Beschreibung |
|---|---|
| Szene # | Fortlaufende Nummer |
| Dauer | Sekunden (z. B. „3s") |
| Zweck | Was diese Szene kommuniziert (ein Satz) |
| Textinhalt | Genauer Text, der auf dem Bildschirm erscheint |
| Visuelle Elemente | Screenshots, Symbole, Code-Snippets, Diagramme |
| Animationsstil | Einblenden, von links hereinschieben, Schreibmaschine, vergrößern usw. |
| Übergang hinaus | Wie diese Szene endet (einblenden, Schnitt, schieben) |
Code-Muster
Sequenzierte Szenen:
<Sequence from={0} durationInFrames={90}>
<HookScene />
</Sequence>
<Sequence from={90} durationInFrames={120}>
<DemoScene />
</Sequence>
<Sequence from={210} durationInFrames={90}>
<CTAScene />
</Sequence>
Text einblenden:
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 20], [0, 1], {
extrapolateRight: 'clamp',
});
return <h1 style={{ opacity }}>Ihr primäres Wertversprechen hier</h1>;
Iterationsworkflow
- Szenen planen mit der obigen Vorlage
- Assets sammeln – Screenshots, Logos, Produktbilder → Ordner
public/ - Ersten Entwurf schreiben oder per Prompt erstellen – Struktur und Inhalt richtig machen
- Im Studio in der Vorschau anzeigen – durchsehen, Timing und visuelle Probleme notieren
- Iterieren – Timing, Animation und Inhalt anpassen. Normalerweise 2-4 Runden
- Rendern –
npx remotion render src/index.ts MyComposition out/video.mp4 - Plattformspezifikationen prüfen – Auflösung und Dateigröße für die Zielplattform überprüfen
GIFs und kurze Schleifen
GIFs laufen auf den meisten Plattformen automatisch ab und sind ideal, um eine einzelne Interaktion zu zeigen – eine UI-Statusänderung, eine CLI-Befehlsausgabe, eine API-Antwort. Sie sind schneller zu produzieren als Videos und oft effektiver für Social Posts.
Wann GIF vs. Video verwenden
Verwende GIF, wenn:
- Der gesamte Wert in 3-8 Sekunden kommuniziert werden kann
- Du eine einzelne UI-Interaktion zeigst, keinen Workflow
- Das Asset in einem Tweet oder README eingebettet wird, wo die Videowiedergabe weniger zuverlässig ist
Verwende Video, wenn:
- Der Wert Kontext erfordert (Problem → Lösung)
- Die Interaktion länger als 8 Sekunden dauert, um sie zu demonstrieren
- Du Audio benötigst
GIFs aufnehmen
- Mit 2x erfassen, auf Zielauflösung verkleinern
- Unter 5 MB halten für die Web-Performance (Palettenreduzierung oder weniger Frames verwenden)
- Nahtlos schleifen – Start- und Endzustand sollten übereinstimmen, damit die Schleife nicht ruckelt
- Werkzeugoptionen: CleanShot X (empfohlen für Mac), Kap, Giphy Capture, Gifski (zum Konvertieren von Videoclips)
GIF-Dateigröße optimieren
- Farbpalette reduzieren (256 → 128 oder 64 Farben für viele UI-Aufnahmen)
- Frames verwerfen (30fps → 15fps ist bei UI-Aufnahmen selten wahrnehmbar)
- Aggressiv zuschneiden – nur das zeigen, was sich ändert, nicht den gesamten Bildschirm
- In MP4 mit Autoplay/Schleife konvertieren anstatt GIF, wenn die Plattform es unterstützt (MP4 ist ~10x kleiner als ein äquivalentes GIF)
Screenshots
Screenshots werden bei Einführungen zu wenig genutzt. Ein gut komponierter Screenshot mit klaren Anmerkungen kommuniziert eine Funktion schneller als ein Absatz.
Komposition
- Zeige das Produkt in einem sinnvollen Zustand – keinen leeren Bildschirm, keinen Ladezustand, keinen Bildschirm voller Dummy-Daten, die Funktionen schwer erkennbar machen
- Verwende eine saubere Umgebung – Browser ohne Tabs, durchgängig dunklen oder hellen Modus verwenden, keine persönlichen Daten sichtbar
- Heebe den relevanten Bereich hervor – Callout-Boxen, Pfeile oder Hervorhebungen lenken die Aufmerksamkeit auf das Wesentliche
Anmerkungswerkzeuge
- CleanShot X (Mac) – erfasst, kommentiert und exportiert in einem Arbeitsablauf
- Skitch – einfache Anmerkungen
- Figma / Sketch – für ansprechendere Produktaufnahmen mit benutzerdefiniertem Styling
Browser-Rahmen
Verwende für Web-Produkte einen Browser-Rahmen, um Screenshots absichtlich und nicht roh aussehen zu lassen. Werkzeuge wie Screely, Browserframe oder benutzerdefinierte Figma-Vorlagen fügen einen Browser-Chrome-Overlay hinzu.
Mehrere Screenshots für Funktionsraster
Landing Pages und Product Hunt-Galerien benötigen oft 3-5 Screenshots, die verschiedene Aspekte des Produkts zeigen. Plane diese als Set:
- Jeder Screenshot zeigt eine bestimmte Fähigkeit
- Einheitliche visuelle Behandlung (gleiche Zoomstufe, gleiches Browser-Theme, gleicher Anmerkungsstil)
- Erzähle einen Fortschritt: Einstieg → Schlüsselaktion → Ergebnis
Asset-Checkliste nach Tier
Tier 1
- Demovideo (60-90 Sekunden, geeignet für PH und Landing Page)
- Kurzer Social-Cut (30-45 Sekunden aus derselben Aufnahme)
- 3-5 kommentierte Screenshots für Landing Page und PH-Galerie
- 1-2 GIFs für Social Posts (die Schlüsselinteraktionen zeigen)
- Open Graph-Bild für Blogbeitrag und Social-Link-Vorschauen
Tier 2
- 1-2 GIFs oder kurze Bildschirmaufnahme
- 2-3 Screenshots für den Landing Page-Bereich
- Open Graph-Bild
Tier 3
- 1 Screenshot
- Optional: kurzes GIF, wenn die Änderung visuell ist
Open Graph-Bilder
Jeder Inhalt, der als Link geteilt wird (Blogbeitrag, Landing Page, Changelog-Eintrag), sollte ein benutzerdefiniertes Open Graph (OG)-Bild haben. Das OG-Bild erscheint, wenn der Link in Twitter, Slack, iMessage oder LinkedIn eingefügt wird.
- Größe: 1200×630px
- Inhalt: Produktname + primäres Wertversprechen. Behandle es wie eine Werbetafel – lesbar bei kleiner Größe
- Konsistenz: Verwende eine Vorlage, damit alle deine Launch-Inhalte ein einheitliches Erscheinungsbild haben
- Werkzeuge: Figma-Vorlage, Vercel OG (codegeneriert), Bannerbear (automatisiert)
Videospezifikationen nach Plattform
| Plattform | Auflösung | Maximale Länge | Format | Hinweise |
|---|---|---|---|---|
| X/Twitter | 1280×720 oder 1920×1080 | 2:20 | MP4 (H.264) | Autoplay stumm – Untertitel hinzufügen |
| 1920×1080 | 10 Min | MP4 (H.264) | Quadratisch (1080×1080) funktioniert gut im Feed | |
| Product Hunt | 1920×1080 | 90 Sek | MP4 | Unter 50 MB halten |
| Website Hero | 1920×1080 | Keine Grenze | MP4/WebM | Autoplay-Schleife in Betracht ziehen (kein Audio) |
Begleitfähigkeiten
- launch-strategy – bestimmt, welche Assets für die Launch-Stufe benötigt werden
- launch-tweet – die GIFs und Videos kommen in den Tweet (angehängt, nicht verlinkt)
- launch-landing-page – das Demovideo und die Screenshots kommen auf die Seite
- launch-distribution – plattformspezifische Formatanforderungen