FitPro Music
Project not available, but view mockup
Table of Contents
Details
- Date Completed:12 October 2006
- Days/hours spent:2 months
- About the company:Fitness Professionals
- Software used:Dreamweaver, Photoshop CS, Illustrator CS2, Flash MX
- Tag:CSS, Javascript, SWF (Flash 6 Actionscript 1), XHTML
Currently working on…
Lots of freelance and e-commerce projects.
Latest Work
Search Portfolio
Designed and created as well as applied my flash and javascript skills to this website as FitPro's Middleweight Web Designer.
1. Introduction
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. With all these factors and a basic site structure I looked at creating some conceptual designs.
2. Design
Brainstorming
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:
- Logo
- What we do
- 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.
Initial Design Stage
Conceptual Design created in Photoshop using m2p-like imagery.
I realised nothing fresh or funky could come out of the dark colours. The abstract imagery provided more of a mysterious and powerful feel rather than young and bright feel. And its important to know when to leave a design, as you can see I had finished completing it before I found it to be useless for the website core goals.
Fonts
I was really struggling for some ideas at the beginning as I wasn't given any imagery or material to base around my design. So 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.
Anagram font that sparked some brainstorming…
Dept Charge font, I liked the curves of this font.
SF New Republic font, a simple and clear serif font.
Further Designs
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:
A good conceptual design, heading in the right direction.
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.
Designed this concept with the core goal in mind.
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!
Final design stage…
3. 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. More about the logo design…
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.
4. Fine tuning
This stage meant going over all the Photoshop files to make sure they were all consistent in design. This included reducing colours down to a max of three to give more locus of control to the user and to reduce eye strain. It was also important to give the CDs real titles that we'd use on our website. As well as applying the finalised logo design and links on the footer to improve navigation for users. We also made sure the radius was the same for all curved elements on the page, as it would make the design much more pleasant on the eye.
Fine tuning the design.
Marketing Additions
We also got comments back about marketing and applied these changes accordingly
5. XHTML & CSS
Converted old existing HTML (table layout) into XHTML (hand coded) valid including the CSS (hand coded).
Internet Explorer only
I came across a slight problem where Firefox was saying that parts of our CSS was deprecated. This was because of Thickbox using Internet Explorer's (IE) filter opacity function. I also had to use the PNG transparency fix for IE and the behaviour function which allowed the JavaScript to be applied to PNG's would cause another warning from Firefox. To stop these warnings firing off in Firefox, I used Microsoft's if statement for IE browsers:
<!--[if lt IE 7]>
<style type="text/css">
@import url(styles/iewin.css);
</style>
<![endif]-->
The if statement would check to see if the IE used is less than version 7 and it would import a CSS file if it was true.
6. JavaScript
jSearch
I really wanted to start implementing "Web 2.0" features into the website as it would bring our web presence forward and also allow me to experiment and understand how these JavaScript libraries worked. I came across a really good method on Steve Smith's orderedlist.com website using script.aculo.us and prototype but I found this to be a bit too heavy (80KB).
Functions
I came across a reliable and small javascript framework (16KB) called jQuery which had all the functions that I'd need to make the live search work. I started looking at how Steve Smith created his initialisation file for live search and what functions I would need to include for my own live search to work.
activateSearch: when the page loadeddoSearch: when the user submits the formdoComplete: AHAH request is completeresetForm: reset the form when search is complete
Extra functions added for search box
setClick: what happens when the user clicks on search boxsetBlur: what happens when the user clicks out of the search box or submits the form
The javascript would send a AHAH request to a coldfusion page. The results would be displayed in microformat HTML on the coldfusion page and returned back into a
<div> tag and using jQuery's slideDown() to show the results. This seemed a better method than using a standard page submit and waiting for the results to display on another page. It was quick and snappy; just as a search function should be like.
CSS styling
I applied CSS styling to the search results <div> tag. Initially it would slide down and move the elements below it further down. However after we added the marketing material to the home page, that method was impractical. So I made the <div> tag the absolute layer. This way it would float over the existing HTML rather than push it down. I also added a close button to hide the layer.
Search options
The website needed some search options, which allowed the user search by album, artist, song or BPM. So I created a radio button group. I wasn't really happy with all those radio buttons being displayed below the search box; it looked busy and cluttered. So I used jQuery's hide() to hide the radio buttons and make them appear once the user clicked on the search box (using slideDown() to make the search options appear, but placed within oneclick() function so that the slideDown() function would only be applied once).
The main problem was getting the radio button that the user selected and applying that into the AHAH request. Searching through a couple of discussions on jQuery's website, I found one entry about a form plugin. So I had a look through the person's javascript and found they using jQuery's each() function and searching through all <input> tags to find if it was a radio button and if it was selected. I applied this to the JavaScript and it worked beautifully!
var radio_value = '';
$('input').each(
function(){
if (this.type != 'radio') return;
if (!this.checked) return;
radio_value = this.value;
}
);
Compression
Using Dean Edwards Javascript compression algorithm; to compress the JavaScript from 2.1KB to 1.7KB, is not a massive decrease but I believe it's also important to make sure everything is optimal. So the user and the server don't have to suffer.
View the demo version of jSearch.
What about people without JavaScript enabled?
Our Senior Developer asked me the most annoying question that anybody using JavaScript libraries gets asked: "What about people without JavaScript enabled?" Now I was on a mission to prove that I could change the JavaScript around so it would work the same (but without any of the animation) if a user didn't have JavaScript enabled (which probably is only web designers/developers looking for faults in other websites!).
I found out that jQuery allows one to apply CSS to any HTML element. With this in mind, I applied css('display', 'none') to all the HTML elements and used jQuery for animation or AHAH. This way if JavaScript wasn't enabled the HTML element would simply appear.
$('input#s').oneclick(function() { display_search(); });
$('p#search_options').css('display', 'none');
function display_search() {
$('p#search_options').slideDown('normal');
}
The code above would make the search options slide down once the user clicked on the search box. But because the search options are hidden only via javaScript they would appear if JavaScript was disabled. This logic was applied throughout the site.
Thickbox
Each of the tracks had their own audio preview (an mp3 file). We went through many ways (QuickTime preview, Flash application with all tracks, etc…) to implement a method which was easiest for the user and ourselves. The method which I found easiest was using Thickbox. This allowed one to display images as well as pages through a <div> layer.
7. Flash
I decided to take on the task of creating the interface as well as the development. Using my existing designs I magnified the interface. More about the mp3 player…
The mp3 player interface