CL ARTDROP
Hayao Miyazaki Interactive Website
Year: Spring2024
Role: Interface Design, Interaction Design, Animation, Layout, UX Design
Tool: Figma, Adobe Photoshop
Overview:
For this project, I have chosen Hayao Miyazaki as the central theme for recreating a redesigned interactive website. A renowned Japanese animator and filmmaker, Miyazaki is a visionary artist whose animated works have captivated audiences worldwide. Through this project, I aim to explore and celebrate the rich tapestry of Miyazaki's contributions to animation, offering users an immersive and engaging experience.
Typography
Color Platte
#CCE794
#BEF1FF
#BEF1FF
I utilized the primary color tones of cyan, blue, and green from Hayao Miyazaki's Animated microfilm products to highlight the distinctive style of Miyazaki.
Challenge:
Capturing Miyazaki’s storytelling and artistry in a digital format was a key challenge. His hand-drawn style and emotional depth required careful typography, color, and animation design choices. Balancing aesthetics with functionality while creating an engaging, interactive experience was essential to honoring his legacy.
Solutions:
Result:
Studio Ghibli Landing Page
This entry page brings Studio Ghibli to life with gently animated characters, creating an immersive and welcoming experience. The subtle motion adds interactivity, drawing users into Miyazaki’s magical world.
Topic Division Page
This page organizes Studio Ghibli films into three themes: People vs. War, People vs. Nature, and People vs. People. Each category offers an interactive experience, with smooth animation effects when users navigate to the next movie, enhancing engagement and storytelling.
Film Achievement Page
This page invites audiences to engage by selecting their favorite Studio Ghibli movie from a curated list. The interactive poll encourages participation while showcasing the studio’s most acclaimed films.
Homepage Design
Wireframe:
Prototype:
My homepage brings Studio Ghibli’s magic to life with interactive characters that reveal topic options on hover. Soft colors, hand-drawn elements, and subtle animations create an engaging, intuitive experience that reflects Miyazaki’s storytelling.
Interactive Feature
Wireframe:
Prototype:
This page includes a dynamic graph showcasing the most popular Studio Ghibli films. To engage visitors, I added an interactive poll where users can vote for their favorite Ghibli animation. This feature not only provides insight into audience preferences but also enhances user interaction, making the experience more immersive and engaging.
