Wie Designer und Entwickler Live-Websites in Portfolio-Videos verwandeln: was aufnehmen, wie lang, welches Format für welche Plattform und wie eine Reihe von Projekten einheitlich wirkt.
Aviral LakhanpaulAktualisiert am 3 Min. Lesezeit
Halte jede Website als kurzes Scroll-Video statt als Screenshot fest: 10 bis 20 Sekunden, mit Pausen auf den zwei, drei Abschnitten, die deine Arbeit tragen, im Format des Ortes, an dem es gezeigt wird. Nutze für jedes Projekt denselben Rahmen, denselben Hintergrund und dieselbe Bewegung, damit das Portfolio wie aus einem Guss wirkt. Ein URL-zu-Video-Tool macht das aus dem Live-Link; für Websites, die nicht mehr öffentlich sind, funktioniert ein Bildschirmrekorder.
Ein Screenshot der ganzen Seite wird entweder so verkleinert, dass nichts mehr lesbar ist, oder auf den Hero-Bereich beschnitten, und dann fehlt das meiste, was du gemacht hast. Ein Scroll-Video zeigt die Seite in lesbarer Größe und kommt trotzdem bis zum Footer. Und es zeigt, was ein Standbild nicht kann: den Rhythmus zwischen den Abschnitten, Sticky-Elemente, Hover-Zustände und, mit der richtigen Engine, Scroll-Animationen.
Wer ein Portfolio durchstöbert, gibt jedem Projekt ein paar Sekunden, bevor er entscheidet, ob er bleibt. Starte die Bewegung sofort oder nach etwa einer Sekunde Halt auf dem Hero-Bereich, und halte das ganze Scrollen zwischen 10 und 20 Sekunden.
Pausen bringen einem Portfolio-Video mehr als alles andere. Halte ein, zwei Sekunden auf jedem Abschnitt an, der eine Entscheidung zeigt: dem Hero-Bereich, dem Feature-Raster, der Preistabelle. Bis zu 6 Pausen passen in ein Video, jede zwischen 0,5 und 5 Sekunden. Ist die Seite lang, beende das Scrollen vor dem Footer, statt alles zu beschleunigen.
| Wohin es geht | Format | Dateiformat |
|---|---|---|
| Deine eigene Portfolio-Website | 16:9 oder 4:3 für Desktop, 4:5 oder 9:16 für die Handy-Version | MP4, oder WebM für kleinere Dateien |
| Dribbble, Behance, Peerlist | 4:3 oder 16:9 | MP4 |
| Eine Case-Study-Seite | 16:9, mit Browser-Rahmen | MP4 |
| LinkedIn- oder Instagram-Feed | 4:5 oder 1:1 | MP4 |
| Eine Pitch-Mail an einen Kunden | 16:9 oder 1:1, kurz | GIF, das in den meisten Mail-Apps direkt abspielt |
Prüf die Upload-Limits jeder Plattform, bevor du in 4K exportierst: Eine 1080p-Datei ist meist die sicherere Wahl für alles, was beim Hochladen neu kodiert wird.
Zwölf Projekte, zwölfmal anders aufgenommen, sehen aus wie die Arbeit von zwölf verschiedenen Leuten. Leg die Präsentation einmal fest und wiederhole sie.
Ein stummes Video in Schleife verhält sich wie ein animiertes Bild und spielt in jedem modernen Browser automatisch ab, solange es stumm ist und inline abspielen darf. Nimm Runter und zurück als Wiedergabe, damit das letzte Bild dem ersten entspricht und die Schleife keinen Sprung hat.
<video autoplay muted loop playsinline preload="metadata"
poster="project-poster.jpg" width="1920" height="1080">
<source src="project.webm" type="video/webm" />
<source src="project.mp4" type="video/mp4" />
</video>Breite und Höhe verhindern, dass das Layout springt, während die Datei lädt, und das Poster gibt dem Platz etwas zu zeigen, bevor das erste Bild da ist.
Link einfügen und die Vorschau kostenlos ansehen. 51 Gratis-Credits bei der Anmeldung, ohne Kreditkarte, und kein Wasserzeichen auf deinen Exporten.
Beides, für unterschiedliche Aufgaben. Ein Standbild ergibt ein scharfes Vorschaubild; ein Scroll-Video zeigt die ganze Seite in lesbarer Größe, dazu Hover-Zustände und Bewegung. Die meisten Designer stellen das Video nach vorn und nutzen ein Standbild als Poster.
Ein URL-Tool kann nur erfassen, was heute online ist. Wenn du eine Kopie des Builds aufbewahrt hast, stell sie unter einer vorübergehenden öffentlichen Adresse bereit und nimm die auf, oder nimm sie lokal mit einem Bildschirmrekorder auf.
Ja. Lies die Seite in Handy-Breite ein, statt eine Desktop-Aufnahme zu verkleinern, damit die Website ihr echtes mobiles Layout ausliefert, und exportiere in 9:16 oder 4:5.
Automatisiere Website-Aufnahmen mit anpassbarer Bewegung, cleveren Reglern und Exportoptionen für moderne Creator.
