mpc-browser

Mind Power Composition (MPC) is a video documentary series, focusing on UK hip hop producers thoughts and processes used to create their music. The creator of the series asked me to make a site that could showcase the artists and videos in a more interesting way than just using a Youtube channel.

I developed the concept of replicating the drum pads of a physical drum machine, loosely based on an Akai MPC - an instrument majority of producers featured in the video would be using to create music and would be a familiar interface for those likely to be interested in the project. The producers each had their own pad in a grid of 4 by 4, totalling 16. The pads reveal the producer name upon hover and expand once clicked in a google image search style, revealing a producer bio and the artists part of the documentary video embedded from Youtube.

mpc-detail

The whole site is static HTML and CSS, and a new video is added every 2 weeks. Lots of RGBA and CSS3 rules were used for the styling particularly on the grid of pads. As standard, the logo is SVG to be sharp and scale nicely on devices.

mpc-iphone-1
mpc-iphone-2

The design for mobile was a decision on wether to keep the pads in the grid of sixteen or stack every pad in a column. I opted for the original grid of 16 to keep in line with the drum pad feel, and also thought the concept of a mini drum machine in browser on your phone was quite fun and something users would share with their friends. On medium and below sized screens, I used jQuery to measure the available space, then append the size to the pad grid container after subtracting margins and padding. This achieves a proportional scaling down of the pads on any device.

The project was a lot of fun to work on. Handling direction, design and development myself was a great task and I am pleased to say the project has been very well received. The videos have been popular and the site has attracted a sponsor for the project a couple weeks after launch.