I sat down to make a looping story, with a flat design and limited palette. It’s meant to add visual interest on Ken Thompson Consulting’s website as he gets his business off the ground. I thought he should have something fun to lighten his austere homepage.
Ken’s Twitter handle is @kensbrain. The lightbulb came easily enough: “Ken’s brain is cooking up lots of ideas, don’t be put off by the bare website.” But how to make it a story within a 3-5 second loop?
Stuffing ideas back into his head to think up variations, move past obstacles, or coming up with even more ideas, all seemed like good messages for a budding consultant to have. And it added something unexpected.
Character design was a challenge because Ken’s bald—hair, facial or on the head, is a natural place to have overlapping animation to make it more appealing. I tried adding a chin and even a hat. But the former looked like a soul patch with this flat design, and the hat didn’t look flat enough. Then I realized dimples would be perfect since they’re very distinctive on Ken, and more importantly, they read more clearly.
Initially, I gave him a perfectly round body to emphasize a sense of playfulness and approachability. But decided to echo the shape of his head to reinforce the character’s design.
Let’s talk about the slight variations in character animation in the 3 examples above. Everything is the same up until he looks up at the lightbulb:
Left: Ken’s eyes move much higher as he looks at the bulb. While exaggeration is an animation principle, his line of sight didn’t align with the bulb so it felt off. His eyes move back into place a little too quickly, and the offset animation on his mouth and dimples as he tilts his head made his jaw feel loose. All of these added to that sense of wrongness. REJECTED.
Center: Because the light bulb is directly overhead, I couldn’t line his eyes up perfectly. But I increased his head tilt and repositioned his eyes to be less extreme. As he’s pushing the bulb in his ear, I offset the animation on the eyes and mouth to indicate slight discomfort. Acting out this movement, my eyes did indeed move before my mouth, but it didn’t look right when animated. REJECTED.
Right: I made him scrunch up his nose in addition to squinting and pursing his lips. After matching the timing on his eyes and mouth and drawing the moment out slightly, this facial expression really sold the effort of cramming that idea into his head. FINAL
It’s always amazing to me how such little things can make a difference in character animation.