Green site roll out
Peter Hauser from VisionPilots called me after I had sent him an editorial illustration on a whim, one that I had created for Michael Gigante for the trade magazine Corporate Meeting & Incentive in late Spring.
Peter asked me to redesign the site for VisionPilots based on that illustration.
The site needed to appeal to young executives, explain the creative work flow of the company, and help his costumers to implement green ideas, thus reducing their carbon footprint in the wasteful convention industry.
I was thrilled about the design and illustration potential of the project, at the same time I was terrified about the Flash implementation and the underlying programming required for a site like this.
Luckily for me, Peter had introduced me to the animator Mark Greene about year ago.
I did a preliminary animation layout with Photoshop. The corporate comic book, speech bubbles and bold green colors would set the tone for the entire site.
After the successful approval, I sketched out each section frame of the entire site. Then, after a meeting of the minds with Mark, we decided to split the work load into different tasks. Mark would be the producer/animator and I would wear the hat of designer/illustrator. The final coding would be done by an external programmer in Kingston NY.
We decided to have no sound for the site unless it would be part of an existing movie clip. Personally, I hate logging onto a site and the first thing one has to do is to adjust the sound volume.
One early issue was the frame size of the site. Some elements, like movie clips, can't be scaled up and have to stay fixed. One only needs to drag the browser window open and closed to find all the fixed and scalable elements.
With that in mind I started inking each element separately, scanning and placing them in Illustrator CS3.
I converted the scans to a vector drawing in illustrator and set the colors in a separate layer. I then labelled everything and added instructions for the animation before handing off to Mark.
Soon the first .swf files started coming back to me by e-mail. Each section of the site is an independent animated frame that sits nestled into the sites navigation frame.
Some elements and events are timed randomly and others are triggered by the visitors cursor. Since building an interactive site isn't linear story telling like a movie we had a few debates about pulldown panels and the usage.
Could the site be navigated without any pulldown panels? Well, at the end a compromise prevailed.
By the time the first test site was up and running, it became apparent what timing adjustments needed to be made and what elements needed tweaking.
Most of my work is published in print and I usually control what the final looks like, but it was fun and inspiring for me to work with a team.
It was exciting to see my drawings come to life in this interactive site. My partner in crime, Mark Greene, did an amazing job.
Please take a look here.
Walk cycle test