A good amount of illustration goes into website design, however more often or not it isn’t the focus of the site itself. Illustration often gets relegated to the header, icons, or some support graphics or other benign bits. However on this project the site was an illustration itself, and the awesome programmers at MOC really made it shine.
For me personally I have been working digitally in my professional life for a few years now. However most people only get to see my traditional media work since those pieces aren’t bogged down by N.D.A . contracts, and project timelines and Blah Blah Blah. This site was a chance to challenge those skills while also making something that could carry my imprint and be seen by a lot of people.
Concept Phase.
Here is a piece of the official MOC Case Study on DPC:
“The Disney Environmental Affairs team was expanding Disney Planet Challenge, a contest that invites 4th, 5th, and 6th grade classrooms to create solutions for environmental challenges in their communities. The Disney team contracted Midnight Oil Creative to redesign the website, expand registration nationwide, and create an application that allowed teachers to create a digital portfolio. “
“The challenge of this project was significant and multi-faceted. Disney’s Planet Challenge site was more than just a simple re-skinning project, as the original Website was flat, content-heavy and not easily navigable.”
Due to the nature and audience of the project I knew I wanted the site to be illustration heavy. Early on in my exploratory sketches I made this spooky little thing.
It was too spooky to use in DPC but I liked the tree popping out of the hole in the ground. I wanted the world of the site to feel like it was constantly being recreated. In addition to that I wanted each thing in the world to feel like it was made from unexpected items (Leaves would be paper, hills would be fabric etc…), much in the same way a scrapbook is made.
Incorporating these concept I presented the below sketches as my first comp to the client. MOC presented three to four potential looks to the client. After focus testing (my joy of joys) and deliberation they ended up going with my illustrated world comp.
Initial concept ideas that I presented to show off this “scrap book” workd where trees pop out and frighten you with content.
Further exploration into figuring out how this would be a website and a drawing.
Building the site, or how to get a lot better at digital painting really fast.
Having to now run with the look I proposed, I started building out the design for the final site. I have been using Photoshop for years. However this was really a challenge since I had to generate all the art digitally, where as in the past I relied on hand drawing with computer coloring.
This is the illustrated backdrop of the DPC site. The Fabric hills were a holdover from my scrapbook world idea, but it made more sense to make the trees and leaves feel in a more painterly style than the hills.
A further developed concept for the wood modules appearance.
For the art enthusiast: The two images below show off my technique for creating the textured look of the site. First I would illustrate the structure using vector shapes. I would then lay photos of real textures warped to fit with the shapes perspective (or volume) and set them on multiply or overlay layers above the vector shape. Finally I would go in and paint gradients and finer details to overlay the texture to create a look of depth and dimensionality. I used this technique to create the hills, wood modules and nav bar as well as the birdhouse. This technique is reminiscent of actual painting where you start by flatting in color, than add details and tone on top of that structure.
The birdhouse is also call back to Last years’ DPC Winners who built shelters for ducks.
The DPC Bird, which started as kind of a lark but ended up more of a bluebird. Get it.? A lark !
Disney Sites have a really tight content area. So my designs had to account for everything readable and important to fit within a 994 x 700 pixel space. To make the “world” of the site feel bigger I designed the site to have a flat background with a lot of illustrated depth that would continue beyond the restricted area. Then I created wood modules to house all the site content. These modules would always live on the foreground hills (appearing to pop out of holes in the ground) so that their information would fit within our restrictions.
The final site, had numerous pages as well as overlays to display more content. MORE CONTENT!
Getting Lucky.
Call it megalomania, but I have dreams of making such a stunning piece of art that it shakes people to their core. These fictional clients will go so ape-shit that they want to use it as the springboard for their companies identity, throw it on mugs, plaster it on buildings and other such delusions of grandeur. I used to send out postcard promotions and had the similar fantasy that an Art director would see it, instantly call me to compliment my awesomeness, and offer me tons of work. (p.s. this never happens)
But when it actually does happen it is awesome but also a little nuts and overwhelming. The client loved what we at MOC had created for them on DPC. They enjoyed my crazy little candy colored hills so much, that the backdrop and blue bird became part of the Disney Planet Challenge brand. The MOC Display department even created a full size version of the site for a convention DPC attended.
Walking through your own art is a surreal experience, especially when it is locked in a gray void.
All in all it went well (for me at especially) and it was a super fun, and challenging project to work on. Thanks to Midnight Oil Creative and Disney Environmental Affairs for the creative freedom and support!.
- VP









User Responses
2 Responses and Counting...
02.07.2010
I never knew you could do such things on illustrator! I always use Photoshop and I’ve had Illustrator sat on my laptop the whole time! I really need to learn how to layer textures like that, it makes such a cool effect! Your design is amazing, reminds me of the kind of dreams you get as a child, especially the fabric hills thats a really nice touch!
Thanks! The trick is to use both programs, Illustrator and Photoshop, in concert with each other. Let illustrator handle the tough vector work and pattern wrapping. Then export your stuff as Smart objects into Photoshop where you can give it a more painterly look. Good Luck!