Video-Editor-App-Design: Ein Editor-Screen im Redesign, vorher und nachher

Ein Video-Editor hat genau eine Aufgabe: Jemand soll ein Video formen können, während er es ansieht. Der erste Entwurf unten hat jedes Werkzeug, das sich ein Creator wünschen kann, aber die Aufnahme sitzt klein zwischen schwarzen Balken, vierzehn winzige Werkzeuge streiten um den Daumen, die Spuren tragen keine Namen und eine Tab-Leiste nimmt Platz auf einem Screen weg, den niemand verlassen will.

Die Lösung behält jede Funktion und gibt den Platz dem Video zurück. Sie orientiert sich am Editor in Instagrams Edits-App, und jede Änderung unten kannst du kopieren.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Repariert

Links ist das Video das kleinste Element auf dem Screen. Die Aufnahme ist ein 164 px breiter Streifen zwischen schwarzen Balken, und fast alles andere ist ein Bedienelement: vier Dropdowns, vierzehn Werkzeuge, fünf Buttons, fünf Regler, eine Medienzeile und ein Upgrade-Banner.

Rechts liest sich der Screen von oben nach unten in der Reihenfolge, in der ein Creator arbeitet: verlassen oder exportieren, die Aufnahme ansehen, den Playhead bewegen, einen Clip wählen, darauf agieren. Die Vorschau misst 390 mal 404, der Text läuft von 11 bis 17 px gegen die 7 bis 11 px des Entwurfs, und es gibt keine Tab-Leiste.

Was sich geändert hat, gemessen

Fix 1: Die obere Leiste auf das Nötige kürzen

Vorher

Nachher

Ein Zurück-Pfeil, das Cutline-Wortzeichen, der Name Untitled Project 1 (edited), dann Symbole für Rückgängig, Wiederholen, Hilfe und Einstellungen und ein kleiner oranger Button EXPORT 1080P. Dagegen ein schlichtes Schließen-Symbol, der Name Road trip mit Caret, 1080p und ein größerer korallroter Export-Button.

Die Leiste des Entwurfs packt acht Dinge in 26 px Höhe, und der Projektname wird von einem Wortzeichen gequetscht, das in einem eigenen Editor niemand braucht. Export ist der wichtigste Button auf dem Screen und zugleich einer der kleinsten, eine winzige Pille in der äußersten Ecke.

Die reparierte Leiste behält vier Dinge: Schließen, den Namen, die Qualität und Export. Export ist 33 px hoch mit einer korallroten Füllung und damit das einzige laute Objekt oben. Der Caret neben dem Namen öffnet das Projektmenü, in dem jetzt Hilfe, Einstellungen, Loop und Upgrade wohnen. Rückgängig und Wiederholen sind nach unten neben den Playhead gewandert, dorthin, wo die Hand ohnehin ist.

Regel zum Wiederverwenden: Die obere Leiste beantwortet „Wo bin ich und wie werde ich fertig“. Alles andere kommt hinter den Namen.

Fix 2: Dem Video die ganze Breite geben

Vorher

Nachher

Ein flacher Frame mit schwarzen Balken auf beiden Seiten und einer Hochformat-Aufnahme eines orangen Vans in der Mitte, 164 px breit. Dagegen dieselbe Aufnahme in voller Breite, 390 px breit und 404 hoch, mit eckigen Ecken und ohne Bedienelemente darüber.

Ein Video-Editor, der das Video klein zeigt, hat seine eigene Aufgabe missverstanden. Im Entwurf ist der Frame 16:9 und die Aufnahme im Hochformat, sodass schwarze Balken mehr als die halbe Breite fressen. Der Frame hat außerdem einen Rahmen, runde Ecken sowie ein Wasserzeichen und eine Timecode-Pille, die über das Bild gezeichnet sind.

Die Lösung lässt die Vorschau die Bildschirmbreite füllen, ohne Ecken, ohne Rahmen und ohne etwas darauf. Du siehst den Frame, den du schneidest, in einer Größe, in der du Schärfe und Bildausschnitt beurteilen kannst. Der Timecode ist unter die Vorschau gewandert, und das Wasserzeichen ist aus dem Editor verschwunden.

Regel zum Wiederverwenden: Was der Nutzer ändern will, sollte das Größte auf dem Screen sein, ohne dass etwas darübergemalt ist.

Fix 3: Die Werkzeuge des gewählten Clips zeigen

Vorher

Nachher

Vier Dropdowns für Aspect 16:9, Quality 1080p, FPS 30 und Color Rec.709, dann vierzehn kleine Werkzeuge in zwei Zeilen zu je sieben mit 8-px-Labels: Trim, Split, Speed, Volume, Filters, Adjust, Crop, Text, Stickers, Effects, Music, Voice, Mask und Rotate, und ein Label Clip 2 mit Delete, Duplicate, Copy, Replace und Reverse. Dagegen eine flache Zeile mit fünf großen Werkzeugen, Teilen, Lautstärke, Tempo, Effekte und Löschen, mit einem Zurück-Chevron links, die über den rechten Rand hinausläuft.

Der Entwurf legt jedes Werkzeug auf einmal auf den Screen, egal ob es auf die Auswahl passt oder nicht. Vierzehn Icons mit 16 px und 8-px-Labels sind viel zu lesen und ein kleines Ziel, und die Clip-Buttons sitzen in einer eigenen Zeile darunter.

Die Lösung hat zwei Zustände. Ist ein Clip gewählt, zeigt eine flache Zeile, was du mit diesem Clip tun kannst: Teilen, Lautstärke, Tempo, Effekte, Löschen und Anpassen, wobei die Zeile über den Rand läuft, damit du weißt, dass man wischen kann. Der Chevron links führt zurück zur Hauptzeile mit Text, Stickern, Musik, Stimme, Filtern, Zuschneiden, Drehen und Maske. Die Icons wachsen auf 22 px in fetter Stärke und die Labels auf 12 px.

Nichts wurde gestrichen. Trim ist jetzt der gelbe Griff am Clip selbst, die Clip-Eigenschaften liegen hinter Anpassen, und Seitenverhältnis, Bildrate und Farbe liegen hinter dem Qualitäts-Button in der oberen Leiste.

Regel zum Wiederverwenden: Zeige Werkzeuge für das, was ausgewählt ist. Ein Werkzeug, das auf die Auswahl nicht wirken kann, ist Rauschen.

Fix 4: Die Timeline lesbar machen

Vorher

Nachher

Ein Lineal von 00:00 bis 00:40, ein kleiner Filmstreifen aus fünf Standbildern, eine lila Spur, eine grüne Spur und eine grüne Wellenform, keine mit Namen, und ein roter 1-px-Playhead. Dagegen ein Lineal in feinerem Zoom, eine benannte Spur Film Grain, eine korallrote Textspur namens Road trip, eine magentafarbene Musikspur namens Golden Hour mit Wellenform, ein Filmstreifen, der über beide Ränder läuft, mit gelbem Griff und einem Tag 10.0s am gewählten Clip, und ein weißer 3-px-Playhead über allen Spuren.

Hier lebt ein Editor, und der Entwurf behandelt es als Dekoration. Die vier Spuren sind 18 px hoch ohne Labels, sodass du nicht erkennst, welche Text, welche Musik und welche ein Effekt ist, ohne jede anzutippen. Der Playhead ist 1 px breit, und der Filmstreifen hat abgerundete Thumbnails mit Lücken, die ihn wie eine Reihe Sticker aussehen lassen.

Die reparierte Timeline hat benannte Spuren: Film Grain, eine Textspur namens Road trip und eine Musikspur namens Golden Hour. Jede ist 24 bis 36 px hoch und läuft von Rand zu Rand ohne runde Ecken und mit 4 px Abstand dazwischen.

Der Filmstreifen ist 58 px hoch und liest sich als ein zusammenhängendes Stück Material. Der gewählte Clip bekommt einen gelben Griff mit Chevron und einem Dauer-Tag, und ein weißer 3-px-Playhead kreuzt alles.

Auch die Zeit ist ehrlich. Der Zoom beträgt 153 pt pro Sekunde, sodass der Playhead knapp hinter 12 Sekunden steht, und die zweizeilige Zeit zeigt 00:12 über 00:48.

Regel zum Wiederverwenden: Eine Spur ohne Namen ist ein Rätsel. Beschrifte jede Spur und gib der Auswahl eine laute Farbe.

Die kleineren Fixes

• Keine Tab-Leiste. Ein Editor ist ein Ort, an dem man bleibt, also gaben Home, Projects, Editor, Templates und Profile 72 px an eine Leiste ab, die beim Schneiden niemand antippt.
• Ein Akzent pro Aufgabe. Koralle markiert Export und die Textspur, Gelb markiert den gewählten Clip. Der Entwurf verteilt Orange, Lila, Grün und Rot auf Spuren, die nicht sagen, was sie sind.
• Schlichte Bedienelemente. Die Kreise hinter Play, Rückgängig und Wiederholen sind weg. Schlichte Icons lesen sich auf dunklem Grund sauberer.
• Wasserzeichen und Timecode-Pille runter von der Vorschau. Die Zeit steht unter der Aufnahme, und der Hinweis zum Wasserzeichen ist samt Upgrade-Link ins Projektmenü gewandert.
• Zoom ist eine Pinch-Geste. Der Zoom-Regler samt Plus und Minus brauchte eine ganze Zeile, und ein Pinch auf der Timeline erledigt dasselbe.
• Springen ist ein Ziehen. Die Skip-Buttons sind weg, weil das Ziehen der Timeline den Playhead bewegt.
• Medien hinzufügen ist ein Plus am Streifen. Es erscheint, wenn kein Clip gewählt ist.
• Typografie-Skala. Der Text läuft von 11 bis 17 px statt 7 bis 11 px, und das Timeline-Lineal ist in einer Monospace-Schrift mit 11 px gesetzt, damit die Zahlen nicht springen.

Prüfe deinen eigenen Editor

Hol dir die Figma-Datei

Die kostenlose Datei enthält den Junior-Entwurf, den reparierten Screen und jedes Teil als Komponente.

Kostenlose Figma-Datei

Redesign eines Video-Editor-Screens, vorher und nachher

Beide Screens und jedes Teil als Figma-Komponente. Kostenlos, nur Ansicht, dupliziere sie in deine Entwürfe.

In Figma öffnen

FAQ

Wie sollte ein mobiler Video-Editor-Screen gestaltet sein?

Gib der Vorschau die volle Bildschirmbreite, beschränke die obere Leiste auf einen Schließen-Button, den Projektnamen, die Qualität und einen Export-Button und lege die Werkzeuge des gewählten Clips in eine flache Zeile. Ergänze eine Timeline mit benannten Spuren und einem Playhead.

Wie groß sollte die Vorschau in einer Videobearbeitungs-App sein?

So groß, wie der Screen es erlaubt, idealerweise die volle Breite ohne Ecken und ohne etwas darüber. Eine Aufnahme, die klein zwischen schwarzen Balken sitzt, macht es schwer, Bildausschnitt und Schärfe zu beurteilen.

Sollte ein Video-Editor eine Tab-Leiste haben?

Meistens nicht. Wer ein Video schneidet, will nicht weg, also gibt eine Tab-Leiste etwa 72 px für Navigation aus, die niemand nutzt. Leg Home, Projects und Templates hinter den Projektnamen oder den Schließen-Button.

Wie zeigt man Werkzeuge in einem Video-Editor ohne Unordnung?

Zeige nur die Werkzeuge, die auf die Auswahl passen. Bei einem gewählten Clip reicht eine Zeile mit Teilen, Lautstärke, Tempo, Effekten, Löschen und Anpassen, und ein Chevron führt zurück zur Hauptzeile mit Text, Stickern, Musik, Stimme und Filtern.

Wie sollte die UI einer Video-Timeline aussehen?

Ein Lineal mit Zeitmarken, benannte Spuren für Text, Musik und Effekte, ein Filmstreifen von Rand zu Rand, ein Griff am gewählten Clip und ein breiter Playhead über jeder Spur.

Quellen

• Beide Screens sind unsere eigenen, in Figma gestaltet und gemessen. Die App Cutline, das Projekt und die Spuren sind erfunden. Die Timeline folgt zwei echten iPhone-Screenshots des Editors in Instagrams Edits-App, in deren eigenem Zoom von 153 pt pro Sekunde.
• Icons stammen von Phosphor (MIT). Die Statusleiste ist nach einem vermessenen echten iPhone-Screenshot gezeichnet.
• Fotos stammen von Pexels: Roman Odintsov, Hector Perez, Thang-Nhat Tran, Airam Dato-on und Sokil.
• Zuerst als Karussell veröffentlicht auf App Brainy.