Visit Site »
Fisherfilms.org is a site that I recently finished for a friend of mine starting his own film-making and multimedia business. I was really excited to work on this site because mainly because could I be as creative as I wanted. Since, the site was mainly an online portfolio, I really wanted to make sure that the work was highlighted as the main feature on the site. Therefore, I created a spotlight effect in the background and highlighted the images and video player in a large white border to make them stand off the background. All of the UI components such as buttons, nav menu and highlight effects were done in a bright blue to contrast with the other elements.
I was also excited to experiment with a new online video player that I discovered. This was the Flowplayer flash video player. I have never really found a online flash player that I liked, but this player puts all of the others to shame, and it’s FREE! Not to mention you can customize your player and stream your content so you are not waiting on extended load times. The Flowplayer UI library also has lots of plugins that other fellow developers and designers can take advantage of to not only save time, but mainly to make our sites look really stinkin’ cool. I took advantage of a few of these plugins/extentions myself – the jQuery slider and navigation plugin. These techniques are described more in the highlights below.
jQuery Content Slider
This slick jQuery slider technique gives a great transition effect between the videos on the “Filmography” page. By using the Flowplayer jQuery toolset, the jQuery slider (scrollable) was very easy to implement and customize. Since this is the main page on the site, I wanted there to be a nice effect to transition between the featured videos and this did just the trick.
Flowplayer Navigator Plugin
The convenience of the navigator plugin from the Flowplayer jQuery tools allowed me to create an additional, more user friendly means to navigate between the videos. By using the navigator plugin, visitors could quickly jump to a video via the thumbnail display instead of browsing through one by one.
Nav Menu
The site’s navigational menu was a key element to the site’s design. It has a great hover effect as well as a current page designation feature. The entire menu was created using CSS and background images.
Colorbox Lightbox
This customized lightbox feature allowed me to create a very nice image gallery display on the site’s “Photography” page. There are tons of lightbox scripts on the web these days, but the one I go to most frequently is the Colorbox library. Not only is it very easy to use and customize, it utilizes a great popup functionality to show larger versions of the images and also a convenient way to browse through the images.