Ein UI Animation Video baut die Oberfläche deiner Software nach und zeigt sie in wenigen klaren Zuständen, statt eine echte Bildschirmaufnahme abzuspielen. Dafür vereinfachst du dein Dashboard auf einen Ablauf, wenige Spalten und ein Ergebnis. Zwischen den Zuständen führen Cursor, Kamerafahrt und hochzählende Zahlen den Blick. Mit einem Prompt kann eine KI wie Claude so eine Oberfläche als Code bauen, dann bleiben Schrift und Zahlen in jedem Bild scharf.
Ein UI Animation Video zeigt deine Software so, wie Menschen sie verstehen sollen, nicht so, wie sie im Alltag aussieht. Statt einer Bildschirmaufnahme mit Ladezeiten, vollen Menüs und kleinen Zahlen siehst du eine aufgeräumte Oberfläche, die sich gezielt bewegt: Eine Tabelle füllt sich, eine Zahl zählt hoch, ein Cursor klickt auf den einen Knopf, um den es geht. In diesem Artikel erfährst du, wann sich das lohnt, wie du dein Dashboard dafür vereinfachst und wie du die Bewegung so planst, dass man sie beim ersten Ansehen versteht.
Das Video oben ist „Schemata“ aus der DrillUp-Bibliothek: ein 11 Sekunden langer Film im Format 16:9 für ein erfundenes Werkzeug, mit dem Teams interne Tools selbst zusammenbauen. Darin passiert genau das, worum es hier geht. Ein Admin-Panel entsteht aus Bausteinen, bekommt Daten und wird am Ende von mehreren Teams benutzt. Keine einzige Szene davon ist eine Bildschirmaufnahme.
Bildschirmaufnahme, Videomodell oder nachgebaute Oberfläche?
Wenn du deine Software in einem Video zeigen willst, hast du drei Wege. Jeder hat seinen Platz, aber sie liefern sehr unterschiedliche Ergebnisse.
| Bildschirmaufnahme | VideomodellText oder Bild zu Video | Nachgebaute UIals Code animiert | |
|---|---|---|---|
| Schrift und Zahlen | scharf, aber oft winzig | können sich von Bild zu Bild verändern | scharf in jedem Bild, Größe frei wählbar |
| Daten | echte oder Testdaten nötig | vom Modell erfunden | du legst jede Zahl selbst fest |
| Bewegung | so schnell wie du klickst | schwer genau zu steuern | jede Bewegung auf das Bild genau planbar |
| Änderung später | neu aufnehmen | neu erzeugen, Ergebnis anders | Text oder Zahl im Prompt ändern |
| Passt gut für | Tutorials, App Store | Bilder ohne Schrift | Webseite, Anzeigen, Launch, Social Media |
Die Bildschirmaufnahme ist ehrlich und schnell gemacht. Für eine Anleitung ist sie oft die beste Wahl, weil der Zuschauer genau das sieht, was er später selbst klicken wird. Für Werbung ist sie selten stark: Zu viel ist gleichzeitig zu sehen, und auf dem Handy kann man die Schrift kaum lesen.
Videomodelle sind gut darin, Licht, Menschen und Orte zu erzeugen. Eine Oberfläche mit Tabellen, Beträgen und Namen ist für sie dagegen schwer, weil jedes Bild neu gemalt wird. Warum dabei Schrift und Logos verrutschen, haben wir im Artikel KI-Video Text verzerrt genau erklärt.
Die nachgebaute Oberfläche ist der Weg, den viele Launch-Videos von Software-Firmen gehen. Früher bedeutete das viele Stunden in einem Animationsprogramm. Heute kann eine KI wie Claude die Oberfläche aus einem langen Prompt als Code bauen und als Video ausgeben.
Ein UI Animation Video besteht aus Zuständen
Der wichtigste Gedanke beim Planen: Ein gutes UI-Video ist keine Kette von Klicks, sondern eine Folge von wenigen Zuständen. Ein Zustand ist ein Bild, das man in Ruhe lesen kann. Die Bewegung dazwischen erklärt, wie man vom einen zum nächsten kommt. Im Film Schemata sind es vier davon:
- Zustand 1Leere FlächeBausteine links, Platz rechtsÜbergang: Tabelle wird hineingezogen
- Zustand 2Baustein sitztTabelle mit leeren ZeilenÜbergang: Datenbank wird verbunden
- Zustand 3Daten sind daZeilen, Kennzahl, DiagrammÜbergang: Kamera zieht zurück
- Zustand 4Tool in Benutzungmehrere Teams klicken gleichzeitigDanach: Logo und Satz zum Schluss
Grundlage: Film Schemata aus der DrillUp-Bibliothek, 11 Sekunden, 16:9. Davor steht ein Problem (das Tool kommt erst im nächsten Quartal), danach Logo und Slogan.
Wenn du dein eigenes Video planst, schreib zuerst diese Zustände auf, bevor du an Bewegung denkst. Drei bis fünf reichen für einen kurzen Film. Für jeden Zustand gilt eine einfache Frage: Was soll der Zuschauer in diesem Bild verstanden haben? Wenn du darauf keine Antwort in einem Satz hast, ist der Zustand überflüssig oder zu voll.
So vereinfachst du dein Dashboard für das Video
Dein echtes Dashboard ist für die tägliche Arbeit gebaut. Im Video hat es eine andere Aufgabe: Es soll in wenigen Sekunden einen Nutzen zeigen. Deshalb nimmst du fast alles heraus, was nicht zu diesem Nutzen gehört.
- Ein Ablauf pro Video: Zeig eine Aufgabe von Anfang bis Ende, zum Beispiel „Rechnung erstellen“ oder „Bericht teilen“. Fünf Funktionen in zehn Sekunden merkt sich niemand.
- Weniger Spalten, größere Schrift: Aus zwölf Spalten werden drei oder vier. Die Schrift darf deutlich größer sein als in der echten App, weil viele Menschen dein Video auf dem Handy sehen.
- Navigation nur andeuten: Seitenleiste und Kopfzeile dürfen bleiben, damit man die Software wiedererkennt. Die einzelnen Menüpunkte brauchen aber keine lesbaren Namen.
- Glaubwürdige Beispieldaten: Echte Kundendaten gehören nicht ins Video. Erfinde Namen und Beträge, die zu deiner Branche passen. Krumme Zahlen wie 1.284 wirken echter als 1.000.
- Deine Marke genau übernehmen: Schriftart, Farben als Hex-Werte, Ecken und Abstände. Je genauer diese Angaben sind, desto mehr sieht der Nachbau nach deinem Produkt aus und nicht nach einer Vorlage.
Ein guter Test: Mach einen Screenshot vom fertigen Zustand und schau ihn dir auf dem Handy in normaler Größe an. Kannst du in zwei Sekunden sagen, worum es geht? Dann stimmt die Vereinfachung.
Bewegung, die man versteht: Cursor, Kamera, Zahlen
Zwischen den Zuständen passiert die eigentliche Animation. Hier entscheidet sich, ob das Video hochwertig wirkt oder hektisch. Drei Werkzeuge tragen fast jedes gute UI-Video.
Der Cursor als Hauptfigur. Ein Cursor gibt dem Auge einen Punkt, dem es folgen kann. Er sollte in sanften Bögen fahren, kurz vor dem Ziel langsamer werden und erst dann klicken. Im Film Schemata trägt er ein kleines Schild mit „You“, später kommen weitere Cursor mit Teamnamen dazu. So erzählt der Film ohne ein Wort, dass aus einem Werkzeug für eine Person eines für mehrere Teams geworden ist.
Die Kamera führt den Blick. Statt das ganze Fenster die ganze Zeit zu zeigen, fährt die Kamera dorthin, wo gerade etwas passiert, und zieht danach wieder zurück. Eine leichte Neigung der Oberfläche im Raum lässt das Bild tiefer wirken, ohne dass es unruhig wird. Wichtig ist, dass jede Bewegung einen Grund hat. Eine Kamera, die nur fährt, weil sie fahren kann, lenkt ab.
Zahlen, die sich bewegen. Eine Kennzahl, die von null hochzählt, oder ein Diagramm, dessen Balken nacheinander wachsen, zeigt Wirkung schneller als jeder Satz. Lass die Zahl am Ende kurz stehen, damit man sie lesen kann.
Dazu kommt eine Regel, die viele unterschätzen: Pausen. Jeder Zustand braucht einen Moment Ruhe, bevor das Nächste beginnt. Wer alles gleichzeitig bewegt, zeigt am Ende nichts.
Ein Beispiel-Prompt für dein Dashboard
So kann der Anfang eines Prompts für eine kurze Szene aussehen. Er beschreibt Format, Inhalt, Zustände und eine Regel für das Lesen:
16:9, 1920 × 1080, 60 Bilder pro Sekunde, 12 Sekunden. Baue mein Dashboard nach (Screenshot im Anhang), aber nur Seitenleiste, Umsatztabelle mit 5 Zeilen und eine Kennzahl. Ablauf: leere Tabelle, Zeilen erscheinen nacheinander, Kennzahl zählt von 0 auf 1.284, ein Cursor klickt auf „Export“, die Kamera fährt langsam an die Kennzahl heran. Schrift Inter, Akzent #5B5BF0. Jeder Zustand steht mindestens 1 Sekunde still.
Ein Prompt in dieser Länge gibt dir einen ersten Entwurf. Für einen Film wie Schemata braucht es deutlich mehr: genaue Zeiten für jede Bewegung, Kurven für Cursor und Kamera, Regeln für Schatten, Schärfe und Ton. Genau diese Arbeit steckt in den langen Prompts der AI Prompts. Du suchst dir ein Video aus, das deinem Ziel nahekommt, kopierst den Prompt und tauschst Inhalt, Daten und Marke gegen deine aus. Wie du dabei Schritt für Schritt vorgehst, zeigt die DrillUp Academy.
Wo ein UI Animation Video am meisten bringt
Am häufigsten steht so ein Video ganz oben auf der Startseite einer Software, wo es in wenigen Sekunden zeigt, was das Produkt tut. Genauso gut funktioniert es als Anzeige, als Beitrag zum Launch oder als kurzer Film für eine neue Funktion. Wie du eine einzelne Neuerung in 15 Sekunden zeigst, steht in Feature Video erstellen, und den Aufbau eines ganzen Launch-Films findest du in Produktvideo mit KI erstellen.
Eine Ausnahme gibt es: das Vorschauvideo im App Store. Apple verlangt dort laut seinen Richtlinien für App-Vorschauen Aufnahmen, die auf dem Gerät entstanden sind und nur Inhalte aus der App selbst zeigen (Stand: 7. November 2026). Eine nachgebaute, animierte Oberfläche passt dort also nicht. Was im Store erlaubt ist, steht im Artikel App-Store-Vorschauvideo. Für deine Webseite, Social Media und Anzeigen gilt diese Regel nicht.
Wenn du nicht bei null anfangen willst, schau dir in der Bibliothek die Filme an, die eine Oberfläche zeigen, zum Beispiel Schemata. An ihnen siehst du, wie die Zustände aufgebaut sind und wie die Bewegung dazwischen läuft, bevor du deinen eigenen Film daraus machst.
Häufige Fragen
Was ist ein UI Animation Video?
Ein kurzes Video, das die Oberfläche einer App oder Software zeigt, aber nicht als Bildschirmaufnahme. Die Oberfläche wird vereinfacht nachgebaut und gezielt bewegt: Elemente erscheinen, Zahlen zählen hoch, ein Cursor klickt, die Kamera fährt an wichtige Stellen heran. So versteht man in wenigen Sekunden, was das Produkt tut.
Brauche ich echte Daten für ein Dashboard-Video?
Nein, und meist solltest du sie auch nicht zeigen. Echte Kundendaten gehören nicht in ein Werbevideo. Erfundene, aber glaubwürdige Namen und Beträge wirken genauso echt, wenn sie zur Branche passen und nicht zu rund sind.
Wie lang sollte ein UI Animation Video sein?
Für eine einzelne Funktion reichen oft 10 bis 20 Sekunden, für einen Überblick über ein ganzes Produkt 30 bis 60 Sekunden. Wichtiger als die Gesamtlänge ist, dass jeder Zustand lange genug steht, damit man ihn lesen kann.
Kann ich ein UI Animation Video im App Store verwenden?
Als App-Vorschauvideo meist nicht. Apple verlangt dort Aufnahmen aus der App selbst, die auf dem Gerät aufgenommen wurden. Für Webseite, Anzeigen, Social Media und Launch-Posts ist eine nachgebaute, animierte Oberfläche dagegen üblich.
Warum nicht einfach ein Videomodell nehmen?
Videomodelle erzeugen jedes Bild neu. Bei viel kleiner Schrift, Tabellen und Zahlen kann sich dabei von Bild zu Bild etwas verändern. Eine Oberfläche, die als Code gebaut ist, wird nur bewegt und nicht neu gemalt, deshalb bleibt jeder Buchstabe stehen.