IxD Lab: Final Project

4 Demo

The Hidden Meanings of DESIGN


Design Brief

“Creating responsive Kinetic Typography work by using the word “DESIGN” in your project. Try to integrate series of interactive elements in this typography work. The work should be scalable to various types of interface platforms (e.g. small screen, large screen, AR, VR, Tangible Interface, etc.)”


I have a linguistic background and theme of this project is “The Hidden Meanings of Design”.

My initial idea was “The performance of design”. Then inspired by Ji Lee’s Word as Image, I decide to make something different, more related to design and more personal, like my design principle and design value. The hidden meanings of DESIGN:

  • D — Delightful
  • E — Exploring
  • S — Storytelling
  • I — Illuminating
  • G — Game
  • N — Next

Visual Design

Dan asked me why I use particles: on the one hand, they are beautiful; on the other hand, they are powerful and symbolize possibilities.

Here are 6 animations:


Austin and Dan suggested I use simpler and more intuitive input so users can focus more on animations themselves. Finally I built animations with AE, built the interactive part with processing and Makey Makey. I also made a small control panel.


  1. Upload my project to a local server.
  • First, create an html page, then put the css file, processing.js and PNGs in a same folder.
  • Then NodeJS to create a local server, upload the file in terminal.
  • Then I can preview my project in a browser.

2. Build a control panel.

3. Set up a demo!

Press keyboard / Touch screen / Press control panel
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.