TOYEON — Multi-Page Site for a Ceramics Studio

A site for a ceramics studio and gallery in Yeoju. Unlike the earlier demos this one is not a single scrolling landing page but a six-page structure split by purpose — because a studio has several different things to show, and someone browsing pieces, someone considering a class, and someone just looking around all move differently.

The problem

The difficulty with a craft studio site is that the photography is the product, and lots of photography makes the site heavy. Push pieces, space, process and classes onto one screen and none of them read properly. So the content was split, and each page answers exactly one question.

Design approach

Bright minimal editorial: a gallery-white ground (#f7f5f1) with only clay and celadon as accents. Pretendard is the only typeface. Instead of layering a display face on top, weight and letter-spacing carry the rhythm (headings at -0.035em, eyebrows at +0.3em). Korean and Latin read at the same weight, and the site makes exactly one webfont request.

No scrim over the photographs. Glaze colour is information here, so the original brightness stays; fixed-ratio frames prevent layout shift instead.

Pages

• Home — hero, operating-method marquee, intro split, four featured pieces, count-up figures, class teaser
• Work — seven pieces in a filterable grid with a lightbox, plus pre-purchase FAQs
• Studio — the six production stages, the glaze test wall, three views of the space
• Class — three programme cards, an operations table, FAQs
• About — the name, why Yeoju, three principles, a timeline
• Visit — hours and directions, plus a demo inquiry form

Current location is signalled three ways: aria-current in the nav, a breadcrumb above the heading, and a pager at the foot. A 404 page and a six-URL sitemap are included.

Key interactions

• One shared script — all six pages load the same site.js. Each initializer no-ops when its markup is absent, so a single file drives the home page and every sub-page.
• Scroll reveal — IntersectionObserver with per-element stagger; photos settle out of a slow push-in. A scroll sweep catches anything the observer never reports.
• Filter grid — filter by bowls, cups or vases, with the visible count updating alongside.
• Lightbox — Esc to close, arrow keys to move, focus trapped, backdrop click closes.
• Plus a full-screen mobile nav, infinite marquee, count-up figures, condensing header, and FAQ accordions.

Technical build

• Zero-build static site — six HTML files, two stylesheets, one native ES module. No framework, no bundler, no dependencies. Pretendard is the only external resource.
• Images — 22 files, all WebP, 1.4MB total. Every img carries width and height so nothing shifts; only each page's hero loads eagerly.
• URLs — Cloudflare Pages redirects /work.html to /work, so internal links, canonicals, og:url, JSON-LD and the sitemap were all written extensionless. No page transition passes through a redirect.
• Motion — transform and opacity only, scroll handlers writing inside rAF, everything neutralized under prefers-reduced-motion.
• Accessibility — per-page skip link, single h1, semantic landmarks, celadon focus ring. Filters, lightbox, accordions and the mobile nav are all keyboard operable. Worst-pixel heading contrast measures 15.95, well past the WCAG AA threshold of 4.5.
• Security and SEO — four security response headers, a one-year immutable asset cache, per-page JSON-LD (Organization, BreadcrumbList, LocalBusiness), Open Graph and Twitter card metadata.

Live

Live demo: ononc-toyeon-ceramics.pages.dev

This is a fictional brand demo built to show ononc's production quality. It is not a real business, and the inquiry form does not send anything. The photography was generated for this demo brand with AI; the site footer states that no real people or places are depicted.