Interaction + Feedback

Each student was tasked to create two digital pieces that communicate the definitions of a pair of homographs (words that share the same spelling and pronunciation but differ in meaning) by engaging the audience in meaningful experiences. We used only the letters in the words, time, motion, sound, and interaction to communicate.

My heteronym is the word evening. I chose my 2 definitions to be:

  1. noun: the time of the day between daytime and night or between sunset and bedtime. There is no precise definition in terms of clock time, but it is considered to start around 6 p.m. and to last until nighttime.
  2. verb: to make or become even.

 


Interactive Solutions

 

View Evening 1 here. View my code here.

View Evening 2 here. View my code here.

 

Credits for Sounds:

Light flickering sound effect by Kinoton

Paper unfolding sound effect by Soundsnap

 


Process Evening 1

My idea for evening 1 is to have the background change color from afternoon colors to night time colors as the user scrolls down. I timeline the interaction so that I know when things happen as the user interacts with my page.

This is an inspiration board for Evening 1. I jot down fonts and color schemes that fit the word. I chose elegant serif fonts and afternoon and night time colors.

null

Challenge: When I tested Evening 1 with people without instructions, a lot of them clicked around the page without activating the interaction. I made the interaction more clear by having the cursor change on hover for the word.

 


Process Evening 2

My initial idea for evening 2 is to have the letters slightly uneven to begin with, and have them shift upwards and downwards on to the baseline as the user hovers the mouse over the letters.

I don’t like how bland the interaction is, and how gimmicky the transition is, so I start exploring the paper evening interaction instead.

When I think of evening, I think of an unintentionally folded piece of paper. The interaction is evening/flattening/smoothing out the piece of paper.


Color Iterations. I eventually decided on a purplish blue to compliment the slight yellow tint of the paper. The blue is also more subdued in comparison to the wood grain texture, but still provided the right amount of contrast to the paper. The highly saturated pink and green both distracted from the interaction.

Skills

  • HTML/CSS/JS
  • Interaction

Communications Studio 2

  • Spring 2018
  • 1 month