Tokyo Bowl - Interactive 3D Website for Ramen Restaurant
Abe Treviño
Tokyo Bowl - Interactive 3D Website
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.
Concept Development & Design Direction
Conducted light research into ramen branding styles—balanced traditional cues with playful modern aesthetics.
Established a design moodboard focusing on:
Warm, rich color palette (reds, golds, and off-whites).
Japanese-inspired typography and graphics with translations; bold headers and playful sans-serif accents.
UI elements that echo bento box-inspired card-based layouts with graphics & generated images of patrons enjoying a ramen bowl with family & friends.
User Experience (UX) Strategy
Created a mobile-first wireframe in Framer to plan out the information hierarchy:
Hero section with interactive 3D element.
Scroll-based sections: Card-Based Menu, Reviews, Gallery, and Footer.
Designed intuitive pathways:
Dual CTAs ("Browse Full Menu" & "Order Online") at top and footer.
Visual breadcrumbs via micro-interactions and section-based animations.
3D Interactive Element (Spline Integration)
Modeled a stylized ramen bowl in Spline with:
Floating, draggable Narutomaki slices to enhance interactivity.
Subtle texture and lighting for depth without overwhelming performance.
Exported and embedded Spline scene into Framer using iframe and responsive container.
Visual Design & Interactivity
Translated wireframes into high-fidelity mockups directly in Framer.
Applied refined color theory to:
Create contrast between content sections.
Reinforce hierarchy using tone and hue (e.g., vibrant red for CTAs; soft cream backgrounds, reminiscent of a bowl of tonkotsu broth).
Implemented fluid animations:
Scroll-in transitions for text and images.
Hover effects on menu items and review cards to promote engagement.
Responsive Design
Tailored layout for tablet and mobile:
Adjusted interaction area for draggable elements.
Simplified navigation into a sticky hamburger menu.
Verified responsiveness across devices using Framer’s built-in breakpoints.
Final Touches & Optimization
Optimized all assets (SVGs, images, and 3D model) for fast load time.
Implemented dual CTA footer with clear visual anchors.
✅ Delivery & Handoff
Performed cross-browser & device testing to ensure compatibility.
Delivered live Framer site link.
See the live project here: https://exquisite-asian-cuisine.framer.ai/
Index
Like this project
Posted Sep 18, 2024
I recently had the chance to build a Ramen restaurant website, and I used Spline and Framer to make it pop! 🍜
