Project 2

Project 2. Interactive Typography in Various Platforms

Design Brief: Students will be creating responsive Kinetic Typography work for their final assignment. You will use the word “DESIGN” in your project. You will integrate an interactive element or series of interactive elements in your typography work.


As this was an interactive typography project, I began by brainstorming ideas for ways to have the type “Design” animate. I sketched a variety of options here:


I chose this sketch to work with, because I thought it offered some interesting opportunities for animation, and also because the design was the most unique out of all of the brainstorm sketches.



I began by re-drawing the design in Illustrator in black and white.


I then tweaked the elements a bit and played around with different color schemes.

I ultimately decided on this color scheme:



I then put each element onto a different layer in Illustrator so that I could import and animate each element individually in After Effects.

I decided to animate each all of the elements of the same color together. So I dragged all of the elements of the same color into the composition, and animated each of them separately. Each color was saved as a separate composition within the same project. I exported each color composition to an mp4 file that could be imported into my prototyping tool.

In Illustrator, I created jpegs with color “buttons” filled with each color used in the compositions so that they could be tapped to trigger an animation.

I played around with a couple different prototyping tools that would enable me to execute each animation as well as layer each animation on top of the other. This proved to be a challenge! I started out trying to code the interaction in Processing, but my coding skills were not quite up to par in order to execute what I had in mind. I also had to simplify the interaction. I had originally wanted to allow the colors to be chosen randomly, but then limited it to selecting only one color at a time so that the animations could be predicted.

I eventually landed on Principle, which enabled me to prototype the interaction with animations—just what I needed!  I set up a series of artboards, one with each video. Each artboard had a “button” at the top of the screen that, when selected, would trigger an animation. Once the animation was viewed, the button would grey out, and another color would appear.

I replaced each completed animation with a jpeg, so that the jpeg served as a starting point for the next animation. For example, once “teal” was completed, I placed a jpeg of “teal” and the “blue” mp4 file on a separate artboard. This gave the appearance of the animations layering, without having to clog the program with several mp4 files on top of each other.

Since the motif is a bit intricate, I finished off the interaction by allowing the user to view the final version full-size.


I had initially wanted the colors to be chosen by random, and I still wish I would have been able to execute that because I think it would have made for a much more dynamic and interesting interaction. If I were to continue working on this, (aside from randomizing the color selection) I might edit some of the animations to make them even more playful and also explore adding sound to the animations in such a way that they would be harmonious regardless of the order in which they were played. I would also explore other prototyping methods to see if there is one better suited to the interaction I am trying to design.

Nevertheless, in the end I’m pleased with the result, and I’m proud that 100% of the work presented is my own, from the motif to the animations to the final prototype and video.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s