Soft Hour — Website für ein Nagel- und Spa-Studio

(Auf einen Blick)

Leistungen

• Konzept, Art Direction & Umsetzung
• Logo & Corporate Identity
• Scroll-Choreografie mit GSAP ScrollTrigger & Lenis
• Hero-Video hinter goldenen Lamellen, Rundbogen und Zeichen-Reveal
• Service-Menü, Getränkekarte und Richtlinien als Overlays
• Kontakt- und Gruppenformular, Netlify Forms
• Bild- und Videowelt KI-generiert, Schriften lokal, Reduced-Motion-Fallback

Website für ein Nagel- und Spa-Studio in der Münchner Maxvorstadt: ein Hero-Video hinter goldenen Lamellen, ein Rundbogen, der sich darüberschiebt, und ein Service-Menü, das sich liest wie eine Karte.

Soft Hour ist ein Nagel- und Spa-Studio in der Münchner Maxvorstadt: Maniküre, Pediküre, Nail Art und Head Spa, dazu eine kleine Bar mit Tee und Limonade. In diesem Segment wird ein Termin erst gebucht, wenn die Website überzeugt hat. Wirkt der Salon ruhig und sauber? Was kostet die Behandlung, wie lange dauert sie? Unser Ansatz war eine Website, die die Ruhe des Salons spürbar macht und diese Fragen trotzdem ohne Umweg beantwortet. Die Seite ist öffentlich unter soft-hour.de erreichbar.

Soft Hour ist ein Showcase-Projekt aus unserer Schmiede: Salon, Team, Preise und Bewertungen haben wir für diese Seite entwickelt, Termine werden dort keine vergeben. Bilder und Videos sind KI-generiert, die Seite weist selbst darauf hin. Die Technik dahinter ist echt und läuft so live.

(01)

Ein Video hinter goldenen Lamellen

Die Startseite öffnet mit einem hellen Salon im Video: Spa und Maniküre zugleich, darüber in goldenen Versalien „Eine Stunde, die nur Ihnen gehört.“ Beim Scrollen schließen sich goldene Lamellen über dem Bild, und ein großer Rundbogen schiebt sich nach oben. In ihm baut sich der Satz „Schönheit ist eine Haltung.“ Zeichen für Zeichen auf, während Bilder aus dem Salon hereinschweben. Der Bogen kehrt auf allen Seiten wieder, er ist das Motiv der Marke.

(02)

Leistungen als Karten

„Ein Fest für die Sinne“ stellt die vier Bereiche des Studios vor: Nail Art, Maniküre und Pediküre, Gesicht und Head Spa, Bar und Tee. Die Karten fliegen beim Scrollen nacheinander ein und lassen sich zur Seite wischen. Jede führt direkt weiter, zu den Nagelbehandlungen, zur Bar oder auf die eigene Head-Spa-Seite.

(03)

Räume, die vorbeiziehen

Danach bleibt die Überschrift „Jedes Detail, ein Genuss.“ stehen, und um sie herum ziehen Bilder aus dem Salon vorbei: Pediküre-Plätze, die Bar, eine Schale mit Rosenblättern. Jedes Bild bewegt sich in eigenem Tempo, so entsteht Tiefe, ohne dass ein Karussell bedient werden muss.

(04)

Ein Service-Menü wie eine Karte

Auf „Leistungen & Drinks“ öffnet sich die ganze Preisliste als Overlay: 15 Behandlungen in Hände, Füße und Spa-Rituale, jede mit Dauer und Preis, dazu sechs Extras. Getränkekarte und Richtlinien öffnen sich im selben Stil. Alle Preise und Dauern stehen an einer Stelle im Code und erscheinen auf jeder Seite gleich, eine Änderung genügt.

(05)

Head Spa als eigenes Ritual

Das Head Spa bekommt eine eigene Seite: was es ist, wie das Ritual in Schritten abläuft, ein eigenes Menü, der Raum dazu und am Ende der Weg zur Buchung. So hat das Head Spa einen eigenen Titel für die Suche nach Head Spa in München, statt in einer allgemeinen Leistungsliste unterzugehen.

(06)

Anfragen in Ruhe

Am Ende der Startseite und mehrerer Unterseiten wartet das Kontaktformular auf einem dunklen Bild: Name, E-Mail, ein Anliegen zur Auswahl, von der Terminanfrage bis zum Gutschein, und eine Nachricht. Ein Hinweis bittet darum, keine Gesundheitsdaten zu senden. Für Gruppen und Anlässe gibt es auf der Standortseite ein eigenes Formular. Beide laufen über Netlify Forms.

(07)

Logo und Schrift

Das Logo setzt ein S in einen schmalen Rundbogen, daneben die Wortmarke „Soft Hour“ mit „Nails & Spa“ darunter. Für Überschriften arbeitet die Seite mit Noto Serif Display in feinen Versalien, für Text mit Inter, beide als schlanke Teilmengen auf dem eigenen Server. Die Goldtöne sind bewusst etwas tiefer gesetzt, damit auch kleiner Text auf Greige gut lesbar bleibt. Die Seite setzt keine Cookies und lädt nichts von fremden Servern, deshalb braucht sie keinen Cookie-Banner. Bei reduzierter Bewegung entfallen Scroll-Szenen und Videos.

(08)

Stückliste

Die Zahlen stammen aus der Live-Seite und lassen sich dort nachzählen.

(09)

Was das für dein Projekt heißt

Ein Studio verkauft keine Behandlung, sondern eine Stunde, in der man sich wohlfühlt. Die Website muss dieses Gefühl vorwegnehmen und gleichzeitig nüchtern beantworten, was es kostet und wie man einen Termin bekommt. Genau diese Balance bauen wir: Bild, Schrift und Bewegung für die Stimmung, klare Preise und kurze Wege für die Entscheidung.

Wenn dein Studio mehr Ruhe ausstrahlt, als deine Website zeigt, sprich mit uns über deine Website oder hol dir eine kostenlose Redesign-Preview.