Tokyo Bowl - Interactive 3D Website for Ramen Restaurant

I recently had the chance to build a Ramen restaurant website on Framer, where I designed a fun interactive 3D ramen bowl in Spline, complete with playful slices of Narutomaki that you can move around on the screen.

Using my intuitive sense of user experience, color theory, and interaction design, I brought everything together, making the site smooth and responsive from desktop to mobile, with animations that guide users through the menu & reviews, complete with footer & dual CTA.

Here's how I did it.

I chose Framer as the platform of choice for its speed, flexibility, and responsiveness. It also has native access to Spline scenes without a paid membership, unlike other web hosting services.

Defined my scope: A single-page scrolling experience with interactive visuals and clear CTAs to take the user to the Restaurant's POS ordering system.

Conducted light research into ramen branding styles—balanced traditional cues with playful modern aesthetics.

Established a design moodboard focusing on:

Created a mobile-first wireframe in Framer to plan out the information hierarchy:

Designed intuitive pathways:

Modeled a stylized ramen bowl in Spline with:

Exported and embedded Spline scene into Framer using iframe and responsive container.

Translated wireframes into high-fidelity mockups directly in Framer.

Applied refined color theory to:

Implemented fluid animations:

Tailored layout for tablet and mobile:

Verified responsiveness across devices using Framer’s built-in breakpoints.

Optimized all assets (SVGs, images, and 3D model) for fast load time.

Embedded live Google Reviews for social proof.

Added semantic tags for accessibility and SEO fundamentals.

Implemented dual CTA footer with clear visual anchors.

Performed cross-browser & device testing to ensure compatibility.

Delivered live Framer site link.

See the live project here: https://exquisite-asian-cuisine.framer.ai/