Web DesignE-commerceFigmaNext.jsReactTypeScriptTailwindshadcn/uiStripe API

A moody, editorial art marketplace presenting curated 'arcane', uncanny, and compelling artwork through an exhibition-style online experience.

Arcane Gallery editorial art marketplace website preview

Problem

Most art e-commerce sites feel cluttered or sales-driven. The challenge was creating a shopping experience that kept the quiet, contemplative feeling of a gallery while still functioning as a usable, modern store.

Goals

Create an art-first experience that feels minimal, impressionable, bold and intentional.

Avoid traditional e-commerce noise while keeping purchasing intuitive.

Design a system that could scale potentially without losing its editorial tone.

Challenges

01 — 05

Discovery

Setting the compass before the journey with the intent of defining goals into a clear, creative direction.

For Arcane Gallery, I defined the audience as visually curious users who value atmosphere, intrigue, refinement, meaning over trend, with a slight interest in the occult and odd. The goal wasn’t to maximize conversion at all costs, but to create trust through taste and clarity.

02 — 05

Direction

Mood, references, and visual language that translate abstract ideas into a coherent vision.

Using Figma, I set a creative direction inspired by exhibition catalogues and modern museums: bold but quiet typography, use of negative space, and a palette that frames the work without competing with it.

03 — 05

Design

Key sections, layout systems, typography, and components, all clean, usable, and brand-aligned.

The layout favors rhythm and pacing over density. Grids are simple, margins are generous, and each page encourages users to slow down, scroll deliberately, and sit with the work rather than rush toward checkout.

04 — 05

Build

Responsive, accessible implementation that brings the final experience to life.

I built the site with a clean, component-based architecture using Next.js and Tailwind, integrating Stripe for a straightforward checkout while keeping the interface visually unobtrusive and consistent.

05 — 05

Launch + Iterate

Ship, measure, and refine, making improvements based on practicality and feedback.

After launch, attention moved toward refinement: improving spacing, smoothing interactions, and maintaining a cohesive experience across devices.