ArikonsBARRON
Luxuriöse Markenwebsite für eine Premium-Duft- und Reinigungsmarke
Wenn ein Produkt noch keine Fotos hat — und trotzdem Luxus ausstrahlen muss
BARRON ist eine neue Premium-Marke für hochwertige Düfte und Reinigungsprodukte. Das Ziel: eine Website bauen, die auf den ersten Blick kommuniziert, wofür die Marke steht — Qualität, Exklusivität, Stil. Das Problem: Es gab noch keine professionellen Produktfotos.
Die Lösung war, alles aus der Designsprache selbst zu holen. Eine warme Rosé-Gold-Farbpalette, klassische Typografie (Bodoni Moda für Headlines, Outfit für Fließtext), sorgfältig ausgewählte Abstände und ein Custom Cursor, der beim Hover über Produkte zu einem Einkaufskorb-Symbol wird. Das Ergebnis: Eine Seite, bei der man sofort das Gewicht des Produkts zu spüren glaubt — obwohl man es nicht sehen kann.
Alles in einer einzigen HTML-Datei. Kein Framework, kein Build-Schritt, null Abhängigkeiten. Reine Performance.
Luxus kommunizieren, ohne Produktfotos zu haben
Eine Premiummarke zu positionieren ist schwer genug. Es ohne echte Produktfotografie zu tun, ist eine gestalterische Hochseilakt-Übung. Jedes Detail auf der Seite muss die Botschaft transportieren, die ein gutes Produktfoto in Millisekunden liefern würde: Das hier ist hochwertig. Das hier ist es wert.
Gleichzeitig musste die Seite technisch makellos sein. Premium-Kunden tolerieren keine langen Ladezeiten, keine Ruckler bei Animationen, keine falsch gesetzten Abstände auf dem Handy. Die Latte lag von Anfang an sehr hoch.
-
Keine Produktfotografie verfügbar Die gesamte visuelle Sprache der Marke musste aus Farben, Typografie, Layout-Rhythmus und Micro-Interactions destilliert werden. Design musste das leisten, was Fotos normalerweise übernehmen.
-
Performance und Luxus gleichzeitig Animationen, 3D-Tilting, Custom Cursor, Parallax-Effekte — all das kostet Rechenleistung. Trotzdem wurde ein Lighthouse-Score von 100 gefordert. Beide Ziele gleichzeitig zu erreichen, erfordert präzises technisches Handwerk.
-
Zukünftige E-Commerce-Integration vorbereiten Die Seite sollte heute als Marken-Showcase funktionieren und morgen als echte Shopfront einsatzbereit sein — ohne kompletten Umbau. Die Architektur musste von Anfang an skalierbar sein.
12 Sektionen, eine Datei, null Kompromisse
Die Grundentscheidung war klar: kein Framework, kein CMS, kein Build-Tool. Handgeschriebener Code bedeutet vollständige Kontrolle über jeden Pixel, jede Animation, jede Millisekunde Ladezeit. 696 Zeilen, die jede Anforderung erfüllen — von der barrierefreien Navigation bis zum 3D-Tilt-Effekt auf Produktkarten.
Die Farbwelt um Rosé-Gold (warm, hochwertig, zeitlos) kombiniert mit Bodoni Moda — einer klassischen Serifenschrift — gibt der Marke sofort eine Charakterkarte. Outfit als Kontrast-Schrift für lesbare Fließtexte. Das Zusammenspiel der beiden Fonts kommuniziert: Heritage trifft Moderne.
Rosé-Gold Design System
Vollständiges CSS Custom Properties System mit warmen Rosé-Gold-Akzenten, Shimmer-Effekten auf Hover und einem Goldgradient für alle primären Elemente. Konsistent über alle 12 Sektionen.
Custom Cursor mit Follower-Effekt
Maßgeschneiderter Cursor für Desktop: ein kleines Hauptelement und ein träge nachfolgender Kreis. Beim Hover über Produktkarten verwandelt er sich in ein Warenkorb-Icon — subtil, elegant, wirkungsvoll.
3D Mouse-Tracking auf Produktkarten
Produktkarten reagieren auf Mausbewegungen mit einem echten 3D-Tilt-Effekt via CSS perspective und transform. Gibt dem Produkt physisches Gewicht — auch ohne Foto.
11 Animationstypen im Reveal-System
IntersectionObserver-basiertes System mit 11 verschiedenen Animationsklassen (fade, slide-up, slide-left, scale, rotate, blur, etc.). Jede Sektion erhält die passende Einlauf-Animation.
Vollständiges responsives Design
Drei sauber definierte Breakpoints. Hover-Effekte degradieren gracefully auf Touch-Geräten. Der Custom Cursor wird automatisch deaktiviert. Das 3D-Tilting wird durch einen dezenten Box-Shadow ersetzt.
Vollständiges SEO & Accessibility
Schema.org Markup (Organization + WebSite), vollständige OG/Twitter-Tags, semantisches HTML5, ARIA-Labels, Skip-Link, focus-visible Styles, prefers-reduced-motion, noscript-Fallback und Print-Stylesheet.
Eine Markenpräsenz, die sofort überzeugt
Die Seite sieht teurer aus als Websites von Marken, die ich kenne, die seit zehn Jahren im Business sind. Genau das wollte ich — und Elian hat es auf Anhieb getroffen. Noch nicht mal Produktfotos und trotzdem will man sofort kaufen.
Ähnliches Projekt starten?
Wenn Ihre Marke eine Website verdient, die so gut aussieht wie das Produkt dahinter — bauen wir sie. Kein Template, kein Baukasten. Handgemacht, schnell, konversionsstark.