Collection 100 - Designing for web

Aside from the alien abduction kit, I wanted to create a unique slideshow of the illustrations on a website so visitors can scroll through the designs. I found this one particular site created by Nike which featured an array of images with stylish transitions. It's harder to explain therefore it is best to look at the site itself:

www.nikebetterworld.com

To prepare the images for web, I created a 1600px x1600px document in order to cater for most screen sizes (bar my own) and then re-sized each illustration to fit. However, the size was not too much of a problem as there would simply be a border either side - unless the user re-sizes their browser window. As the images and text will move at a different rate whilst the visitor scrolls vertically, these needed to be two seperate images, as explained below:

My friend was then able to use these images and re-create the Nike slideshow and its transition using javascript. However, this only features the first 25 images due to the lengthy process of re-sizing, importing and coding all the images to work efficiently.

www.ryanclark.co/labs/joe

(The website may not work on Safari).