Soundtrack Site

LIVE SITE

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

Soundtrack Site

LIVE SITE

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

Soundtrack Site

LIVE SITE

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

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.

Introduction Page

The site opens with a brief description of its purpose, framing the experience and setting its tone.

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.

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.

Tracklist

The tracklist features a sliding gallery and hover effect that encourages the visitor explore each track.

About

Basic information about the film pulls from a public Studio Ghibli API.

Music Player

The music player features a dropdown that contains details of when each track plays most prominently in the movie.

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.

Color Bar

The header bar accent for each track compliments the colors of their respective images, adding individuality to each track.

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.

Mobile View

The site is optimized for mobile, making it accessible for listening on the go.

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.

< Return

Projects / Archive / About

Resume / Contact / LinkedIn