SION

Marketing Website Konzept

Anfang 2023 startete ich eine Serie, in der ich eine Marketing-Website für das Autohersteller-Startup Sono Motors entwickelte. Ziel war es, die Eigenschaften und Vorteile des Solarautos SION zu präsentieren und interaktiv in Webflow umzusetzen.

Vorschau:

sion-car.webflow.io

1 Monat

Projektzeitraum

01:52

Durchschnittliche Zeit auf der Seite

86.000 Besucher

Im Jahr 2023

1400+ Clones

Auf der #MadeInWebflow Seite

345+ likes

Auf der #MadeInWebflow Seite

Vorschau:

Von 0 auf 32.000
einzelne Besucher

in drei Monaten

Die Website entstand im Rahmen der #SaveSion-Kampagne, mit der das Unternehmen weitere Gelder für die Produktion des Autos gesammelt hatte. Neben meiner Anzahlung sah ich das Projekt als zusätzliche Unterstützung, um dem Startup zu helfen, indem ich über meine eigenen Kanäle auf die Kampagne aufmerksam machte.

iPhone

iPad Portrait

iPhone

Einzigartige Scroll-Animationen

Für den Inhalt der Website nutzte ich ausschließlich das Presse-Material von Sono Motors. Ich extrahierte Sequenzen und Produktdetails, um interaktive Elemente zu gestalten, die sowohl die Fähigkeiten von Webflow als auch das Fahrzeug selbst eindrucksvoll präsentieren.

Page Load Animation

Das Auto, die Bühne und der rechteckige Hintergrund sind einzelne Bilder, die ich subtil in einem 3D-Raum animiert habe.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Die Sonne tankt dein Auto.
For free.

Die erste Scroll-Animation zeigt den Hauptvorteil des SION.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Details: Spiegelungen am Fahrzeug während des Scrollens

Sogar der Schatten animiert sich größer und kleiner, je nachdem, ob die Sonne ihre Position verändert.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Die Vorteile des SION stechen durch einen Sticky Section Effekt hervor.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Weitere Highlights des Fahrzeugs werden mit großen Bildern und aussagekräftigem Videomaterial demonstriert.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Scroll-Animationen, die auf jedem Gerät funktionieren

Die Herausforderung bestand darin, die Sonne bei jedem Breakpoint genau an der gleichen Stelle im Bild enden zu lassen.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Vorschau

sion-car.webflow.io

‍YouTube-Playlist mit allen Videos zu diesem Projekt.

Responsive Design-Prozess auf meinem Patreon-Account

ZAHNA FLIESEN

Website Relaunch