Dynamic text
Our VISUAL STRATEGY
AN EMOTION STUDY
To help us get to the most effective emotion behind each word animation, we did a study. What if we pushed the meaning behind each word to look even more like how it was meant to be said? Even if just a starting point exercise, the sarcasm and nuance behind how we communicate or choose not to say what we truly mean have become so much of how we communicate these online. And so many subtle, sometimes indirect intonations, we explored what those could be to take this from ‘that makes sense’ to ‘I’d use that every day!’
Whether to got to the ‘one’ or as a workflow for later variations on the same emotion, it became an example study to both the look of each word and how we could put some deliberate meaning behind each one to make that much more of an impact for viewers.
MOTION, ANIMATION & WORKFLOW
Where the emotion really came to life and got really fun was in animation. This isn’t a traditional workflow, though. Because it was generative and user-generated, working with the Google team, we created a motion workflow that fed into a code-based output. Specifically:
We animated each emotion in After Effects to establish the motion style.
The After Effects text was live type.
The animations were fed into Android code via JavaScript.
And the final, user-generated output was based entirely in JavaScript, including final renders live.
Google wanted to solve a very interesting problem in digital communication. How can we get the meaning behind words typed to match their intended tone? The goal is to help solve and reduce communication confusion.
Using Google typefaces, we created over 225 text designs to be integrated into the Android phone library as alternative font choices to spice up users' keyboards, particularly in text message exchanges. The goal was to give recognizable emotion to the words we designed so they looked like the emotion behind them in a fun, shareable, almost gamified way. Our team created a scalable system of expressions with rules that can be applied and sometimes broken to keep things fresh over time.
DESIGN & PROTOTYPING
To help find just the right and most fun visual solution for each generative text emotion, and to communicate clearly, we assigned one emotion to each word. To find just the ‘right one’, it felt important to do a study of different ways to nail down the sweet spot to get it just right.
It could be so many different things; it came down to a slight bit of subtext that can make the meaning behind how we make the visuals so deliberate for users.
EMOTIONAL DESIGN
Once we had designed the system, strategy, and thinking, we really dialed in the design aesthetic. It became clear that while functionally adding emotion would work perfectly, these needed to be almost meme-like visually. That meant exploring a lot more and a lot more visually overloaded design styles. Ones that could really stand out with personality and simple motion at a small size.
