Web Design

Website design studies built around fictional brands — each one designed, coded and animated in detail.

01Theme: Pop

Kondate Gacha — Meal-planning app

Service page for a fictional meal-planning app

A sticker-book service page: cream paper, thick ink outlines, hard offset shadows and five candy colours. The centrepiece is a capsule-toy machine you can actually turn — the handle spins, capsules rattle, and one rolls out and pops open with tonight's dinner.

Highlights

  • A working gacha machine in CSS + React: spin, rattle, drop, pop open
  • Monthly / yearly pricing switch and native accordion FAQ
  • Hand-drawn food stickers in inline SVG, bobbing around a CSS phone mock-up
  • Floating sign-up button on phones once the hero scrolls away
React StateCSS AnimationInline SVGNeo-brutalism
View site

02Theme: Japanese modern

Geppaku — Hot-spring Inn

Official site for a fictional mountain ryokan

A night valley where the moon climbs out from behind the ridges as you scroll, maple leaves drift down, and vertical type sets the copy the way a Japanese reader expects. Shoji screens slide apart to show each room's view, the kaiseki menu scrolls right to left, and the four-seasons section changes its colours and falling particles.

Highlights

  • Vertical writing (tategaki) for titles, menu and hero, with palt kerning
  • Multi-layer SVG parallax: stars, rising moon, three ridges, drifting mist
  • Shoji that open on hover or tap onto a photo of each room
  • Accessible season tabs swapping palette and particle physics
TategakiSVG ParallaxPhotographyAccessible Tabs
View site

03Theme: Cute

Fukufuku Bakery — Neighbourhood bakery

Website for a fictional neighbourhood bakery

Strawberry-milk pink, butter yellow and a soft cocoa outline under a striped, scalloped awning. Every bread on the shelf has a face, and the ones in the hero basket squish and talk back when you poke them. The bake timetable reads the visitor's clock to count down to the next batch, and the menu fills a bakery tray for a pre-order with pickup day and time.

Highlights

  • Eleven bread characters drawn in inline SVG, sharing one face
  • Poke-able hero breads with squash-and-stretch and speech bubbles
  • Bake timetable and open/closed pill driven by the visitor's clock
  • Category filter, tray with counts and totals, and a pickup-day picker
Inline SVGReact StateCSS AnimationClient Clock
View site

Every brand, shop, venue and person named in these works is fictional. Each site runs on static HTML, CSS and JavaScript alone.