C Studio Project 1: Interaction
Wind-Up Toys Documentation | 01.16.2018
In class today, we observed the form of various wind-up toys and discussed the differences between each toy and how the form might determine or suggest the way/direction in which the toy moves.
For example, the material impacts the weight of the toys and the style of the toys may sometimes be associated with certain time periods.
Both of these toys above use a similar material and the visual cue of interaction is given through the wind-up on the side for both of them. The direction and way of movement is also pretty clear since both the nun and the dinosaur have legs and most people generally have a good sense of how these animals/human move. There wasn’t an element of surprise in which how these toys move but there was a little in the sound in which the toys make as it moves especially with the dinosaur and also the speed in which the toys move. Thus, I feel that the stereotypes associated with some forms pre-determines how people feels towards it but the element of surprise really makes the toys a lot more interesting.
Different from the nun and the dinosaur toy, these two toys the the photos above feels a lot more heavy weighted and hard to move due to their weight. These two toys also feels a little unstable and fragile when looking at their materials and forms and there isn’t really a cue for interaction (wind-up) compared with the other actual toys. Both of these forms also feel a little sloppy and not symmetrical which would tend to lead to users choosing to interact with other toys instead of these.
I personally feel that these two toys are more interesting compared to most of the other ones since there is an element of surprise in their movement. The legs on the toy in the left image suggests that the toy would go forward as it moves, but most people were suprised by how the body also curls up and down. Even though the movement of this toy may not be that pleasing to look at for some people, the element of surprise definitely created a stronger impact and distinguished it form other toys.
The blue alien toy shown in the image on the right also stood out to me since it doesn’t move forward like most other toys, but instead it dances and wiggles on the spot. However, after finding out how it moves and observing its form a little more closely, I felt that the joints in its arms does somewhat suggest this way of movement.
These two toys in the images above are special in the sense that a different action is required to start their movement. For the car, the user has to pull it backwards on the ground and then let go to make it move, but it is actually hard to know if the user has never played with these kinds of toys before. The bug toy that pops is also interesting since I felt that I would not know how to play with it the first time I see it, and thus when someone demonstrates, I would feel a sense of surprise.
The materials used for these two toys above stands out since it makes the toys feel associated to a more historical time period. The metallic feeling and the fact that the wind-up on both of these toys are pretty big which makes them feel different from the other toys.
Overall, from today’s in class activity, I realized that the different types of forms, whether they are tight, sloppy, symmetrical, unsymmetrical, suggest different ways of interaction and the stereotypes that people have with these kinds of toys also affects the interaction. Also, the element of surprise such as suspension or wait time adds a new layer to the form and makes the toy a lot more interesting to play with especially when interacting with it for the first time. The shape, sound, and material of the toys all have an impact and communicate differently.
“Dove” Decode | 01.17.2018
“Dove” refers to a type a bird that is closely associated with pigeons and mostly live in woodland or tropical forests. Doves have been used as messengers for thousands of years, especially during war. In some cultures, doves are a symbol of peace. Due to this, I feel that some characteristics of doves include smoothness, cleanness, holy, and peaceful. Sounds that I associate with doves and its characteriscs are really clean, light, and soft notes played from the piano that sounds very harmonious. The color that I associate doves with is white and material wise I feel the sense of touching a very soft blanket or towel when thinking of doves. I also feel that everything related to dove is very natural and nothing feels artificial or fake when thinking of doves.
Bellow are some example of of visuals of the bird “dove” that I gathered from online:
Another meaning of the word “dove” is the past tense of “dive”, which is the action of plunging head first into water or plunging steeply downward through air. I feel that the characteristics of dove contains swift, sudden, and fast. There is a sense of rapid movement and sounds that I associate with this movement are water splashing and a long continuous stream of a same note that suddenly stops or changes. The word “dove” also gives me the feeling of a sudden breeze of wind as a fast runner or animal runs pass me. When thinking of the verb meaning of “dove”, I feel that the color that comes in my mind is something that is dark or heavy and material wise I feel that its something with a smooth surface but also heavy in weight.
Bellow are some example of of visuals of the action “dove” that I gathered from online:
“Dove” Initial Exploration | 01.20.2018
During last class, we discussed about semantic differentials and thought about many contrasting words that might relate to characteristics of the meaning of the word we chose. I chose a few pairs of semantic differentials and plotted both meaning of my word “dove” on the scales as shown bellow:
Through this exercise, I felt that I gained a better sense of the overall mood of the meanings of “dove” and was able to make a clear distinction between the two different meanings. In most cases, the two different meanings of “dove” lies on opposite ends of the scales (other than the smooth vs. rough scale since I felt that even though the “dove” action feels heavy, hard, and loud, the overall movement of “dove” feels continuous and smooth).
After plotting the word on the scales, I started thinking of specific characteristics that resembles which the adjectives I had. For example, I felt that for the bird meaning of “dove”, the word soft resembles with the white or light colors, smooth texture, etc. Light resembles with thin stroke weight, soft contrast, etc. For smooth, I came up with characteristics of simple continuous lines, consistent motion, gradual change in color, and so on. On the other hand, for the verb action meaning of “dove”, I interpreted the adjectives I had into characteristics like high saturation colors, strong contrast, thicker stroke weight, etc.
These interpretations and brainstorming of the word also led to some initial explorations as shown bellow:
Through the type analyzation exercise in class, I was able to identify different characteristics of the type through its form, stroke weight, curves, serifs, etc. I applied what I have learned in class and picked four typefaces for each meaning that I feel embodies the characteristics of my word.
For the bird meaning of “dove”, I chose typefaces that feels slightly elegant and soft. I did more explorations with the first typeface since I feel that the flow of this typeface embodies the meaning and feeling of my word. I tried to type the word in different gray scale colors and also colors with low saturation to create a softness and calmness. I then tried different positions, scales, and movements of the word first in black and white, and then applied colors to each to try to capture the meaning of the word.
For the verb action meaning of “dove”, I chose typefaces that feels a little stronger, stable, and slightly more geometric. I felt that the curves in the second typeface I chose captures the movement of the meaning since it is pretty heavy with clear defined curves that are easily noticible but also smooth in its flow. I applied more saturated and stronger contrast to the colors since I felt that the movement is more fast-paced and heavy compared to the bird meaning of “dove”. When exploring different positions and scale of the word, I tried to create more weight in the frames and also stronger sense of movement.
“Dove” Revision + Timeline | 01.24.2018
After the in class critique of our initial spreads, I felt that I have lots of space for revision, such as experiment more with the scale, weight, and narrow down my color choices to create a distinct color palette for each of the meaning.
For the bird meaning of “dove”, I wanted to present a peaceful vibe and thus chose a soft and mostly monochromatic color palette as shown bellow:
In this spread, I also experimented with more typefaces but decided to stick with what I originally chose since I like the thin stroke weight and the curves and slants of the typeface. The timeline on the bottom of the spread shows a storyboard of my initial plans for the annimation. I plan to start out with 4 giant letters floating in the screen and moves as the cursor hover on the webpage. Then after a click anywhere, the letters will gradually decrease in size, slowly move towards its position to form the word “dove”, and slightly change color at the same time. The formed word would also decrease in size even more and stops. Then as the user hovers the mouse anywhere on the word, the word “dove” would slightly shift up and down, and lines will appear and move really fast to the right and out of the screen to make it feel as if the word is an actual dove flying through air.
For the action verb meaning of “dove”, I wanted to capture the strong but smooth motion, and thus chose highly saturated blues with a orange contrast of color in the background as shown bellow:
In this new spread, I also tried out even more typefaces, and different from the previous spread, I tried to experiment with capital letters as well. I also felt that I want some weight in the strokes to give more heaviness to the letters. In the timeline, my storyboard starts out with the letter “D” on the edge of a rectangle. As the user clicks on the “D”, it would move to the other size of the brown rectangle, and jumps off the edge as if it is actually diving. The brown rectangle would move up until it disappears off the screen as the “D” falls, and a light blue rectangle would appear on the bottom of the screen. As “D” reaches and hits the blue bar, letters “o”, “v”, and “e” would appear as if they are the water that splashed. Those letters would smoothly disapear leaving only one of each on the screen and slowly falls onto the blue bar to from the word “Dove”. These leters would then slightly swift up and down in the blue bar as if they are floating on water.
“Dove” Axure Part 1 | 01.29.2018
I started out by trying to prototype the interaction for the verb meaning of “dove” since I have a clearer sense of what I hope to achieve for that one. First, I created 4 individual letters “D”, “o”, “v”, “e”, with the respective color that I want for each in illustrator, then exported them as png files. I then tried to build to diving motion of the letter “D” in Axure through playing around with the timing of the different moves, and also tried to make other letters appear at the bottom of the screen as the “D” hits that area. Bellow is a short clip of my initial prototype in Axure:
After clicking on the “D”, it would dive down and splash out the other letters. I also planned to add a water splashing sound effect as the other letters splash out.
“Dove” Axure Part 2 | 01.31.2018
After playing around with my “dove” verb animation in class yesterday, I tried further refine it a little to better capture the movement of an actual diver since my letter “D” basically is a persona of a diver. First of all, I tried to include the motion where the “D” walks up to the platform, included one short pause, and then actually dives down. In addition, I had an “o”, “v”, and “e” fall down onto the imaginary waterline after the splash and had them floating up and down in the water along with the “D”. I also tried to played with the opacity of the remaining letters and am thinking of having them slowly fade out a I continue to edit and refine my animation. Bellow is what I currently have right now, with the changes I mentioned above implemented:
“Dove” Axure Part 3 | 02.04.2018
After working on the “dove” verb meaning animation for a while, I decided to put that aside and worked on my other animation. I started out by trying to prototype my idea and altered it a little compared to what was shown in the timeline in the spread above. Bellow is a quick sketch of my new storyboard for this animation:
Different from what I previously had before, I made more use of individual characters of the letter forms as advised and decided to transform the letter “v” into flying doves instead of using the whole word as a bird.
As I started prototyping in Axure, I was struggling a little with technology and had issues with making the letters change color in Axure. Thus, I ended up just making all 4 letters slight different shades of white and tried to create the smooth motion of the letters sliding in the sky in Axure as I hover my mouse onto the screen. Bellow is a video of what I started out with:
“Dove” Axure Part 4 | 02.06.2018
I continued to build on the “dove” bird animation and started to make the 4 letters to move into its lined up position for form the word “dove”. The biggest struggle I faced at this point was that it is hard to make the motion feel smooth and continuous especially with the rotation and change in size as they move. Bellow is a video of what I currently have:
“Dove” Axure Part 5 | 02.07.2018
Continuing working on this animation, I tried to create the movement of the “v” as it transforms from the letter form a dove as it moves its wings up and down. However, I was having trouble with creating the animation through trying to create it in Illustrator and Axure. I was very unsatisfied with what I prototyped but bellow is what I have for now:
“Dove” Axure Part 6 | 02.10.2018
Switching back to work on my “dove” verb meaning animation, I tried to refine it based on the feedback I recieved from my professors and peers. I was advised to think more about my color choices to capture the environment/mood of the scenery when someone dives into the water. Before, I made the letters in different shades of blue because I felt that blue represents the color water, and made the background a pinkish color for contrast. However, the pinkish peach feels more like the color of the skin and the letter “D” is personified as a person diving into the water, and it makes more sense having the “D” in that skin-like color instead. For the background, I decided to add a blue rectangle at the bottom to represent the water line. I also thought more about the surroundings of the water, tested out different colors, and eventually decided on yellow for the background since I want to create a sense of warmth around the water. The video bellow shows what changes I made to my previous prototype:
Another refinement I made to this prototype is that I adjusted the movement of the letter “D” before it jumps to more accurately capture the movement of a diver on the diving board before he or she jumps. I made the movement smoother at the beginning and the board only starts to shake as the “D” moves closer to the edge. In addition, I changed the sound file into one that captures both the sound of a person jumping off the board and the water splash instead of using the original smooth and softer sound. Overall, I felt that the change in color, sound, and the refinement of slight movements capture the “dove” motion a lot better than my previous prototype.
“Dove” Axure Part 7 | 02.11.2018
For my “dove” bird animation, I decided to simply it a little since the first part doesn’t really make sense and feels confusing and slightly random. Also, I was advised to figure out the movement of the “v” first and then work on building it together with the other parts. With the help of my professor and TAs, I learned how to create the movement of “v” I want through After Effects. However, it was still hard to make the transformation smooth since I have no control over the paths in between and the vector points of the paths sometimes switch sides which is not what I want it to do. I spent a lot of time in After Effects trying to make the “v” movement as smooth as possible and still wasn’t completely satisfied with it. However, I decided to leave it as it is since it is too hard to make every single phrase of the animation smooth and I feel that I have already made a huge improvement from what I started out with.
I then started over in a new Axure file and made it a lot simpler by having a lot of “v” doves appear as the mouse hovers over them. As the doves are flying in the air, the letters “d”, “o”, and “e” then flies in and then disappears smoothly as if they are other types of bird passing by the group of doves. I also added in breeze of wind sounds to make the environment feel more vivid. Bellow is what I ended up with for this animation:
“Dove” Axure Part 8 | 02.12.2018
Since I had a lot more trouble with my bird meaning “dove” animation, I spent more time on that in the last few days compared to this verb meaning “dove” animation. I decided to mostly stay with what I had for this animation and added in small details for the final refinement. I had trouble making the dive and splash motions smooth before and I tried my best to adjust the timing, distance, and transition of each movement to make it feel as smooth as possible. In addition, I also tried to create waves in the water as the 4 letters float up and down in it. Even though these are all very tiny details, I felt that they did helped improve my animation and the waves also added another layer to my animation. Bellow is a video of my final “dove” verb animation:
Project 1 Overall Reflection | 02.13.2018
I really appreciate how this project gave me a chance to experiment with Axure and incorporating interactions to 2D frames. Even though I sometimes had trouble with technology and had to revise my idea because I couldn’t figure out how to do some of the things I wanted to do in Axure, the learning experience was definitely helpful and taught me a lot about design. I feel that I am a lot more happy with my “dove” verb animation compared to my bird meaning animation and since I basically started over and re-prototyped my bird animation a few days ago. Throughout the project, I had an interesting experience learning how to work on two things at the same time, trying to fine the balance and alternating between them since . I also learned that there are sometimes limits to what I can accomplish and I have to revise some of my ideas in order to actually be able to prototype them. I feel that improvements can definitely be made to my animations and in the future, I feel that I would try to make the interactions even more meaningful and clear if I work on something similar to this project again.
