Salon Wirbel
The task
Small salons and practices in Essen and the Ruhr often take appointments only by phone, or send clients to a booking platform with someone else’s brand and a commission. I wanted to show what their own site could look like, with booking that works without a call. This is a sample project: the salon, its address and its team are made up, and the photos are AI placeholders. The booking is real.
Role
Concept, art direction, design, development, booking backend
What I did
- Art direction: an honest look at what German salon sites usually get wrong, a moodboard with palettes and font pairs, three bold layout directions, then three headers and three footers to choose from. The final site takes the best of each: a giant brick-red “Wirbel” with a round duotone mirror hanging behind the letters, a dark price list where the length of a bar shows how long a service takes, and an ink footer with an oversized cropped wordmark.
- A site that knows what time it is. A slow ticker at the top says whether the salon is open right now and shows the next free time from the booking system; it stops under the cursor and has a pause button. Before the footer, a clock for Essen with the live status and a button straight to that free time. The navigation floats and stays at hand while you scroll.
- Online booking in three steps that works live: choose services, then a person, a day and a free time, then a name and an email. The server checks that the time is still free, and the confirmation comes with an .ics file for the calendar. Demo bookings are saved, but no emails go out.
- German, English and Ukrainian versions, with the salon speaking in a calm, human voice and no made-up reviews or star ratings.
- Privacy built in under GDPR: no trackers and no requests to other servers, fonts hosted on the site itself.
- Motion only where it does a job: the chosen day clicks into place, a line runs around the picked time before it fills, the total counts up, and the spiral grows one turn per step and closes on confirmation. With Reduce Motion on, everything stays still. Lighthouse on mobile: 97 for performance, 100 for accessibility and best practices.
Result
The demo works for real: try booking an appointment yourself. Booking can work the same way on the site of your own salon or practice.
Built with
HTML, CSS, JavaScript · Cloudflare Workers, KV · Piazzolla, Commissioner