The jurors’ praise of the Color in Motion website flowed without qualification. After an animated discussion of its virtues, Rice remarked, “We haven’t made a single critical comment.” This crowd-pleaser is the thesis project of MFA student Maria Claudia Cortes, who used her skills in motion, interactivity, and interface design to make an entertaining presentation about the symbolism of color.
An introductory countdown sequence, evoking the beginning of a film reel replete with simulated scratches, takes you to the home page. There, three dressing-room doors open onto different scenarios. “The Stars” is a script-reading session featuring six stylized avatars with hinged limb joints. Each figure, representative of a different color, holds a file with information about its symbolic qualities. Seated on high stools, legs swinging, the anthropomorphized hues fidget while waiting to be selected. Behind the second door, Flash animations elucidate these qualities further. All the colors face the same problem: to find a way to pull down a curtain ring that is out of reach. “Dynamic” red, for example, uses a pogo stick, while “helpful” orange enlists some friends to give it a leg up, and “patient” green plants a tree, waits for it to grow, and then climbs up. Finally, in the “Lab” section, users can play with a virtual kaleidoscope or direct a scene using one of the color “stars” and a series of props.
Cortes sketched the storyboards for each animation by hand. Next she synchronized the animations to the music tracks, which range from big band to Irish folk, and programmed the site in Flash using ActionScript. The simple white backgrounds and neutral gray navigation elements allow the color characters to take center stage.
The jurors liked the emotional nuances of these simple characters—from shoulder shrugs to expressions of loneliness. In the process of creating realistic motions, Cortes says she found herself watching her own movements. Jumping up and down in front of a mirror was more helpful than any animation book in defining the sequence of positions she needed.
Exquisite attention to detail was evident at every level of this accomplished, witty, and vibrant website. The volume-control graphic changes color for each character’s movie, the loading status bar is a clapperboard, and pipettes for adding color to the kaleidoscope continue to drip a little when they are replaced.
Q+A with Maria Claudia Cortes
What was your inspiration for the project?I wanted a subject for my thesis in computer graphic design where I could apply all that I had learned. The main element I like most in graphic design is color. It’s a subject relevant to many disciplines and to people of all ages. I chose to make characters because I always thought of color as having personality.
How did you decide which personality went with each hue?I started from scratch, doing research on color symbolism and communication. There is so much variation between what colors mean in different cultures, it was a challenge to make the site universal. I tried not to be culture specific. I chose ten qualities—not just qualities that described the color best, but those that were best suited to the animation. Some qualities, like sincerity, bitterness, naivete, would have been too abstract to create movements for.
Which color do you most identify with?My favorite color is red, and that’s the one I started with. Of the animations, I also enjoyed doing the green. The music is Andean and I am from Colombia, so it was natural for me to use it.
What technical hurdles did you face in creating the site?The movement of the characters was the most difficult. Tweens in Flash didn’t really help to animate the characters; most of it had to be built frame by frame. Also, choosing the right music, because it would influence the mood and the pace of the animation. I thought of the music as each character’s voice.
What kind of time frame are we talking about?The whole project took eight months—two months to come up with the sketches and words for each color, and six months to actually build the animation. Most of the content, the words, was planned from the beginning. But the transitions between animations changed somewhat during the building process. Seeing two scenes together helped me realize how to connect them.
What are you doing now that you’ve graduated?Working for Kodak doing multimedia and graphic design.