Two early product-detail-page prototypes. One product-first approach; one experiment in desktop scrolling.
Interactive demos load on the live site. Open the original Plan A ↗
Interactive demos load on the live site. Open the original Plan B ↗
Plan A — product first. A full-screen product presentation, a clear purchase area and useful information immediately below the call to action. Try the image thumbnails, size and quantity menus, then scroll through the product details.
Plan B — scroll to explore. A large-screen experiment that pushes the product image further and explores a different scrolling composition. Scroll inside the demo to compare. Its phone and tablet approach follows Plan A.
These are early independent design and front-end studies by Ryoi, not AI-built work or a live store. They do not imply an official Adidas commission or endorsement. Adidas trademarks and product imagery belong to their respective owners.
Hand-built responsive pages with Twitter Bootstrap 3.3.6, jQuery 1.11.3, Sticky Plugin 1.0.4 and Sticky-kit 1.1.2, plus custom layout and animation styles. The original implementations remain hosted on GitHub Pages, isolated from this site's CSS and scripts.
Original front-end stackThe source documentation leaves global navigation, mobile carousel swipe/zoom and the sizing chart unfinished. Some historical footer/social assets are no longer available. The demos are preserved as design studies, not current commerce services. Embedded demos load assets from GitHub Pages and their original dependencies, including Google's jQuery CDN.
Historical limitationsPlan A source ↗ · Plan B source ↗. The original repositories document the design goals and the differences between the two approaches.
Design + implementationHave a product idea, an opportunity to collaborate, or something worth bringing back to life?