03 / 09 — Work
Concept Project — Editorial portfolio
NOIR Studio
- Type
- Art direction & development
- Industry
- Photography
- Year
- 2026
- Setting
- Tokyo · Kuala Lumpur
- Live site
- noir-studio-portfolio.vercel.app
Overview
The opposite of an image grid: four series, each with its own sequence — full bleeds, diptychs, a small plate in a wide margin, a strip that moves with the scroll — ending on a contact sheet and the next series.
- Role
- Art direction
Sequencing & UI design
Front-end development - Built with
- React
React Router
Vite
View Transitions
Index
The cover follows the pointer down the list of series; a click, and it becomes the series’ first plate.
Screen recording of the live site · 11s
Direction
Ink, bone and one grey, right angles everywhere. A display serif with width and weight to spare — set whole, never split into letters, so its spacing holds at any size.
- Ink#0B0B0A
- Bone#E9E4DA
- Grey#8E8B84
- DisplayNoto Serif Displaywidth and weight axes
- TextIBM Plex Sans
- CaptionsIBM Plex Mono
Stillness — the sequence: twelve plates, laid out like a book.
Viewer
Any plate opens full screen with its caption; arrow keys or a swipe move through the series, Esc closes.
Screen recording of the live site · 11s
On a phone — one plate at a time, full width.
After Dark · Commissions, each with a starting price
Images should feel remembered, not merely seen.
A website like this starts from the Business Website plan (from RM699). Complex animation and interactions are quoted separately.
