Jan
18

Fred Lin Music 2009 is NOW LIVE!

After several weeks of development, I've finally completed my ideal version of Fred Lin Music (FLM), and possibly the best yet.

The new FLM is no longer powered by Flash although it still features Flash elements in the website such as the Player and font replacement effects. The site was coded in PHP using the Codeigniter PHP MVC framework, and enhanced with jQuery and AJAX.

The first thing you'll notice is the very modern interface, with a slight web 2.0ish undertone in the heading banner. The new design focuses on web design trends as well as providing a rich user experience.

Fred Lin Music Main Page Panels

On the main page you will also observe alot of information, information that I believe are useful to both the frequent and first time visitor. Every number you see is dynamically generated from the database of songs, so they are not fake and get updated all the time. As a matter of fact, YOU can decide what appears on the main page by rating or simply listening to the songs.

One of my favourite parts of the Main page is the stats block.

flm-stats

This is a block of statistics of songs on the website and visitors. Again, these numbers are all generated on the fly, and get updated the moment I upload a new song.

The Music Player has also been given an updated look, and its playlist options are configurable via the Playlist dropdown in both the Main Page and the Music Pages.

Fred Lin Music Player

The single best feature about the new music player is that it's playlists and contents are all generated dynamically. What it does is generates in the dropdown a list of all categories in my songs, and then populates the respective playlists with all songs in that categories. To avoid having unsuitable songs to be showcased in the default start up playlist (such as demos, commercials, etc.), I have an option to specify whether a song should be included in the default playlist. Cool huh?

Before I move on to the Music section, I'd like to mention the Contact page which now contains a custom built Chatbox, along with an Email form.

Fred Lin Music Contact Page

Usual trends would have the chatbox be placed in the Main page itself, but I didn't want to over clutter the main page, and drive the interest away from the songs itself. The Main page was designed to be an interest magnet towards the Songs of FLM.

Also worth mentioning is the new Services section, where I explain the different processes of Music Production.

Fred Lin Music Services

Here I made use of a jQuery Carousel (slider) to display the various information upon clicking on the titles. The idea was to provide an interesting way of presenting the information, rather than just presenting it page after page.

Finally, we come to the Music section, the biggest and most complex section of the site. I leave the other unmentioned section(s) for your own exploration. ;)

Fred Lin Music Songs

Upon entering the Music section, you will notice immediately a page shrink. The entire page has shrunk to just a Category and Song selector. Don't worry though because this will expand the moment you load a song, without refreshing the page. As mentioned earlier, there's a Playlist dropdown here, and what's different from this dropdown and the one in the Main page is that there's a Clear Playlist option in this dropdown. The reason is so you can make your own custom playlist as you browse through the songs! Woot.

Fred Lin Music

The song section features a beautiful green palette, with icons of various uses. The most exciting new feature of the new site is the addition of Ratings. Anyone can rate any number of times on the rate button at the top right corner. These ratings are calculated immediately and updated on the Main Page's 'Top Rated Songs' and update the stars on the song page.

As mentioned earlier, other than playing the song in the Music Player, you can also add it to the playlist.

The comments section has been revamped a little to be more user-friendly.

Fred Lin Music

The Tell-A-Friend section has also been updated with a preview to show you what is going to be sent to your friend. I -was- going to make it available for the user to write a custom message, but I realized that functionality would be abused very soon as a spam tool, so I decided against it.

Fred Lin Music Tell-a-Friend

You'll notice I didn't use any of those anti-spam image/text verification tools for my forms. That is because I don't have to. With jQuery, I made use of an alternative method of preventing Spam Bots from spamming.

Lyrics are now all available for viewing as well.

Fred Lin Music

The BIGGEST challenge of the entire website was to be able to navigate around the music sections, lyrics, different songs, comments, etc. WITHOUT having to refresh the Music Player, or the page for that matter.

That was easily acheived in my previous Flash based versions, but moving that concept to a Non-Flash environment was tough. Thankfully there is AJAX. Even with AJAX, I had to make sure not to overuse effects, as I still wanted my individual song sections to be searchable on google and be 'linkable'.

With some clever thinking and manipulating, I finally acheived that, and as a result of that, not only is your Song browsing experience seamless, you can create your own playlist from songs in all the song categories.

The overall design concept for FLM 2009 was Readability, and Usability. You will notice that font sizes have been pumped up, line spaces heightened and an abundance of blank space surrounds the design, giving your eyes the space it needs to focus on the relevant section.

That wraps it up for the feature on Fred Lin Music 2009. It has been a great learning experience, I felt like I was back in School again, except that I was actually learning something new this time. Hopefully this will prove myself as a serious Web Designer/Developer as well as Music Producer in the days to come.

:)

Have fun!

http://music.Fred-Lin.com

Fred Lin