TCDC Teaser Website

TCDC Teaser Website

Teaser website for the opening of TCDC Thailand Creative and Design Center.


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.

The Thailand Creative & Design Center (TCDC) was founded in September 2003, as a national initiative to support creative and design individuals and enterprises in Thailand and the region. The center is a key catalist in reexamining the root paradigms of “tropical lifestyle design”.


We were 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 stage on which actors and highlights appear on a weekly basis

It all starts with an empty stage… Every week a new character appears, 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.

But 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.

Proposal of local artist trying to peddle art under his sarong

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

Capturing the macarena moves of the security guard

The budget didn’t allow for fancy cameras, green screens, lighting, costumes, make-up and actors. Our team, neighbours and a few friends were called in to move in front of the camera, impersonating visitors from all walks of life (security guard, hiso lady, artists, kids, …).

From the stills grabbed from the video sequences, we prepared vector illustrations. The illustrations then had to be modified for each keyframe to create the illusion of movement. A painstaking process, to repeat on a weekly basis.

Vector Outlines

Vector outlines of a character

The keyframes were used as reference to draw the character’s outline, frame by frame. Tedious? You bet!

Vector keyframes

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.



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 hovers.


Shop 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”.


Here is our friendly security guard…

Chubby security guard dancing the macarena

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