StreetWearzzz — Online-Shop für Streetwear-Drops

(Auf einen Blick)

Leistungen

• Konzept, Art Direction & Umsetzung
• Wortmarke & Corporate Identity
• Shop mit Kollektionsfilter, 12 Produktseiten & Warenkorb
• Zoom von der Produktkarte in die Produktseite (View Transitions)
• Scroll-Orbit: das Video folgt der Scrollposition
• Lookbook als Nacht in sechs Kapiteln
• Bild- und Videowelt KI-generiert, Schriften lokal, Reduced-Motion-Fallback

Drop-Website mit Shop für ein Streetwear-Label: jedes Teil an einem Avatar im Lichtkasten, ein Orbit, der dem Scrollen folgt, und ein Zoom, der die angetippte Karte direkt in die Produktseite verwandelt.

StreetWearzzz ist ein Streetwear-Label für die Stunden, in denen die Stadt schläft. Drop 03 heißt „Blaue Stunde“: zwölf Teile in sechs Farben für die Minuten zwischen letzter Bahn und erstem Licht. Ein Drop verkauft sich über Begehren und Tempo. Die Teile müssen auf den ersten Blick nach etwas aussehen, und wer zugreifen will, darf auf dem Weg in den Korb nicht hängen bleiben. Unser Ansatz war eine Website, die zugleich Bühne und Shop ist: erst die Welt, dann sofort die Teile. Die Seite ist öffentlich unter streetwearzzz.de erreichbar.

StreetWearzzz ist ein Showcase-Projekt aus unserer Schmiede: Marke, Kollektion und Preise haben wir für diese Seite entwickelt, der Warenkorb funktioniert, eine Kasse gibt es nicht. Die Technik dahinter ist echt und läuft so live.

(01)

Ein Drop wie ein Plakat

Die Startseite öffnet geteilt: links ein Feld in Natrium-Orange, der Farbe der Straßenlaternen, mit „Drop 03 / Blaue Stunde“ in großen Versalien, darunter zwölf Teile, sechs Farben und die Uhrzeit von 22:47 bis 05:58. Rechts steht ein weißer Nachtbus in einem orangefarbenen Raum, auf dem Dach sitzt ein Avatar in kobaltblauer Jacke. Mehr braucht es nicht, um zu sagen, worum es geht.

(02)

Der Shop gleich nach dem Intro

Wer wegen der Teile kommt, soll nicht erst durch die Geschichte scrollen müssen. Deshalb steht der Shop als Kapitel 01 direkt unter dem Intro: die sieben neuen Teile des Drops, jedes schwebend über einem hellen Sockel, mit Preis und Farbpunkten, und ein Knopf zu allen zwölf. Im Shop selbst filtert man nach Kollektionen wie Hoodies, Outerwear oder Sale und sortiert nach Preis, die Auswahl steht in der Adresse und lässt sich teilen.

(03)

Zwölf Teile am Avatar

Statt Models zeigt die Seite jedes Teil an einem gesichtslosen, matt-grauen Avatar in einem Lichtkasten: oben ein Lichtpaneel, unten ein leuchtender Sockel, dazwischen Nebel. So sieht jedes Teil gleich aus, kein Gesicht lenkt ab, und die Reihe wirkt wie eine Ausstellung. Fährt die Maus über eine Karte, zoomt das Bild leicht heran und ein „Ansehen“ erscheint, die anderen Karten treten zurück.

(04)

Antippen, ranzoomen

Der Klick auf eine Karte lädt keine neue Seite im üblichen Sinn. Das angetippte Bild fliegt an seinen Platz in der Produktseite und wird dabei größer, der Rest der Seite blendet weich um, der Kopf bleibt stehen. Möglich macht das die View Transitions API des Browsers; wo sie fehlt, übernimmt ein kleiner Zoom per JavaScript, bei reduzierter Bewegung gibt es keinen Übergang. Damit nichts ruckelt, beginnt die Produktseite mit genau dem Bild, das man angetippt hat, und das Galeriebild wird schon beim Darüberfahren vorgeladen.

Auf der Produktseite stehen Farbe und Größe direkt neben dem Bild. Die Farbwahl tauscht die Galerie und schreibt die Farbe in die Adresse, ausverkaufte Größen sind durchgestrichen, bei knappen steht, wie viele Stück noch da sind. Beschreibung, Material, Passform, Pflege, Größentabelle sowie Versand und Rückgabe klappen darunter auf.

(05)

Ein Korb, der mitdenkt

Nach „In den Korb“ öffnet sich der Warenkorb von rechts: Teil mit Farbe und Größe, Menge zum Ändern, Zwischensumme, und eine Leiste, die zeigt, wie weit es noch bis zum Gratisversand ab 150 € ist. Der Zähler im Kopf läuft mit, und der Korb bleibt erhalten, wenn man weiterstöbert. Der Knopf „Zur Kasse“ sagt offen, dass dies eine Demo ist.

(06)

Der Orbit folgt dem Scrollen

Im Kapitel „Funktion & Ästhetik“ dreht sich die Kamera um den Avatar im Insomnia Heavy Hoodie, und zwar genau so schnell, wie man scrollt. Rückwärts scrollen dreht zurück. Links und rechts leuchten nacheinander die Details auf: Kapuze, Schulter und Tasche auf der einen Seite, 480 g/m² Stoff, Boxy Fit und vorgewaschen auf der anderen. Das Video ist so kodiert, dass jedes Bild ein Schlüsselbild ist; nur so lässt es sich ohne Ruckeln vor- und zurückspulen. Bei reduzierter Bewegung steht der Avatar still und alle Details sind sichtbar.

(07)

Eine Nacht in sechs Kapiteln

Das Lookbook erzählt den Drop als eine Nacht, von 22:47 bis 05:58: Aufbruch, letzte Bahn, Imbiss, Dach, Parkdeck, erstes Licht. Jedes Kapitel ist eine Szene mit Uhrzeit, und darunter steht, was getragen wird, mit Link zum Teil. Die Geschichte bleibt so nie ohne Ausgang in den Shop.

(08)

Marke und Schrift

Die Wortmarke setzt „StreetWear“ in schmalen, schweren Versalien, danach folgen drei Z, die von Buchstabe zu Buchstabe breiter werden, wie ein Schlaf, der tiefer wird. Das ZZZ allein ist das Signet und sitzt in einer Kerbe oben in der Mitte des Bildschirms. Die Palette kommt aus der Nacht: Tinte, Kobalt für die blaue Stunde, Nebel, Beton, Knochen und Natrium als Signal. Auf Natrium steht Tinte statt Weiß, damit der Kontrast reicht. Für Headlines und Text arbeitet die Seite mit Hanken Grotesk, für Preise und Labels mit Martian Mono. Schriften und Skripte liegen auf dem eigenen Server.

(09)

Stückliste

Die Zahlen stammen aus der Live-Seite und lassen sich dort nachzählen.

(10)

Was das für dein Projekt heißt

Ein Drop hat ein kurzes Fenster. Wer in dieser Zeit zögert, weil die Seite lädt, die Größe unklar ist oder der Korb hakt, kauft woanders oder gar nicht. Eine starke Bildsprache holt die Leute auf die Seite, aber erst ein kurzer Weg macht daraus Bestellungen. Genau diese Verbindung bauen wir: eine Marke, die man wiedererkennt, und ein Shop, der vom ersten Bild bis in den Korb nicht im Weg steht.

Wenn deine Marke mehr Haltung hat, als dein Shop zeigt, sprich mit uns über deinen Online-Shop oder deine Website.