Concept Project — Noir & Co. Luxury Salon
Most salon websites fall into one of two traps. Either they lean into a soft, pastel, "wellness" aesthetic that makes every studio look interchangeable, or they default to a generic booking-template layout that prioritises function over feeling. Neither approach works for a salon positioning itself as premium, editorial, and appointment-only.
After completing a fitness studio concept (Forge Fitness), I wanted to prove I could design in a completely different visual register — moving from bold, high-energy athletic branding into something darker, more restrained, and more editorial.
The brief I set myself had three goals. First, build a visual identity that immediately communicates exclusivity without relying on clichéd luxury markers like script fonts or floral patterns. Second, design a services section that reads like a considered menu rather than a product catalogue. Third, introduce a before-and-after gallery as a new interaction pattern I hadn't used in previous work, since visual transformation is the single most persuasive element a salon can show.
The Challenge
The Solution
I designed and built a full single-page site in Squarespace using a dark, editorial direction anchored by a champagne gold and warm black palette — a deliberate contrast to the neon lime and high-contrast energy of the Forge project.
Hero — setting the tone immediately
A full-bleed photograph of a stylist mid-service (hair washing, not a posed portrait) paired with a serif headline and a single understated CTA. The goal was to make the first three seconds feel like stepping into the salon itself — warm, considered, unhurried.
The Menu — services as an editorial list
Rather than using the card-grid approach from Forge, I designed the services section as a refined horizontal list with pricing aligned right, separated by thin hairline dividers. Each service includes a short description and a price point, presented the way a fine dining menu would — scannable but never cluttered. This was a deliberate design decision to reinforce the "consultation first, not a checklist" positioning.
The Proof — before and after gallery
This section was the biggest new UX challenge. I built a three-column grid of paired before-and-after images, each captioned with the transformation type, the stylist who performed it, and the session length. This pattern doesn't exist in the Forge project, and it serves a fundamentally different persuasion goal — showing visual proof of craft rather than listing features or pricing.
The Results
Visual range demonstrated. This project uses an entirely different colour system (warm black, champagne gold, muted cream), typography direction (editorial serif headlines vs. bold condensed sans), and photographic tone (moody, close-up, warm-lit) compared to the Forge fitness project. Presented side by side, the two case studies prove adaptability across industries and aesthetics rather than a single repeatable style.
New interaction pattern introduced. The before-and-after gallery is a genuinely new UX element not present in the Forge project. It required a different approach to image pairing, captioning, and visual weight — skills that transfer directly to any portfolio, e-commerce, or transformation-based client work.
Different conversion model designed. Forge used a tiered membership pricing structure with three distinct plans. Noir & Co. uses a single-CTA appointment booking flow with consultation-first positioning. Designing for both models shows an understanding of different business logic, not just different visual styles.
Copy tone deliberately shifted. Where Forge used short, punchy, energetic language ("Train Like You Mean It," "No fluff"), Noir & Co. uses longer, more deliberate, editorial sentences ("Where Every Detail Is Intentional," "Every service begins as a consultation, not a checklist"). This demonstrates copywriting range alongside design range.
Colour system refined through iteration. The final palette was reached after testing multiple directions — starting from the Squarespace preset options, evaluating contrast and readability at each step, and arriving at a custom five-colour system where every swatch serves a defined purpose.
Want a site that feels this considered?
Whether it's bold and energetic or dark and editorial, every project starts with understanding your brand — not applying a template.