The Listenator - a Visual Mockup of an Online Audio Player

TL;DR:

** UPDATE: The Listenator is now live - read more here! **

• The task: Design the UI for a responsive web-app that plays soothing sounds from all over the world.
• Desired output: A visual mock-up, made with web standards/technologies in mind, and which could be converted into actual code fairly easily.
• Approach: Desktop-first design, as the app is inspired by the use of YouTube relaxation videos in full-screen mode.
• Considerations: General design principles & usability; with an eye on both visual gestalt and stuff like optimal button sizes.
• Wins: Showing an example of my visual design skills and UX design process.

Concept:

A visual mock-up of an online audio-player featuring field recordings.

The Listenator is inspired by the way YouTube videos are sometimes used as mood-setters; kind of like the classic fireplace-videos - but beyond. There is an abundance of videos featuring gorgeous footage of exotic landscapes and animals, soundtracked with new-agey music. I have seen these played in class rooms for occasions where reflection or quiet activity was the goal. I thought I would design an experience featuring field recordings rather than music, as I have access to lots of those. with photos from the recording locations (could be expanded to video).

The Listenator in its initial state, which is also the active state (mouse or touch activity).

Functionality:

Basically an audio player meets a desktop wallpaper. On page load, the page is shown as above, with audio player controls visible. The top of the footer is also shown, with a sentence to hint at more content below the fold. This page-state is seen whenever there is an input event (mouse, keyboard, touch), and when no sound is playing. When audio playback is initiated, the page changes state to a full-screen view of the background image or video that goes with the audio. This could be a full-screen modal with a bit of delay/fade-in. The audio controls are fairly standard, featuring a play/pause button, a song-selector with skip forward/back buttons and a volume slider. Using the html audio element should be adequate, since there is no advanced user interactions of critical timing needs.

Simple and recognizable controls.

Layout:

The basic grid used is 3-columns at 960 px wide with 20px gutters, which is most visible in the footer. It's obvious that the header doesn't quite conform to this. In this iteration, I paid more attention to usability in terms of whitespace, to help the user separate the UI elements. The main body is taken up by a photo, setting the mood together with the audio player. The red line demarcates the "fold", keeping the footer out of sight, as long as the user doesn't scroll.

Color scheme & typography:

I wanted a rather subdued color scheme, as the content (audio and visuals) should be the star of the show. Heavily inspired by bandcamp in this regard, I chose a petroleum blue for secondary typography in the footer and a gray-ish brown as background for header and footer, which I found less dull than a straight-up gray. Primary typography is white, for good contrast against the background. All in all, I feel this color scheme would go well with photos containing any combination of colors, while still retaining a bit of personality.

Main color-scheme and fonts.

The font is Georgia (could be a similar serif font), for a slightly "bookish" quality, which I think makes sense for the contemplative purpose of the app. Classic rather than graphic. Font sizes are, for desktop and mobile respectively, 14, 22/16, 28 and 58/22. The general idea is to establish a hierarchy of page elements for the user, while using a limited number of font sizes. For this reason, sometimes all caps are used for titles instead of larger fonts.

Early version of controls. The purple is not exactly flexible with regards to changing background images, and the face-shaped layout is... distracting.

Mobile view:

In the mobile view, the background image is less important, so the controls are front and center in the view above the fold. Here again, I tried spacing the controls apart for ease of use (hitting the right buttons, etc), while still keeping them close enough together for quick comprehension of their use. The play/pause button is around 45 x 45 px and the skip buttons are around that size too.

Next iteration:

• Decide what to do with elements in header; maybe lay them out with a separate CSS grid?
• Test both desktop and mobile layouts with users - do they understand what they see?
• Test color scheme with a few different background images.

Technology:

• SVG (made with Inkscape])