01 · Überblick
Ein Shop, der sich wie ein Feldtagebuch verhält
Hautpflege-E-Commerce hat einen Standard: ein weißes Raster aus Tiegeln mit Rabatt-Badge. Für dieses Konzept habe ich mir eine Marke vorgestellt, die ihre eigene Ringelblume, Brennnessel und Rugosa-Rose auf zwei Acres anbaut und vierunddreißig Tiegel pro Charge abfüllt. Ein weißes Raster würde genau das einebnen, was den Kauf überhaupt rechtfertigt.
Also ist die Seite warmes Papier mit einem Fractal-Noise-Korn über der ganzen Fläche, die Bildtafeln schließen bogenförmig ab wie die Produktfotografie, und die Einblendungen setzen sich aus einer Zwei-Grad-Drehung — nichts kommt perfekt rechtwinklig an, weil hier nichts maschinell gefertigt ist.
02 · Die Idee
Knappheit, die man zählen kann
Das fiktive Briefing verlangte, dass jede Charge nummeriert ist, jeder Tiegel einer von vierunddreißig — eine Randbedingung zum Entwerfen, kein Marketinginstrument. Die Seite behandelt die Zahl deshalb als Inhalt: Sie erscheint im Masthead, im Footer und im Produktregal.
Der Bogen
Eine einzige Form — border-radius: 50% 50% 0 0 — auf Bildtafeln, Produktkarten und im Hero. Sie ist das gesamte Ornamentvokabular der Seite.
Korn über allem
Ein SVG-feTurbulence, fixiert über der Seite. Inline, es kostet also eine Zeile Markup und keinen einzigen Request.
Nichts landet rechtwinklig
Einblendungen setzen sich aus −2°, und Karten kippen unter einem feinen Zeiger ganz leicht. Beides verschwindet unter Reduced Motion vollständig.
03 · Ziele
Was die Seite leisten musste
Vier Produkte richtig verkaufen
Ein Bestseller-Regal mit echten Inhaltsstoffen und echten Preisen, kein Raster aus Thumbnails mit Filterleiste.
Die Geschichte des Feldes einmal erzählen
Ein Feld, jeder Tiegel — die Herkunftssektion, die den Preis rechtfertigt, vor dem Shop platziert statt danach.
Das Ritual lehren
Eine Abendsequenz in vier Schritten, denn das Produkt wirkt nur, wenn jemand es in der richtigen Reihenfolge benutzt.
Eine E-Mail-Adresse annehmen, ohne zu betteln
„Langsame Briefe, erste Ernten“ — ein Abo-Block, der benennt, was ankommt, statt einen Rabatt zu versprechen.
04 · Bauablauf
Wie es gebaut wurde
Die Palette vom Feld
Zwanzig Custom Properties, den Pflanzen selbst entnommen: Hafer, Espresso, Moos, Salbei, Tan, Creme und ein vertieftes Moos für alles, was gelesen werden muss.
Sechsundvierzig Inline-SVGs
Schnörkel, Blätter, die gewellte Unterstreichung, jedes Icon und das Siegel. Nichts gerastert, nichts aus einem Icon-Set.
Die Kornschicht
Fixiert,
pointer-events: none, über dem Hintergrund und unter dem Inhalt, mit einer Deckkraft, die niedrig genug ist, um nach Papier statt nach Rauschen auszusehen.Das Bogensystem
Ein Radius-Token in drei Größen angewendet — Hero, Bildtafel, Produktkarte —, damit die Form als System lesbar ist statt als Schnörkel.
Warenkorb und Akkordeon
In-den-Korb mit Wiedereintrittsschutz, damit ein Doppelklick nicht doppelt hinzufügt, und ein FAQ, das eine Antwort offen hält.
05 · Architektur
Drei Dateien
├── index.html 40.0 KB — 6 Sektionen, 10 Fotografien, 46 Inline-SVG
├── styles.css 31.6 KB — 20 Custom Properties, 5 Media Queries
└── script.js 9.3 KB — 299 Zeilen: Header · Nav · Reveals · Tilt · Warenkorb · Akkordeon
Der Stack
- feTurbulence
- CSS Grid
- 3D tilt
- Inline SVG
- IntersectionObserver
- Prata
- Nunito Sans
Barrierefreiheit
- aria-live basket
- aria-expanded
- Focus move on anchor
- pointer: fine gate
- Reduced motion
06 · Was sich gewehrt hat
Was sich gewehrt hat
Ein ganzseitiges Korn-Overlay ist ein fixiertes Element über dem Viewport — der klassische Weg, jeden Link einer Website unklickbar zu machen.
pointer-events: none auf der Schicht, und sie sitzt auf einem z-index unter dem Inhalt statt darüber. Das Korn ist über dem Hintergrund sichtbar und nie über einem Bedienelement.
Mausverfolgtes 3D-Kippen auf Produktkarten heißt ein Listener und ein Transform pro Karte — bei einem ganzen Regal ist das viel Arbeit pro Frame für einen dekorativen Effekt.
Das Kippen ist ein CSS-Hover-Transform hinter (hover: hover) and (pointer: fine) und prefers-reduced-motion: no-preference. Kein Listener, keine Frame-Kosten, und auf Touch existiert es schlicht nicht.
Moosgrün auf Hafer sieht richtig aus und misst sich falsch: Der Mittelton, den ich für die Marke gewählt habe, fällt beim Kontrast in Fließtextgröße durch.
Zwei Grüntöne. Das hellere Moos füllt Flächen und Linien; ein vertieftes Moos trägt jeden Akzenttext. Die Palette sieht unverändert aus — und besteht.
In-den-Korb feuerte bei jedem Klick — ein Doppelklick legte also still zwei Tiegel aus einer Charge von vierunddreißig hinein.
Ein Wiedereintrittsschutz auf dem Button, der wiederholtes Drücken ignoriert, bis die Bestätigung in der Live-Region angekündigt wurde — Feedback und Sperre teilen sich einen Zustand.
07 · Was bleibt
Die Teile, die bleiben
Das Bestseller-Regal
Vier bogenförmig abschließende Karten mit Inhaltsstoffen, Chargennummern und Preisen — ein Regal, kein Raster.
Ein Feld, jeder Tiegel
Die Herkunftssektion, vor dem Shop platziert — wenn Sie dort ankommen, ergibt der Preis bereits Sinn.
Das Abendritual
Vier Schritte mit handgezeichneten Markierungen — näher kommt eine Webseite einer Anleitungskarte in der Schachtel nicht.
Charge Nr. 34 wird gerade abgefüllt
Eine Footer-Zeile, die sich mit der Charge ändert — der fiktive Bestand, durchgezogen bis zum allerletzten Wort der Seite.
08 · Live starten
Hier ausprobieren
Der echte Build, eingebettet und lauffähig. Er lädt erst auf Abruf — nichts wird geholt, bevor Sie es anfordern.
Live-Vorschau überspringen
Der echte Build, direkt in der Seite. Die Live-Vorschau ist eine eingebettete Seite; mit Escape verlassen Sie sie.
Im Vollbild öffnen ↗
