FLUX — Engineered Motion
Design-Guide zum Konzept einer Sneaker-Shop-Landingpage: ein Hero-Karussell mit fünf Colorways, das Hintergrund, Produktbild, Preis und Text synchron durchwechselt, dazu Scroll-Reveals, hochzählende Statistik-Zahlen und ein Lookbook-Grid.
Live Seite ansehen →Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Projekt & Anforderungen
Was das Konzept leisten muss, für wen es gebaut ist und welche Haltung dahintersteckt.
Projektziel
Zeigen, dass ein Sneaker-Drop online genauso viel Energie transportieren kann wie eine physische Release-Vitrine — jede Colorway bekommt eine eigene Bühne statt nur ein Produktfoto in einer Reihe.
Zielgruppe
Sneaker-affines, junges Publikum, das schnell scrollt, auf Bild und Bewegung reagiert und Colorways optisch vergleichen will, bevor eine Kaufentscheidung fällt.
Design-Philosophie
Ein Produkt, fünf Stände: Hintergrundfarbe, Schuhbild, Name und Preis wechseln synchron pro Colorway, statt fünf getrennte Produktseiten zu bauen.
Design-Gedanken zum Konzept
Colorway-Karussell als Herzstück: Statt eines statischen Hero-Bilds wechselt der gesamte Bildschirm — Hintergrundverlauf, dekorative florale Motive, Schuhbild, Name und Preis — synchron beim Klick auf Pfeile oder Punkte. Das macht die fünf Colorways sofort vergleichbar, ohne die Seite zu verlassen.
Riesige Wasserzeichen-Zahl: Die groteske Indexziffer im Hintergrund (01–05) gibt dem Karussell einen editorialen, Lookbook-artigen Charakter und macht die Position im Slide-Deck auf einen Blick lesbar.
Navy als durchgehende Markenfarbe: Ein einziger dunkler Blauton trägt Navigation, Buttons, Statistik-Balken und Footer — die fünf Colorway-Farbtöne bleiben damit klar als Produktvarianten erkennbar und konkurrieren nicht mit der Markenidentität.
Farbgebung
Ein Navy-Basiston für Marke/UI, dazu fünf helle Pastell-Colorways als Produktvarianten (Sahara, Coral, Arctic, Mint, Cherry).
Bildwelt
Freigestellte Produktfotos je Colorway, dazu selbstgezeichnete florale Inline-SVG-Motive passend zum jeweiligen Farbthema im Hintergrund.
Typografie
Live-Seite: Syne (Display/Headlines) & Inter (Fließtext) über Google Fonts. Dieser Guide selbst rendert mit System-Font-Stack, um ohne Drittanbieter-Requests auszukommen.
Interaktionskonzept
Synchrones Colorway-Karussell, hochzählende Statistik-Zahlen beim Scrollen ins Sichtfeld, Scroll-Reveals und ein Hover-Lookbook-Grid.
Farbpalette
Ein Navy-Basiston trägt die Marke, fünf helle Pastelltoene stehen für die einzelnen Colorways.
Markenfarbe
Navy wirkt seriös und premium statt laut — passend zu Air-Sole-Technologie und Nappaleder, ohne gegen die bunten Colorways anzukämpfen.
Colorway-Pastelle
Warme und kühle Pastelltöne (Sahara, Coral, Arctic, Mint, Cherry) fungieren als sanfte Bühnenfarbe — hell genug, um den Schuh nicht zu übertrumpfen, aber eigenständig genug, um Colorways sofort zu unterscheiden.
Akzent Gold
Gold ist ausschliesslich Bewertungssternen vorbehalten — ein einziger, gezielter Vertrauens-Signalfarbton statt eines zweiten Markenakzents.
Typografie
Auf der Live-Seite trägt Syne alle Display-Headlines, Inter den Fließtext und die UI. Dieser Guide selbst rendert mit System-Font-Stack.
Warmes Sandbeige trifft auf tiefes Marineblau. Premium-Leder, handveredelt für den täglichen Einsatz.
UI-Komponenten
Wiederverwendbare Bausteine aus der Live-Seite.