UI in Monstercat

UI in Monstercat

User Interface Design

Type of work
User Interface Design

Languages and Tech
HTML, CSS, JQuery, Photoshop

Date
September 2015 - October 2015

Project Link
  Website


During my work term in Monstercat, I was given the opportunity to design and implement a web user interface for each of their music releases.

Requirements

The goal of this project was to produce an informational, interactive webpage for each of the music releases produced by the record label. In the page, it provides the user details about the release as well as the ability to stream the tracks themselves. The design must be adaptable to the various types of releases which include albums, EP's, and singles. The page also requires to display call-to-action links that take the user to sites where they can purchase the release. The rest of the implementation was open-ended, enabling me with the creative freedom to design it by myself.

Design

I approached the design with versatility in mind since the webpage must look good regardless of what kind of device is being displayed. Therefore, I designed the page with a grid layout system that enabled content to flow responsively for cross-device compatibility.

Responsive layout

Working with a responsive grid layout in mind eases the design for both mobile and desktop displays.

Monstercat

Full desktop mockup of Deon Custom's Aloha release page.

I decided to leverage the release's cover art to give each page a unique visual identity. While each page is meant to look unique, I designed within Monstercat's typography and themes such that the pages still feel part of the website.

Responsive layout

Stretching the cover art as a banner adds a unique visual feel to each individual page.

Development

After finishing the visual layout of the page, I created a working design prototype by using HTML, CSS, and simple jQuery code for simple user interactions. Implementing the technical build of the design using HTML and CSS enabled me to iterate quickly since I was already very familiar with these tools.