02: Evocative HTML

The collection I chose to work with were my 100 most played songs of 2016. Rather than working with the genre or song itself, I wanted to focus on the titles of the songs out of context. For this reason, the artists of the songs don't show unless you hover over the song, and unless you recognize the title, one might not even realize it is a song until they recognize the pattern. I continued on this idea by taking the titles of the songs and making them into poems. I started by categorizing them into similar groups, and put them into the most logical order I could fathom from there to make a poem. Each poem discusses a different topic or aspect of life, whether it is major or minor, broad or specific, and in my case, real or fake (spoiler alert: I did not take a pill in Ibiza). This project feels extremeley personal to me, not just because of the vulnerable, candid nature of some of the poems, but also because this really was the soundtrack to my 2016. Thinking of these song titles in the context of my life opened me to express them based on the experiences I had. I am grateful that I was pushed to figure out the code and best, most suitable design for this website as I am now so pleased with the final product.


Version 1:

I started by building out the website in html simply so I could figure out how the website would work/what it was I wanted the buttons to accomplish.



Version 2:

In this version I added style and jquery so that the buttons would work. However, they didn't. They took the right song titles and put them into each category, but they were way out of order and continued to change order each time the button was pressed - a glitch in the system. Rather than freak out over it, I used the malfunction to play with the concept of a “Poem Maker”, where the user could click the buttons until they got the poem they want. Try it out!



Version 3:

In the final version I reverted back to my original concept once I was able to sort out the code with my teacher. The layout was cleaned up and simplified to be more elegant, and the categories of the poem were separated into columns and colour coded to match the tone. You'll notice the artist names, “self”, and “the soundtrack to it all”, are all in standard blue, as that is the colour I feel represents the year and myself best - a baseline. The titles of the songs on the main page were also made to be displayed inline as opposed to listed, so you could see all of them at once without having to scroll wayyyy down the page. It also shows how many of them there are. I separated the songs with little black dots because I thought they looked elegant and dainty and poetic.