Wind (n) Interaction
Wind (v) Interaction
Interactive web pages meant to evoke connotations and therefore the meanings of a homonym through user interaction and visual characteristics.
To begin this project each student got to choose a homonym of their choice which they'd be working with over the next month to create a digital interaction. I went with wind (n) and wind (v), as I was drawn to the the stark contrast in the physicality of both objects. After choosing my word I began to do some research into what each definition meant and looked like as a basis for my work going forward.
Wind can be defined as either a verb or as a noun. In looking for imagery online, the noun is what came up more commonly. This is in reference to the natural force of air movement or air blowing. Wind to me correlates with energy, action, motion. Wind can be both soft and rough, silent or loud, a diverse phenomenon that humans have learned to harness for our own use. While invisible, you can’t help but notice wind’s presence, especially in its necessity for our daily lives.
Unlike the noun, the verb seemed to be a much less common word from my research in the free licensing world. I had to think more about what I associate with winding, like a wind-up toy or winding a clock, timer, or rope. All of these actions relate to a circular motion, twisting, or rotating something. Winding different objects yields different results, but the motion stays the same. Much like the verb, to wind is centered around energy and using it to do something, perhaps trying to mimic what wind actually does. While obviously nothing physical you can hold onto, winding something often comes with sound, whether it be musical or clicking, but much has to do with the mechanics and physicality of, again, what it is you are winding.
In class we began looking at typefaces and the connotations associated with various kinds of fonts as well as began discussing all the visual tools we have to work with. With this knowledge we created mood board for our two words, displaying a working color palette, some typeface options, and ideas on how these words could be placed or formed to create meaning.
While I felt like I had a strong direction in mind for wind (n), wind (v) posed some difficulty for me. I wasn’t sure about how to portray the general motion in color, which also left me a bit stuck in choosing typefaces. I new I wanted it to feel mechanical, but didn’t narrow it down further than that. In creating the color palette, I ended up searching generically on Google “mechanical palette” to see if others were able to solve the problem better than I could. This brought up several browns and more muted colors, along with a primary color palette inspired by an old robot toy. In thinking of compositions I felt inspired most to play with the idea of a circular pattern, but am not sure of the interaction to cause this, so simply tried to recreate that shape in as many ways as I could. During critique, while opinions were mixed, it gave me the clear direction that I needed to think about what kind of story I wanted to tell (what kind of winding), rather than the general idea of the word. So while my wind (n) was almost too specific, my wind (v) was too vague.
For the wind (n) page I felt more directed and literally looked at stills from the “Colors of the Wind” sequence in Pocahontas. I found these colors too bright for my palette, though, so ended up not using them directly, but found more muted versions that brought the same airy feeling. I was particularly excited to look at the script typefaces for this word, which I felt would emulate the natural or irregular movement of it. I also had a lot of fun playing with the “Envelope Distort” tool which allowed me to bring even more movement into these characters. While I still wasn’t really settled on anything after creating this board, I felt like I had a pretty clear direction. One of the critiques was perhaps my typefaces for wind (n) was too clearly wind, there wasn’t any guesswork to which of the two definitions it was. One of the takeaways from the first class was to have an element of surprise, which my choices of typeface don’t really lend themselves to.
With wind (n) I felt really inspired by the movement of letters in in the Winnie the Pooh Movie about a blustery day in the Hundred Acre Woods. It is a softer wind, but still has a strong sense of motion and uses the exact tools I have to work with, the letterforms themselves. From this I thought of a few ways in which I could animate this in an interactive way. I especially like the idea of having the trigger be a swipe, to suggest the wind movement, but I’m not entirely sure how I would suggest that that action is what the user needs to do to interact. Ignoring the factor of color as cue, I thought of suggesting wind with an initial tug at the letters. For my first experiment this was the ‘d’ being tugged off its feet, and for the second, the whole typeface changing to italics and then back. I also switched from using a more scripted font to a delicate serif. I thought this would bring the elegance I wanted, while leaving the movement to the interaction. In class my professor brought up a couple of good thinking points to further my ideas. With wind (n) she advised that it might be easier to physically slant the font than to play with italics for both my convenience, but also to make the indication of wind more clear.
For wind (v) I decided to go with the concept of a old-fashioned wind up toy, which I thought would provide a nice source for color, sound, and movement and would be a clearer association than something like winding up a rope. A classmate also mentioned how a lower case ‘d’ could resemble a key when on its side. I used images of old fashioned tin toys to refine my color palette to one with primary colors with strong red and blues. For the movement on this one I imagined the “key” automatically forming and once in place, changing color to signify its “activation” or simply relying on the association of the shape and placement to make a user interact with it. Along with the movement I though it would be important to have sound which signals that you are winding up the toy, but I was still stuck on what to make the word do after it’s wound- one idea was to change color to take advantage of the digital space we’re in and my other idea was to have it scoot off the page. With wind (v) she suggested that I think more about how to physically make the “key” turn since Axure doesn’t allow for play on the z-axis. As well, she pointed out that I also have to show the “key” unwinding and of course think about the sound that goes with that.
During this first iteration with axure I tried to completely do the blowing motion in axure in order to make the the process easier for myself. The process ended up taking a long time though and I couldn’t move the letters smoothly unless they went in almost a straight line. My TA’s and professor were also pointing out that with Axure, I also lose the ability to work in three dimensions to transform the letters to look like they spin and twist. So from this point, I decided to go to After Effects to see if I could better simulate the leaf and wind movement I wanted to.
After converting each letter’s movement to After Effects I put those into after effects as individual pages. While I loved how smooth the movement was, I didn't like how there was the glitch of loading each page so I wanted to pursue using gifs and not using pages to make the interaction smoother. My one TA also thought it would be fun to have the cabability of to trigger more than one letter at once and also to be able to chose whichever letter you want to trigger.
For this try with the wind (n) interaction I switched to using gif’s to eliminate the wait/load time issue I ran into with the videos. Unfortunately, these gifs slowed down as I ran quicktime, so I couldn’t take a screen video of the interaction. While I was able to get the videos to now run as gifs, and even without a background, I wasn’t sure yet how to set up the ability to have them run only once and how to eliminate the white glow around them.
With wind (v) I had several issues setting up the gifs to function properly. As I added layers, I ran into issues triggering the proper gifs to activate or getting the actions to activate at all. As you can see in the video the hotspot area is finicky with the trigger to turn the key and when I try to activate the spin, the other layers don’t properly disapear. I’m still trying to get over the bugs for this animation, but am also editing my plan for the reward after the “toy” or “object” is wound up. Orginally I had imaged perhaps a song or movement of the whole word, but my TA suggested an action that might be more simple, like that of a Jack-in-the-Box or a ballerina in a music box.
From peer feedback on these two interactions I wanted to consider the color more on wind (v) to suggest that it is a toy or object. I plan to have the color change once the key is “inserted” or turns towards the word to make sure that is seen as a significant moment. I also want to play a bit more with the motion of the letters as they fly away to vary more in speed and create more natural movements. I also need to fix some technical bugs or issues with both to make the interaction more smooth. For both I am also considering the use of a swipe up or over to trigger movements of letters or the key.
There isn’t a huge amount of change from the last iteration to this one, but primarily I was able to figure out how to make the gifs layer on top of each other by making them only run once. I was also able to solve the issue of the white glow by changing the matte color around the letters and made a new gif for the initial floating of the ‘d.’ Interaction-wise, I changed the trigger for the gifs to now be a hover in rather than a click, which feels more natural and like the user is in control of the motion.
Part of my struggle finishing this one was trying to decide whether or not to have sound along with the action. In the end I decided against it because I felt like it wouldn’t be adding a new level to the experience or understanding, if anything I think it would just give away the definition too obviously and wouldn’t be about the interaction or motion.
For wind (v) I managed to conquer a lot of technical issues from my last iteration to this one. What helped most was starting over with a new axure file entirely, and then taking advantage of the ‘show/hide’ action rather than using opacity changes. By clearing out the old file and using this new method to trigger each gif, I ran into no glitches and the interaction was able to run smoothly. One hiccup I did run into was as I started to make it so you could wind up the key multiple times. I found that axure really does not like you using the same gif for multiple layers and wouldn’t play the second version, as if it already played the first time. While a longer process, I was soon able to make it so you could go through the interaction 3 times. I thought it would be more satisfying to go through the action a few times rather than once, because the reward isn’t a big one, so I liked the idea of providing a surprise after going through a somewhat monotonous motion. I was finally able to add sound as well to this version. I thought it was important to add to the level of satisfaction, as well as to give more of an understanding of the resistance building up as you turn the object.Visually, I adjusted the colors from the original version to be less loud and in your face, as well as tried to use color as a better signal for when things are clickable and in the right place.
Overall, I am satisfied with both interactive pieces, but am perhaps most excited about the wind (v) piece. I really like the visual language I ended up with, and am really proud of the technical issues I overcame.