estudio-ia – UI für Videos und einfache Seiten

UI für Videos (und einfache Seiten)

Datum: 2026-10-22 · Typ: Leitfaden · Status: gültig

Zusammenfassung: Der Bildschirm ist das, was die Bewegung glaubwürdig macht. Diese Skill vereint universelle Interface-Regeln (Hierarchie, Raum, Typografie, Farbe, Zustände) und zeigt, was sich ändert, wenn der Bildschirm in einem Video landet: lesbar auf dem Handy, in Ebenen nachgebaut, jedes Teil animierbar. Sie gilt auch für einfache Seiten (Landing-Page, Link-in-Bio). Zahlen und Beispiele findest du in references/regras-detalhadas.md.

Zwei Verwendungsmöglichkeiten:

• Erstellen: einen neuen Bildschirm zeichnen oder den eines echten Produkts für das Video nachbauen.
• Überprüfen: einen fertigen Bildschirm auditieren, aufzeigen, was gegen welche Regel verstößt, und korrigieren, falls der Auftrag dies umfasst.

1. Kontext vor dem Zeichnen

1. Finde das visuelle System des Projekts oder der Marke des Themas: Tokens (Farben, Schriftarten, Abstände, Radien) und Komponenten. Bei Marken Dritter entnimmst du sie der offiziellen Website (Methode in video-referenzen, Abschnitt 3). Die folgenden Regeln passen die Ausführung an, ersetzen aber nicht die Marke.
2. Bestimme den Bildschirmtyp: Landing/Website (große Typografie-Spanne) oder App/Dashboard (hohe Dichte, Text bis 24 px).
3. Liste auf, was jeder Block kommunizieren muss und welches Element in jedem Block am wichtigsten ist. Im Video: Was sagt der Voiceover in diesem Moment?

2. Referenzen vor dem Zeichnen

Benötigt	Quelle
App- oder Website-Bildschirm, Landingsection (Hero, Preis, FAQ, Testimonial), Dashboard, Ablauf (Onboarding, Checkout)	Mobbin, falls verfügbar (MCP mit search_sections, search_screens, search_flows)
Kein Mobbin oder Mobbin hat nichts	Dribbble und Pinterest (kurze englische Keywords) und echte Screenshots des Produkts
Motion, animierter Effekt, Ästhetik, Foto, Umgebung	Pinterest
Im Video genanntes echtes Produkt	das Produkt selbst: Nimm den Bildschirm auf oder erstelle offizielle Screenshots
Fertiger Übergang, Symbol, das seine Form ändert, Microinteraktion, KI-Agenten-Bildschirm	Komponentenbibliotheken: references/motion-e-componentes.md

Wie suchen und ablegen: references/referencias.md. Sammle 3 bis 6 Referenzen pro Bildschirm und notiere das übernommene Muster jeder einzelnen. Verwende die Referenz für Struktur, Hierarchie, Abstand und Verhalten; kopiere keine Marke, keinen Text und keine Bilder Dritter.

3. Regeln (Zusammenfassung)

1. Signifiers: Der Bildschirm erklärt sich selbst. Gruppiere mit Container, hebe das Ausgewählte hervor, graue Inaktives aus. Klickbares zeigt Hover, gedrückten Zustand und aktives Element; ein Symbol ohne Text erhält einen Tooltip.
2. Hierarchie: Größe, Position und Farbe. Das Wichtigste oben, größer und fett; das Zweitwichtigste kleiner und grau. Ein farbliches Highlight pro Block. Bild, Logo und Symbol anstelle von Labels („Von:“, „Restaurant:“). Eine Liste „Label: Wert“ durchgängig gleich ist eine Tabelle, kein Design.
3. Raum: Weißraum vor Raster. Vielfache von 4 (4 bis 40 px). Ein Grundabstand zwischen Blöcken (z. B. 32 px) und die Hälfte (16 px) zwischen zusammengehörigen Elementen.
4. Typografie: Eine serifenlose Schriftfamilie. Großer Text mit Buchstabenabstand von −2 % bis −3 % und Zeilenhöhe von 110 % bis 120 %. Landing: bis zu 6 Größen. Dashboard: bis zu 24 px.
5. Farbe: Eine Primärfarbe mit hellen Versionen für Hintergründe und dunklen für Text (Rampe 50–950). Andere Farben nur mit Funktion: Blau für Fokus, Rot für Fehler, Gelb für Warnung, Grün für Erfolg.
6. Dark Mode: Hellrand fast unsichtbar; Tiefe durch hellere Fläche als der Hintergrund; Chip mit entsättigtem dunklem Hintergrund und hellem Text in derselben Farbe.
7. Schatten: Niedrige Deckkraft, hohe Unschärfe. Wenn der Schatten das Erste ist, was auffällt, ist er falsch.
8. Symbole und Buttons: Symbol in der Größe der Textzeilenhöhe, nahe am Text. Horizontaler Padding = 2× vertikaler. CTA-Paar: primär gefüllt + sekundär als Ghost-Button.
9. Feedback: Button mit Normalzustand, Hover, gedrückt, deaktiviert und laden. Eingabefeld mit Fokus, Fehler mit Meldung und Warnung. Jede Aktion reagiert.
10. Bild mit Text: Verlauf lokal hinter dem Text, keine dunkle Schicht über dem gesamten Bild.
11. Subtile Animationen in der gesamten Oberfläche: Karte steigt ~2 px mit breitem, weichem Schatten beim Hover, sanftes Ripple beim Klick, Blöcke kommen von unten mit Fade herein, Skeleton mit Glanz beim Laden. Kurz und dezent: Nichts bewegt sich von selbst außer beim Laden.
12. Teures Design heißt, Entscheidungen leicht zu machen, nicht nur sauber auszusehen: Das verkaufsstarke Bild ist das größte Element der Karte; 3 Textstufen, wobei die entscheidende Information in Gewicht oder Farbe hervorgehoben wird; Button, der die Konsequenz nennt („41 Immobilien ansehen“, „239,90 € bezahlen“); ein Badge pro Bildschirm; Navigation leiser als der Inhalt; einheitlicher Radius. Tabellen in references/design-caro.md.
13. Scannbarer Bildschirm: Niemand liest den Bildschirm, alle suchen die Antwort. Jedes Element berührt 2 oder mehr Kanten (Text links, Wert und Uhrzeit rechts; zentriert nur, was nicht zum Lesen ist). Dichte wird durch Differenzierung gelöst (Avatar, Gruppe mit Überschrift, Chip mit Symbol), nicht durch Abstand. Betonung ist der Unterschied zu den Nachbarn: Um etwas hervorzuheben, neutralisiere die Umgebung. Keine Box in Box.

4. Bildschirm im Video

• Lesbar auf dem Handy: Interface-Körper mindestens ~22 px in einem 1080 px breiten Frame; Impact-Überschriften deutlich größer. Test: Stoppe den Frame 1 Sekunde in Handygröße. Ist das, was man zuerst sieht, das, was der Voiceover gerade sagt?
• In Ebenen nachgebaut, niemals als Screenshot eingefügt: Jeder Button, Text, jedes Symbol und jeder Bubble ist eine eigene Ebene, um einzeln animiert zu werden (mit Feder rein, aufleuchten, angeklickt). Screenshots nur als Beleg (Nachricht, echter Post).
• Treu zum echten Produkt: Dieselben Farben, Schriftart, Radien, Symbole und Komponenten der App, die das Publikum kennt (WhatsApp, Gmail, Banking). Offizielle Symbole (SF Symbols, Material Symbols oder das SVG der Marke).
• Echte Zustände in Bewegung: Tippen mit der echten Systemtastatur, die hochfährt und Tasten aufleuchten, niemals Text, der per Maske „gestreckt“ wird; Button, der beim Klicken gedrückt wird; Ladeanimation, die lädt; Benachrichtigung im echten Format der Plattform.
• Plausible Beispieldaten: Namen, Werte und Uhrzeiten, die in der Nische Sinn ergeben; kein „Lorem ipsum“ und keine echten persönlichen Daten, E-Mails oder Anmeldedaten auf dem Bildschirm.
• Eine Idee pro Bildschirm im Frame: Wenn der Bildschirm 10 Informationen enthält und der Sprecher eine nennt, bleiben die anderen neutral und die Kamera zoomt auf die wichtige.

5. Überprüfungsmodus

1. Rendere den Bildschirm (Browser, Vorschau der Engine oder Videoframe) und erstelle Screenshots für Desktop und Handy oder den Frame in Handygröße.
2. Gehe die Checkliste durch und dokumentiere jedes Problem mit: Wo, verletzte Regel, aktueller Wert und vorgeschlagene Korrektur.
3. Sortiere nach Auswirkung: Hierarchie und Lesbarkeit, dann Raum und Typografie, dann Feinschliff (Schatten, Zustände, Microinteraktion).
4. Korrigiere in kleinen, überprüfbaren Änderungen unter Beibehaltung von Marke und Text.

Checkliste (jeder Punkt ist auch ein „KI-Geruch“)

• Sieht eine Karte oder Liste wie eine Tabelle aus (wiederholte Labels, alles gleich groß)?
• Hat jeder Block ein einziges dominierendes Element? Konkurrieren mehrere farbliche Highlights?
• Sind Abstände keine Vielfachen von 4 oder gleich zwischen Elementen, die zusammengehören sollten?
• Mehr als eine Schriftfamilie? Mehr als 6 Größen (Landing) oder Text über 24 px (Dashboard)?
• Große Überschriften mit Standard-Buchstabenabstand und Zeilenhöhe?
• Farbe nur zur Dekoration oder semantische Farben vertauscht?
• Schwerer oder vor dem Inhalt sichtbarer Schatten? Starker heller Rand im Dunkelmodus? Neon-Chip?
• Symbol größer als die Textzeilenhöhe, weit vom Label entfernt oder klein und schief in einem bunten Quadrat (die Zeichnung sollte ~55 % des Kastens ausfüllen)?
• Buttons mit unproportionalem Padding oder zwei CTAs mit gleicher Gewichtung?
• Fehlen Zustände (Hover, gedrückt, Fokus, deaktiviert, laden, Fehler)?
• Weißer Text direkt auf einem Foto oder das gesamte Foto abgedunkelt?
• Label in Großbuchstaben über der Überschrift in jeder Sektion oder „3 nummerierte Schritte“ mit zentriertem Symbol anstelle der tatsächlichen Inhalte?
• Billiges Design: kleines Bild, laufende Metadaten in Grau, stummer Button („Anwenden“), mehr als ein Badge, gemischte Radien?
• Element lose, ohne 2 Kanten? Karte in Karte?
• Generischer lila-blauer Verlauf, Emojis als Symbole, gleiche Ecken und Schatten überall, Fülltext?
• Im Video: Auf dem Handy lesbar? In Ebenen nachgebaut? Treu zum echten Produkt? Fällt der erste Blick auf das, was der Voiceover sagt?

6. Überprüfung

• Rendere und betrachte: Desktop (1440 px) und Handy (390 px), hell und dunkel, falls vorhanden; im Video den Frame in Handygröße.
• Überprüfe im Code die Zahlen der Regeln (Größen, Zeilenhöhen, Abstände, Schatten).
• Interagiere: Hover, Klick, Fokus und Absenden zeigen eine Reaktion.
• Vergleiche Vorher und Nachher und liste auf, was sich geändert hat und warum.