Sommersalon Hamburg

Hintergrund

Der Sommersalon ist Bar, Club und Veranstaltungsort in einem, im Erdgeschoss des Klubhaus St. Pauli direkt am Spielbudenplatz. Unter der Woche Cocktails und Happy Hour, am Wochenende Partys bis in den Morgen, dazwischen Formate wie ein Mario-Kart-Turnier am Donnerstag.

Die Website hatte dabei gleich mehrere Aufgaben: zeigen, was in den nächsten Tagen passiert, Tische vergeben, Anfragen für private Feiern annehmen und Gäste, DJs und Lieferanten an die richtige Stelle schicken. Das Redesign sollte all das auf einer Seite zusammenbringen. Pflegen sollte der Kunde die Seite danach selbst, ohne dafür jemanden anrufen zu müssen.

Partys selbst anlegen

Kern der Seite ist ein eigenes CMS. Darin legt der Kunde jede Veranstaltung an, mit Datum, Uhrzeit, Kategorie, Beschreibung und Flyer. Den Rest erledigt die Seite: Die nächsten Termine landen auf der Startseite, jede Veranstaltung bekommt eine eigene Detailseite, und vergangene Termine verschwinden aus der Übersicht.

Die Karten übernehmen den Flyer als Hintergrund, wenn es einen gibt, und fallen sonst auf eine der Hausfarben zurück. So sieht die Startseite auch dann fertig aus, wenn für eine Veranstaltung noch kein Motiv da ist. Auf der Übersichtsseite filtern Chips nach Kategorie, und Hinweise wie „Fast ausgebucht" stehen direkt auf der Karte, wo sie den Ausschlag geben.

Die Detailseiten beantworten die Fragen, die vor einem Abend gestellt werden: wann Einlass ist, ob der Eintritt etwas kostet, ob es einen Dresscode gibt. Daneben steht der Weg zum Tisch.

Das Reservierungstool

Tischreservierungen laufen über ein selbst gebautes Tool statt über einen fremden Buchungsdienst. Die Reservierung ist in drei Schritte geteilt: Datum und Zeit, Kontaktdaten, Bestätigung. Im ersten Schritt steht alles, was über die Verfügbarkeit entscheidet, auf einem Blick nebeneinander: Kalender, Uhrzeiten und Personenzahl.

Reservierungstool

Die Zeitslots richten sich nach den Öffnungszeiten des jeweiligen Tages. Späte Slots nach Mitternacht sind als „Folgetag" gekennzeichnet, damit niemand für den falschen Abend bucht. Ist ein Tag voll, sagt die Seite das sofort im Kalender, statt erst nach dem Ausfüllen des Formulars. Für Gäste bleibt die Reservierung kostenlos und bis drei Stunden vorher stornierbar.

Kontaktwege

Bei einem Club schreiben nicht nur Gäste. DJs fragen nach Terminen, Lieferanten nach Ansprechpartnern, Firmen nach der Weihnachtsfeier. Das Kontaktformular fragt deshalb zuerst, wer schreibt: Gast, Künstler oder DJ, Lieferant oder Sonstiges. So kommt jede Nachricht sortiert an.

Kontakt

Private Feiern haben einen eigenen Einstieg. Der Abschnitt „Dein Event im Sommersalon" spricht Geburtstage, Hochzeiten und Firmenfeiern direkt an und führt zur Anfrage. Dazu kommen Öffnungszeiten, bei denen der heutige Tag hervorgehoben ist, eine Karte des Kiezes und ein FAQ zu den häufigsten Fragen.

Design

Die Gestaltung nimmt die Farben aus dem Logo auf: ein kräftiges Orange, dazu Cyan als Gegenfarbe, und viel Schwarz für die dunklen Abschnitte. Überschriften stehen in fetten Versalien, teils kursiv, teils auf farbige Flächen gesetzt, wie auf einem Partyplakat. Die Buttons tragen einen versetzten Schatten in Cyan, der sich durch die ganze Seite zieht.

Oben auf der Startseite läuft ein Video aus dem Laden. Wer die Seite öffnet, sieht zuerst, wie ein Abend dort aussieht, und direkt darunter die beiden Wege, um die es geht: reservieren oder Events ansehen.

Umsetzung

Gebaut ist die Seite mit Nuxt und Tailwind CSS und wird serverseitig gerendert. Das ist für Veranstaltungen wichtig: Jede Party hat eine eigene URL mit fertigem HTML, die Suchmaschinen und Messenger-Vorschauen sofort lesen können. CMS und Reservierungstool gehören zur selben Anwendung, sodass eine neue Party ohne Umweg auf der Seite steht.

Ergebnis

Die Seite ist unter sommersalon.de live. Der Kunde legt seine Partys selbst an, Tische werden online vergeben, und Anfragen kommen sortiert an.