BLURRYFACE INTERACTIVE ALBUM

The challenge of this project was to capture the feeling of an album by creating an interesting and interactive experience for the listeners. I chose the album Blurryface, by twenty one pilots. Throughout the 14 tracks, the lead singer, Tyler, faces many ups and downs as he battles “Blurryface”, the fictional character who embodies his dark side and everything he doesn’t want to be. In order to convey this internal struggle, the track list is shown in the form of a central line, with each dot on the line representing one song. As the listener hovers over a dot, the line shifts up or down based on whether that song is a high point or low point in the journey.



SONG TITLE DESIGN

After clicking on a dot, the central line explodes and fades away to reveal the selected song title. Each unique design uses bold type, color, and simple shapes, to give the listener a sneak peak of the feel of the song before they click play.








DEVELOPING WIREFRAMES

Development of the album layout began with wireframe sketches, as well as explorations of how the listener could navigate the content.




DIGITAL EXPLORATION

Once a few wireframe concepts were selected, the ideas were explored more thoroughly in Illustrator and Photoshop. The current brand of the band was maintained through the use of black, white, and red, as well as bold sans serif fonts.






DEVELOPMENT &
CODING IN FRAMER

In order to create the final prototype, I recreated my selected digital iterations in Framer. I then coded the different transitions and effects using CoffeeScript.





ALL
CALENDAR INTERACTION
UNDERWING HIKING JACKET
GOLDFISH BY DESIGN

BLURRYFACE INTERACTIVE ALBUM

ISO MULTIPITCH CLIMBING COMMUNICATOR
WORKING AT NARVAR

FALCON QUEST TITLE SEQUENCE
STRIDE MAGAZINE