Kneepro.com is a small, local business selling well-crafted knee and elbow pads to help people who do a lot of work (and play) on those body parts. Since they only had 2 products in limited colors, we wanted to show case them in an interesting way on the homepage, so I pitched the idea of a raising curtain effect where scrolling would lift each slide, revealing the exact same product in the exact same position but in a different color with new information on each slide.
The colors used in the design are chosen from the products themselves and used prominently along with strong slab fonts to give the site an overall bold feel.
This site also presented an interesting coding conundrum, as the sliding panel effect of the homepage didn't work quite so seamlessly on touch/mobile or Internet Explorer. Browser detection is something I only use in extreme circumstances, and it seemed to me this was one of those rare times. Users using the site on IE11 and under are served the same experience as a mobile user where you can scroll down the homepage normally, or with up and down arrows if the user wants to click from one section to the other quickly.
I created the overall design and coded the HTML/CSS and put together all the JS/jQuery for the unique homepage, skinned the CMS and edited the product images.
...or scroll on for more: