I don’t usually do write-ups on the sites that I have worked on but I enjoyed this project so why not.
The homepage for this site has gone through 4 different version that include a CSS3 animated intro, a HTML5 Book where you can click through each page and even a Flash version of the above in hopes that it would be faster to download on slower connections.
The end version the client went for was a subtle parallax effect which works great! It gives you the ability to see all of graphics and illustrations for this seasons clothing. It went through many different revisions and many different layers (9 layers at one point) just goes to show that more is not always better.
The product listing page was also fun to create for this project. The main filter system is pulled in through Ajax to reduce page load and to provide a nicer experience when navigating, who wants a page refresh anyway?
Once an Ajax request is finished all of the products animate to their new locations. This is a great effect and I hadn’t done anything like this before so it was great to learn something new at the same time. Most of the text that is on and around the site in a custom font called Paulson which works really well and is placed on with Cufon.
The product page was another nice one to do. I added some subtle animations to the alternate images and to the add to basket just to catch the users eye when they first navigate to it.
We went through a few versions of the carousel at the bottom of the page aswell. This went from a simple left and right carousel, to just one large image in the middle that was more like a zoom of item underneath it. The end version is definitely better and uses the jQuery easing plugin to give the animations a smoother transition.
When the product page was first made we just had a standard zoom on hover effect so that a potential customer could see the detail of the shirts. We found that this didn’t show enough though, instead I created a custom full page zoom to really show them off.
Well that’s the main pages of this ecommerce build but I have included more images below for you to look at. Let you know what you think in the comments or even go check out the website for youself and have a look around 😉