C studio II — Project III Part1 Informational Video
Telling stories through video is a complex problem. On one hand, we have all sorts of elements like images, music, and color to help us, but on the other hand, all these elements have to coordinate. Since the designer’s audio is going to be the spine of the video, I started by looking for such resources.
Although there are plenty of videos of Tufte giving talks/ speeches, most if not all of them are pretty long and conceptual. Here are a couple of things I’m thing about:
- How can I attach visuals to abstract concepts?
- Do the visual and the audio say the exact same thing? How literal?
- most importantly: what story do I want to tell in 2.5 mins?
I started by listing to a couple of lectures that Tufte gave, and I extracted a couple of clips that I found interesting. The draft script (as shown above) end up to be oriented around the relationship between seeing and thinking. The beginning and the end are pretty abstract, while in the middle section he gives a couple of more concrete examples.
The vibe of his voice is consistent with the content that he’s talking about, which is deep, thoughtful and intelligent and provoking. Luckily I found a music that goes well with the content. So here’s the curated audio clip:
↑ the curated audio clip
Creating storyboards
As I was editing and listening to the clip repeatedly, ideas started to pop out. I sketched these fragmented scenes/ideas on paper so that I can test them with higher fidelity drawings later.
When I felt I have enough content to work with, I started to arrange them in chronological order and produce line drawings of the frames. With line drawings like the ones showed below, I visualized the more risky ideas (mostly transitions).
By drawing out the in-between frames, I was able to quickly move away from some cool ideas that don’t make sense when accually animated. Also, I was actively jumping between Ps and Ae to check if the timing is right. Sometimes, when just looking at transcriptions of speech, I lost the sense of how fast/slow the speaker talks. Constantly put still frames in the context of the video definitely helped.
Then I started to flesh out the visual style I was going for. Here is a stop-motion-ish video of compiled storyboards. (and some process screen-recording).
Some Logics and thoughts…
- Brown background = the speaker talks;
Dark theme = pure music, other people’s comments on Tufte and his works - technical concern: When I move to Ae to make the final version, there will probably be hundreds of vector objects+ gradient layers. I have used the technique for creating textures in much shorter animations, but I’m uncertain if a 2.5min video can be made this way without serious lagging.
- I was aiming for a choppy, hand-done feeling so that the style connects back to my booklet. (Not working very well right now; major concern)
- Audio content and the overall pace is ideal.
Crit Apr.7th
I showed the compiled storyboards to the class during the Crit. And I talked to Brett about the style issue. I really want to video to have a more obvious reflection of Tufte’s style. So instead of keep working on the existing sets of storyboards, I’ll prioritize the style issue.
The upper roll somehow still have the Tufte vibe, while the 2nd roll is drastically different yet visually interesting… Here are my thoughts based on discussions from the crit:
- Tufte’s style is more realistic and representational; the current visuals are pretty abstract (e.g. the side view portrait)
- It would be nice to show the video of him giving lectures at the very end, but with the current visual style, it would be hard to incorporate this idea
- Note we could ‘reflect our design heroes’ through the way we handle type, color, images (his diagrams — maybe I don’t need to do that much manipulations). (Like when I did the booklet, at the beginning, I tried to remove colors from the photos concerning the inconsistency of colors. But the colors turned out to be great.)
- I was in a debate with myself regarding whether I shall keep the dark theme scenes. Although I spent time in it and liked it, I shouldn’t be attached to it, thinking I have to use them. (This just reminded me of the Gill Sans Project, where Vicky mentioned ‘Kill a daring.’ )
How to showcase his style?
- Tufte tends to use more natural, lighter backgrounds.
Color wise: gentler colors and less-harsh contrast. - Images are more detailed and representational rather than symbolistic; Fine outlines and shadings rather than color blocks (but this would be super time consuming for me to render by hand)
- Incorporate charts and diagrams? and his book spreads?
- The line elements in the booklet are nice; could be applied here.
- The typeface choice feels appropriate. reconsider the scale relationships; right now seems slightly too horsy.
First 20sec (Crt.Apr 9th)
The making process of animation is such style is surprisingly time-consuming. I thought some transitions would be super easy, but making the assets and adjusting the timing turns out to take hours and hours. So here is the first 20 seconds of the animation and some AE screen recording:
Here are some process before moving into AE. Overall I am trying to avoid stiff and mechanical results that AE’s easy ease and auto path animation would return.
For example, I drew more organic shapes in-between two final shapes than AE morph would return, so the transition seems more natural and dynamic. Yet the speed of morphing still feels stiff at this stage.
The graph editor comes in handy when I tried to make the movements of objects/ pace of morphing less mechanical. For instance, the first gif showed the result that easy ease would return. There are no dramatic changes in the speed that the two circles are moving away from the center (slow-fast-slow in a very minute scale). To make the movement more expressive, I played with the speed graph and ended up with the 2nd version above. Building contrast into how fast/slow things are moving also introduces a sense of rhythm. I find this to be crucial since viewers can be listening and seeing the same rhythm if I manipulate the speed graph properly (some resources I was looking at: link).
I also spent a lot of time further examing color in Tufte’s works. The way I pick colors for the storyboard is based on my impressions of how Tufte uses colors. (And sometimes drifting off since I was more focused on the composition and transition). In the actual animation, I used eyedroppers and directly picked colors from photos of his books.
After adjusting the colors, I find the animation reflects Tufte more, despite the visual style still doesn’t resemble him a lot. Here are the colors I developed for some other visual elements in the video and their references:
Here are some feedbacks from crit and things I can try out:
- the pacing is nice. And the strategy of only show keywords from a sentence is effective.
- Minor issue: the target part, since the text is confined to a tiny thin strip, the descenders and ascenders crate a wired tangent with the edge of the strip. (try to use all caps or another font)
“Try to create through your designers’ work.”
- ↑ very inspirational insight from crit. We can dissect the original works, zoom in, collage, pull elements out, etc… overall let the designer’s works set the stage, instead of creating visuals and scenes from scratch.
- Can edit the audio down to ~ a min. Overall the goal is to tell a compelling story. (not sure if I want to do this since my audio has a pretty strong narrative now).
40sec (Crt.Apr 16th)
slowly making progress! yay!
I went back to the target scene and tried all caps for the text. Personally I feel all caps hard to read (despite they look nicer). So I slightly shrank the size of the text. The difference is subtle but I feel now they feel less bulky.
Playing with 3D camera :D
AE is capable of achieving some basic 3D animations, especially switching camera angles and rotating flat surfaces in space. Although it is time-consuming to set up, the end render can effectively intrude depth and a sense of realism to the scenes. Slight 3D animation + the animated spreads will fill the none-talking part of the animation.
Concerns of the cohesiveness of style
Some questions to ask during the crit:
- Is the change of style too abrupt?
- shall I keep the silhouettes? I like the way they are right now and I have similar visual elements on my website, but I am still concerned that there are too many different styles been fused into the video.
One second completed (Crit Apr.21st)
Steadily making progress for sure, but I wasn’t able to get to the point that I’d like to for Tuesday’s crit. I thought the process of animation could be speeded up once I am farmillar with the style/ workflow. But it turned out that the illustrations still take a long time to make. And I can easily spend hours and hours in graph editor finessing one movement.
Animating the lips
Matching the lip movements to the audio isn't the trickiest part, but certainly is time-consuming to do. Before I started animating, I spend some time reading the sentence over and over again, paying close attention to how the lips move.
based on the gif above, I drew the lip shape every two frames and then let AE complete the rest of the work. To further integrate the audio and the visual channel, I made the lip shape zoom-in slightly on the prominence syllables. I found this tick to be quite effective hence also applied to a couple of other places in the animation. (e.g. make type jump forward when there is a heavily pronounced syllable). Thus, visually the type of ‘sound’ louder.
Feeling confined by the music?
The music I choose to have a consistent rhythm to it and in the first half of the video, I was able to use that to my advantage. However, the 2nd half of the song becomes faster. So now when I try to stick to the beat of the music, the visuals are moving too quickly. And this issue is hard to identify when I have been looking at the same clip for hours and hours.
I fond this issue when I turn the music off and watched my animation.
When there is no sound, the problem becomes apparent. Things are flashing and the whole thing feels dizzy. Then I tried to ignore the music for a while and fully focused on how fast things are moving visually.
Hitting the beats in the music is a nice thing to do but isn't something that has to constantly happen. In other words, we shall still prioritize the visual channel rather than force the visual to follow the music. After figuring this out, the making process became easier and more delightful too!
Idea: viewing the graphs out of contexts
I have shown the full book spreads a couple of times and animated them as a whole. What if I take the graphics out and collage them together as I did in my booklet?
With this idea, I made a couple of micro-animations with the charts and tables in Tufte’s books (like the ones showed below). They are simple but fun to watch, especially when collaged together ↓
The limitation would be if its a collage like the one in Medium post, viewers (if interested) could take as long as they need to watch the looped animation again and again. However, in the video, viewers only have a few seconds to engage with all these animated stuff. Not making viewers feel overwhelmed would be a challenge.
Feedbacks from crit & things to consider:
- The ‘conversation between the designer and his work’ concept is well conveyed through.
- Edit the music down to ~1 min, After ‘data and conclusions’.
- consider: how to hint viewers that the video is going to end? (maybe bring in elements that have appeared earlier in the video)
- How to incorporate video footage of Tufte lecturing? It would be nice if we can see him in the end so audiences can attach a face to the voice viewers just heard and the works they just saw.
Final Crit- Apr.23rd
Editing the audio
I feel the workload becomes a lot more manageable after Brett helped me to edit the audio down to ~ a minute. Maybe this is another ‘kill a darling’ situation. To make the new audio clip end more naturally, I went back to Auditon and add some echos and reverbs to the ending note, so the audio doesn't just end abruptly.
More morphing!
Something (maybe not so relevant) I was looking at is Elemental Magic: a book on techniques of special effects animation. The contents really interested me. and The book did give me some insights on how to make the movements of objects more dynamic. I would love to practice making these in my free time after the project. And I wonder what if these movements/modes of movements can be applied to type.
figuring out the new ending
I animated a few ideas that I sketched. Visually I feel good about them but, none of them feel like a proper ending. Here a couple of common issues i noticed:
- going too fast; Since I removed 1.5 min, I tried to cram in too much in some of these ideas. Pace shall be slowed down. Maybe introducing the video clip is a good way to work around the issue.
- introducing new concepts and too may new visual elements. (e,g, like in the original storyboards I have symbols like a light bulb and a diver to represented ‘deep understanding of … ideas and conclusions’. However, since now this is the ending clips, introducing too many new stuff just doesnt hint the ending is coming up)
- repeating the old stuff or stretch the content. I definitely want to avoid these two, otherwise, the video would feel ‘ran out of content; just have to fill in the rest of the audio’. However, I think it would be nice to echo the contents at the beginning. Consider: how to show reoccurring visual elements in new/ slightly altered ways?
