Type - 3

Web Design | 2018

an interactive web experience for exploring new hip-hop album content

Type - 3 is a web application built on Spotify API and Lyric JSON files. This web application aims to provide a visually interesting way for users to experience random songs in a new album that they have not listened before.

Tool

Spotify API, Lyric JSON files, SVG, CSS Animation, JQuery, JavaScript, HTML

My Role

Web Development and Interface Design

 
 

Design Progress

Ideation

brainstorming and come up with a design plan

Interface Design

sketch out the interface and test with users

Web Development

define the web features and build the web

Presentation

publish the website and get user feedback

 

IDEATION

My original idea was to create a web experience that introduces the works of young Chinese rap artists to a larger audience.

I have always considered rap as a kind of art that uses language and beats as its medium. Many young Chinese rap artists nowadays deliver interesting opinions using rap as their medium.

Based on my personal experience, lyrics is the soul of a rap song and the hook is often the highlight of a rap song.

Therefore, to create an interesting experience, I decided that my web should have three features:

1. It will be able to have some engaging visual elements.

2. It should show the highlights of rap songs.

3. It should display the lyrics.

I chose Higher Brothers, one of the most representative Chinese hip-hop crews as my chosen rap artists and their new album Type - 3 as the my chosen album for this design practice.

artworks-000310908846-zjtx4b-t500x500.jpg
 

Interface Design

hand sketch

Since my main purpose of this web application is to both introduce the artist (with their songs) and provide an interactive song listening experience. I sketched out a simple wireframe for the application on my notebook.

I broke the web page into mainly two parts:

The header section is dedicated to provide extra information of the artists and their album. The larger body section is dedicated to user interaction, song preview and lyrics display.

IMG_6167.jpg

color palette & font choice

I mostly took inspiration from aesthetics of Type - 3 and decided to use a red and yellow palette with fonts that have similar vibes to the album.

1.jpg

I complete the full design later using illustrator and adobe XD

 

Web Development

1. Visual Programming

I used HTML, jQuery and CSS animation to program the visual of this website.

I create two cassette SVGs and use those as the “play triggers” on the website. I looked up a bunch of references to animate them and the texts. Every time the user clicks the cassette, the cassettes flips to the back side of it.

2. Get Different Songs

I used Spotify API to get the album and the songs. Luckily Spotify provides a 30-second highlight preview of each song, which matches with my original intention.

 
e5b18fe5b995e5bfabe785a7-2018-04-27-e4b88be58d885-29-07.png

3. Get Lyrics

My biggest challenge was to get the lyrics of the songs.

After asking around, I got two solutions:

  1. Use python to scrap lyrics from websites like Genius;

  2. Use some lyrics APIs

for solution 1, I was not able to figure out python in this amount of time;  and for solution 2, the best API I found, which is MusixMatch only provides with 30 percent of the lyrics.

Neither of these seems to be the best match for my need so I came up with a third solution, which is to build my own lyrics JSON file.

Therefore I limited my target to just one EP of the hip-hop group Higher Brothers, which only contains four songs. I use a pretty useful tool to called JSONlint to validate the JSON I write and I am able to use my own API.