Tease don't preach
- It all starts with an empty stage...
- Every week a new character is added to the stage, introducing a key aspect of TCDC.
- The goal is to tease and get on the designers' radar without revealing too much.
- This microcosmos grows as TCDC's Grand Opening approaches...
How did we do it?
- First, we had to come up with a concept for each week and have it approved by TCDC's board.
- It involved lots of meetings, brainstorms, proposals and counter proposals.
- We had to craft a catchy headline, a story to tell and figure how to actually produce it.
- The deadlines were very short and the budget limited, so we had to be creative, plan well and execute fast!
Motion Capture
- The budget didn't allow for fancy cameras, chromakey, lighting, costumes, make-up and actors.
- Our team and a few friends, one of our office walls, a tripod and a Cybershot did the trick.
- Fancy props such as a pillow was used to stuff a shirt and look like a chubby security guard.
- We shot videos and exported keyframes as black and white images for better contrast.
Vector Outlines
- The keyframes were used as reference to draw the character's outline, frame by frame.
- Tedious? You bet!
- The outlines were then filled and styled to look good.
- Since all characters and items on stage are vector images, loading times could be kept very reasonable.
Interaction
- All illustrations were handed to our Flash developer as a storyboard.
- We indicated where the animation should loop, what should happen on click, when to wait, ...
- At that stage, we sometimes got changes request from the client and had to redo the whole capture, outline and drawing!
The office would turn into a beehive until late in the night.
Script Magic
- All characters have their own personality and walking pattern.
- Their movements are scripted for random actions and timing.
It's not dumb sequential timeline animation! - Characters can't bump into each other or furniture thanks to some ActionScript voodoo.
- Every item on the stage is interactive, reacting to clicks and mouse hover.
Introducing a highlight
- Clicking on some characters would make the whole stage zoom and center on them.
- For instance, clicking on the shopper provides more details about TCDC's shop.
- A selection of design products would appear when clicking on "Be inspired by shopping".
Action!
- Here is our friendly security guard...
- Click on him to see his mean macarena moves!
- There's no soundtrack so you can hum the tune yourself:
- Mahna Mahna Mahna Macarena
Mahna Mahna Mahna Mahna Mahna
Mahna Mahna Mahna Macarena
Heeeeeey Macarena
Aaaaaaah!!!
Background
A design centre is an organisation devoted to the public promotion of design, emphasising its economical, social and cultural value, through workshops, seminars, publications, awards or exhibitions.
id3 was commissionned to conceptualise and implement a teasing website for the 10 weeks leading to the opening of TCDC.
All of this with a very limited budget and short deadlines.
The objectives we set ourselves were:
- to create a buzz and get on the radar of the design community by piquing its curiosity
- to build a momentum that would climax on TCDC's opening
- to start creating a database of visitors
- to create a website that visitors would want to visit again and again to see how it evolves
Responsibilities
Conceptualisation and strategy, information architecture, graphic design, copywriting, video shooting, sound design, Flash development with ActionScript, CSS/HTML template development, JavaScript development.
The result
A unique and intriguing website that caught the designer community's interest and helped build a momentum until TCDC's opening.