Webflow Challenge Gewinner! So entstand das Projekt (Deep Dive)

In dieser Folge des FORMBURG Podcast nehmen wir dich mit hinter die Kulissen unseres preisgekrönten Webflow-Challenge-Projekts. Gemeinsam mit Oliver Gareis besprechen wir, wie wir mit dem Michael-Bay-Studio-Konzept den 2. Platz geholt haben (15.000$). Wir zeigen Designentscheidungen, unser Vorgehen mit 24-Spalten-Grids in Figma, technische Umsetzungen mit Custom Code und Scroll-Videos sowie Lessons Learned zu Deadline-Druck, Performance und Workflow. Ein tiefer Einblick für Webdesigner und Webflow-Fans.

• Bei diesem Projekt habe ich zusammen mit Oliver Gareis gearbeitet, der ebenfalls einen eigenen Onlinekurs aufgebaut hat: Master Typography & Layout. Mit dem Code FORMBURG erhältst du 15 % Rabatt.

Warum unser Webflow-Challenge-Projekt Eindruck gemacht hat

In dieser Episode werfen wir einen intensiven Blick auf das Webflow-Projekt, mit dem wir den zweiten Platz bei der Webflow Challenge gemacht haben. Gemeinsam mit Oliver Gareis erläutern wir, wie aus einer Idee ein preisgekröntes Ergebnis wurde.

Vom Konzept zur Umsetzung

Die Ausgangsidee war simpel und doch ambitioniert: eine Website im Stil eines Studios für den Regisseur Michael Bay. Unser Anspruch: mit visuellem Storytelling, glitchartigen Effekten und einer filmischen Atmosphäre eine beeindruckende Experience schaffen. Das Layout entstand in Figma mit einem großzügigen 24-Spalten-Grid – ein System, das zwar aufwendig ist, uns aber maximale Kontrolle erlaubt hat.

Technische Umsetzung mit Webflow, Scroll-Video & Custom Code

Wir nutzten Webflow, um das Design umzusetzen – ergänzt durch Custom Code und Scroll-Videos für maximale Wirkung. Besonders spannend: das Hintergrundvideo wurde scrollgebunden abgespielt. Damit umgingen wir typische Einschränkungen (z. B. auf iOS) und sorgten für eine immersive Animation.

Der Preloader wurde per Custom JS nur beim ersten Laden abgespielt – so bleibt die Nutzererfahrung beim Zurücknavigieren flüssig.

Alle Animationen wurden mit der neuen Webflow GSAP Timeline umgesetzt. Lerne mit Webflow und ohne Coding-Skills GSAP Animationen wie diese umzusetzen.

Herausforderungen & Learnings

Der enge Zeitrahmen – nur wenige Tage – forderte uns heraus. Manche Ideen wie ein animiertes Menü mussten aus Performance- und Zeitgründen weichen. Doch gerade der starke visuelle Eindruck überzeugten die Jury.

Warum solche Side-Projekte wichtig sind

Dieses Projekt war kein Kundenauftrag, sondern freie Gestaltung mit klarer Deadline. Genau das bringt dich als Webdesigner weiter: Du probierst Neues, setzt Techniken um und entwickelst deinen Stil.

Timestamps

00:00 Einführung in den Webflow Talk
00:52 Vorstellung von Oliver Gareis und seinem Design-Hintergrund
03:54 Die Webflow Challenge und die Preisvergabe
04:54 Analyse der Konkurrenzprojekte
08:31 Unser Projekt (2. Platz)
10:14 Das Projekt: Michael Bay Studio Website
11:00 Bewertung der Designs und technische Aspekte
15:31 Entwickler-Auge und Design-Integration
15:58 Figma und Webflow: Technische Umsetzung
17:51 Grid-Systeme im Design
20:01 24 Spalten Grid in Webflow
23:00 Animationen und Übergänge im Web
26:34 KI-gestützte Code-Generierung
28:46 Interaktive Elemente und Nutzererfahrung
34:33 Seitenübergang Design und Animation Herausforderungen
36:09 CMS-Integration und Video-Management
39:17 CMS Aufbau mit Videosd
40:21 Editorial Design Umsetzung
43:33 Preloader Umsetzung mit Session Storage und GSAP Event Animation in JS Code
43:59 Deadline-Druck und Projektmanagement
48:12 iOS Video Playback Limitierungen
49:02 Erfahrungen und Ausblick nach dem Wettbewerb
54:08 Entwicklung der Version 2
57:04 Design-Optimierungen und Benutzererfahrung
58:18 Wie bekommt man solche meisterhaften Typografie und Schriftkombinationen
01:07:24 Abschluss und Ausblick auf zukünftige Projekte