Awesome One Pager bursting with color promoting a new range of ‘Airpure’ car fresheners based on popular Walls ice-cream lollies. The animations come to life using the open source JS plugin, Skrollr. Seems like a real fun project – thank you for the great build notes below, amazing the outcome when you have freedom to experiment:)
The beauty of this project was - NO BRIEF! Albeit there were a few requirements that popped up along the way, it was more fun than anything else. We started the conversation along the lines of 'something animated', fun and representative of the kind of product we were to promote. I knew my client had the packaging graphics from Unilever and that they were in vector format. His budget was limited and I had these assets to play with… so a one pager seemed like the ideal choice. I opted for an open source JS plugin called Skrollr (which I love) to provide the animation framework, we wanted to make the site accessible so it also had to be responsive - Skrollr is! I worked up the main UI elements, and then started storyboarding in Illustrator with the packaging graphics. I got to a point where I couldn’t take the layout any further without the browser being a design tool. This after all is an animation with transitions being integral. Getting used to how Skrollr creates the transitions took some getting used to. It has tons of documentation but the only way to learn with it in my opinion is to get your hands dirty by ripping the examples apart and putting them back together in your own way. I ended up running out of time and as a result there are few ‘niggles’ that bother me, however isn’t it always like this when you design?
What did I get out of it? I’ve got piece of work that is like no other I have created so I’m happy, it’s not every day I get to work on something like this and never have previously!
