Cooper’s Pack is a Children’s Travel Guide Series that uses real world photographic imagery and fauxtographic elements created in Photoshop to illustrate the adventures of a 7″ tall plush-toy dog named Cooper.
Cooper travels to such places as New York, London, Paris and Amsterdam. In each city he meets with a friend or befriends a local and takes a tour. These friends are also plush-toys and have quite exciting lives of their own.
Seattle:
New York City:
London:
Alaska:
Styling
The styling of the series is derived from the concept of a photo collage journal as if made by a plush-toy animal. Each of these city journals are published as books by the writing team of kyle & groot.
CoopersPack.com is the flag ship site which emulates the scrape book theme.
Creating a Virtual History
The rest of the sites are designed to create a virtual history of the other characters in the series. All the content including product imagery and branding was created for each site.
References to the products and the sites can be found in the books as incidental advertisements in the backgrounds of the fauxtographs.
The Project: Cooper’s Pack
Purpose: Re-Design. Previous site was done in Flash which does not render properly with the iTechnologies from Apple. An e-book was introduced with the Seattle Guide so the need for the site to preform well when seen on an iPad or iPhone was critical. The use of the WordPress CMS was also desired to aid in easy and timely updates.
Goal: To appeal to the 5-10 year demographic, both in visual interest and in user-ability.
Challenges: The overall look of the site needed to be visually exiting without the ubiquitous use of actual bells and whistles. Rich graphics produced from quality stock was mandatory. All design elements needed to be both practical and intriguing. Heavy graphics usually tend to add considerable weight to a page so a need for white space was necessary to alleviate the page load time.
All the imagery on the site was hand-crafted for explicit use on the website.
Production: All page layouts were created in Photoshop. Traditional animated GiFs and CSS were used to create movement and roll-over effects on menu and link images. The pages were created using XHTML coding. A custom theme was developed for use in WordPress.
Tools: Digital camera, Photoshop, DreamWeaver – WordPress CMS.
The Project: crumpetLive
Purpose: To create the back story of the character Crumpet and his music tour crumpetLive.
Goal: An eye exciting experience using the primary colors and a hint of peppermint.
Challenges: Extensive use of JavaScript is incorporated to display the different music titles, tour posters, fauxtos and schedule.
All the imagery on the site was hand-crafted for explicit use on the website.
Production: Logo creation and all image development
Tools: Digital camera, Illustrator, Photoshop, Dreamweaver (for site organization), XHTML, CSS, JavaScript
The Project: Ferguson’s Fabulous Flavours
Purpose: The L.L. Ferguson character from the London book is the heir to the Ferguson Fabulous Flavours empire. This is the company website.
Goal: To produce a vivid colorful assortment of jams, jellies and preserves.
Challenges: Creating five products and develop a theme that can be used throughout that focuses on fresh ingredients and fabulous flavours.
All the imagery on the site was hand-crafted for explicit use on the website.
Production: Logo creation and all image development
Tools: Digital camera, Photoshop, Image Ready, Adobe GoLive for Layout – Code done by others.
The Project: Zoe S.A.
Purpose: The Zoë Renard character introduced in the Paris book is a botanist and has her own line of perfume produced from natural botanicals.
Goal: Create a site that emulates the concept of the perfume industry.
Challenges: It was necessary to digitally create the products and the spilling effect.
All the imagery on the site was hand-crafted for explicit use on the website.
Production: Logo creation and all image development
Tools: Digital camera, Photoshop, Image Ready, Adobe GoLive for Layout – Code done by others.
The Project: Woolex
Purpose: L.L. is the spokeslamb for a few products which are featured as ads throughout the Cooper series. This is the site for his watch ad seen in the New York book.
Goal: Produce a site which has the richness of a high end expensive watch and the lightness of a 4″ tall lamb.
All the imagery on the site was hand-crafted for explicit use on the website.
Production: Logo creation and all image development
Tools: Digital camera, Photoshop, Image Ready, Adobe GoLive for Layout – Code done by others.
The Project: bluberr-E
Purpose: Another of L.L.’s products. This is the site featuring the Communication Appliance favored by all those with a really big thumb. The adverts can be found in the London book and will have limited showings in both the Paris and the Amsterdam books.
Goal: A site which has the edginess of up-to-the-moment technology and the joy of a small smiling plush toy.
All the imagery on the site was hand-crafted for explicit use on the website.
Production: Logo creation and all image development
Tools: Digital camera, Photoshop, Image Ready, Adobe GoLive for Layout – Code done by others.
The Project: vanGraght
Purpose: A coot named Vincent vanGraght is introduced in the Amsterdam book. He owns vanGraght cycle where Cooper rents a bicycle. This is the store’s website.
Goal: This site has the dual purpose of being a case study in User Interface for Commerce.
Challenge: The site dynamics require a SQL server and PHP files. Due to the server side rendering of PHP it was necessary to develop the site blind with occasional uploads to confirm the code was working properly.
All the imagery on the site was hand-crafted for explicit use on the website.
Production: Logo creation and all image development
Tools: Digital camera, Photoshop,Image Ready, CSS, PHP