2025
Atelier Noa
Editorial-style layouts for a luxury interior architecture studio.
- Role
- Brand identity, Web design, Development
- Stack
- Next.js, MDX, Framer Motion
01 — Problem
Atelier Noa is a small, exacting interior architecture studio whose portfolio was underselling its work. Their previous site used a standard grid gallery, which flattened a two-year residential commission and a three-week consultation into the same visual weight. Prospective clients — architects, developers, and private individuals commissioning six-figure interiors — were judging the studio on the wrong signal entirely.
02 — Research
We reviewed how competing studios present work and found nearly all of them default to masonry grids optimized for browsing quickly, which rewards volume over depth. Conversations with the studio's founders revealed something more useful: clients rarely choose an interior architect by comparing price lists. They choose by taste, and taste is read through pacing — how a portfolio unfolds, not just what's in it.
03 — Solution
We designed a monograph format. Each project is a single long-form page — one continuous scroll — rather than a gallery entry. Full-bleed material and spatial photography sits alongside short, specific annotations (a stone supplier, a joinery detail, a reason a wall moved eight centimeters). The homepage shows three projects, not twelve, because the goal was never to prove volume.
04 — Process
We started with a content architecture workshop to agree on what each project spread needed to communicate before touching layout. Wireframes prioritized negative space early — we cut planned modules by roughly a third during review because density was competing with the calm the studio's actual interiors have. Typography went through several pairing rounds before we landed on a structural sans for specifications set against a warm serif for narrative passages, mirroring the contrast between architecture and material in their work.
05 — Technical implementation
Built on Next.js with MDX-driven project content, so each spread can vary its rhythm — image size, callout placement, pacing — without the studio needing a new template built for every commission. Material callouts use a scroll-linked reveal built on Framer Motion's `useScroll`, timed to unhurried, editorial pacing rather than typical scroll-jacking. All imagery runs through `next/image` with defined aspect ratios to avoid layout shift on a page that leans heavily on large photography.
06 — Outcome
Since launch, inbound inquiries shifted noticeably in character — fewer requests asking for a ballpark quote, more direct commission briefs that already understood the studio's material language. The founders now send the site itself in place of a PDF portfolio during first client calls.