Salon Wirbel

Aufgabe

Kleine Salons und Praxen in Essen und im Ruhrgebiet nehmen Termine oft nur telefonisch an oder schicken Kundinnen auf eine Buchungsplattform mit fremder Marke und Provision. Ich wollte zeigen, wie ihre eigene Website aussehen kann, mit einer Buchung, die ohne Anruf funktioniert. Das ist ein Musterprojekt: Salon, Adresse und Team sind erfunden, die Fotos sind KI-Platzhalter. Die Buchung ist echt.

Rolle

Konzept, Art Direction, Design, Entwicklung, Buchungs-Backend

Was ich gemacht habe

• Art Direction: ein ehrlicher Blick darauf, was Salon-Websites in Deutschland meist falsch machen, ein Moodboard mit Paletten und Schriftpaaren, drei mutige Layout-Richtungen, dann je drei Varianten für Kopf und Fuß der Seite. Die fertige Website nimmt das Beste daraus: ein riesiges ziegelrotes „Wirbel“ mit einem runden Spiegel im Duoton hinter den Buchstaben, eine dunkle Preisliste, in der die Länge eines Balkens die Dauer zeigt, und ein dunkler Footer mit einem übergroßen, angeschnittenen Schriftzug.
• Eine Website, die weiß, wie spät es ist. Ein langsames Laufband oben sagt, ob der Salon gerade geöffnet hat, und zeigt die nächste freie Zeit aus der Buchung; unter dem Mauszeiger hält es an und hat eine Pause-Taste. Vor dem Footer eine Uhr für Essen mit dem aktuellen Status und einem Button direkt zu dieser Zeit. Die Navigation schwebt und bleibt beim Scrollen griffbereit.
• Online-Buchung in drei Schritten, die live funktioniert: Leistungen wählen, dann Person, Tag und freie Zeit, dann Name und E-Mail. Der Server prüft, ob die Zeit noch frei ist, und zur Bestätigung gibt es eine .ics-Datei für den Kalender. Demo-Buchungen werden gespeichert, E-Mails werden nicht verschickt.
• Deutsche, englische und ukrainische Version, der Salon spricht ruhig und menschlich, ohne erfundene Bewertungen oder Sterne.
• Datenschutz nach DSGVO von Anfang an: keine Tracker und keine Anfragen an fremde Server, Schriften liegen auf der eigenen Website.
• Bewegung nur dort, wo sie etwas tut: Der gewählte Tag rastet ein, um die gewählte Zeit läuft eine Linie, bevor sie sich füllt, die Summe zählt hoch, und die Spirale wächst mit jedem Schritt um eine Windung und schließt sich bei der Bestätigung. Mit „Bewegung reduzieren“ bleibt alles ruhig. Lighthouse auf dem Smartphone: 97 für Leistung, 100 für Barrierefreiheit und Best Practices.

Ergebnis

Die Demo funktioniert wirklich: Buchen Sie selbst einen Termin. Genauso kann die Buchung auf der Website Ihres Salons oder Ihrer Praxis laufen.

Werkzeuge

HTML, CSS, JavaScript · Cloudflare Workers, KV · Piazzolla, Commissioner