Frühschicht

Aufgabe

Websites von Röstereien sind fast austauschbar: Beige und Kraftpapier, Bohnen, die über den Bildschirm fallen, ein Latte von oben auf Holz, „mit Leidenschaft geröstet“ und gleiche Packungen, auf denen sich nur der Name ändert. Ich wollte einen Röstereishop zeigen, den man auch mit verdecktem Logo erkennt und in dem jede Farbe und jede Zahl etwas über den Kaffee sagt. Das ist ein Musterprojekt: Rösterei, Gebäude und Kaffees sind erfunden, Fotos und Packungen sind generiert, verkauft wird nichts.

Rolle

Konzept, Art Direction, Design, Entwicklung, 3D, Verpackung

Was ich gemacht habe

• Art Direction vor dem Code: eine ehrliche Liste der Klischees von Kaffee-Websites, ein Moodboard mit zwei Paletten auf derselben Seite und drei Schriftpaaren. Gewählt: Betongrau mit einem einzigen Kirschrot nur für Aktionen, Farbe erscheint nur als Röstgrad: Ocker, Rost, Dunkelbraun. Die Idee kommt vom Ort: Die Rösterei liegt in einer ehemaligen Waschkaue im Ruhrgebiet, deshalb liest sich die Website wie ein Schichtplan und ein Röstprotokoll.
• Ein ganzer Shop, keine Landingpage: ein Katalog als Regal mit Filtern nach Methode und Geschmack und einem Röstgrad-Regler, der auf einer Kurve läuft, Produktseiten, ein Korb für alle Seiten, eine Demo-Kasse und das Abo Dauerschicht, das die 10 % Ersparnis sofort zeigt. Der Ticker im Kopf zählt bis zur nächsten Röstung und zeigt die Chargennummer, der Fuß ist der Röstplan der Woche: Dienstag und Freitag.
• Eine Packung zum Drehen: Auf der Produktseite ist sie ein 3D-Modell in Three.js. Man zieht daran oder wählt eine Seite, und jede Seite trägt eigene Daten: Etikett, Herkunft, Röstung, Geschmack. Darunter wird die Röstkurve aus den Profildaten gezeichnet, und die Seite der Rösterei legt alle drei Kurven nebeneinander: gleiche Trommel, anderes Ende.
• Eine Brühanleitung, die in der Küche ihre Arbeit macht: V60, Aeropress, French Press oder Espressokocher und die Menge wählen, die Website rechnet Wasser und Temperatur aus und führt dann Schritt für Schritt mit laufendem Timer und Zielgewicht, der Bildschirm bleibt an.
• Packungen mit echten Kaffeedaten wie auf einer guten Specialty-Tüte: Herkunft, Region, Varietät, Aufbereitung, Höhe, Geschmack. Ich habe das Briefing geschrieben und sie in vier Runden mit gpt-image-2 generiert, getrennt auf Deutsch und Ukrainisch. Deutsch, Englisch und Ukrainisch mit eigenen Adressen; die Titelschrift ist bulgarisch und zeichnet д standardmäßig wie ein g, deshalb habe ich Schriftdateien mit den üblichen ukrainischen Buchstabenformen gebaut. „Bewegung reduzieren“ ist überall berücksichtigt.

Ergebnis

Die Demo ist online: Legen Sie eine Packung in den Korb, gehen Sie durch die Kasse und starten Sie selbst den Brühtimer. Bezahlt wird nichts, und nichts verlässt Ihren Browser. Genauso kann eine Rösterei, eine Bäckerei oder ein Teeladen auf der eigenen Website verkaufen, mit eigenem Charakter statt einer Vorlage.

Werkzeuge

Astro, TypeScript, Three.js, View Transitions, Nanostores · gpt-image-2 (bags) · Sofia Sans Extra Condensed, IBM Plex Mono