Redesigned alt–J's website as a school project, creating greater transparency between their music and listener. A responsive webpage was not required. The live page can be viewed here, although it should be experienced on Google Chrome and in a full 15" x 13" window. 
The requirements included:
– Maximum of three fully coded webpages — I did not have to code the entire website.
– Implement a Javascript library to the code.
– At least one icon (button) that would animate upon hover/click.
– At least one randomized element somewhere on the site; could be a different image, background color, message, or layout that appears every time we visit/refresh a page.
I decided to create a sense of 'mysterious intrigue.' When first loading the home page, the user is met with four lines of randomly generated words/phrases from alt-J's songs. Just as their music sparks thought, so does the homepage. Is it meant to be read as a whole? Is it purely random? Do the differences in color dictate how you should pronounce the words?
This ambiguity naturally invites the user to hover over the words/phrases in attempt to recognize meaning. While hovering, the words/phrases slant forwards and backwards, and upon being clicked, bring up an image relating to that specific word/phrase.
The color scheme is a variation of RGB – painter's colors. This is not only a direct inspiration from All This is Yours cover art; it is symbolic to how the three band members meld and mix their sounds together to create something truly separate from the status quo. A set of three colors also draws correlation to their name, which when typed into a computer creates a triangle: three points ∆
I began by working out how I wanted the website to flow, creating an information architecture and wireframe map. These two design assets kept me focused and consistent while I went through my design process.
The name of the song that the clicked-on word/phrase belongs to is shown in the top right corner. The image  usually derives from the music video relating to the song. The image immediately appears after clicking, forcing the user to connect the word/phrase with the image. This raw graphic design – influencing a user's perspective using image and text – offers little information to the relationship between the image and word/phrase. In doing this, the user is encouraged to watch the music video, or at least attempt to come up with their own interpretation of what the underlying meaning could be.
These images are bits and pieces of alt-J's identity. They create visual interest and draw the user in, making them pause, wonder, and reflect. Scrolling down brings you back to the list of words/phrases
I noticed that the current website still does an extremely poor job in relaying the location and dates of future  concerts. I found it frustrating to find a date that worked for my schedule, only to realize it was in another country. Not only that, but the year isn't provided for any of the shows. My redesign of the 'Live' page showcases my understanding of typographic hierarchy and my ability to make information comprehensible. Do you live in Australia? Easily find tour dates in your country, with dates and locations laid out in a straightforward manner.

The banner at the top has three images that slowly cycle through one another, creating visual interest without distracting the user from browsing the information.
Perhaps there is a reason I'm unaware of, but most band websites don't have an 'About' page. I thought it would be both interesting and useful to see the faces of alt-J; to learn about their background and how they formed the alternative powerhouse they are today. I used this page as an opportunity to demonstrate my CSS animating skills.

The layout breaks the typographic grid, giving the page an alternative vibe. The text is set in Georgia, making it easily readable.

More stuff