GOAL
CHALLENGE
SOLUTION
Solution
The site is structured as a guided experience, beginning with a clear introduction and reinforced through familiar music interface conventions and clear interaction cues.
Overview
TYPE
Website
Web Designer & Developer
ROLE
HTML, CSS, JS
TOOLS
SKILLS
Front-End Development
GOAL
CHALLENGE
SOLUTION
Goal
Create a site that showcases the full soundtrack of Studio Ghibli's Spirited Away.
Overview
TYPE
Website
Web Designer & Developer
ROLE
HTML, CSS, JS
TOOLS
SKILLS
Front-End Development
GOAL
CHALLENGE
SOLUTION
Goal
Create a site that showcases the full soundtrack of Studio Ghibli's Spirited Away.
Overview
TYPE
Website
Web Designer & Developer
ROLE
HTML, CSS, JS
TOOLS
SKILLS
Front-End Development
01
01
01
02
02
02
03
03
04
04
03
04
05
05
05
06
06
06
07
07
07
07
07
07
Design
The Spirited Away Soundtrack site serves as a playlist of the movie's music tracks as well as providing additional information about when each track plays. The design is heavily inspired by the movie's own colorful aesthetic and themes of magic and exploration.
01
Introduction Page
The site opens with a brief description of its purpose, framing the experience and setting its tone.
01
Introduction Page
AR binoculars allow the user to see and interact with an overlay of information on top of the environment around them, using location detection and real-world POIs. This model's PTZ capabilities and tiered height make it adaptable and accessible.
01
Introduction Page
The site opens with a brief description of its purpose, framing the experience and setting its tone.
02
The Music
The primary feature of the site, a music player, uses a conventional music interface paired with prominent imagery and cohesive styling to create a more immersive experience.
02
The Music
The primary feature of the site, a music player, uses a conventional music interface paired with prominent imagery and cohesive styling to create a more immersive experience.
02
The Music
The primary feature of the site, a music player, uses a conventional music interface paired with prominent imagery and cohesive styling to create a more immersive experience.
03
Tracklist
The tracklist features a sliding gallery and hover effect that encourages the visitor explore each track.
03
Tracklist
The tracklist features a sliding gallery and hover effect that encourages the visitor explore each track.
03
Tracklist
The tracklist features a sliding gallery and hover effect that encourages the visitor explore each track.
04
About
Basic information about the film pulls from a public Studio Ghibli API.
04
About
Basic information about the film pulls from a public Studio Ghibli API.
04
About
Basic information about the film pulls from a public Studio Ghibli API.
05
Music Player
The music player features a dropdown that contains details of when each track plays most prominently in the movie.
05
Music Player
The music player features a dropdown that contains details of when each track plays most prominently in the movie.
05
Music Player
The proposed interface's viewpoint responds to what the user is looking at and uses this method of interaction to guide them through the flow of information.
06
Color Bar
The header bar accent for each track compliments the colors of their respective images, adding individuality to each track.
06
Color Bar
The header bar accent for each track compliments the colors of their respective images, adding individuality to each track.
06
Color Bar
The proposed interface's viewpoint responds to what the user is looking at and uses this method of interaction to guide them through the flow of information.
07
Mobile View
The site is optimized for mobile, making it accessible for listening on the go.
07
Mobile View
The site is optimized for mobile, making it accessible for listening on the go.
07
Mobile View
The proposed interface's viewpoint responds to what the user is looking at and uses this method of interaction to guide them through the flow of information.