'Miyamoto: The Path of Five Rings' Video Game Teaser Site

Miyamoto Musashi (1584–1645) was a legendary Japanese swordsman, philosopher, and strategist, best known for his undefeated record in sword duels. I wanted to create a (fictional) game teaser site, based on the motifs and aesthetic of Edo Period Japan, one which mimicked the dynamics of modern game-play using cutting-edge AI tools, code, and multimedia.

Problem Statement

Most, if not all, video game teaser sites are surprisingly static. A huge opportunity exists to create a more immersive "game-like" and dynamic site to build hype around the product pre-launch and boost presales.    

Design Inspiration

As a total Japanophile, I was inspired by the artwork of the early Edo period, for its limited color palettes, sparse use of elements, and balanced compositions. I wanted to constrain my designs to be historically accurate, providing a subtle element of education about the fascinating deep history of Japan. 

Early Iterations

Scroll interactions are utilized in many of today's best web designs, I think for good reason, because they provide a user-paced dynamic interaction that can feel like unexpected magic.

Below are some were some of my experiments in Figma utilizing minimalist Japanese motifs, for example, the "Kabuki theater curtain", as dynamic site elements. 

Solutioning: Scroll Interactions

From Figma, I used Claude.AI to experiment with Javascript's versatile GSAP library to create more sophisticated animated scroll interactions. 

Solutioning: Scroll Interactions

Using a detailed SVG map of Japan, I was able to create a scroll-based map zoom effect, to orient the user to the location of Miyamoto Musashi's legendary story begginings.

Solution: Scroll Interactions

Some companies like Apple use frame-by-frame animations tied to the scroll position of a user. Instead of playing a traditional video or GIF,  individual video frames are loaded, which are displayed in sequence as the user scrolls through the page. This gives the impression of a smooth, seamless animation controlled directly by the user’s scroll input.

Loading Screen

Tiny details like the loading screen can make all the difference to create a consistent experience. The family crest of Miyamoto Musashi was known as the "nine-fold tomoe". I created this animation in After Effects to bring it alive! 

Typography

The display typeface I selected for the Kanji characters in the project is called “Kanteiryu,” and there is an interestesting story behind it. It was created by the legendary Japanese type foundry Morisawa, drawing inspiration from the distinctive lettering style traditionally used in the titles and billboards of Kabuki theater. Designed to evoke the vibrancy of a packed theater, the letters were crafted to fill the writing space with minimal gaps, symbolizing a fully occupied performance hall.

UI Design: Buttons

I went through a number of design variations on buttons to achieve an Edo period Japan look, making sure to meet WCAG 2.1's Accessibility guidelines for 44px minimum height and proper contrast. 

Solutioning: Infinite Zoom Video

To build further dynamics into the web experience, and to provide a taste of the game's vast open world, I created an embedded infinite zoom-out video using a combination of AI tools.

There are also many yet-to-be-realeased tools like World Labs' 2D to 3D environment translator, which I think have huge potential in projects like this one.  

Solutioning: User Feedback

Another common Japanese motif is the fox, a symbol of cleverness and wisdom, which I thought translated well as a unique mechanism for taking user feedback; the fox is shy but curious to know you, often peering from a corner.

Solutioning: Page Design

In the final product, I'm using a simple greyscale color pallet with orange-red as an accent. Combined with powerful imagery, this yields high-impact, simple-to-navigate pages with a distinctly Japanese feel.

Page layouts are relatively simple so that, per accessibility guidelines, they can work in both horizontal and landscape formats, meet text contrast requirements, and work with common screen readers.