T&H Week 11 - Week 13 Final Project Kinetic Typography
Kamal Afiq [0330643]
Typography and Hypertextuality
Final Project Kinetic Typography
Lecture Notes
Week 11
We had a talk by a Malaysian graphic designer who had worked in the Netherlands. He showcased to us the previous projects he had undertaken, ranging from collections of posters to company logos. He talked a great deal about collaboration work and how important it is to be both open-minded and ambitious in the world of design. He also talked about how they have different work ethics in a place like the Netherlands, especially of how much more focused they are during work hours. The lecture was an interesting experience because we got to meet an actual graphic designer face-to-face with real past experience.Week 12
We didn't have a theoretical lecture. The class time was spent completing assignments.
Week 13
We were instructed on how to set up our eportfolio for final review. We spent the rest of the time doing work.
Instructions
Final Project: Kinetic TypographyDuration of Assignment
3 Weeks (Briefing on Week 10)
DEADLINE
Week 13 (27 Jun 2017)
Description
In this Final Project you may use the font you designed in the previous project and give voice to it. You will be required to choose a statement / poem / quote / dialog / etc. that is suitable to the character and personality of your font. “Kinetic typography—the technical name for "moving text"—is an animation technique mixing motion and text to express ideas using video animation. This text is presented over time in a manner intended to convey or evoke a particular idea or emotion.” (https://www.youtube.com/watch?v=HQ_DRSuk5tk) You will research, plan and execute a sequence of frames expressing the chosen text using the appropriate software.
Requirements
- The student must utilise the accumulated knowledge from the exercises, lectures and from their own reading (library books and online sources) to guide them and inform them in their decisions.
- The student must document the process (sketches, trial and errors) in their eporfolio and hardcopy portfolio. The student will be expected to submit the final mock-up in the hardcopy portfolio and the softcopy PDF (and or JPEG) uploaded or embedded unto the eportfolio.
- Create a separate folder in your Google Drive and store all files, artefacts, project submissions, etc. here.
- Ensure all items are logically and chronologically ordered, labelled and dated.
- All gathered information (failures, successes, epiphanies, sketches, visual research, printouts, websites, images, charts, etc.) documented logically and chronologically in the A4 Clear Sheet folder. The works must be labelled and dated.
- All gathered information (failures, successes, epiphanies, sketches, visual research, printouts, websites, images, charts, etc.) documented logically and chronologically in the eportfolio for the duration of the project in one post and for the duration of the course in a separate post as instructed in class.
- Softcopy of the animation must be uploaded unto the eportfolio or YouTube and embedded in the eportfolio (as directed by your lecturers) while a frame-by-frame JPEG of the kinetic animation must also be uploaded to your eportfolio.
- The frame-by-frame animation needs to be printed out and documented in the hardcopy portfolio.
- To develop students ability to express ideas through text in moving forms.
- To develop students ability to create seamless movement from one frame to another.
- To develop students ability to maintain excitement and variation in the presented animation.
Work Processes
The first stage of creating a poster to show off my font is to study various samples of the original Tigerfibel and Pantherfibel training manuals so that I can get a feeling for what kind of design style the graphic designs wanted to imbue into these manuals.
The Tigerfibel manual has a very distinct, minimalistic style to it. It's printed on rough brown paper and uses only two colors for the ink, a slightly orangish red and black. The manual uses a light font similar to Calibri or Arial for the body text. This light body text is complemented by the very thick heading font which I have reconstructed.
The pages are generally typeset with a strong focus on ensuring the information is easy to read; that means information is generally spread out clearly with plenty of line spacing for easy and comfortable reading. This was obviously very important for a tank crewman can't spend too much time looking for information in a battlefield. Heavy use of drawings, diagrams and other visuals are also prevalent throughout the entire book to make the read as interesting as possible.
The information is quite clearly segregated into rows, columns and text boxes. In order to mimic this style of typesetting, I should clearly group together the text on my poster.
I started coming up with a couple of different poster designs based on the cover of the Tigerfibel. However after Mr. Vinod reviewed my work, he said that I needed to come up with more interesting ideas than just trying to mimic the original source material.
Because of this I continued my research and started looking for other sources type-heavy posters which I could use as visual references. It just so happens that during that week I was playing a video game called Dishonored. The game is set in a Victorian/steam-punk setting, and as such throughout the levels there are multitude of different posters hanging from the walls. They had a unique flair and personality to them, as their designs were relatively simple yet ornate at the same time.
The posters were all printed on this kind of aged, tan paper similar to the Tigerfibel. The printed illustrations and text only had a few colors. Often times the only ink used on the posters was black ink and a single colored pigment. Ornate borders, floral decorations and eye-catching typography made the posters not only very stylish, but aesthetically interesting as well. I decided to come up with my own poster utilizing this kind of style.
 |
| The manual itself uses only two colors for ink. A very minimalist approach. |
The Tigerfibel manual has a very distinct, minimalistic style to it. It's printed on rough brown paper and uses only two colors for the ink, a slightly orangish red and black. The manual uses a light font similar to Calibri or Arial for the body text. This light body text is complemented by the very thick heading font which I have reconstructed.
 |
| Visually striking headings coupled with graphic illustrations make the manual a very visual heavy read. |
The pages are generally typeset with a strong focus on ensuring the information is easy to read; that means information is generally spread out clearly with plenty of line spacing for easy and comfortable reading. This was obviously very important for a tank crewman can't spend too much time looking for information in a battlefield. Heavy use of drawings, diagrams and other visuals are also prevalent throughout the entire book to make the read as interesting as possible.
 |
| The information is neatly separated into distinguishable rows and columns. |
The information is quite clearly segregated into rows, columns and text boxes. In order to mimic this style of typesetting, I should clearly group together the text on my poster.
 |
| My third draft of the project. At this stage I was trying to mimic the Tigerfibel's original cover. |
Because of this I continued my research and started looking for other sources type-heavy posters which I could use as visual references. It just so happens that during that week I was playing a video game called Dishonored. The game is set in a Victorian/steam-punk setting, and as such throughout the levels there are multitude of different posters hanging from the walls. They had a unique flair and personality to them, as their designs were relatively simple yet ornate at the same time.
 |
| Various posters from the game. They have a very vintage aesthetic. |
To create the poster I used Illustrator. The finishing would be done in Photoshop. The initial step was to create the border of which to frame the entire poster in. I used a combination of the Line, Pen and Shape tools to create an ornate border for the poster. I decided to lay a flat, tan background on the lowest layer, and use only the colors black, red and white for all the graphics and words that would appear. I repeatedly played around with different shapes, borders, dividers and other things to give the poster that ornate and classical feel I was trying to give it. I made sure to include a mix of uppercase and lowercase words to show off the different letterforms of my font.
 |
| Draft 4, alteration 2. Needs more text at this stage. |
I feel that my typeface, being a display font, works best when coupled with a large number of visual graphics and simplistic colors. Similar to the way it was originally used in the Tigerfibel.
 |
| Draft 4, alteration 5. Grunge effect added in Photoshop. |
 |
| Draft 5, alteration 2. |
 |
| Draft 8, alteration 1. |
 |
| Draft 8, alteration 2. |
 |
| Draft 8, alteration 4. |
 |
| Draft 9, alteration 1. |
 |
| Draft 9, alteration 3. Poster Final. |
The final stage of the Kinetic Typography project involved me animating the poster I had designed. I decided to use Adobe After Effects for the task, as I was already somewhat familiar with its tools and work space. I separated various parts of the poster into different layers in Illustrator, then I imported this Illustrator file into my After Effects project as a composition.
I wanted to create a simple animation, one that reflected the geometric and minimalistic design of my font. I decided to use a mixture of fly-ins and fades to make it appear as if the poster was assembling itself.
In the timeline, I made various tweaks and adjustments to the movements of the different objects, so that they would slow down as they reached their final resting space. Some objects I made it appear as if they were flying out of the various letters within the poster, I achieved this by using a combination of masking and Alpha Track Mattes. Other minor elements of the poster I had simply fade in by animating their opacities.
I then rendered as an AVI file, which I then imported within Photoshop and exported as a looping GIF. The final result is seen above.
I wanted to create a simple animation, one that reflected the geometric and minimalistic design of my font. I decided to use a mixture of fly-ins and fades to make it appear as if the poster was assembling itself.
In the timeline, I made various tweaks and adjustments to the movements of the different objects, so that they would slow down as they reached their final resting space. Some objects I made it appear as if they were flying out of the various letters within the poster, I achieved this by using a combination of masking and Alpha Track Mattes. Other minor elements of the poster I had simply fade in by animating their opacities.
 |
| The animation lasts 13 seconds, and runs at 25 frames per second. The above frames were taken every second. |
 |
| Draft 1, Alteration 2. Animation final. |
Final Submissions
|
| Kinetic Typography Poster Submission. |
|
| Frames of the animation, taken every half second. |
|
| Kinetic Typography Animation Submission. |
Feedback
Final Project: Kinetic Typography
During the last few weeks of our module, we were given some talks by a few designers who helped shed light on what their work processes were like and what we should expect when we jump into the world of commercial design. I found that their experiences were very informative and that I should try to attend more of these kind of talks to give me a better understanding of how life in the world of commercial design is like.
This last few weeks was spent wholly on completing the final project, but its also been a time for me to show off what I've learnt throughout the course in one cohesive project. The research I've done into various types of posters made me realize even more so how unique each font is, and the various trials and errors I've experienced as I kept coming up with different drafts for my posters made me realize just how much work showing off type can be.
Something really important I've taken away is something my lecturers pointed out when I was doing my work. It's actually a characteristic trait I have; I settle on a final idea to quickly. This was apparent by the way I wanted to stick with my first poster design and didn't want to do any different versions after. This revelation was probably the most important one I've gotten in this module so far as it's made me realize that I need to be more open to different ideas in the future, or else I'll regret not exploring enough before coming up with my final designs. This is something I'll definitely have to remember and keep in mind in the future.
This last few weeks was spent wholly on completing the final project, but its also been a time for me to show off what I've learnt throughout the course in one cohesive project. The research I've done into various types of posters made me realize even more so how unique each font is, and the various trials and errors I've experienced as I kept coming up with different drafts for my posters made me realize just how much work showing off type can be.
Something really important I've taken away is something my lecturers pointed out when I was doing my work. It's actually a characteristic trait I have; I settle on a final idea to quickly. This was apparent by the way I wanted to stick with my first poster design and didn't want to do any different versions after. This revelation was probably the most important one I've gotten in this module so far as it's made me realize that I need to be more open to different ideas in the future, or else I'll regret not exploring enough before coming up with my final designs. This is something I'll definitely have to remember and keep in mind in the future.
Reflections
Final Project: Kinetic Typography (Week 11- Week 13) reflection
It's around these couple weeks that we stopped having theoretical lecturers in class. But replacing that was a wealth of hands-on knowledge that we gained from working on our second project. This is the first time I've had a project that revolved exclusively around font design, and it's really been a fascinating experience going through the process.
The research I did for my font design helped me understand how font design conventions have changed as time passed, because I often did research on older fonts produced in the early 20th century. The struggles of actually creating the letterforms, adjusting and tweaking them to try to meet modern day conventions has also thought me a lot about how design standards for fonts have changed the past 70 years or so. My font took heavy inspiration from a display font made in the 1930s, and when I showed it to my lecturers, we had quite a clash of opinions pertaining to what was considered acceptable for font designs. I even knowingly ignored some modern day conventions because I really wanted to give my font its own if unconventional character.
The final process of having everything compiled together, having the letterspacing done and generating the font makes me appreciate the entire process of creating a font even more, as there's a significant amount of work that goes behind crafting these individual letters and shapes that we take for granted everyday.
The research I did for my font design helped me understand how font design conventions have changed as time passed, because I often did research on older fonts produced in the early 20th century. The struggles of actually creating the letterforms, adjusting and tweaking them to try to meet modern day conventions has also thought me a lot about how design standards for fonts have changed the past 70 years or so. My font took heavy inspiration from a display font made in the 1930s, and when I showed it to my lecturers, we had quite a clash of opinions pertaining to what was considered acceptable for font designs. I even knowingly ignored some modern day conventions because I really wanted to give my font its own if unconventional character.
The final process of having everything compiled together, having the letterspacing done and generating the font makes me appreciate the entire process of creating a font even more, as there's a significant amount of work that goes behind crafting these individual letters and shapes that we take for granted everyday.
Further Reading
Propaganda and branding of Dishonored 2
The branding and posters of the game are not only meant to be simple decorations on a wall, but to tell a story about the game's various locations and events. They act as a way of telling the player what the world they inhabit is like, through the style and content of the graphics in the game. In Dishonored 2, the setting of the game is in a Victorian-style city, ruled by a tyrant. The tyrant uses highly decorative and extravagant looking posters to spread his agenda and his word.
 |
| A whale meat poster. Branding for candied bugs. A pleasure house. |
Jean-Luc Monnet, assistant art director of the game said that special care was given to each individual poster and graphic so that they not only had personality and visual flair, but so that they all told a larger overall story. Simplistic colors, minimalistic designs and ink illustrations are all aspects of the posters used to give them a vintage look reminiscent of late 19th century Europe.
References & Bibliography
- Vice. 2016. The Propaganda and Branding of 'Dishonored 2'. [ONLINE] Available at: https://www.vice.com/en_uk/article/the-propaganda-and-branding-of-dishonored-2. [Accessed 20 June 2017].
Comments
Post a Comment