The brief for this project was to create a web app allowing the user to design their own letterman jacket. The user would be able to choose the body & trim style and the color of the jacket body, sleeves, snaps, trim etc. After completing the jacket, the user has the option to print their design along with style information, or email it to a customer rep for a quote. The app actually had a dual purpose, according to the CEO, who said that his staff would also be using it when interacting with clients.

I was fortunate to be working with a great graphic designer on this project who provided the basic layout, jacket designs and fabric swatches. I had the arduous task of creating nearly 1000 transparent gifs for the jacket panels. Lucky for me, Gimp made this a lot easier. In the application these transparent gifs were layered on top of each other to create the jacket.

The interface was done entirely as client side Javascript + CSS falling back gracefully to PHP on the server side for that 1% of users with Javascript turned off. No flash whatsoever! The ever-useful wz_tooltip script provides some nice color swatch detail on mouse over.

Now that know a little bit about how it was made, why not give it a try? Click the URL below.

Url: http://www.diamondspiritwear.com/index.php?page=jacket

Tags: php, javascript, applications, graphic design, web site