At the start of the class, we were exposed to different windup toys on the table. I was filled with confusion because I knew they were windup toys, but I could not make any connection to communication design. During the group discussion, we had to categorize the toys based on their similarities. Through the categorization, I learned the importance of recognizing and understanding patterns within different works. As humans, we are skilled at finding patterns. As communication designers, I believe that it is crucial to utilize patterns to help the users recognize the connections and the messages delivered through design. Looking at the form of the toys, we were able to guess what movement each toy has. Looking at the form is the basis of communication because one can develop predictions such as mechanism, date of creation, and place it was created based on from the form of the parts that cause motion to the overall shape of the object. After revealing the movement of the toys, we were awed by the unexpected electric sparks, fast speed of the moving legs, and the height of the jumping movement. I realized that audience can be more engaged when it’s difficult to foresee what will happen next. Element of surprise can add complexities to a simple, straightforward design, but it can also get users to stop and be interested in your design.
Wednesday, 01–16–19: Word
Word: “Light”
Definitions of Light- Word, “light”, is a homograph that has many different definitions. All the “light” words have the same pronunciation: /līt/. Below are the definitions that are most commonly used.
- (n.) source of illumination
- (v.) provide with light or lighting; illumination
- (v.) to ignite; to start burning
- (adj.) pale
- (adj.) of little weight; not heavy (low in density)
- (v.) to descend; fall and settle or land on (a surface)
I decided to choose definition 2, 3, and 6 (I couldn’t choose between 2 and 3, but I have several ideas for the word). For definition 2, I imagine each letter lighting up like Christmas lights or Japanese street neon lights. The letters will be bright, vibrant colors because the word “light” reminds me of a bright, positive mood. Another idea I have for definition 2 is a connection to a lightbulb. Like an old lightbulb that is suddenly, the letters will turn brighter like the filament parts of a light bulb and each letter will flicker. The letters will have glass or plastic like material to show transparency. For definition 3, I imagine the letters lighting up like a match. The letters will be flowing smoothly like the movement of a fire on a match or candles on a birthday cake. For definition 6, each letter will be gently fall down to the floor like feathers. The letters will take the form of a feather or thin as a paper. The movements will be slow and calming.
Thursday, 01–17–19: Exercise
Before getting deeper into the project, we were exposed to different examples with usage of various typefaces. Each example with three words had a distinct relationship between connotation and denotation. For example, the paper with “yacht cruise”, “garage sale deal”, and “dainty tea” had a loose relationship between denotation and connotation because there was not a careful thought put into the typeface. It was interesting to me how typeface changes how I portray the words in setting. When I observed “Pumpernickel” in bold typeface, I imagined the word to be in front of an American family bakery, while “Pumpernickel” in dainty, cursive typeface looks like it would be in a fancy French bakery. I knew this exercise would be useful to our project because at some point, I would have to find typefaces that match my word, the setting, and the motions of the word.
After the first exercise, we were again exposed to words with different typeface. My partner, Rachel, and I had to find words that describe these gibberish. We found the second sheet to be more difficult than the first one because all the typefaces were serif; we had to dive deeper into the end strokes, width of the letters, x heights, and many more. I realized that not having the denotation of the word makes it harder to identify the connotation of the word. Communication can be more clear when denotation and connotation meet perfectly.
Tuesday, 01–22–19: Exercise
For Tuesday exercise, I had to draw initial sketches for the interactions. It was helpful to me because I started brainstorming about different ideas I had for my interactions. As I was brainstorming, I thought about what interactions will be captivating and interactive, and whether it was engrossing for users to keep interacting with the words or watch the interaction happen. I also thought about how to clearly communicate these two definitions to the users without making the interactions too literal or confused. In the initial process, I planned to make the interactions complicated or elaborate, but looking at the examples that Stacie showed us in the studio, I noticed how sometimes the message is delivered clearly if it is in a simple manner. In the future, I would have to decide how complicated or simple I want the interaction to be. (It’s always hard to find the right boundary when doing design works.)
Semantic Differentials
For both definitions of light, I had to do semantic differentials to think about the point of interaction and feedback (of the interaction). The semantic differentials are used to show how the interactions change over time and give a reaction. I did not have a specific interaction I wanted to do, so it was little difficult for me to do a semantic differentials in a general scope for the two definitions. In the initial process, I always put the point of interaction in the middle of the line; eventually, I realized that I can shift the point of interaction depending on what kind of interaction I choose. There were total of 5 charts:
loud vs. quiet
big vs. small
fast vs. slow
heavy vs. light
warm vs. cold
As working on these charts, I had to use my instincts by imagining the interaction in my head. For example, when I imagined a scene with neon light turned off in the initial state for the first definition (provide with light), for the warm vs. cool chart, I put the circle on the cool area. Since the light is turned off, I imagined a cool, dark background behind the light. For the fast vs. slow chart, the circle was placed in the middle of the line because everything will be static. Before discussing semantic differentials with Stacie, I did not fully grasp the importance of these charts. However, I realized that they would become more important as I begin diving into specific interactions. On the sticky notes, I wrote edits to the semantic differentials, and notes about specific visual, aural, and temporal variables.
Visual variables: size, shape, weight, color hue, position, contrast/value, texture
Aural variables: pitch, volume, tempo
Temporal variables: pace (rhythm), duration, speed
Thursday, 01–24–19: Storyboarding/ In Class Individual Critique
Initially, I did my storyboards in my sketchbook to organize what ideas I have for each interaction. On one side of the sketchbook, I wrote a list of ideas I want to begin sketching. I divided the storyboard into three boxes like the semantic differentials; start, point of interaction, and end.
Talking to Alissa (TA): Through discussing my ideas with Alissa, I found more direction to the interactions I desire for the next process. I told her about the concern of having too much for the background or other objects, which will distract the users from focusing on the definitions. For example, one idea was having a flashlight and when it is turned on, the word light will appear and fade away once the flashlight turns off. Like mentioned before, having the flashlight in the background can sidetrack users from the meaning of this project. After talking to her, I decided that interacting with the letters will be better than having extra pieces in the back. I also struggled with being the interactions too literal for each definition. One idea I had for the second definition of light (not heavy) was having a balance scale in the background, and when the word light places on one part of the scale, the scale will be unbalanced. Alissa told me that this interaction can be too literal and again, users can be distracted from the definition itself. I finally came across on deciding one interaction for each definition. One interaction will be turning on a neon light by pressing the tittle or the superscript dot. Another interaction will be letters falling down on the ground like feathers.
Since I had no specific typeface or color for the storyboards, I realized that that exploring different typeface and color would be my next for my storyboards on Illustrator. I also wonder what Stacie will think about the different interaction ideas. Although I chose what interactions I want to do, I am willing to go back and change my interaction.
Storyboarding in Illustrator:
After sketching out the storyboards in the sketchbook, I chose few interactions that I wanted to do for the animations. I decided to transfer the storyboards to Illustrator to help me visualize the interactions better. I put cursor vector drawings to show when to click on the word or the letters. Looking at the storyboards in the Illustrator, for the word “light” in noun, I decided to do a neon light. Choosing the word, “light”, seemed easy at first, but it was definitely a challenge for me as time went on because I felt like the word was overused in our daily lives. Light can be associated to too many things like candle lights, Christmas lights, lightbulbs, sunlight, fluorescent, and many more. I wanted to communicate this word in a fresh way in which users can still recognize the definition of the word at the same time. For the word “light” in adjective, I was conflicted between individual letters of the word gently floating down on the ground like feathers and the word revolving around in the air as it is falling down. I asked my classmates whether they associate the word (light: not heavy) with paper or feather more. They responded that in real life, they were exposed to word associated more with feathers than papers. I took these responses into consideration; I did not want to make the definition unclear to the users.
Tuesday, 01–29–19: In Class Individual Critique (Challenges)
Light Noun
After doing storyboards, I created a general mood board for “light” in noun. I visualized a sense of mood I wanted to show for a neon light flashing on and off. Exploring different typeface and color through looking at different references of the neon light helped me. For the background, I knew dark blue or black works effectively because the color emphasis on the neon light sign had to be stronger for it to pop up. Contrasting from the dark background color, I looked into both bright warm and cool colors for the neon lights. From closely looking at some pictures of neon signs, I found a common characteristic among hues. The hues reminded me of pastel colors because of its low saturation outside the typeface. I explored gradient of colors, but looking at neon signs realistically, gradient will confuse users more because gradient neon signs do not exist at all. Although many colors can be associated with neon signs, I focused on colors like purple, yellow, sky blue, red, and pink because the users will familiarize those colors with the neon signs the most.
For the typeface, I explored both san serif and serif because neon light signs have a wide variety of typeface. I knew there were loose paths that could be taken with the typeface because I have seen handmade neon signs that had inconsistency in its stroke weight and style. (This realization was very wrong after talking to Stacie.) Looking into modern calligraphic typeface or modern san serif fonts with round edges was my main focus. Unlike other classmates who had to explore different typefaces that fits the mood of their word/animation, I had to search specific typefaces that were the closest to the real neon signs (…until I talked to Stacie.)
I made this the animation below to practice After Effects. It may not be clear for users to recognize it as a neon light, but I knew this simple animation is a first step for me to make more realistic, complicated neon light in the future. During the process of making a neon light, I realized that in order to make a neon light in after effects, I have to study neon lights with precision or the animation will fail to communicate to the users.
Light Adjective
I also explored different typefaces and colors for light in adjective. For some color exploration, I examined low saturated colors, pure white, or pure white with a tint of bright pink. In the beginning, pure white with a tint of coral pink reminded me of a flamingo bird feather, so it was one of the color options. However, having pure white as the color for the typeface helps the audience get a better sense of it being a feather. The background color was another conflict because having dark color for the background cause the letters to pop out, but light blue or peach color for the background aligns with the definition. For the background, I’m planning on exploring different saturations of the colors.
The typeface choices for this definition were more clear. I specifically looked at typefaces that looked similar to the shape of a feather. The typefaces were set in thin stroke weights because thick stroke weight will cause a heavy feeling for word. I focused more on serif typefaces than san serif typefaces; casual, modern typeface did not fit the general mood.
Some Takeaways from this process:
- Not only I have to find the right color or typeface, it is important to find colors and a typeface that harmonize and communicate to the users well.
- Size and stroke weight of a typeface provides different mood.
- Mood boards specify the directions I desire for the projects. (Not only it helps me as a designer, but it will help clients in the future.)
Talking to Stacie Individually:
“Users are smarter than we think. Give more challenge to the users. Let them figure things out.”
Talking to Stacie helped me reflect on what steps I have to take next.
Some key points:
- Make sure the neon lights look like neon lights. → Looking at the short animation I created with after effects, it lacks the fundamental characteristics of a neon light. The turned off state should display more clear, plastic like materials. I was struggling to make neon lights look like actual neon lights because I did not do enough research about neon lights. Studying the states of neon lights turned off and on will be the next step; looking at digital references or pictures will help.
- Neon fonts. → The typefaces I chose for the storyboards are unrelated to the actual typefaces used for neon lights. Neon lights are usually in cursive and have their own distinct characteristics. There are actually “neon lights” that I can search for and explore. (I did not know about this.)
- It’s important to think about what happens in the beginning because users are smarter than we think. Looking at the animation for the neon lights, the typeface is fully exposed in the beginning. Adding some surprise or delight can keep users interested and have fun. (One article I read about user experience talked about how design is really different when an interaction becomes personal, emotional
- Which interaction will be most interesting?
- Light (Adjective) → The idea about putting the word on a scale and letting one side of the scale drop will ultimately confuse the users that my word is heavy not light. Through the discussion about my ideas for light as adjective, I realized that it is possible for the interaction to miscommunicate to the users by delivering the opposite definition of the word. I found more direction into moving toward a motion of light object dropping down to the bottom.
Talking to Andrew Individually:
Since Andrew had to leave early for meeting, I had to talk to him only briefly about my plan for my neon lights. We discussed about my concern for neon lights being too literal, but he encouraged me to take next steps into creating neon lights. He recommended me some specific neon sign typefaces I can use, and told me to get deep into the actions of neon lights turning on and off. He commented how the animation lacks the study of neon lights.
Class Discussion
Prototyping
- Hack together by hand to test validity
- Storyboard additional ideas
Project Considerations/ My own reflections
- Is the IX Clear? (Let people try it)
- Is the definition clear? (Semantic diff. explaining def- Why?)
- How abstract/literal?
- Obvious/ element of surprise?
- States/ repetition
- How do you know when it’s finished?
- Revisit variables (experiments on Medium. AE)
- Type Studies!
- Digital references.
My Goals for Weekend
- IN DEPTH Study of Neon signs (how it works, color)
- Redoing mood boards. Finding the right typefaces.
- Placement of the text and HARMONY
- Interactions
- Iterations for both definitions
Wednesday ~ Monday, 01/30/19 ~ 02/04/19: Over the weekend
Study of Neon Lights
For this weekend, I planned to dig deeper into the characteristics of neon lights and how they work. Neon signs are usually glass tubes that are bent into free form for unique typefaces or objects. The gases in the tubes glow when electricity is passed through. For example, Red and orange color are produced from neon and pink is a combination of argon and xenon. From observing the reference photos, neon signs are luminous in dark spaces. Before they are turned on fully, they flicker for a while until all the electricity is passed through the tubes. Neon signs are colorful, yet their color palette is very limited; most people recognize neon signs as purple, red, pink, and blue. Although these signs exert colors on the background like a wall, if one looks at it closely, the tubes have white highlights. I specifically looked at neon signs that are placed on the wall; there are coiled wires on the back of the signs to transfer the electricity. The light reflected on the background look a little dim and saturated. Looking at Youtube videos of signs turning on and off, I recognized that the sound of neon signs are significant; they have buzzing high voltage electricity sounds. Through studying through observing different reference photos and videos, I became more confident in choosing the right typefaces and colors, and implementing realistic, accurate characteristics while doing After Effects.
Real Life Reference in Pittsburgh
Since just looking at reference photos and videos of neon signs was not enough, I went outside to study the motions. The hot dog shop in the University of Pittsburgh area was a great example because some letters that did not have enough gas in the tubes had the flickering characteristics. Observing real objects was definitely a different experience for me; it is a process I can use in the future as a Communication designer. It is always useful for a designer to practice the eyes to observe and study the surroundings.
Study of Falling Feather
Mood Boards (Revised):
On Tuesday, both Stacie and Andrew mentioned how I should look into specific neon sign typefaces. I narrowed down the typefaces into five typefaces. After narrowing down, I decided to choose one typeface that will communicate the best. Looking at Neonstream typeface, I thought that the typeface might be too stylized and therefore, some users will have trouble reading the word. I was struggling to choose between Neonoir Bold and HT Neon , but I finally decided to go with HT Neon because it had an easy, simple style that I was searching for; HT Neon matched what I thought of a real neon sign than Neonnoir Bold. (La Patio seemed to have similar characteristic to HT Neon, but seeing that there’s no tail on the left side of cursive l confused me.) Through this exercise, I asked myself different questions to attack my choices for the typefaces; I found ways to come up with reasonings for my typographic choice by going into specific details like tails or stroke weight.
Finding typefaces for light in adjective was little easier than choosing the right typefaces . Like the reasoning for not choosing La Patio, Cochin Italics was outcasted from the list because of a little detail; the h with a round gap distracted me. I chose Savoye for my final typeface because the tail of the letter l reminded me of a small white pigeon feather. Snell Roundhand also recalled a bird feather, but I imagined its letter l as a huge feather of an eagle rather than a tiny bird feather. I wanted a typeface that aligns with the definition of “not heavy”; The over exaggerated tails of the individual letters diverted from the definition of light.
Next Question: How will the typeface I chose go with different colors?
In depth exploration light (n):
Since visualizing motion through static images from the storyboard, I moved on to After Effects to actually create the motions. It was a struggle to create flickering motions of the neon signs on After Effects because I had to think about what layers to put in and what role each layer plays to the motion, but I pushed myself further by exploring different effects on After Effects. The first iteration I created for the neon sign had an unnatural feel because the light on the background did not look an actual reflection of the light, but a blend of bluish purple color and black. I had to figure out a way for the dim light on the background to have a natural blend with the pitch black background, and flicker on and off at the same time the letters turn on and turn back off. After several explorations on After Effects, I finally got to a point where I was pretty satisfied with the motion. I also applied a simple wire behind the word to complete the look of a neon sign.
Next Steps:
- Move on to Axure!!!
- What type of interaction? Clicking, dragging mouse?
- Visual Cue?
- Do I want to reveal the letter in the beginning or reveal it in the end?
Axure Trial 1 : Light (Noun)
After exploring on After Effects, I transferred my video into Axure. I started to ask myself about different interactions and visual cues. I knew I did not want to reveal the letters in the beginning, but wanted to make the letters flash as the users interact with something. I simply started with a tiny, white dot; when user drags its mouse to the white dot, the letters are revealed. I liked how there was a moment of surprise as I dragged the cursor to the dot, but I was not sure whether clicking or dragging was a better interaction for the users.
Accomplishments
- The white dot on the page helps the users guide through the interaction. Seeing the only object on a pitch black screen will help the users know that they need to interact with it to go to the next step.
- There is a nice moment of surprise when the neon lights are flashed. Users will like playing with the dot.
- The color and the typeface works well together.
Improvements that need to happen in the next step / Questions?
- Is a white dot the best tool for visual cue? Having white dot on the screen is very clear to the user. However, it might also confuse them on why there is a dot. Also, the dot does not align with the style of the motion. I have to start exploring different visual cues.
- Exploring different motions of the neon lights. I want to explore each letter flickering forming into the final lit up state. In some videos, I saw how some parts of neon light letters were flickering faster than other letters and turning on first.
In depth Exploration light (adj.):
Moving on to After Effects, I really had to study the motions of a feather falling down. While working on After Effects, there were many moments when the motion I wanted for letter l looked unnatural. It was difficult to decide on the right speed of l falling down on the ground and finding the right timing for the letter to fall on the ground. Although working on After Effects helped me visualize better on the general picture / storyline, I was not satisfied with motion of l. As one can see, l looks like it is sliding down a slope. When I asked my classmates In order to communicate the definition of light, grasping the motion of a falling feather At the end result, I knew there was much more improvements to happen to the gravity of the feather l. I had to find the right reference video to visualize the motion better; lot of the motion videos I found were not realistic, but they were also made with programs.
Axure Trial 1: Light (adjective)
Even though I moved on to Axure, I could not really explore different interactions. Since the motion of letter l was not very complete, it was difficult for me to move on to the next step. For the interaction, I wanted to do clicking of the letter l, but instead, the page started with a blank page. When one clicks on the blank page, the gif will start playing. There is no visual cue or anything.
Accomplishments
- The typeface and color works nice with each other.
- I was not sure whether it was the typeface and the color or the motion of l, but many of my classmates at least knew that l was like a feather falling down on the ground.
Improvements that need to happen in the next step / Questions?
- Color Change of the background. I did a color change in the background to make the page look like a camera was falling down with motion of the letter, but users might be confused by the change of lightness. I need to figure out a way or take out the color transition.
- Is the water wave spread in the end necessary? I put the little circular waves in order to indicate that the letter fell, but I was not sure whether the motion in the end confused the users or not.
- ***Most important: The motion of letter l falling down is very unnatural. I need to look more into falling feather motion.
Tuesday, 02–05–19: In Class Critique
PR1: Interim Review
The interim review with classmates, Alissa, and Stacie was an opportunity for me to take away different perspectives from users. Lot of the comments I received were expected, but there were also many feedbacks and suggestions that were helpful.
Important Feedback:
Neon Light
- Element of surprise is nice.
- There were contrasting opinions about the dot. Some people liked how there is a tiny dot to indicate that users need to play around with it, but it is too tiny for them to see. Some people was confused about the white dot, and wanted a real clicking motion of a light switch.
- The animation of the neon lights is realistic.
- Suggestions for explorations with visual cues
Feather
- The motion of the feather falling needs to be improved.
- People can indicate that letter l is a feather
- The word is difficult to recognize in the beginning.
- It is difficult to associate the water motion in the end to the definition of the word.
Side Reflection: Quality of motion
As a group, we reflected on the process of giving feedbacks to others. One thing that popped up in the head was the classmates’ various presentations of the interactions. Some people presented a simple storyboard or animations, while others gave Axure files to play around with. I realized that when I saw the storyboards and the animations, it was difficult for me to visualize the interactions and motions. As a class, we concluded that for presenting storyboards, we have to fill in the blanks and what others think might be different from what you think for the motion. I found this point really interesting, and I decided that in order to communicate my thoughts clearly to someone, I need to have an clear presentation I can show to the audience.
Talking to Zoey (TA) Individually:
Neon Light:
- Visual Cue: The white dot can be clear to the users, but I should try exploring other ways that can indicate the users to interact.
- Explore other motions of the neon lights. Individual letters can be flickering.
Feather:
- Word: I exposed the word in the very beginning, but it is difficult to see the word because the gif starts playing too fast. Maybe, reveal the word at the very end.
- Figure out ways to better communicate the definition; the motion of the letter l confuses the users. Right now, it is hard to tell whether the definition is sliding or light.
Thursday, 02–07–19: Individual Work Session
After feedback, I dived into two different visual cues. Instead of having a white dot, I put in a pink tittle on the black screen for the visual cue. Another exploration was t moving down like a light switch. For the tittle visual cue, I liked how the style aligns with the rest, but it was still too tiny for users to indicate where it is. I had conflicted feelings about t as a light switch; it was good indicator for the users to interact with it, but I was not sure whether users would be able to indicate it as a light switch. After hearing a feedback from Stacie, I found more direction with the visual cue.
Talking to Stacie/Alissa (TA)/Andrew Individually:
Feedback:
Neon Light:
- Visual Cue: It is difficult for users to imagine form of t to relate to a light switch, so moving t motion might not be a good indicator. It’s not forcing the users to think a certain way, rather than hinting them about the visual cue.
- Try the flickering motion of i for the visual cue
- Try flickering motion of all the individual letters
Feather:
- ***Look into the introduction scene from Forest Gump. Observe how the feather drops down lightly on the group, and redo the motion of the l.
- “ight” can stay on the bottom. Think about the placement of the rest of the letters. (Like said before, it’s difficult to recognize the letters)
- Explore XYZ tools in After Effects
Final Week
Before the final submission of the two iterations, I thought about every feedback that I received from people. Stacie and the TAs suggested some flickering motions for the neon lights, so I took their suggestions. However, the end results were not satisfying. Comparing the flickering motion from the original iteration and the flickering motion for now, the original one looked more like a neon light than the ones that were created later. However, the flickering motion of the letter i was successful in my opinion. I knew that this could be a good visual cue for the final because it matched the style of the neon signs.
For the final iteration of light as adjective, I really took the video from Forest Gump into consideration. Due to this, I was able to really improve on my motions of the letters. Before the final iteration, all the letters were static on the ground, but I wanted to give a feeling of delight and satisfaction by making the letters on the group float a little up into the sky as the letter l almost falls on to the ground. For the interaction, users have to click on letter l to make it fall on to the ground.
