ATELIER HAIR | Salon Website & Cinematic Gallery

ATELIER HAIR — SALON WEBSITE & STYLIST BOOKING

PROJECT GOAL Build a distinctive salon presence that connects visual inspiration, clear service information and choosing the right stylist. Independent portfolio project with a fictional studio, team and guide prices.

MY ROLE Concept, UI/UX design, responsive frontend, custom WordPress theme, interaction development, bilingual content structure and booking-plugin integration.

VISUAL IDENTITY A black canvas with warm taupe and soft ivory accents, an original hair-inspired emblem and locally hosted typography. The homepage pairs a photographic salon entrance with staggered monochrome portraits, a three-image editorial strip and strong black divider lines. Hairstyle images reveal colour on interaction. Floating booking/call actions and a small scissors cursor reinforce the salon identity.

SITE STRUCTURE Home, Team, Prices, Gallery and Booking are available in German and English. The homepage displays all four stylists directly, with specialties, short introductions and individual booking links. A dated editorial trend station offers three stories with automatic rotation, pause and previous/next controls; it is not an automated news feed.

GALLERY AND SERVICES The project includes 34 hairstyle looks and image enlargement. The redesigned gallery presents eight selected looks as a cinematic black-background sequence, with gentle transitions, text intervals and subtle light effects. Inspiration can be carried into the booking flow. Nine expandable services show guide prices, duration and changing example imagery, helping visitors understand the offer before choosing an appointment.

APPOINTMENT JOURNEY Visitors choose a stylist, service, date and available time, complete first/last-name and email validation, review their choice and reserve an anonymous slot. The calendar uses stylist-specific availability, 15-minute occupancy blocks and 30-minute start intervals, with cancellation and overlap protection. Contacts remain in browser memory; only anonymous reservation metadata is persisted. The implementation does not send booking emails, accept payments or connect to a third-party salon calendar.

INTERACTIONS AND REUSE Consistent image colour reveals, cinematic image transitions, service accordions, editorial trend controls, responsive navigation and keyboard-friendly native controls. Reduced-motion preferences are respected. The theme and the appointment, trend and floating-action modules are saved for reuse with configurable project content.

DELIVERY Custom WordPress theme, bilingual pages, structured service/team/gallery content and reusable plugins. Functional checks cover key gallery, service and reservation states in the local WordPress environment. Portfolio review content is illustrative and is not presented here as genuine customer feedback or business performance.

TOOLS WordPress; PHP; JavaScript; HTML; CSS; Python; Pillow; OBS Studio.

SKILLS Web Design; WordPress Development; Responsive Design; UI/UX Design; Plugin Development; Appointment Interfaces; Interaction Design; Localisation; Content Architecture; Image Optimisation; Functional Testing.