Sushi Circle · Wireframe round 01
Same content. Same five London counters. Five completely different structural hypotheses for the site — each one a bet on what “Sushi Circle” actually means. Pick one, mix two, or kill them all and we’ll start again.
The whole website is a conveyor belt. You don’t scroll down — you scroll sideways. Plates carrying menu items, locations, reviews and stories drift past the camera on a single continuous track. Click a plate; the camera zooms in. That’s the entire navigation.
Wordmark sits on the central island; plates drift past on both sides. Scroll-direction = right. Inertia decays slow so the belt keeps moving briefly even when you stop.
Each plate is a 3D object on the belt. Picking is like grabbing from a real kaiten-bar — plate lifts, rest keep moving.
London map appears below the belt. As you scroll past a region, the corresponding marker pulses. Click a marker = belt warps to that branch’s plates.
Text appears on moving plates — each paragraph rides past the reader. Lo-fi-prone, so we add a "pause belt" button for accessibility.
Single, iconic gesture nobody else owns. The metaphor IS the navigation. A diner who has never sat at a kaiten bar will get the brand in three seconds.
Horizontal scroll is hostile on mobile and to screen readers; we’d need a flat-document fallback. WebGL adds ~200kB. Has to feel actually mechanical, not gimmicky.
A bento box is a series of carefully partitioned rooms in one container. So is this site. Every page is a unique asymmetric grid: rectangles, squares, the occasional perfect circle. Each compartment holds one thing — one dish, one review, one location. Information becomes spatial.
Hero, CTA, daily special and location count all visible above the fold. No scroll required to understand the offer.
Featured items get a bigger compartment. Click a compartment to expand it without leaving the page (FLIP transition).
Big map left, five compartments right. Hovering a tile pulses the map pin; clicking a tile zooms.
Vision and Mission get their own compartments — same weight, side by side. Helps the brand feel balanced, not corporate.
Mature, calm, information-dense. Reads beautifully on a phone (the grid just stacks). Easy for the team to add new content without breaking the layout.
If every page is a grid, the “wow” moment evaporates. We’d need one page (the home) to break the pattern dramatically to keep memorability.
A printed restaurant menu, scaled to a website. Massive type carries the page; tiny captions whisper. Black ink on bone stock. Red rubber stamp where it matters — signature roll of the day, today’s special, sold out. Looks expensive, loads in under a second. The web design industry will hate it. Diners will love it.
Type does all the work. The red rubber stamp is the only saturated colour on the page. Restrained → expensive.
A typeset price list, page by page. Dotted leader rules between dish and price. Sold-out items get a real stamp. No images of food at all.
Index style — a phonebook-clean list. Click an entry, the page foldsout into the location detail with map. No tiles, no cards.
Cover-page style — a magazine title in display italic, mission & vision as twin columns underneath. Confident.
Distinct from every other sushi site. Cheap to build, fast to load, ages well. Type does the lifting.
If the type isn’t perfect, the whole thing looks like a Word doc. Requires a font license budget for something like PP Editorial — Google Fonts substitutes only get us 80% there.
You don’t visit the website. You sit down. First-person view at the sushi bar — chef across the counter, menu chalkboard above, your plate in front of you, lantern light to your left. Navigation is a camera tilt or pan. Each “page” is where you’re looking. Full Three.js scene; the chef has 3 idle animations and one wave hello.
Empty counter. A red lantern drifts. Chef bows. You can drag to look around — up = menu, down = your plate, left = locations map on the wall.
Camera tilts upward. The menu is a real chalkboard in 3D space — items written in chalk, prices in red. Click an item, the camera zooms to it.
A vintage printed map of London on the restaurant wall, with red pins on each location. Pin pulses as you hover.
Camera pans to the chef across the counter. He looks up. Our story is the chef telling it — voice-over with on-screen captions.
Unique on the open web. Press coverage guaranteed. The Awwwards Pack reference would be in scope.
3–4× the build budget. Slow first paint. Accessibility / SEO require a parallel flat document. Risks looking like an art project the diner doesn’t want to use.
Five counters across London, five stamps to collect. The site is your passport — postal aesthetic, customs-form layout, dotted travel lines on the map. Sign in (email is enough) and we stamp your passport each time you order. A growth mechanic dressed as a brand story.
Hero is your empty passport page. Five blank stamp boxes invite collection. The promise (free omakase) is the carrot.
Each dish has a cargo manifest code (SC-001 etc). Menu reads like a customs declaration — typewriter mono throughout.
London map with airline-style dotted lines connecting the stations you’ve already stamped. Empties out for new visitors.
The story page formatted as the identity page of a passport — photo, surname, given name, MRZ at the bottom. Charming, unique.
Gives the five-locations fact a narrative. The loyalty mechanic is the brand, not a bolted-on feature. Retention story.
Needs accounts, backend, fulfilment of the “free omakase” promise. If we don’t have engineering capacity for the stamp system, the metaphor collapses.