Here is the second part of the interface moments project. I chose the motivation of curiosity, and the attribute of experience of fragility to create these two moments. The beginning portion shows a rollover and then click for the elements. The second part of the movie shows how adding elements can change the behavior of the user. By adding fuzzy dots and a scoreboard, the behavior changes from one of curiosity to one of collection. The music is by Yann Tiersen from the soundtrack to the film Amelie.
Again, I wanted to keep my visual language somewhat abstract. I used letterforms as objects of curiosity because they are inherently abstract symbols, and I thought making them fragile would be interesting.
For the first moment, I chose the motivation to examine and the attribute of experience delicious. I really wanted to experiment with stop motion animation for this project, so I created a tableau and moved the elements around to achieve the effect of movement. I also wanted to remain somewhat abstract in my visual language. The word delicious is ripe with connotations—I did not want to simply use food or try to replicate something delicious. Instead I tried to pinpoint what delicious feels like, looks like, sounds like, and then attempt to express that visually. I chose vibrant colors, used interesting textures, and attempted to create a scene that was visceral.
I have also been experimenting with sound in my work, and knew I wanted that to be an element of this interface. Again, I wanted to remain somewhat abstract. So instead of creating the sounds of cooking or eating, I thought about what delicious might sound like. For me, the audible element of delicious is the "mmmmmm." So I hummed a song my mother used to sing to me.
Here is the brief we worked with for project four…
Project 4 Design Six Dynamic Interface Moments
Determine three motivations for a person to interact with an interface.
Determine three different possible attributes of experience a person might have interacting with an interface.
Using stop-frame animation, video, Flash, or mechanical means, combine a motivation with an experience in six different combinations.
Design six interactive moments: 1 interactive moment: Combine 1 motivation with 1 attribute of experience. 2 interactive moments: Combine 1 motivation with 1 attribute of experience. Combine the same motivation with 1 attribute of experience that shifts the motivation. 3 interactive moments: Respond to 1 motivation in 3 different designed environments. Maintain comparable attributes of experience across all Compilation of 6 interactive moments: Editing is advised. Movie day!
The outcomes should afford user surprise, delight, and/or reflection.
Denise kept us on our toes for this project…she asked us to come up with a list of three motivations and three attributes of experience, but then only let us know how we would be implementing them one or two moments at a time. So as we were working on Moment #1, we had no idea how Moments #5 and #6 would play out. A very intriguing process.
The hardest part of this project was to remember that we were attempting to isolate and illustrate a moment, and not building an entire world full of interactions. This was very difficult for me, as you will see with my moments #4, #5 and #6. I tend to overcomplicate.
Overall, though, this project was extremely illuminating for me. The fact is, all design (especially that which involves motion and choice) is constructed of many moments, many details, many little elements. Striving to make these moments meaningful and consistent—while maintaining the overall "big picture"— is what design is all about.
So, after many more type experiments and much thought, here is my revised typography interface. I completely redid the interface in Flash, and wanted the piece to feel ambiguous and softly gritty (if that makes any sense).
The user comes to the site, and sees the grainy landscape of letters. A few of the letters beckon to the user by softly glowing with a color. As the user rolls over the letters, they shift slightly, almost as if you were running your hands through a pile of letters on a table. The colored letters are active, and to select one of the active letters, the user draws a circle around it.
Then the selected letter grows large (and beautifully pixelated and fuzzy), and one of the stanzas of the poem is released onto the landscape of that letter. I chose to use handwritten type to contrast with the universality (alleged) of the plastic helvetica letterforms. Once the stanza is released, the words pulse, letting the user know that they too are active. As the user rolls over these words, they fly away off the screen—the words that haven't been rolled over remain, and the user can then reposition these words to create new thoughts and sentences.
Here is my first stab at creating an interface using my plastic helvetica type. I decided to work in AfterEffects, which was a mistake, because the file size was enormous, and the project became very laborious. I had a difficult time making the application do exactly what I wanted (due to user error and ignorance, I'm sure), so this initial attempt is nowhere near where I wanted it to be.
I also struggled with timing, so the experience of the interface is much slower and plodding than I intended. Originally, there was an obnoxious sound track to accompany this piece (which consisted of my voice reading the text), but I decided to spare you, my blog audience, from having to listen to it.
I love the way the space looks, the graininess of the light, the textures of the letterforms and the surface. But what happens within the space is not nearly as compelling as it could be. I spent a lot of time rethinking and reworking this project, which I will share with you in the next post.
I took some photographs of the laser cutter in action, and decided to string them together into a little movie. The music is Baby Elephant Walk by Henry Mancini, and there is a small cameo appearance by my classmate Tony Fugolo. Enjoy!
After pondering my poem, I decided to experiment with the materiality of type (I also really wanted to play with the laser cutter here on campus). The notion of these experiments was to create type that had texture and weight and physical presence, and then place it in a digital environment and animate it—playing the two aspects against each other, physicality and digital-ness.
I experimented with thread and pins first:
Then I went through my collection of card stock and bought a huge piece of clear plexiglass and spent about four hours with the laser cutter:
These experiments with type were exhilarating and immensely enjoyable in their own right. I now own a pile of plastic helvetica letters, and there is something so awesome about that!
The next step in the project was to take these material attempts and somehow dump them into a digital environment, giving them motion and movement and to make it all compelling enough that a user would want to interact with it. A tall order indeed!
