FitPro Music

Challenge

FitPro Music came about from an interest for FitPro to spread its music (m2p) to the American market. I was given the task to start conceptual designs, and a flavour of ideas came running through my head. As its a music store, we’d need some kind of interface to play demo versions of the songs too. It would need to be:

• Energetic
• Have a positive feel
• Look fresh
• Unique

All these points were important, as FitPro would be going into a market dominated by other companies (already selling fitness music). Therefore, the website needed to have something special about it to attract the fitness market and get them to buy music.

Identity

There came a need for a logo for the music store. To help us brand the website and ultimately make sure we have all our corners covered when it came to marketing it.

Fonts

I decided to browse through some fonts on dafont.com. Just even typing the name of the website and strolling through all the different types of fonts spread new ideas into my head. I found some fonts that I thought would suit the website.

My ideal choice

Applying the feel and look of the selected logo designs onto the website

However after much debate and two weeks worth of experimentation from both Web and Print departments, the original logo that I designed was used. This wasn’t because of design issues but more of legal ones.

Design

Analysis

My initial ideas were drawn on paper, but nothing good really stood out from my wireframes sketches. So I decided to have a look at some other websites. I found out three main objectives for creating a website which the user would understand within 30 seconds of arriving. These three main factors were:

1. Logo
2. What we do
3. Content

The logo would give the user recognition, what we do helps explain the relevance of the website and finally content gives the user some evidence that there is something worthwhile if the latter two points interested them.

I like to explore and this usually applies to all areas of life for me. And it was a good that I came across the author of Dept Charge font, as when I went onto their website I discovered an array of amazing fonts. Emil Bertell & Erik Bertell’s fonts were strong, powerful and original. I’m not sure whether it was the fonts or the great creative work I saw on their website but I shifted into 2nd gear! Using a Dingbat font that I also acquired from dafont.com and 22.03 font (freeware) from Emil Bertell & Erik Bertell’s website. I came up with this energetic and bright design:

After some discussion with my Senior Web Designer, I went back to my trusty tool (Photoshop). I tried to bring components from the previous designs to guide me into designing my next concept. I looked back to our core goals and tried to use unique and unusual shapes to help attract the user and give the website a “i’m different” feel. The menu also needed a higher level of navigation for home, about and help sections of the website.

Final Design

The Senior Web Designer and I agreed that this design was the right way to go. After experimenting with imagery, we came to the conclusion that the big image would not benefit the design. I had a look at our image library and collection of stock photos and the “bodies in motion” collection stood out. I applied it to the design and they matched perfectly together!

Flash

Progress with the development wasn’t going anywhere. So I decided to take on the task of creating the interface as well as the development.

Design

My idea of how audio was going to be previewed was slightly different to how it is now. I had envisioned having a little mini-player next to each track title and the user would be able to play each track that way. However, the design was impractical for several reasons – for exmaple; what happens if the user tries to play several tracks at once, etc.

Since we used Thickbox to display the mp3 player, the design had to be changed around to allow the track title, artist, bpm and duration to be shown. Using my existing designs I magnified the interface to 400×200. I made sure that all the text fields were dynamic so that they could changed via actionscript.

Music

Importing and streaming a mp3 file was pretty simple. Creating a variable via sound class, making sure that isStreaming parameter is set to TRUE inside the start() function.

Progress bar

The mp3 player needed a progress bar, to show the user know how long the audio preview has played and how much of the preview is left. A few problems came into mind: the fact that the shape of the progress bar (above screen shot) wasn’t rectangular and my ActionScript wasn’t up to scratch to create the curved shape via mathematical equation. I decided to mask over the shape and move the mask instead.