Maison Noir.
A complete couture boutique for a Paris atelier: an editorial lookbook, the 28 piece AW24 collection with search, filters and quick view, an atelier story, a journal and a bag ready for live commerce.
- Client
- Maison Noir, Paris
- Role
- Designer and developer
- Year
- 2024
- Stack
- الإدارة الفنية · تنسيق تحريري
Overview
Maison Noir is a couture house in Paris. I designed and built its boutique end to end: an editorial lookbook, the 28 piece AW24 collection with search, filters and quick view, an atelier page that shows the hand work, a journal, and a bag and checkout ready for the maison's own commerce and client care systems.
Goals
- 01Make the online boutique feel as considered as the clothes themselves
- 02Present the whole AW24 wardrobe as one collection rather than a grid of thumbnails
- 03Keep the atelier story and the making visible while people shop
- 04Stay quick to load on mobile, where most visitors arrive from social media
The finished design
A closer look at the website.
Process
How I approached the project.
- 01
Art direction
I kept the palette close to monochrome, obsidian black and warm ivory with a restrained champagne accent, and paired a high contrast display serif with a quiet sans serif for product details and pricing.
- 02
Editorial layout
The home page reads like a magazine, with full bleed campaign photography, a marquee of atelier keywords and cloth close ups that move at their own pace.
- 03
Shopping journey
The collection browses as one sequence, with search, category filters, sorting, quick view and a bag that opens without leaving the page.
- 04
Build and checks
I built the store with Next.js, optimised the campaign imagery for the web and tested the whole journey, from the campaign through to checkout, on mid range phones.
- ⚡
Interactions and motion
- Full bleed hero with a slow zoom
- Marquee of atelier keywords
- Collections revealed on scroll
- Quick view that opens over the shop
- Editorial image swap on hover
Design system
A clear system.
For every page.
I documented the typography, spacing, colors and motion so the website feels consistent from page to page and stays easy to update.
#0b0b0b
#f5f2ec
#c9ad7a
#7c7469
Type pairing
Clash Display / Satoshi
Inter for long text · Space Grotesk for data
Results
28
atelier pieces in the store
4
featured collections
214
hours behind the sculpted gown
“Our online boutique finally feels like our atelier. Clients have started sharing screenshots with friends, which never used to happen.”
Next project
Skyline Estates