Cadenza Box

User interface design for a top-notch online production music library.

List & grid

The core of the product is the search result page, with two viewing options available: grid view and standard listing. Each track is accompanied only by its vital production data: track name, artist, length, BPM and waveform. The waveform is integral, as it allows the user to quickly asses the landscape of a track without having to play a preview of it.

With more space available for each track, the grid view also shows category tagging and the track/album artwork (dimmed in appearance to increase the visibility of player controls, duration and BPM).

Menus

A slide-out menu offers users the functionality of a search panel without obstructing the results. Not only does this let users have quick access to all the search parameters, but also its one column layout means this section won't require a redesign for tablets and mobile devices.

Track detail view

To prevent constant toing and froing between the search result page and track detail page, I devised an expanded track view that sits in line with the search results. Upon clicking a particular track, all other results will blur out of focus, leaving the selected track prominent and expanded with all additional data visible. Once the play button is clicked, a modest player bar appears at the bottom of the screen. The background of this is themed based on the cover art of the track, either by jquery colour detection or background blur filters in CSS.

What the client said...

He’s way more than just a visual designer. Being a web developer also, Al has a very context-sensitive way of approaching design, making it relate to user interaction and technical requirements at all points. He delivered to us not just polished designs but also full HTML style sheets to help us kickstart our dev process, displaying some strong coding skills too.

We continue to work with Al to help us with the presentation of our own product, again our most important work. His level of consistently high-quality delivery means we can rely on him for our best contracts.

Dan Slatter

Director, Idea Junction