Rolle: UI/UX Designer · Brand Experience · Visual Design
Design Direction
Für Nocturne, eine Marke für exklusive, handwerklich hergestellte dunkle Schokolade, habe ich ein digitales Markenerlebnis entwickelt, das Eleganz, Minimalismus und hochwertige Materialästhetik miteinander verbindet. Das Ziel war, den Premium-Charakter des Produkts durch ein visuell ruhiges, dunkles Interface und präzise typografische Gestaltung erlebbar zu machen.
Designansatz
Die Gestaltung basiert auf einer reduzierten, hochwertigen visuellen Sprache:
- Dunkle, matte Farbwelten, inspiriert von Kakao, Stein und handwerklichen Oberflächen
- Feine goldene Akzente als visuelle Analogie zu Exklusivität und Herkunft
- Grosszügige Typografie im klassischen Serif-Stil, um Wertigkeit und Ruhe auszustrahlen
- Klar strukturierte Layouts, die den Produkten maximalen Fokus geben
- Feine goldene Akzente als visuelle Analogie zu Exklusivität und Herkunft
- Grosszügige Typografie im klassischen Serif-Stil, um Wertigkeit und Ruhe auszustrahlen
- Klar strukturierte Layouts, die den Produkten maximalen Fokus geben
Produktinszenierung
Die Startseite inszeniert die Schokolade als luxuriöses Objekt. Über hochwertige Produktfotografie, sorgfältig gesetzte Lichtstimmungen und eine dezente Farbpalette entsteht eine Atmosphäre, die Vertrauen, Authentizität und Handwerk vermittelt. Das gesamte Interface wurde so gestaltet, dass Materialität, Textur und Qualität der Produkte unmittelbar spürbar werden.
UX & Struktur
Ich entwickelte eine klare Navigationsarchitektur:
- Fokus auf Collections, Story und Origin
- Übersichtliche Produktkacheln mit Preis- und Variantenlogik
- Harmonisches Gleichgewicht zwischen visuellem Storytelling und E-Commerce-Usability
- Konsistente Microinteractions und dezente Hover-Übergänge
- Übersichtliche Produktkacheln mit Preis- und Variantenlogik
- Harmonisches Gleichgewicht zwischen visuellem Storytelling und E-Commerce-Usability
- Konsistente Microinteractions und dezente Hover-Übergänge
Technische Gestaltung
- Entwicklung eines modularen Design Systems (Typografie-Skala, Farbvariablen, Komponenten)
- Einsatz eines responsiven Grid-Systems für flüssige Darstellung auf Desktop, Tablet und Mobile
- Optimierte Produktbilder (WebP/Retina) für hohe Performance
- Barrierearme Kontraste und klare semantische Struktur
- Einsatz eines responsiven Grid-Systems für flüssige Darstellung auf Desktop, Tablet und Mobile
- Optimierte Produktbilder (WebP/Retina) für hohe Performance
- Barrierearme Kontraste und klare semantische Struktur
Ergebnis
Die Website vermittelt die Marke Nocturne als modern, exklusiv und handwerklich präzise. Durch die reduzierte Gestaltung rückt das Produkt selbst in den Mittelpunkt, während das Interface die Marke mit Zurückhaltung, Eleganz und visueller Tiefe präsentiert.
