Alex, ceramista, necesitaba una tienda-catálogo que tratara cada pieza como obra y no como producto de stock. El reto era traducir la aspereza matérica del barro y un universo visual propio —el extrañismo— a la pantalla sin caer en la galería online genérica.
Alex no vende productos: hace cerámica de autor. Tratar cada pieza como stock en una cuadrícula la habría matado. El encargo era traducir a pantalla la aspereza matérica del barro y un universo visual propio —el extrañismo— sin caer en la galería online genérica, donde toda obra acaba pareciendo lo mismo.
La apuesta: una pieza por pantalla, tiempo en lugar de prisa. Tratar el catálogo como una sala —se entra a mirar, no a fichar producto— y dejar que la venta llegue después de la mirada, no antes. El barro manda; la interfaz se aparta.
- Obra, no stock
- Aspereza matérica
- Universo extrañismo
- Una pieza por pantalla
- Escucha
La pieza como obra, no como producto
Antes de maquetar definí la regla que mandaría sobre todo lo demás: cada pieza ocupa la pantalla, se mira, no se "añade al carrito" de pasada. El barro pide tiempo.
- Dirección de arte
Aspereza matérica en pantalla
League Gothic monumental para los títulos, grano matérico para la textura, negro absoluto para que el barro destaque. Lo táctil del material se traduce en peso tipográfico y ruido controlado.
- Sistema
Retícula de 8 columnas y prosa literaria
Estructuré el catálogo sobre una retícula editorial de 8 columnas. Las descripciones se escriben como prosa, no como fichas técnicas: cada pieza tiene su texto.
- Build
Next.js y pliegue de papel
Desarrollo en Next.js con una transición de pliegue de papel entre rutas (GSAP) que encadena pieza con pieza sin romper la identidad táctil.
Construí un catálogo cinemático en Next.js donde cada pieza ocupa la pantalla completa, image-forward, con descripciones de prosa literaria. Programé una transición de pliegue de papel entre rutas con GSAP, una retícula de 8 columnas y grano vectorial para sostener la identidad táctil en cada pieza.
El sistema busca la aspereza, no la pulcritud. Negro absoluto, un hueso cálido para el texto, una display condensada monumental y grano vectorial. Sin acento cromático: el material es el único color. Todo empuja hacia lo matérico —que la pantalla recuerde al barro.
- Negro absoluto: el barro y la luz hacen el resto.
- Display condensada monumental: el título pesa como la pieza.
- Grano matérico: textura, no pantalla limpia.
- Descripciones en prosa, no fichas: cada obra merece su texto.
Lo matérico tenía que sobrevivir al salto a pantalla en cada recorrido, no solo en una foto bonita. Aquí es donde el sistema sostiene el barro.
- 01 · Catálogo a pantalla completa
Cada pieza ocupa la pantalla sobre negro absoluto; League Gothic monumental le da el peso de la obra, no de un producto.
- 02 · Ficha de pieza
Descripciones en prosa literaria, no fichas técnicas: cada obra tiene su texto y su tiempo de lectura.
- 03 · Transición entre rutas
El pliegue de papel en GSAP encadena pieza con pieza sin romper la identidad táctil.
- 04 · Grano y retícula
El grano vectorial y la retícula editorial de 8 columnas mantienen la aspereza coherente en todo el sitio.
El catálogo trata cada pieza como lo que es —obra, no inventario. La aspereza del barro sobrevive al salto a la pantalla, y el universo del extrañismo se sostiene sin necesidad de explicarse. Image-forward, lento a propósito: la mirada antes que la prisa.
Una tienda de cerámica de autor no es un catálogo de stock. Es una galería que además vende.