Ein Vorher-Nachher-Video für ein Website-Redesign erstellen
Vergleichen Sie dieselbe Aufgabe oder Seite vor und nach dem Redesign und erklären Sie dann, warum die Änderung Besuchern hilft. Eine Präsentation ist leichter verständlich, wenn sie einen sinnvollen Unterschied zeigt, statt nur durch eine schönere Website zu scrollen.
Wählen Sie wenige Änderungen aus. Startseite, Produktdetailseite und Buchungsablauf können reichen, um die Geschichte zu erzählen. Gibt es keinen funktionalen Vergleich, beschreiben Sie das Video als visuelle Präsentation, statt gemessene Verbesserungen der Bedienbarkeit zu suggerieren.
Vergleichbare Ansichten aufnehmen
Nutzen Sie für jedes Vorher-Nachher-Paar denselben sichtbaren Bereich und vergleichbare Inhalte. Zeigen Sie die alte Seite nicht in einer ungünstigen Größe, während die neue ideale Bedingungen erhält. Bewahren Sie genug Kontext, damit erkennbar ist, was sich geändert hat.
Heben Sie die ursprüngliche Aufnahme oder den Screenshot beim Projekt auf. Erfinden Sie kein altes Design, um das Redesign eindrucksvoller erscheinen zu lassen. Holen Sie die Freigabe des Kunden ein, bevor Sie früheres Branding oder Material aus einer privaten Testumgebung veröffentlichen.
Die Präsentation um nützliche Änderungen aufbauen
| Teil | Was Sie zeigen | Was Sie erklären |
|---|---|---|
| Kontext | Marke und Website | Warum es eine neue Website gibt |
| Erster Vergleich | Vergleichbare Startseitenansichten | Eine klarere Botschaft oder Hierarchie |
| Zweiter Vergleich | Eine wichtige Aufgabe | Eine überprüfte funktionale Verbesserung |
| Detail | Eine sorgfältig gewählte Interaktion | Was das neue Erlebnis besonders macht |
| Abschluss | Das öffentlich erreichbare Ziel | Wo Besucher die Website erkunden können |
Kennzeichnen Sie gestalterische Einschätzungen als Einschätzungen. Aufgeräumtere Abstände beweisen keine höhere Conversion. Hat der Kunde Performance-Ergebnisse gemessen, nennen Sie neben der Aussage den Messzeitraum und die Methode.
Übergänge wählen, die Informationen sichtbar machen
Ein Wischübergang oder ein direkter Schnitt kann einen Vergleich verdeutlichen. Ein Übergang, der beide Versionen verdeckt, kann eindrucksvoll aussehen und zugleich den Unterschied verbergen. Lassen Sie Menschen, die das Projekt nicht kennen, genug Zeit, die Seite zu verstehen.
Zeigen Sie mobile Ansichten, wenn das mobile Erlebnis Teil der Geschichte ist. Pressen Sie keine vollständige Desktop-Seite in einen Smartphone-Rahmen und nennen Sie das eine Demonstration responsiven Designs.
Das Ergebnis durchdacht einbetten
Erscheint das Video in einer Fallstudie, wählen Sie eine geeignete Datei und Wiedergabe. web.dev weist darauf hin: „Animierte GIFs können ausgesprochen groß sein“ (Übersetzung). Der Leitfaden erklärt eine videobasierte Alternative für animierte Inhalte. Performance-Hinweise von web.dev.
Prüfen Sie den unterstützten Einbettungsweg der Plattform. Webflow dokumentiert Videoelemente von Drittanbietern und weitere Möglichkeiten, darunter Hintergrundvideos. Webflow-Hinweise zu Videos. Eine dekorative stumme Schleife und ein erklärendes Video mit Ton haben unterschiedliche Anforderungen.
Wo ein Website-zu-Video-Dienst hineinpasst
Teasr ist eine unkomplizierte Wahl für die Ankündigung der neuen Website: Nutzen Sie deren öffentliche URL für einen markengerechten animierten Promo-Clip, ohne das Design in einem Editor nachzubauen. Es rekonstruiert nicht automatisch die Geschichte der Website und liefert keinen überprüften Vorher-Nachher-Vergleich. Bereiten Sie die ursprünglichen Aufnahmen separat vor, wenn der Vergleich zentral für das Briefing ist.
Lesen Sie Launch-Videos in Agenturpakete aufnehmen und markengerechte Produktvideos für Briefing und Freigabe.