15/NOV/17 - 29/NOV/17, Week 11 - Week 13
Hanif Rashid (0333455)
Typography and Hypertextuality
Final Project_Kinetic Typography
Lecture Notes
Week11
No Lecture for this week, proceed with exercise and feedback session.
Week12
Important notes for week 12 lecture :
No Lecture for this week, proceed with exercise and feedback session.
Instruction
The Brief
Kinetic Typography.
Duration of Assignment
3 Weeks (Briefing on Week 10)
DEADLINE
Week 13
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. You will design a static and animated Poster.
“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. The static Poster is to be printed in A4 while the animated Poster is to be uploaded to your eportfolio.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.
Submission
Objectives
Work Process
Research Process.
For this Final Project, we need to used the font we designed in the previous project and try to project the speciality of our font and bring out the character. We are required to choose a statement such as poem, a quote or dialog that is suitable to the character and personality of our font. And after finalized the design, we need to animated the Poster to a simple animation such as GIF. As our lecture stressing the important of producing a static poster 1st before even thinking about the animation.
Starting this project i dive into the reference that provided by our lecture Mr. Vinod on our Facebook page which is typographicposters. For this side, is a platform for inspiration and promotion of good design through the poster culture.They are focus exclusively on typographical and graphical posters, those that challenge type, colors and shapes to express a message. it is a curated gallery with a graphic design point of view. I believe this is a good point to give us an understanding about how to produce the poster. Here are some example that i found on the typographicposter gallery :
These 4 poster strikes me the most because the idea that i wanted to used and play around with it is Fun , Excitement , Happy as the name of my font creation is Fungill, a name that inspired by two name combination which is
For initial idea i i decided to used Andy Warhol quotes and developed a concept around Pop Art since Andy Warhol was an American artist who was a leading figure in the Pop Art visual art movement.
Key Ideas for Pop Art :
Two of Andy Warhol Pop Art works that i choose:
After having the breakfast, i knew at that particular moment i need to used that catch phrase for my poster design. I feel with that phrase, i can developed and play around with it especially using my Fungill typeface. Beside having breakfast early morning and with the typical Malaysian dishes is technically a fun way to start your day for every Malaysian. So i decided to choose this pharse which is
I decided to start my poster idea with the word Egg, explore around with that, here are few poster design i found during my research :
1st Stage Process
i start by playing around with the Yellow color, and developed more on that :
For the first 3 poster, i try to explore the Yellow color which inspired by the Egg. Try to minimize to only 3 color which is white, yellow and black. Try to created a unique idea by using my character font, Fungill. After a receiving back feedback from Mr. Vinod and Mr. Shamsul. I produced another poster from the feedback and the 1st 3 stages of designing the poster.
I decided to animated my poster by only using a GIF and no moving out or in to the frame due to my idea keep it simple and trying to highlight the typeface even more because the main purpose of this final project is to showcase our own font creation.
After finishing the 1st stage, Yes i did successful produce a poster that looks happy & excitment but the problem now i come to realized that technically my final outcome poster is to represent An Egg which again defeat the purpose of my initial font meaning, which is Fun , Excitement , Happy. By this point i was clueless how to break out from this idea which is Egg, and try to developed it into proper poster. Again i hit rock bottom.
2nd Stage Process.
But things change during Week 12 Lecturer given by Mr. Vinod, there a moment of where strike me and giving me an inspiration. It's just a advance information for us that he wanted to share with. Mr. Vinod was talking about printing by using CMYK color, how important to used CMYK for printing a physical news paper. I was inspired by that idea of using CMYK as my concept for the 2nd stage. Start my research by dive into the idea of CMYK used in printing for publishing. I notice there's always this 4 dots on the bottom of newspaper where the CMYK color present.
The purpose for this 4 color is a test for the different colors of ink. The newspaper is probably printed in CMYK, which means they use cyan, magenta, and yellow inks to do colors (and black for grayscale). In order to make sure all the inks are showing up the way they should, they print circles (sometimes squares) at the bottom so they have a solid swatch of color to look at/test against. I decided to use this idea to develop more into my poster design. Looking trough poster design by using hashtag CMYK =
After done research, i start my 2nd stage design process. I completely rearrange everything and technically reset my layout. I'd try apply one the fundamental of typography which is hierarchy.
After few round of designing the poster. i decided to break from using yellow as my main color. and start to highlight the CMYK color even more. I choose white color instead. And created a very subtle pattern which only circle. Other than that basically all the element from the typeface, Fungill. This is the outcome that i finally feel satisfy with =
I felt better at least by the 2nd stage of designing and the idea behind the poster with a suitable rational to support the idea behind my Fungill font.
3rd Stage Process
By week 13, after showing this to our lecture Mr. Vinod and Mr. Shamsul, surprisingly they okay with the idea and design of the poster but still haven't reach to the level of 'OKAY' the important feed back is between the quotes and the Fungill typeface element is not connected, comment by Mr. Vinod and for Mr. Shamsul he told me too much element animate. It's too heavy. He suggested me to lessen the moving element. After do some tweaking =
For animation part, i still animated my poster by only using a GIF and no moving out or in to the frame due to my idea keep it simple and trying to highlight the typeface even more because the main purpose of this final project is to showcase our own font creation.
Feedback
Week11
Font my font design, Mr Vinod and Mr Shamsul are okay with the overall consistency. Only my Number Sign (hashtag) look a little bit big just make is smaller. My capital V and U looks a bit awkward. And my X and Y capital, i need to tapered the edges. Other than that, Mr Vinod okay with my font design and told me great job with finishing the work on time.
Week12
For eportfolio, The PROJECT 2 and title of the project need to be in the same sentance.For my reflection i need to separated it into 3 section. which is experience, observation and finding. And put the design process on the blog.
For the Poster design using our own font, Mr, Vinod okay with the idea i'm using which is Egg paratha and Teh tarik, an inspiration that i got when i was having my breakfast at Mamak however he said i need to developed more. While Mr. Shamsul told me to bring out the unique of my font. Try to highlight more on which part makes my idea stand out more.
Week13
The hierarchy of the layout is successful. But in term of layout composition, it's too plain and for the main quote of the poster which is "egg paratha with teh tarik" and other element is somehow not well connected. As what Mr. Vinod try to put it in a simple way which is Tango dance, a dance that requrice to have a partner and currently my qoute and other element is not partner up. I can develop more on those 2 information. In term of Animation part, it's too much element of moving around. maybe i can reduce some of the element and only element that i want to focus on. It's okay too apply a lot of animation but try to stress on only 1 element. Mr Shamsul suggest maybe i can only animated on the none font element which is the circle and leave the font out. Another suggestion from Mr. Shamsul is maybe i can only put the CMYK effect on a certain words instead of all. Emphasis only the element that needed to be highlighted. After adjusting the Poster and animated poster, Mr. Shamsul feedback is still to many moving part and one of the reason is the layout of my poster is already to heavy, so try not to animated a lot of element.
Reflection
Experiences.
Honestly this Final Project is the most interesting project for this class and 2nd goes to font designing. I really like the process where i try to find an inspiration for creating a poster that is just based on font. It's challenging but a fun process to go through out the journey. Not saying it's an easy process but it's challenging for me to really think and thinking outside the box and maybe inside the box again as sometime we miss out how simplest thing are sometimes the best thing and find an inspiration literally everywhere.
Observation.
It's not that easy to executed the idea after so many research that i do. Sometimes the idea that you think is good enough turn out to be the hardest idea to executed into a design. So technically for me the more reading and research i do the more mix up and decision that i need to do due to so many findings that i found and believe is suitable to apply on my design. Technically i'm having a hard time choosing a suitable idea. But i guess it will be better if i do a proper planning. But to me again this is part of the exciting process!
Finding.
Even tho reading and research mix up my decision to choose and having trouble executed a design, i really find myself more exposing to more knowledge about design process. And it's funny how sometimes idea and inspiration came out of no where and the best thing is after all the search throughout the internet and reading books, i got my concept from my own lecture which is not even part of the lecturer. The way i see it sometimes we gotta know our fundamental before we can jump to the higher level. Simplest thing is the best.
Further Readings
Decided to continue my reading with this book, Thinking with Type. This time i was inspired by the Hierarchy section which i got my idea to do my poster especially when the poster is focusing more on font.
Hierarchy is important in expressing an organizational system for contect, emphasizing some data and diminishing others. A hierarchy helps readers scan a text, knowing where to enter and exit and how to pick up and choose among its offerings. Each level of the hierarchy should be signaled by one or more cues, applied consistenly across the body of text. A cue can be spatial, indent, line spacing, placement on pages, graphics.
Infinite vairations are possible.
From this technically i got my idea how to composed the poster and emphasizing which part is important and which is not. I need to apply this knowledge to my poster. Again, back to basic grid which is works well but not outstanding or different as some of the current trend in designing.
Hanif Rashid (0333455)
Typography and Hypertextuality
Final Project_Kinetic Typography
Lecture Notes
Week11
No Lecture for this week, proceed with exercise and feedback session.
Week12
Important notes for week 12 lecture :
- Pilcrow : to tell the reader a new paragraph | seldom used today
- Line Space (Leading) : space between paragraph (12pt) This ensures cross-aligment corss columns text.
- Used indatation = left justtify
- DO NOT USED indation with justification.
- Exteded paragraphy : 1st line
- Widow : short line left alone end of column
- Orphan : short line start new colum.
- To overcome uneven layout or to balance the body text = adjust kerning |Letter spacecing |increase the number of words or cheating, decrease the point size.
- Emphasis =
italics - okay the number of line 3,4,5 or 6
Bold - (Select the intire paragraphy - reduce to -0.5)
Change the typeface - NEVER used another serif/san serif (-0.5)
Color - highlight screen any color | printing (CMYK-BODY TEXT only) | Pantoens (2 color Print)
Create a highlight - at the back of the text - Bullets - '"
- If used numner in body of text - REDUCE to -0.5 point size.
- To become a good designer, one must have a good knowledge of typography
No Lecture for this week, proceed with exercise and feedback session.
Instruction
The Brief
Kinetic Typography.
Duration of Assignment
3 Weeks (Briefing on Week 10)
DEADLINE
Week 13
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. You will design a static and animated Poster.
“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. The static Poster is to be printed in A4 while the animated Poster is to be uploaded to your eportfolio.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.
Submission
- 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 (or 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.
Objectives
- 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 Process
Research Process.
For this Final Project, we need to used the font we designed in the previous project and try to project the speciality of our font and bring out the character. We are required to choose a statement such as poem, a quote or dialog that is suitable to the character and personality of our font. And after finalized the design, we need to animated the Poster to a simple animation such as GIF. As our lecture stressing the important of producing a static poster 1st before even thinking about the animation.
Starting this project i dive into the reference that provided by our lecture Mr. Vinod on our Facebook page which is typographicposters. For this side, is a platform for inspiration and promotion of good design through the poster culture.They are focus exclusively on typographical and graphical posters, those that challenge type, colors and shapes to express a message. it is a curated gallery with a graphic design point of view. I believe this is a good point to give us an understanding about how to produce the poster. Here are some example that i found on the typographicposter gallery :
These 4 poster strikes me the most because the idea that i wanted to used and play around with it is Fun , Excitement , Happy as the name of my font creation is Fungill, a name that inspired by two name combination which is
Futura & Gill Sans = FunGill
For initial idea i i decided to used Andy Warhol quotes and developed a concept around Pop Art since Andy Warhol was an American artist who was a leading figure in the Pop Art visual art movement.
 |
| I think everybody should be like everybody - Andy Warhol. |
- By creating paintings or sculptures of mass culture objects and media stars, the Pop art movement aimed to blur the boundaries between "high" art and "low" culture. The concept that there is no hierarchy of culture and that art may borrow from any source has been one of the most influential characteristics of Pop art.
- It could be argued that the Abstract Expressionists searched for trauma in the soul, while Pop artists searched for traces of the same trauma in the mediated world of advertising, cartoons, and popular imagery at large. But it is perhaps more precise to say that Pop artists were the first to recognize that there is no unmediated access to anything, be it the soul, the natural world, or the built environment. Pop artists believed everything is inter-connected, and therefore sought to make those connections literal in their artwork.
- The majority of Pop artists began their careers in commercial art: Andy Warhol was a highly successful magazine illustrator and graphic designer.. Ed Ruscha was also a graphic designer, and James Rosenquist started his career as a billboard painter. Their background in the commercial art world trained them in the visual vocabulary of mass culture as well as the techniques to seamlessly merge the realms of high art and popular culture.
- Although Pop art encompasses a wide variety of work with very different attitudes and postures, much of it is somewhat emotionally removed. In contrast to the "hot" expression of the gestural abstraction that preceded it, Pop art is generally "coolly" ambivalent. Whether this suggests an acceptance of the popular world or a shocked withdrawal, has been the subject of much debate.
Two of Andy Warhol Pop Art works that i choose:
 |
Self-Portrait (1986)
|
- Artwork description & Analysis: Warhol's self portraits that he created throughout his career reveal an underlying theme. It can be successfuly argued that Warhol's most successful artwork was the image of himself, invented and reinvented over his body of work. Simply consider the fact that Warhol started his art career as a nerdy, shy, balding designer and ended it as a star whose popularity could match his greatest depictions (Monroe, Elvis, Mao). In this particular work, the focus is on Warhol's head and wig (one of dozens he wore over the years). By using repetitive images, each slightly different to the next, and then overlapping the images, Warhol produces the illusion of movement. Created towards the end of his life, Self-Portrait (1986) displays the artist in his signature wig, and also makes dramatic use of shadow and light. Synthetic polymer paint and silkscreen ink on canvas - National Gallery of Art, Washington D.C.
 |
Gold Marilyn Monroe (1962)
|
- In the Gold Marilyn Monroe, Warhol further plays on the idea of an icon, placing Marilyn's face on a very large golden-colored background. The background is remeniscent of Byzantine religious icons that are the central focus in Orthodox faiths to this day. Only the instead of a god, we are looking at an image (that becomes a bit garish upon closer inspection) of a woman that rose to fame and died in horrible tragedy. Warhol subtly comments on our society, and its glorification of celebraties to the level of the divine. Here again the Pop artist uses common objects and images to make very pointed insights into values and surroundings of his contemporaries. Silkscreen - Museum of Modern Art, New York
 |
| Teh Tarik, a mix of Tea and Condensed milk. Malaysian favorite drinks |
 |
| Egg Paratha or in Malaysian name Roti Telur. Advance level of plain Paratha. |
After having the breakfast, i knew at that particular moment i need to used that catch phrase for my poster design. I feel with that phrase, i can developed and play around with it especially using my Fungill typeface. Beside having breakfast early morning and with the typical Malaysian dishes is technically a fun way to start your day for every Malaysian. So i decided to choose this pharse which is
"Egg Paratha with Teh Tarik"
I decided to start my poster idea with the word Egg, explore around with that, here are few poster design i found during my research :
1st Stage Process
i start by playing around with the Yellow color, and developed more on that :
For the first 3 poster, i try to explore the Yellow color which inspired by the Egg. Try to minimize to only 3 color which is white, yellow and black. Try to created a unique idea by using my character font, Fungill. After a receiving back feedback from Mr. Vinod and Mr. Shamsul. I produced another poster from the feedback and the 1st 3 stages of designing the poster.
 |
| the final draft for the 1st stage. |
 |
| The animated GIF poster 1st draft. |
I decided to animated my poster by only using a GIF and no moving out or in to the frame due to my idea keep it simple and trying to highlight the typeface even more because the main purpose of this final project is to showcase our own font creation.
After finishing the 1st stage, Yes i did successful produce a poster that looks happy & excitment but the problem now i come to realized that technically my final outcome poster is to represent An Egg which again defeat the purpose of my initial font meaning, which is Fun , Excitement , Happy. By this point i was clueless how to break out from this idea which is Egg, and try to developed it into proper poster. Again i hit rock bottom.
2nd Stage Process.
But things change during Week 12 Lecturer given by Mr. Vinod, there a moment of where strike me and giving me an inspiration. It's just a advance information for us that he wanted to share with. Mr. Vinod was talking about printing by using CMYK color, how important to used CMYK for printing a physical news paper. I was inspired by that idea of using CMYK as my concept for the 2nd stage. Start my research by dive into the idea of CMYK used in printing for publishing. I notice there's always this 4 dots on the bottom of newspaper where the CMYK color present.
The purpose for this 4 color is a test for the different colors of ink. The newspaper is probably printed in CMYK, which means they use cyan, magenta, and yellow inks to do colors (and black for grayscale). In order to make sure all the inks are showing up the way they should, they print circles (sometimes squares) at the bottom so they have a solid swatch of color to look at/test against. I decided to use this idea to develop more into my poster design. Looking trough poster design by using hashtag CMYK =
After done research, i start my 2nd stage design process. I completely rearrange everything and technically reset my layout. I'd try apply one the fundamental of typography which is hierarchy.
After few round of designing the poster. i decided to break from using yellow as my main color. and start to highlight the CMYK color even more. I choose white color instead. And created a very subtle pattern which only circle. Other than that basically all the element from the typeface, Fungill. This is the outcome that i finally feel satisfy with =
 |
| CMYK element apply for my 2nd stage poster. |
 |
| The animated poster for the 2nd stage poster. Only by swapping the CMYK color. |
I felt better at least by the 2nd stage of designing and the idea behind the poster with a suitable rational to support the idea behind my Fungill font.
3rd Stage Process
By week 13, after showing this to our lecture Mr. Vinod and Mr. Shamsul, surprisingly they okay with the idea and design of the poster but still haven't reach to the level of 'OKAY' the important feed back is between the quotes and the Fungill typeface element is not connected, comment by Mr. Vinod and for Mr. Shamsul he told me too much element animate. It's too heavy. He suggested me to lessen the moving element. After do some tweaking =
the final poster :
 |
| The 3rd Stage of Fungill Poster. |
For animation part, i still animated my poster by only using a GIF and no moving out or in to the frame due to my idea keep it simple and trying to highlight the typeface even more because the main purpose of this final project is to showcase our own font creation.
 |
| Animated sequence. Only small element such as plus and circle are animated. |
 |
| The Final Animated Gift Poster. |
Feedback
Week11
Font my font design, Mr Vinod and Mr Shamsul are okay with the overall consistency. Only my Number Sign (hashtag) look a little bit big just make is smaller. My capital V and U looks a bit awkward. And my X and Y capital, i need to tapered the edges. Other than that, Mr Vinod okay with my font design and told me great job with finishing the work on time.
Week12
For eportfolio, The PROJECT 2 and title of the project need to be in the same sentance.For my reflection i need to separated it into 3 section. which is experience, observation and finding. And put the design process on the blog.
For the Poster design using our own font, Mr, Vinod okay with the idea i'm using which is Egg paratha and Teh tarik, an inspiration that i got when i was having my breakfast at Mamak however he said i need to developed more. While Mr. Shamsul told me to bring out the unique of my font. Try to highlight more on which part makes my idea stand out more.
Week13
The hierarchy of the layout is successful. But in term of layout composition, it's too plain and for the main quote of the poster which is "egg paratha with teh tarik" and other element is somehow not well connected. As what Mr. Vinod try to put it in a simple way which is Tango dance, a dance that requrice to have a partner and currently my qoute and other element is not partner up. I can develop more on those 2 information. In term of Animation part, it's too much element of moving around. maybe i can reduce some of the element and only element that i want to focus on. It's okay too apply a lot of animation but try to stress on only 1 element. Mr Shamsul suggest maybe i can only animated on the none font element which is the circle and leave the font out. Another suggestion from Mr. Shamsul is maybe i can only put the CMYK effect on a certain words instead of all. Emphasis only the element that needed to be highlighted. After adjusting the Poster and animated poster, Mr. Shamsul feedback is still to many moving part and one of the reason is the layout of my poster is already to heavy, so try not to animated a lot of element.
Reflection
Experiences.
Honestly this Final Project is the most interesting project for this class and 2nd goes to font designing. I really like the process where i try to find an inspiration for creating a poster that is just based on font. It's challenging but a fun process to go through out the journey. Not saying it's an easy process but it's challenging for me to really think and thinking outside the box and maybe inside the box again as sometime we miss out how simplest thing are sometimes the best thing and find an inspiration literally everywhere.
Observation.
It's not that easy to executed the idea after so many research that i do. Sometimes the idea that you think is good enough turn out to be the hardest idea to executed into a design. So technically for me the more reading and research i do the more mix up and decision that i need to do due to so many findings that i found and believe is suitable to apply on my design. Technically i'm having a hard time choosing a suitable idea. But i guess it will be better if i do a proper planning. But to me again this is part of the exciting process!
Finding.
Even tho reading and research mix up my decision to choose and having trouble executed a design, i really find myself more exposing to more knowledge about design process. And it's funny how sometimes idea and inspiration came out of no where and the best thing is after all the search throughout the internet and reading books, i got my concept from my own lecture which is not even part of the lecturer. The way i see it sometimes we gotta know our fundamental before we can jump to the higher level. Simplest thing is the best.
Further Readings
Decided to continue my reading with this book, Thinking with Type. This time i was inspired by the Hierarchy section which i got my idea to do my poster especially when the poster is focusing more on font.
Hierarchy is important in expressing an organizational system for contect, emphasizing some data and diminishing others. A hierarchy helps readers scan a text, knowing where to enter and exit and how to pick up and choose among its offerings. Each level of the hierarchy should be signaled by one or more cues, applied consistenly across the body of text. A cue can be spatial, indent, line spacing, placement on pages, graphics.
Infinite vairations are possible.
From this technically i got my idea how to composed the poster and emphasizing which part is important and which is not. I need to apply this knowledge to my poster. Again, back to basic grid which is works well but not outstanding or different as some of the current trend in designing.
Comments
Post a Comment