Copy of Music Visualization

 

PROJECT BRIEF

While enrolled in our Information Design class over the course of a semester (15 weeks) we were tasked to create a dynamic way to visually display a music library consisting of 50 songs.

IMG_0582V2.jpg

background

I chose to use Adobe Brackets as my source code editor, and also relied on HTML, CSS, and Java. I aimed to present my songs in a dynamic yet efficient way to foster understanding, as well as provide a creative way to listen to music.


1.1 Proposed playlist would gather data from listening preferences

1.1 Proposed playlist would gather data from listening preferences

1.2 Would then generate breakdown of danceability, energy, and tempo on a monthly basis

1.2 Would then generate breakdown of danceability, energy, and tempo on a monthly basis


Research

I began with surveying current music streaming sites and analyzing each of their aesthetics. Drawing inspiration from Spotify I knew I wanted to utilize a youthful color palette.

When it comes to executing the construction of the site, I relied heavily on in class lectures, activities, and online tutorials for research and execution.

1.jpg
4.jpg

Challenges

Throughout my site you see a hexagon theme, which provided a certain level of difficulty when coding from scratch. In general, coding is not something that comes naturally to me, it took heavy amounts of research, patience, and de-bugging along the way.

Design Solution & Strategy

To sort my music library, you could start with a standard shuffled play all, then sort by genre, or duration. As an avid music listener however terrible with remembering artist names etc. to help those who struggle along side me I added a map in which you could then locate where your favorite artists were born, learn their name and the genre of music they create. I utilized a honeycomb layout as a way to efficiently display a large quantity of data in a dynamic yet structured way.

Process & Materials

Adobe Brackets, Text Wrangler, HTML, CSS, Microsoft Excel, Illustrator

 
take me back