Ein Maison-Storefront vom Kampagnenbild bis zur Bestellnummer

MAISON ÉLAN ist unsere Antwort auf ein Problem, das jedes Modehaus kennt: Die Marke ist auf dem Kampagnenbild kompromisslos — und ab der Kategorieseite übernimmt das Shopsystem. Filter, Warenkorb und Kasse sehen dann aus wie überall.

Wir haben die Strecke deshalb komplett selbst gebaut: von der Kampagne über Katalog und Produktseite bis zur Bestellbestätigung, ohne Shop-Template im Rücken. Nur so lässt sich prüfen, ob eine Luxus-Handschrift auch dort trägt, wo Formulare, Fehlermeldungen und Ladezustände liegen.

Die Typografie ist die Marke: eine klassische Renaissance-Antiqua für alle Überschriften, eine schmale Grotesk mit 14 Pixel Basisgröße für den Text. Jede große Headline folgt derselben Regel — erste Zeile Versalien, zweite Zeile kursive Antiqua („THE ART / of restraint“). Das Muster wiederholt sich in Hero, Abschnittstiteln, 404 und Bestellbestätigung.

Farblich bleibt fast alles Elfenbein und Tinte. Ein einziges Bordeaux übernimmt Hover-Flächen, Fokusrahmen und Textmarkierung — und taucht als Produktfarbe wieder auf, so dass die Kollektion und die Oberfläche dieselbe Palette teilen.

Bewegung kommt ohne Animationsbibliothek aus: Scroll-Reveals laufen über einen eigenen IntersectionObserver, alles Weitere über CSS-Übergänge auf einer gemeinsamen Beschleunigungskurve. Das hält die Seite leicht und die Bewegung überall gleich.

Der Katalog filtert über sieben Gruppen — Kategorie, Größe, Farbe, Material, Kollektion, Verfügbarkeit und Preis — mit Trefferzahl pro Facette, Mehrfachauswahl, Zähler auf dem Filter-Button und echter Preisband-Logik. Dazu Sortierung, ein Umschalter zwischen drei- und vierspaltigem Raster und ein Nachladen in Schritten, das den Fortschritt anzeigt und währenddessen Skelett-Karten stehen lässt.

Die Produktseite baut aus zwei Produktbildern sechs Ansichten, die im Vollbild-Betrachter mit Zähler und Blättern liegen. Farbfelder und Größen sind als echte Auswahlgruppen ausgezeichnet; ohne Größe wird die Warenkorb-Aktion blockiert und erklärt sich inline. Dazu eine Größentabelle als Schublade, fünf Aufklapp-Abschnitte inklusive Rückverfolgbarkeit und eine feste Warenkorb-Leiste auf dem Handy.

Die Kasse läuft über Kontakt, Lieferung, Verpackung und Zahlung. Jeder Schritt validiert seine Felder einzeln, die Kartennummer formatiert sich beim Tippen in Vierergruppen, alle Felder tragen die richtigen Autofill-Angaben, die Expresslieferung schlägt sich sofort in der Summe nieder, die Geschenknachricht zählt ihre Zeichen mit — und man kann nur zu bereits erledigten Schritten zurückspringen, nie vorwärts. Am Ende steht eine Bestellnummer nach festem Schema und eine eigene Bestätigungsseite.

Kundenkonto, Wunschliste und Bestellverlauf vervollständigen die Strecke: Anmeldung, Registrierung und Passwort-Reset teilen sich eine Komponente mit drei Modi, Bestellungen zeigen einen vierstufigen Statusverlauf, und ein Termin lässt sich wahlweise in der Boutique oder per Video buchen.