Root & Ritual Ein Shop wie ein Feldtagebuch

01 · Überblick

Ein Shop, der sich wie ein Feldtagebuch verhält

Hautpflege-E-Commerce hat einen Standard: ein weißes Raster aus Tiegeln mit einem Rabatt-Badge. Für dieses Konzept habe ich mir eine Marke vorgestellt, die ihre eigene Ringelblume, Brennnessel und Kartoffelrose auf zwei Morgen zieht und vierunddreißig Tiegel pro Charge abfüllt. Ein weißes Raster würde genau das plattmachen, was sie überhaupt kaufenswert macht.

Also ist die Seite warmes Papier mit einem Fraktalrauschen, das fest über der ganzen Fläche liegt, die Platten sind bogenförmig wie die Produktfotografie, und die Reveals setzen sich aus einer Drehung von zwei Grad. Nichts kommt perfekt gerade an, weil hier nichts maschinell gemacht ist.

02 · Die Idee

Knappheit, die man zählen kann

Das erfundene Briefing verlangte, dass jede Charge nummeriert ist und jeder Tiegel einer von vierunddreißig — eine Vorgabe, um die herum gestaltet wird, kein Marketingmittel. Also behandelt die Seite die Zahl als Inhalt: Sie erscheint im Titelkopf, auf dem Produktregal und in der letzten Zeile des Fußbereichs.

• Der Bogen

  Eine einzige Form, border-radius: 50% 50% 0 0, verwendet auf Platten, Produktkarten und dem Hero. Es ist das gesamte Ornamentvokabular der Seite.

• Korn über allem

  Ein feTurbulence-Filter, fest über dem Hintergrund. Inline, es kostet also eine Deklaration und keine einzige Anfrage.

• Nichts landet gerade

  Reveals setzen sich aus minus zwei Grad, und Karten neigen sich unter einem feinen Zeiger sehr leicht. Beides verschwindet unter reduzierter Bewegung vollständig.

03 · Ziele

Was die Seite leisten musste

1. Vier Produkte ordentlich verkaufen

   Ein Bestseller-Regal mit echten Inhaltsstoffen, Chargennummern und Preisen, statt eines Rasters aus Miniaturen und einer Filterleiste.

2. Die Geschichte des Feldes einmal erzählen

   Ein Feld, jeder Tiegel — der Herkunftsabschnitt, der den Preis rechtfertigt, platziert vor dem Shop statt danach.

3. Das Ritual beibringen

   Eine Abendfolge in vier Schritten, denn das Produkt wirkt nur, wenn jemand es in der richtigen Reihenfolge benutzt.

4. 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 · Baureihenfolge

Wie es gebaut wurde

Der Build folgte der Reihenfolge, in der die Seite gelesen wird: zuerst die Palette, dann die Zeichnungen, dann das Papier, auf dem sie alle liegen, dann die zwei Verhaltensweisen, die daraus einen Shop machen.

1. Die Palette aus dem Feld

   Achtzehn Custom Properties auf :root, von den Pflanzen selbst abgenommen — Hafer, Espresso, Moos, Salbei, Tan und Creme, dazu ein vertieftes Moos für alles, was gelesen werden muss.

2. Sechsundvierzig Inline-SVGs

   Schnörkel, Blätter, die wellige Unterstreichung, jedes Icon und das Siegel. Nichts gerastert, nichts aus einem Icon-Satz.

3. Die Kornschicht

   Fest, pointer-events none, über dem Hintergrund und unter dem Inhalt, mit einer Deckkraft niedrig genug, um sich wie Papier anzufühlen statt wie Rauschen.

4. Das Bogensystem

   Ein Radius-Token in drei Größen angewendet — Hero, Platte, Produktkarte —, damit die Form als System liest und nicht als Verzierung.

5. Warenkorb und Akkordeon

   In-den-Warenkorb mit einem Wiedereintrittsschutz, damit ein Doppelklick nicht zweimal hinzufügt, und eine FAQ, die immer nur eine Antwort offen hält.

05 · Architektur

Drei Dateien

Es gibt keinen Bundler und keinen Icon-Satz. Das Korn, das Siegel, die Blätter und jedes Icon sind im Markup selbst gezeichnet; die einzigen Binärdaten, die die Seite anfragt, sind die Fotografien und zwei selbst gehostete Schriften.

06 · Was sich gewehrt hat

Probleme, und was sie gelöst hat

1. Problem

   Eine seitenfüllende Kornauflage ist ein festes Element über dem Viewport, und das ist der klassische Weg, jeden Link einer Site unklickbar zu machen.

   Lösung

   pointer-events none auf der Schicht, und sie liegt unter dem Inhalt statt darüber. Das Korn ist über dem Hintergrund sichtbar und nie über einem Bedienelement.

2. Problem

   Mausgeführte 3D-Neigung auf Produktkarten bedeutet einen Listener und eine Transformation pro Karte. Bei einem ganzen Regal ist das sehr viel Arbeit pro Frame für einen dekorativen Effekt.

   Lösung

   Die Neigung ist eine CSS-Hover-Transformation hinter Hover, feinem Zeiger und einer no-preference-Abfrage für reduzierte Bewegung. Kein Listener, keine Frame-Kosten, und auf Touch existiert sie überhaupt nicht.

3. Problem

   Moosgrün auf Hafer sieht richtig aus und misst falsch. Der Mittelton, den ich für die Marke gewählt hatte, fiel auf den Salbeiflächen auf 4,30:1 — unter AA für die Eyebrow-Labels, die dort sitzen.

   Lösung

   Zwei Grüntöne. Das hellere Moos füllt Formen und Linien; ein vertieftes Moos trägt jeden Akzenttext bei 4,64:1, und Weiß auf Moos hat an Kontrast gewonnen statt verloren, von 5,79:1 auf 6,25:1. Die Palette sieht unverändert aus und besteht.

4. Problem

   In-den-Warenkorb löste bei jedem Klick aus, also fügte ein Doppelklick still zwei Tiegel aus einer Charge von vierunddreißig hinzu.

   Lösung

   Ein Wiedereintrittsschutz auf der Taste, der wiederholte Betätigungen ignoriert, bis die Bestätigung in der Live-Region angesagt wurde. Die Rückmeldung und die Sperre teilen sich einen Zustand.

07 · Behaltenswert

Die Teile, die es wert sind zu bleiben

• Das Bestseller-Regal

  Vier bogenförmige Karten mit Inhaltsstoffen, Chargennummern und Preisen. Ein Regal, kein Raster.

• Ein Feld, jeder Tiegel

  Der Herkunftsabschnitt, vor dem Shop platziert, damit der Preis Sinn ergibt, wenn man dort ankommt.

• Das Abendritual

  Vier Schritte mit von Hand gezeichneten Marken — das Nächste, was eine Webseite der Anleitungskarte in der Schachtel kommt.

• Charge Nr. 34 wird gerade abgefüllt

  Eine Fußzeile, die sich mit der Charge ändert — der erfundene Warenbestand, durchgezogen bis zum allerletzten Wort der Seite.

08 · Live starten

Hier starten

Der echte Build, eingebettet und laufend. Es wird nichts davon geladen, bevor du es verlangst — die Seite, die du gerade liest, bleibt also so leicht, wie sie aussieht.

rootandritual.com

Hier starten

Der echte Build, laufend in der Seite. Die Live-Vorschau ist eine eingebettete Seite. Drücke Escape, um sie zu verlassen.

Im Vollbild öffnen