Die Idee dahinter
Die DEISTERS Weinbar in Mainz ist mehr als nur ein Ort, an dem Wein ausgeschenkt wird, denn hier geht es vor allem um Genuss, hochwertige Kulinarik und eine gemütliche Atmosphäre. Mir war von Anfang an wichtig, genau diese physische Erfahrung in den digitalen Raum zu übersetzen. Die Website sollte nicht einfach nur informieren, sondern direkt beim Aufrufen das Gefühl geben, abends in der Bar zu sitzen und die Weinkarte zu studieren.
Design in dunkler Eleganz
Anstatt eines klassischen, hellen Layouts habe ich mich ganz bewusst für einen durchgehenden Dark Mode entschieden. Ein tiefes Schwarz (#0a0a0a) dominiert den Hintergrund, kombiniert mit champagner-goldenen Akzenten (#c5a47e) für Buttons und Links. Diese Kombination transportiert genau die Wärme und Wertigkeit, die man auch vor Ort spürt.
Damit man längere Texte wie etwa die Speisekarte problemlos auf dem Handy lesen kann, habe ich keinen reinen weißen Text verwendet, sondern ein weiches, gebrochenes Weiß (#e8e8e8). Das schont die Augen ungemein.
Um eine Brücke zwischen Tradition und Moderne zu schlagen, mixe ich bei den Schriften die sehr elegante Serifenschrift Playfair Display für die großen Überschriften mit der klaren Sans-Serif Lato für den Fließtext.
Schnelle und flexible Architektur
Bei der technischen Basis habe ich komplett auf schwere CMS-Systeme verzichtet. Die Seite läuft auf dem Static Site Generator Build Awesome in Kombination mit Tailwind CSS. Das sorgt auf der einen Seite für rasante Ladezeiten und erlaubt mir auf der anderen Seite, extrem flexibel Komponenten zu bauen.
Damit der Inhaber von DEISTERS trotzdem selbstständig die Weinkarten und Angebote aktualisieren kann, arbeitet im Hintergrund Decap CMS als Headless-Lösung. Technologischer Minimalismus im Code bedeutet hier voller Komfort für den Redakteur.
Lebendig durch kleine Details
Ein modernes Design zeichnet sich durch das aus, was bei der Interaktion passiert. Ich habe kleine Mikrointeraktionen eingebaut, die der Seite Leben einhauchen, ohne den Nutzer dabei zu nerven.
Beim Scrollen blenden Service-Karten sanft ein. Wenn man mit der Maus über die Hauptnavigation fährt, zieht sich eine feine goldene Linie darunter. Ein besonders schönes Feature sind die interaktiven Elemente, denn wenn man auf dem Desktop über bestimmte Boxen fährt, gibt es einen sanften Zoom und ein goldenes Overlay blendet den Text ein.
Ein weiteres Detail, das mir bei der Usability wichtig war, betrifft die Kategorien der Speisekarten. Elemente wie Weißwein oder Rotwein heften sich beim Scrollen oben an den Bildschirmrand. So verliert man auch in langen Handylisten nie die Orientierung.
Performance und SEO unter der Haube
Echtes Premium-Design endet nicht beim Aussehen. Deshalb werden alle Bilder über das Build Awesome Plugin automatisch in moderne, platzsparende WebP-Formate konvertiert und je nach Bildschirmgröße passend geladen. Die wichtigen Schriften lade ich per preload vorab, damit es kein unschönes Flackern beim Seitenaufbau gibt.
Unsichtbar im Hintergrund arbeitet zudem ein strukturiertes Daten-Markup. Dadurch verstehen Suchmaschinen sofort, dass es sich um eine lokale Bar handelt und können Öffnungszeiten und Adresse fehlerfrei direkt in den Google-Ergebnissen anzeigen.
Fazit
Das Projekt hat mir gezeigt, dass sich Performance und emotionales Design nicht ausschließen müssen. Durch den bewussten Einsatz eines Dark Themes, klassischer Typografie und durchdachten Interaktionen fängt die Website genau das ein, wofür DEISTERS steht, nämlich höchste Qualität, kompromisslosen Genuss und ein Auge fürs Detail.
