I led the design and creative development of an interactive microsite for The Webby Awards, to promote the 2016 People’s Voice Awards Nominees announcement.

I concepted and developed prototypes to figure out a method for customizing typefaces with audio input data, and then briefed the rest of our design team on how to craft a “typevoice,” using examples of SVG animation techniques applied to typography. The final method utilized GSAP to create two independent animation timelines—or two axes of motion, one driven by pitch and the other volume.

My responsibilities included creative development, prototype exploratory, custom build tools for “typevoice” development, client presentations, UI design, frontend dev, motion design & dev.

The site runs in Chrome, is built in ES6 vanilla Javascript, uses GSAP & CSS animations for SVG images, and weighs 1.5mb.

I worked with some awesome people to make this project a reality. Creative direction by Chris Rowson. Typefaces by Peter Hahn, Weston Doty, Justin Au, Robyn Makinson, Chris Rowson, and Lucas Camargo. Frontend dev by Joseph Laquinte and myself, and sharing dev by Lynn Maharas.

UPDATE: We won two Cannes Silver Lions in digital design for TypeVoice!

We launched with 5 animated typefaces.

Users can type their name or a message to a friend, speak into their microphone, and watch the characters morph based off of the changing of the volume and pitch of their voice. The letters animate in turn, users can share a gif of their voice-customized typeface, or download an SVG and bring it into their design workflow.

Color changing feature applies site-wide.