Alex, a ceramicist, needed a catalog-shop that treated every piece as a work, not stock. The challenge was translating the raw materiality of clay and a singular visual world —extrañismo— to the screen without becoming a generic online gallery.
Alex doesn’t sell products: he makes authored ceramics. Treating each piece as stock in a grid would have killed it. The brief was to translate the material roughness of clay and a visual universe of its own — extrañismo — onto the screen, without falling into the generic online gallery where every work ends up looking the same.
The bet: one piece per screen, time instead of haste. Treat the catalogue as a room — you come in to look, not to file a product — and let the sale arrive after the gaze, not before. The clay leads; the interface steps aside.
- Work, not stock
- Material roughness
- Extrañismo universe
- One piece per screen
- Listen
The piece as a work, not a product
Before laying anything out I set the rule that would govern everything else: each piece fills the screen, it’s looked at, not casually "added to cart". Clay asks for time.
- Art direction
Material roughness on screen
Monumental League Gothic for the titles, material grain for texture, absolute black so the clay stands out. The tactility of the material translates into typographic weight and controlled noise.
- System
An 8-column grid and literary prose
I structured the catalogue on an 8-column editorial grid. Descriptions are written as prose, not technical sheets: every piece has its own text.
- Build
Next.js and paper fold
Built in Next.js with a paper-fold transition between routes (GSAP) that links piece to piece without breaking the tactile identity.
Built a cinematic catalog in Next.js where each piece fills the full screen, image-forward, with literary-prose descriptions. Coded a paper-fold route transition with GSAP, an 8-column grid and vector grain to hold the tactile identity on every piece.
The system chases roughness, not polish. Absolute black, a warm bone for text, a monumental condensed display and vector grain. No chromatic accent: the material is the only color. Everything pushes toward the material — making the screen recall the clay.
- Absolute black: the clay and the light do the rest.
- Monumental condensed display: the title weighs as much as the piece.
- Material grain: texture, not a clean screen.
- Descriptions as prose, not sheets: every work deserves its own text.
The material had to survive the jump to screen on every path, not just in one pretty photo. This is where the system holds the clay.
- 01 · Full-screen catalogue
Each piece fills the screen over absolute black; monumental League Gothic gives it the weight of a work, not a product.
- 02 · Piece view
Literary-prose descriptions, not technical sheets: every work has its own text and its own reading time.
- 03 · Route transition
The GSAP paper fold links piece to piece without breaking the tactile identity.
- 04 · Grain and grid
Vector grain and the 8-column editorial grid keep the roughness coherent across the whole site.
The catalogue treats each piece as what it is — a work, not inventory. The roughness of the clay survives the jump to the screen, and the extrañismo universe holds without needing to explain itself. Image-forward, slow on purpose: the gaze before the haste.
An authored-ceramics shop isn’t a stock catalogue. It’s a gallery that also sells.