Listen Page Design Concepts

Main Concepts:

This page is intended for listening to past shows that have aired and been archived.

Element Concepts:

The menu buttons are moved off to the side to make space for the archive area. I toyed with the idea of keeping the menu at the top for all pages, and decided to leave it off to the side of the page to create a section of thirds on the page.

The "On Air"/"Off Air" image will change as their will be an event listener on an IceCast server, when the IceCast server notifies the site that it is streaming it will switch to the on air image and the listen live button will activate which will start the stream. I may or may not put a stream controller in the footer to control the playback of the stream, and show the metadata of the songs playing at the time.

Each audio archive will have a brief synopsis of the show that was being played and an audio controller for an mp3 or ogg file playback. These were going to be split 2 across, the entire page, but with the rendering of the page thirds I decided to keep them all in line. Doing this will also allow for an easier switch to mobile view when I get around to making the site responsive.

When the site does get a responsive layout, the menu will be transformed into a hamburger button which will overlay the menu atop the screen.

I may also potentially change this from a animated background to a static background because of the amount of resources that animation takes. There is a risk that users may not have enough bandwidth or processing speed to render both the audio streams and the animations smoothly.

I encourage you to take some time and take a listen to the station, I was able to put together a brief first show which is the same for all the archived shows on this page. I'll admit it's been awhile since i've done any broadcasting so it's a little rough in some parts, but all of the bits and transitions were made by me as well.

This compass point will ultimately go to the sitemap