IxD Lab: Final Project
Overview
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.)”
Ideation
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:
Prototyping
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.
Implementation:
- 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!
More detailed process:
2. Ideation
3.1 Prototyping
3.2 Storyboard, Prototype & Iteration
3.3 Prototyping with Processing & Makey Makey
4. Demo(This article)
