25 April 2017 - 16 May 2017
Liam Yue Wei (0327686)
Typography & Hypertextuality
Project 1 : A Story Book
Lecture
Week 5
I have learned more about letterforms in typography. Uppercase forms may seem symmetrical, but it appears that it is not, left slope is thinner than the right one. Both typefaces Baskerville and Univers show meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive. We can also notice the palpable difference in character "a" of sans-serif typefaces such as Helvetica and Univers as well. In this class, we also learned median (midline) and baseline. Some curvy alphabets like "a" and "s" need to be slightly above the median in order to appear to be the same size as the vertical and horizontal strokes. Letter "E" too has a very small difference in it even if the top horizontal stroke and the bottom looks the same, in fact the bottom one is slightly longer than the top. Mr Vinod also mentioned that when one design a set, they need to look at both positive and negative spaces. He also talked about the exercises he had to do when he was still a student which is to dissect a letter in order to study the strokes, the consistency of the width (of the strokes) and such. Not only that, he also said that studies proven that what young designers now are lacking of is their awareness of significance of the module. Contrast is another basic principle in typography, contrast is also the most powerful dynamic in design based on format devised by Rudi Ruegg. The simple contrast can produce several variations such as small+organic, large+machined, small+dark, large+light and more.
Week 6
Introduction to InDesign - Mr.Shamsul and Mr.Vinod taught us how to create guides (layout > create guides > 3 columns > 5mm gutter > fit guides to margin). But first, Mr.Shamsul revised what to do when we open a new document (> page size 210mmx210mm > 3columns > 5mm gutter > 7mmx7mm margin > Bleed 3mm > Check Facing Pages). Then both lecturers started telling us about some shortcuts that we can use when it comes to designing the fonts so that it doesn't take us too much time to do it. For example:
1. [ctrl+shift+( >/< )] to adjust the size of the type.
2. [alt + (arrow left and right)] to adjust kerning (space between each letters).
3. [alt + (arrow up and down)] to adjust the space between the lines.
and so on. The lecturers also suggested us to change some settings in InDesign so that it is easier for us to use it. Go to Edit > Preference > Units&Increments and change the size/leading to 1pt , kerning/tracking to 5/1000 em and change both the units for Horizontal and Vertical to mm. Besides, we also learned how to do some shortcuts when we want to create guides for all the pages, that is to double lick the master page > select all > create guides. Last but not least, we also learned how to remove hyphenate by selecting the whole text, change from "Character Formatting Controls" to "Paragraph Formatting Controls" ( top left when selected Text button ), then un-check the "Hyphenate".
Week 7
In today's class, we have come across the definition of kerning, letterspacing and tracking.
Kerning = the spacing between the letters or characters when they are reduced.
Letterspacing = the spacing between the letters or characters when they are increased.
Tracking = the spacing between the letters or characters when they are both increased and reduced.
There are 3 types of tracking such as normal tracking, loose tracking and tight tracking. The normal tracking means the space between the letters which has not been adjusted (stay unchanged). Loose tracking means the widen space between the letters while tight tracking means the narrowed space between the letters. These 3 types of tracking affect the legibility as people read the shape (letter and counterform) when they read the text. Mr.Vinod has also mentioned that the empty spaces around the letter is not called as "negative spaces" but "counterform". Unlike the uppercase letters which are able to stand by their own, the counterform between the lowercase letters are important in order to maintain the line of reading to be read easily. For example, normal tracking lowercase texts can be read easily, but loose tracking and tight tracking may cause the readers to find the text hard to read.
Besides, we also learned about flush right, centered, flush left and justified. In flush left, the spaces between the words are consistent throughout the text, allowing the type to create even gray value. Centered creates strong shape on the page, however it is said to be important to amend line breaks so that the text does not appear to be jagged. Just like centered, it is better not to use more than 3-5 lines in flush right as they may appear uncomfortable to the readers. Justified can produce the "rivers" of white space running vertically through the text, which can be pleasing to the readers' eyes due to the consistency. Mr.Vinod also reminded us that type that calls attention to itself before the reader get the actual words is simply not a good thing, therefore we have to keep in mind to be selective of the typefaces we use.
Generous x-height or heavy stroke width can produce a darker mass on the page compared to the light x-height and stroke width, and it is better for us to start training our sensitivity to these differences.
Why setting text type? It is actually to allow for easy and prolonged reading, and what affect it are type size, leading and line length. The type size needs to be large enough for the readers to read, and it would be bad if the leading is too tight or too loose. It is also advisable for the line length to contain about 35 to 65 characters as too long or too short impair reading. Last but not least, Mr.Vinod said that the ideal composition requirement is to have middle gray value in the text (when squint your eyes), and not series of stripes.
Mr.Vinod also suggested us to pay attention to a designer called "Alan Fletcher", he designed a book "The Art of Looking at Sideways". Sir also said the 2 main things that we need to bear in mind when we deal with the typefaces is to promote the font and to find ways to make better use of the fonts. Also, it is said that designers and artists tend to discuss on things that they don't like, and how they overcome the issues.
Week 8
Today in class, we learnt about indicating a paragraph, paragraph is a distinct section of a piece of writing, usually dealing with a single theme and indicated by a new line, indentation, or numbering. Paragraph enhances readability. There are several ways for indicating paragraphs such as using 'pilcrow' and 'line space'. So what is the difference between line spacing and leading?
Instructions
PROJECT 1 (20%)
The Brief A Story Book.
Duration of Assignment
3 Weeks (Briefing on Week 5)
DEADLINE
Week 8 (16 May 2017)
Description Text:
Tittle: Mister Babadook
If it's in a word or in a look
you can't get rid of the Babadook.
If you're a really clever one
and you know what it is to see
then you can make friends
with a special one,
a friend of you and me.
His name is Mr Babadook
and this is his book.
A rumbling sound then 3 sharp knocks
ba Ba-ba DOOK! DOOK! DOOK!
That's when you'll know he's around.
You'll see him if you look.
See him in your room at night
and you won't sleep a wink.
(whisper: Let me in!)
I'll soon take off my funny disguise
(whisper: Take heed of what you've read...)
and once you see what's underneath...
YOU'RE GOING TO WISH YOU WERE
DEAD.
I'll WAGER with YOU, I'll MAKE you a BET.
The MORE you DENY the STRONGER I GET
(LET ME IN!)
In this project you will be asked to express typographically the content above in a 16-page booklet. No images are allowed. However some very minor graphical elements, i.e. line, shade… might be allowed.
Utilising the knowledge gained in the exercises and other modules from the same semester, you will use illustrator to typographically compose and express the text within a given size. And, upon completion you will place your illustrator artworks in InDesign to create a digital ebook utilising the navigation and animation settings to enhance the expressions of your composed text.
Requirements
The student must document the above progression in their eportfolio and A4 hardcopy portfolio. The results of the phases must be collated and presented. A thumbnail printout of all 16 pages, and an ebook for desktop viewing must be produced.
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.
Generated eBook uploaded to the eportfolio and the relevant printouts of the artwork in the determined formats, in the hardcopy portfolio.
Objectives
An appreciation of the skills sets and mental discipline required in Typography To develop the necessary software skills for the typographic communication.
Week 6
After lecturers and classmates have done reviewing each other's work, we then continue doing our project. Most of us started fixing what we need to fix based on the feedback we got from lecturers and classmates. The typeface I used is Univers, while the font is extra black extended. Based on the feedback I received from them before we continue our work, I had to be careful with the composition and whether my design is divorced or not.
Week 7
Today in class, we were to show sir our work in order to get feedback or approval before we move onto the next step: animation. For some of us, we need to fix some of the things mentioned by the lecturer. In order to do animation in Adobe InDesign, we are to select "Digital Publishing" on the top right to enable the features (Animation, timing, media ....). We were told to finish the animation throughout the 1 week "sem break" and to submit or show it on the Tuesday after the break. We were also asked to download Font Lab Studio and Fontographer during the weekend.
Week 8
After getting feedback from Mr.Vinod and Mr.Shamsul, we were to continue improving our work, then the lecturers guided us the way to print out our Mr.Babadook for both the portfolio and also as a final work. First, in AdobeInDesign we need to go to File > Package to package this adobe file. Then, bring the file to the MacLab (in students' cases), transfer the whole file to the mac, open font book in the mac and add the fonts from packaged file, then open the AdobeInDesign file and go to File > Print > Click 'Spreads' > Click 'Print blank pages' > Setup > Click 'Thumbnails' 3x3 per pages > Print. After these, students are free to go to library or ICT helpdesk to print out the paper. Next, in order to print out our final work, we need to take the package file and bring to MummyDesign so that they can print it out for us, all we need to do is to request them to do a staple bound.
Link to animated version of Mr.Babadook
-In Google Drive : https://drive.google.com/drive/folders/0B69Chd74MzLFR2l4OE5Ga2M5blk
-In YouTube
https://www.youtube.com/watch?v=ymTPI-j5d0Q&feature=youtu.be
Feedback
Week 5
Mr.Vinod commented on my "SLEEP" GIF animation, he said that it would be better for me to make the animation slower and slower with each scenes. He also mentioned that I can try to do something different like adding gradient into my work. After that, Mr.Shamsul too suggested that I can rotate the letters of "SLEEP" so that it doesn't look very stiff.
Besides, Mr.Vinod and Mr.Shamsul also asked me to change the background and fonts of my blog as it is hard to read, and distracting, so I changed it to simpler design and adjusted the width of my blog too as it was too narrow. Mr.Shamsul also talked about my name gif animation, he mentioned that the stroke of the letter is not very clear, it could either because I did not join the line when I draw it on AdobeIllustrator, or I didn't save the gif with white background (instead of transparent background), I think the latter is the cause. Mr.Shamsul also helped my check my portfolio, he encouraged me to print out Mr.Vinod's notes as well, because I have only printed Mr.Shamsul's notes. He also suggested me to print 8 slides of notes in one page instead of 6 slides only. He also mentioned that my calligraphy is good but on the final piece I might need to pay more attention to the size of the letters, but overall, the line height is equal.
Week 6
For Mister Babadook, Mr.Vinod said that it will be more interesting if we have some contrast in our design, but not too much contrast to the point where it is divorced. For example, the way I added the circular flow of typography at the end was definitely out of the place. Next, Mr.Vinod told me that Univers Extra Black Extended is very hard to use because of the "extend" make the words look unnecessarily stretched. He also said that there is no necessary to make all the words fly here fly there, it can be normal and it can look simple and nice too.
Week 7
For the first page of Mister Babadook, Mr.Vinod told me that the font size of "Using typeset Univers @ Liam Yue Wei" was too small, and I was also supposed to write "Univers LT Std" as full name. The pages at the front or middle were good or just "okay", however some of the pages at the back did not look good as it lacked of the flow that leads the reader and also the style of what I did at the front. I was told to be more careful with letterspacing when it comes to the uppercase, maybe I shouldn't be using loose tracking for the uppercase black font. Also, I have learned that it's best not to do things like uppercase + big font size + black or extra black as the letters look extremely heavy and it is not pleasing to the readers. Mr.Vinod also told me that he actually said in class that DON'T use "small caps", guess I miss that one out but I have learned from him that uppercase letters in 7pt is still readable. That's the size he told me to reduce to for the lines where there are whispers like "LET ME IN! " even though at first, I thought that they were already small enough. Besides, Mr.Vinod also told me not to press "space" to make paragraph, instead, use "ctrl+B", "type" and also the "paragraph styles" to do all the positioning of the letters. For paragraph spacing, I have to press "enter" (return). For forced line break, I have to press "shift+enter" as this will follow my leading (line spacing). Enter (return) will follow the value instead in the paragraph space value ¶ at the top in the control bar.
Week 8
There are unnecessary animation, I can remove some for the animations. Mr.Vinod and Mr.Shamsul also said that I need to pay more attention to the timing as it is a little off, disrupting the flow of the reading. I also need to change the letterspacing of the capital letters like "YOU'RE GOING TO WISH THAT YOU WERE DEAD" and " the more you deny, " and also the line spacing of the former one. It is also better to move the last "DOOK!" to the previous page so that the 3 "DOOK!"s are together in 2 pages. Also, move "the stronger I get." to the previous page, so it becomes "The more you deny, the stronger I get." in one page.
We then were given briefing by Mr.Vinod and Mr.Shamsul. Till week 9, we were told to download and print out a font (Roman) from Adobe font and Google font, study the curving and the counter form of the font. By knowing the the direction we want to design our font, we may also include some shapes that we are obsessed with, but not too complicated ones. Sketch on graph papers and show them in class in week 9. The lecturers have highlighter that Adobe fonts are more preferable as they are more well-developed.
Reflection
Experience
In these few weeks of working on the story book, it can be fun for me when I try playing around with the words to make it sounds and looks enough like the MrBabadook storybook. But then again, I made a lot of mistakes, and most probably repeated some of them too on this journey. For example, I tend to try making the words look very bold (extra black and extended) without knowing the best way to use extended fonts till I read a certain book. I also had problems with being creative at first, I had to think a lot till nothing comes out on mind.
Observation
I noticed that the reason why I made mistakes in this assignment is that I am still inexperienced in typography, also lack of knowledge as well considering I am still a beginner in typography. Besides, I have realised that I would always go for the bold typeface as I admire the way how other designers manage to make them look amazing on a page, so it turns out that I was trying to achieve the same result the designers give, however that did not work well for me. Next, I also realised that I always think too much, so instead of coming out with ideas, I only end up torturing my own brain.
Findings
I have learned that simple designs can sometimes be better than trying to work with complicated designs as it look pleasing to the readers' eyes. Besides, this is something that we have learned from previous exercises, but we need to make sure that our designs and the purpose/meaning is not divorced. Also, it means that we should try not to divorce our own style in a certain book by mixing various style of designing together, it will cause discomfort to the readers' eyes too. I have also noticed that by reading the books, I get to learn things that I did not learn from class ( or maybe things that I forgot ). Even if I am a slow reader, or I almost never manage to finish the whole book, what matters is that I learned something new from the book. Last not not least, I should stop overthinking every single time at everything and anything.
Week of the book
Week 5
TYPEX [Typograph. A Teaching Experience]
This book is a showcase of designers' or students' works on Typography. From here, we get to see how the designers play with the positive,negative spaces, shape, font, size, composition and more. The creativity of theirs to use typography to form an artwork is fascinating. This book also included typography posters, personal logo, book and newspaper mockups, type families, design of information and typography at a click.
Week 6
INDIE FONT
From the time of Johannes Gutenberg till around the mid-twentieth century, a "type foundry" was literally that: a shop that poured a molten mixture of lead, tin and antimony to cast individual letters for use by printers. This historically precise term has been retained in the digital age. Type foundry is still used to signify a maker of type - with no molten metal in sight.
Week 8
The Fundamental of Typography
From this book, I have learned that ideogram-based languages are languages that use characters or symbols to represent an idea or concept without expressing the pronunciation of a particular word or words. For example, Chinese, Japanese, Korean, symbols like "No-entry" and such. I have also learned that "Hieroglyphs" is pictogrammatic writing system developed by several cultures, one of them is ancient Egyptians and Incas. Each pictogram can be an object, animal, tool or person but definitely not vocal sounds. It is said that there were over 750 individual Egyptian pictograms. They can be written from right to left, left to right or downwards.
Next, I have also learned about how we read on a page. Design can be complex when many items are used on the page or screen at the same time. Different typographical elements are included in layouts for their aesthetic qualities and legibility. So, when creating a layout, thought needs to be given to how a user, reader or viewer will approach the task of obtaining information from the design. Not only that, it is said that small text can encourage active reading while large text can encourage skim reading.
Also, I have also read that condensed types are narrower and useful for tight space situations while extended types are wider and often used for headlines to dramatically fills a space. So, it is advisable to use these two font wisely in order to make a good design. Besides, I have learned that serifs is a key characteristic for identifying a typeface. Serifs can enhance the readibility of a piece of text by helping the eye to advance from one character to next.
Last but not least, I have also managed to learned about type detailing. There are 3 words which I need to know such as widows, orphans, and hyphos.
Widow = a lone word at the end of a paragraph.
Orphan = the final one or two lines of a paragraph separated from the main paragraph to form a new column. (This should be avoided at all costs).
Hypho = a hyphenated widow that leaves half a word on a line.
Rags occur when highly noticeable shapes form by the line ends of text blocks that distract from simple, uninterrupted reading. It can include exaggerated slopes or noticeable inclines. Words may appear to overhang lines of text or creating unsightly and noticeable gaps in text blocks but they can be manually returned to make the gaps less noticeable.
Liam Yue Wei (0327686)
Typography & Hypertextuality
Project 1 : A Story Book
Lecture
Week 5
I have learned more about letterforms in typography. Uppercase forms may seem symmetrical, but it appears that it is not, left slope is thinner than the right one. Both typefaces Baskerville and Univers show meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive. We can also notice the palpable difference in character "a" of sans-serif typefaces such as Helvetica and Univers as well. In this class, we also learned median (midline) and baseline. Some curvy alphabets like "a" and "s" need to be slightly above the median in order to appear to be the same size as the vertical and horizontal strokes. Letter "E" too has a very small difference in it even if the top horizontal stroke and the bottom looks the same, in fact the bottom one is slightly longer than the top. Mr Vinod also mentioned that when one design a set, they need to look at both positive and negative spaces. He also talked about the exercises he had to do when he was still a student which is to dissect a letter in order to study the strokes, the consistency of the width (of the strokes) and such. Not only that, he also said that studies proven that what young designers now are lacking of is their awareness of significance of the module. Contrast is another basic principle in typography, contrast is also the most powerful dynamic in design based on format devised by Rudi Ruegg. The simple contrast can produce several variations such as small+organic, large+machined, small+dark, large+light and more.
Week 6
Introduction to InDesign - Mr.Shamsul and Mr.Vinod taught us how to create guides (layout > create guides > 3 columns > 5mm gutter > fit guides to margin). But first, Mr.Shamsul revised what to do when we open a new document (> page size 210mmx210mm > 3columns > 5mm gutter > 7mmx7mm margin > Bleed 3mm > Check Facing Pages). Then both lecturers started telling us about some shortcuts that we can use when it comes to designing the fonts so that it doesn't take us too much time to do it. For example:
1. [ctrl+shift+( >/< )] to adjust the size of the type.
2. [alt + (arrow left and right)] to adjust kerning (space between each letters).
3. [alt + (arrow up and down)] to adjust the space between the lines.
and so on. The lecturers also suggested us to change some settings in InDesign so that it is easier for us to use it. Go to Edit > Preference > Units&Increments and change the size/leading to 1pt , kerning/tracking to 5/1000 em and change both the units for Horizontal and Vertical to mm. Besides, we also learned how to do some shortcuts when we want to create guides for all the pages, that is to double lick the master page > select all > create guides. Last but not least, we also learned how to remove hyphenate by selecting the whole text, change from "Character Formatting Controls" to "Paragraph Formatting Controls" ( top left when selected Text button ), then un-check the "Hyphenate".
Week 7
In today's class, we have come across the definition of kerning, letterspacing and tracking.
Kerning = the spacing between the letters or characters when they are reduced.
Letterspacing = the spacing between the letters or characters when they are increased.
Tracking = the spacing between the letters or characters when they are both increased and reduced.
There are 3 types of tracking such as normal tracking, loose tracking and tight tracking. The normal tracking means the space between the letters which has not been adjusted (stay unchanged). Loose tracking means the widen space between the letters while tight tracking means the narrowed space between the letters. These 3 types of tracking affect the legibility as people read the shape (letter and counterform) when they read the text. Mr.Vinod has also mentioned that the empty spaces around the letter is not called as "negative spaces" but "counterform". Unlike the uppercase letters which are able to stand by their own, the counterform between the lowercase letters are important in order to maintain the line of reading to be read easily. For example, normal tracking lowercase texts can be read easily, but loose tracking and tight tracking may cause the readers to find the text hard to read.
Besides, we also learned about flush right, centered, flush left and justified. In flush left, the spaces between the words are consistent throughout the text, allowing the type to create even gray value. Centered creates strong shape on the page, however it is said to be important to amend line breaks so that the text does not appear to be jagged. Just like centered, it is better not to use more than 3-5 lines in flush right as they may appear uncomfortable to the readers. Justified can produce the "rivers" of white space running vertically through the text, which can be pleasing to the readers' eyes due to the consistency. Mr.Vinod also reminded us that type that calls attention to itself before the reader get the actual words is simply not a good thing, therefore we have to keep in mind to be selective of the typefaces we use.
"Different typefaces are suitable for different messages."
Generous x-height or heavy stroke width can produce a darker mass on the page compared to the light x-height and stroke width, and it is better for us to start training our sensitivity to these differences.
Why setting text type? It is actually to allow for easy and prolonged reading, and what affect it are type size, leading and line length. The type size needs to be large enough for the readers to read, and it would be bad if the leading is too tight or too loose. It is also advisable for the line length to contain about 35 to 65 characters as too long or too short impair reading. Last but not least, Mr.Vinod said that the ideal composition requirement is to have middle gray value in the text (when squint your eyes), and not series of stripes.
Mr.Vinod also suggested us to pay attention to a designer called "Alan Fletcher", he designed a book "The Art of Looking at Sideways". Sir also said the 2 main things that we need to bear in mind when we deal with the typefaces is to promote the font and to find ways to make better use of the fonts. Also, it is said that designers and artists tend to discuss on things that they don't like, and how they overcome the issues.
Week 8
Today in class, we learnt about indicating a paragraph, paragraph is a distinct section of a piece of writing, usually dealing with a single theme and indicated by a new line, indentation, or numbering. Paragraph enhances readability. There are several ways for indicating paragraphs such as using 'pilcrow' and 'line space'. So what is the difference between line spacing and leading?
If I have 9 pt size line of type, then my ideal leading would be 12.5 size. When we work with typography, there are 2 situations we need to avoid that are widow and orphan. Widow is a short line of type left alone at the end of a column of text, while orphan is a short line of type left alone at the start of new column.
Next, we also learnt about highlighting text. There are several ways to highlight the text :
1. Same typeface, different font.
2. Sans serif, and then serif.
3. Different colour. ( like using black fonts, and highlight the text with red ones)
4. Filling the text with a field of colour.
5. Using typographic elements.
6. Using quotation marks.
Sometimes, we also need to reduce the size of bold types, so that they look aligned to the rest of un-bold types.
We also learnt about headlines within text, there are many kinds of subdivision within text of a chapters and these have been labeled A, B and C according to the level fo importance. A typographer needs to make sure these heads clearly signify to the reader the relative importance within the text and to their relationship to each other.
'A' head indicates a clear break between the topics within a section, 'A' heads are set larger than the text, in small caps and in bold. Some works show an 'A' head 'extended' to the left of the text.
'B' head is subordinate to 'A' heads. 'B' heads indicate a new supporting argument or example for the topic at hand. They should not interrupt the text as strongly as 'A' heads do. Some show the 'B' heads in small caps, italic, bold serif, and bold san serif.
'C' heads are not common, they highlight specific facets of material within 'B' head text. They do not materially interrupt the flow of reading. As with 'B' heads, these C heads arae shown in small caps, italics, serif bold and san serif bold. 'C' heads in this configuration are followed by at least an em space for visual separation.
Putting together a sequence of subheads becomes hierarchy. We also learnt that cross aligning headlines and captions with text type are crucial as they reinforce the architectural sense of the page.
"Typography is two-dimensional architecture, based on experience and imagination, and guided by rules and readability." - Hermann Zapf
Instructions
PROJECT 1 (20%)
The Brief A Story Book.
Duration of Assignment
3 Weeks (Briefing on Week 5)
DEADLINE
Week 8 (16 May 2017)
Description Text:
Tittle: Mister Babadook
If it's in a word or in a look
you can't get rid of the Babadook.
If you're a really clever one
and you know what it is to see
then you can make friends
with a special one,
a friend of you and me.
His name is Mr Babadook
and this is his book.
A rumbling sound then 3 sharp knocks
ba Ba-ba DOOK! DOOK! DOOK!
That's when you'll know he's around.
You'll see him if you look.
See him in your room at night
and you won't sleep a wink.
(whisper: Let me in!)
I'll soon take off my funny disguise
(whisper: Take heed of what you've read...)
and once you see what's underneath...
YOU'RE GOING TO WISH YOU WERE
DEAD.
I'll WAGER with YOU, I'll MAKE you a BET.
The MORE you DENY the STRONGER I GET
(LET ME IN!)
In this project you will be asked to express typographically the content above in a 16-page booklet. No images are allowed. However some very minor graphical elements, i.e. line, shade… might be allowed.
Utilising the knowledge gained in the exercises and other modules from the same semester, you will use illustrator to typographically compose and express the text within a given size. And, upon completion you will place your illustrator artworks in InDesign to create a digital ebook utilising the navigation and animation settings to enhance the expressions of your composed text.
Requirements
The student must document the above progression in their eportfolio and A4 hardcopy portfolio. The results of the phases must be collated and presented. A thumbnail printout of all 16 pages, and an ebook for desktop viewing must be produced.
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.
Generated eBook uploaded to the eportfolio and the relevant printouts of the artwork in the determined formats, in the hardcopy portfolio.
Objectives
An appreciation of the skills sets and mental discipline required in Typography To develop the necessary software skills for the typographic communication.
Tutorial
Week 5
We were instructed to prepare the software called " AdobeInDesign" and to start our new project by playing around with the fonts for children's storybooks. The title is "Mister Babadook" and we are to make 16 pages for this book, but we were told to try out this challenge first by doing up till the line "a friend of you and me". We were also limited to a list of typefaces, any typefaces other than those in the list is not accepted.  |
| The list of usable typefaces for this project. |
Week 6
After lecturers and classmates have done reviewing each other's work, we then continue doing our project. Most of us started fixing what we need to fix based on the feedback we got from lecturers and classmates. The typeface I used is Univers, while the font is extra black extended. Based on the feedback I received from them before we continue our work, I had to be careful with the composition and whether my design is divorced or not.
1st Attempt
 |
| 1st page |
 |
| 2nd page |
 |
| 3rd page |
 |
| 4th page |
 |
| 5th page |
 |
| 6th page |
 |
| 7th page |
 |
| 8th page |
 |
| 9th page |
 |
| 10th page |
 |
| 11th page |
 |
| 12th page |
 |
| 13th page |
 |
| 14th page |
 |
| 15th page |
 |
| 16th page |
Today in class, we were to show sir our work in order to get feedback or approval before we move onto the next step: animation. For some of us, we need to fix some of the things mentioned by the lecturer. In order to do animation in Adobe InDesign, we are to select "Digital Publishing" on the top right to enable the features (Animation, timing, media ....). We were told to finish the animation throughout the 1 week "sem break" and to submit or show it on the Tuesday after the break. We were also asked to download Font Lab Studio and Fontographer during the weekend.
2nd Attempt
 |
| 1st page |
 |
| 2nd page |
 |
| 3rd page |
 |
| 4th page |
 |
| 5th page |
 |
| 6th page |
 |
| 7th page |
 |
| 8th page |
 |
| 9th page |
 |
| 10th page |
 |
| 11th page |
 |
| 12th page |
 |
| 13th page |
 |
| 14th page |
 |
| 15th page |
After getting feedback from Mr.Vinod and Mr.Shamsul, we were to continue improving our work, then the lecturers guided us the way to print out our Mr.Babadook for both the portfolio and also as a final work. First, in AdobeInDesign we need to go to File > Package to package this adobe file. Then, bring the file to the MacLab (in students' cases), transfer the whole file to the mac, open font book in the mac and add the fonts from packaged file, then open the AdobeInDesign file and go to File > Print > Click 'Spreads' > Click 'Print blank pages' > Setup > Click 'Thumbnails' 3x3 per pages > Print. After these, students are free to go to library or ICT helpdesk to print out the paper. Next, in order to print out our final work, we need to take the package file and bring to MummyDesign so that they can print it out for us, all we need to do is to request them to do a staple bound.
Link to animated version of Mr.Babadook
-In Google Drive : https://drive.google.com/drive/folders/0B69Chd74MzLFR2l4OE5Ga2M5blk
-In YouTube
https://www.youtube.com/watch?v=ymTPI-j5d0Q&feature=youtu.be
 |
| Printout for portfolio (Thumbnail) |
Final Work (Staple Bound) :
 |
| 1st page |
 |
| 2nd page - 3rd page |
 |
| 4th page - 5th page |
 |
| 6th page - 7th page |
 |
| 8th page - 9th page |
 |
| 10th page - 11th page |
 |
| 12 th page |
Feedback
Week 5
Mr.Vinod commented on my "SLEEP" GIF animation, he said that it would be better for me to make the animation slower and slower with each scenes. He also mentioned that I can try to do something different like adding gradient into my work. After that, Mr.Shamsul too suggested that I can rotate the letters of "SLEEP" so that it doesn't look very stiff.
Besides, Mr.Vinod and Mr.Shamsul also asked me to change the background and fonts of my blog as it is hard to read, and distracting, so I changed it to simpler design and adjusted the width of my blog too as it was too narrow. Mr.Shamsul also talked about my name gif animation, he mentioned that the stroke of the letter is not very clear, it could either because I did not join the line when I draw it on AdobeIllustrator, or I didn't save the gif with white background (instead of transparent background), I think the latter is the cause. Mr.Shamsul also helped my check my portfolio, he encouraged me to print out Mr.Vinod's notes as well, because I have only printed Mr.Shamsul's notes. He also suggested me to print 8 slides of notes in one page instead of 6 slides only. He also mentioned that my calligraphy is good but on the final piece I might need to pay more attention to the size of the letters, but overall, the line height is equal.
Week 6
For Mister Babadook, Mr.Vinod said that it will be more interesting if we have some contrast in our design, but not too much contrast to the point where it is divorced. For example, the way I added the circular flow of typography at the end was definitely out of the place. Next, Mr.Vinod told me that Univers Extra Black Extended is very hard to use because of the "extend" make the words look unnecessarily stretched. He also said that there is no necessary to make all the words fly here fly there, it can be normal and it can look simple and nice too.
Week 7
For the first page of Mister Babadook, Mr.Vinod told me that the font size of "Using typeset Univers @ Liam Yue Wei" was too small, and I was also supposed to write "Univers LT Std" as full name. The pages at the front or middle were good or just "okay", however some of the pages at the back did not look good as it lacked of the flow that leads the reader and also the style of what I did at the front. I was told to be more careful with letterspacing when it comes to the uppercase, maybe I shouldn't be using loose tracking for the uppercase black font. Also, I have learned that it's best not to do things like uppercase + big font size + black or extra black as the letters look extremely heavy and it is not pleasing to the readers. Mr.Vinod also told me that he actually said in class that DON'T use "small caps", guess I miss that one out but I have learned from him that uppercase letters in 7pt is still readable. That's the size he told me to reduce to for the lines where there are whispers like "LET ME IN! " even though at first, I thought that they were already small enough. Besides, Mr.Vinod also told me not to press "space" to make paragraph, instead, use "ctrl+B", "type" and also the "paragraph styles" to do all the positioning of the letters. For paragraph spacing, I have to press "enter" (return). For forced line break, I have to press "shift+enter" as this will follow my leading (line spacing). Enter (return) will follow the value instead in the paragraph space value ¶ at the top in the control bar.
Week 8
There are unnecessary animation, I can remove some for the animations. Mr.Vinod and Mr.Shamsul also said that I need to pay more attention to the timing as it is a little off, disrupting the flow of the reading. I also need to change the letterspacing of the capital letters like "YOU'RE GOING TO WISH THAT YOU WERE DEAD" and " the more you deny, " and also the line spacing of the former one. It is also better to move the last "DOOK!" to the previous page so that the 3 "DOOK!"s are together in 2 pages. Also, move "the stronger I get." to the previous page, so it becomes "The more you deny, the stronger I get." in one page.
We then were given briefing by Mr.Vinod and Mr.Shamsul. Till week 9, we were told to download and print out a font (Roman) from Adobe font and Google font, study the curving and the counter form of the font. By knowing the the direction we want to design our font, we may also include some shapes that we are obsessed with, but not too complicated ones. Sketch on graph papers and show them in class in week 9. The lecturers have highlighter that Adobe fonts are more preferable as they are more well-developed.
Reflection
Experience
In these few weeks of working on the story book, it can be fun for me when I try playing around with the words to make it sounds and looks enough like the MrBabadook storybook. But then again, I made a lot of mistakes, and most probably repeated some of them too on this journey. For example, I tend to try making the words look very bold (extra black and extended) without knowing the best way to use extended fonts till I read a certain book. I also had problems with being creative at first, I had to think a lot till nothing comes out on mind.
Observation
I noticed that the reason why I made mistakes in this assignment is that I am still inexperienced in typography, also lack of knowledge as well considering I am still a beginner in typography. Besides, I have realised that I would always go for the bold typeface as I admire the way how other designers manage to make them look amazing on a page, so it turns out that I was trying to achieve the same result the designers give, however that did not work well for me. Next, I also realised that I always think too much, so instead of coming out with ideas, I only end up torturing my own brain.
Findings
I have learned that simple designs can sometimes be better than trying to work with complicated designs as it look pleasing to the readers' eyes. Besides, this is something that we have learned from previous exercises, but we need to make sure that our designs and the purpose/meaning is not divorced. Also, it means that we should try not to divorce our own style in a certain book by mixing various style of designing together, it will cause discomfort to the readers' eyes too. I have also noticed that by reading the books, I get to learn things that I did not learn from class ( or maybe things that I forgot ). Even if I am a slow reader, or I almost never manage to finish the whole book, what matters is that I learned something new from the book. Last not not least, I should stop overthinking every single time at everything and anything.
Week of the book
Week 5
 |
| TYPEX [Typography.A Teaching Experience] by Hernan Ordonez |
by Hernan Ordonez
This book is a showcase of designers' or students' works on Typography. From here, we get to see how the designers play with the positive,negative spaces, shape, font, size, composition and more. The creativity of theirs to use typography to form an artwork is fascinating. This book also included typography posters, personal logo, book and newspaper mockups, type families, design of information and typography at a click.
Few pages from the book :
This book reminds the readers of the importance of types. How do one teach art and design, something that apparently one can only learn? After the existence of design for more than a century, everyone knows that design is now a disciplinary field. Now, artistic training that does not cover questions on the work of art or on the meaning thereof is therefore unimaginable. Training must deal with the critical approaches to the subject made over the past fifty years. Therefore, we should not be resigned to simply accepting that something as complex, as rich and as dynamic as the task of a designer be reduced to a simple "do as I do" educational approach. Understanding the works as the result of the processes of conception and execution of ideas rather than as work that has been ordered or commissioned can allow us to understand what they mean as an idea about what a designer can imagine, think and achieve, and in doing so we will catch sight of the task shared between teacher and student in the context of an affection.
"I am convinced that one of our most important missions in life is to learn continuously."
 |
| INDIE FONTS * A Compendium of Digital Type from Independent Foundries. by ROCKPORT |
From the time of Johannes Gutenberg till around the mid-twentieth century, a "type foundry" was literally that: a shop that poured a molten mixture of lead, tin and antimony to cast individual letters for use by printers. This historically precise term has been retained in the digital age. Type foundry is still used to signify a maker of type - with no molten metal in sight.
This book is a collection of over 2000 fonts from 18 of the most innovative and active independent type foundries in the field. This book also delights those who simply appreciate type and its importance in language and communications.
Writing and it's formal expression, typography, drive the elementary functions of society, it is a social asset that equalizes opportunities among people, is a real heritage of humankind. With letters, we learn to read; then we can understand what we read. The correct use of letters follows naturally from the primary goal: achieving literacy. In this dialogue between content and form, the letter is a vehicle that will socialize the message, and help us enhance the function of the word.
 |
| The contend included in this book |
Week 8
 |
| The Fundamentals of Typography - Gavin Ambrose & Paul Harris |
 |
| Index of this book |
The Fundamental of Typography
by Gavin Ambrose & Paul Harris
"the fundamentals of typography" written by Gavin Ambrose and Paul Harris, like the name suggested, this book talks about the basics of typogrpahy. It includes a brief history, a few basics, letterforms, words and paragraphs, using type and more. First and foremost, I took interest in the design of the index page as I have only seen the same old look of the index till I flipped this book. According to Samuel Johnson, it is hoped that this book will serve as a valuable source of typographical information with which informed design choices can be made, to add depth and context to a work. This book is also intended to be a source of creative inspiration through the visual exploration of typefaces over the ages.
"the fundamentals of typography" written by Gavin Ambrose and Paul Harris, like the name suggested, this book talks about the basics of typogrpahy. It includes a brief history, a few basics, letterforms, words and paragraphs, using type and more. First and foremost, I took interest in the design of the index page as I have only seen the same old look of the index till I flipped this book. According to Samuel Johnson, it is hoped that this book will serve as a valuable source of typographical information with which informed design choices can be made, to add depth and context to a work. This book is also intended to be a source of creative inspiration through the visual exploration of typefaces over the ages.
"Language is the dress of thought." - Samuel Johnson
From this book, I have learned that ideogram-based languages are languages that use characters or symbols to represent an idea or concept without expressing the pronunciation of a particular word or words. For example, Chinese, Japanese, Korean, symbols like "No-entry" and such. I have also learned that "Hieroglyphs" is pictogrammatic writing system developed by several cultures, one of them is ancient Egyptians and Incas. Each pictogram can be an object, animal, tool or person but definitely not vocal sounds. It is said that there were over 750 individual Egyptian pictograms. They can be written from right to left, left to right or downwards.
Next, I have also learned about how we read on a page. Design can be complex when many items are used on the page or screen at the same time. Different typographical elements are included in layouts for their aesthetic qualities and legibility. So, when creating a layout, thought needs to be given to how a user, reader or viewer will approach the task of obtaining information from the design. Not only that, it is said that small text can encourage active reading while large text can encourage skim reading.
Also, I have also read that condensed types are narrower and useful for tight space situations while extended types are wider and often used for headlines to dramatically fills a space. So, it is advisable to use these two font wisely in order to make a good design. Besides, I have learned that serifs is a key characteristic for identifying a typeface. Serifs can enhance the readibility of a piece of text by helping the eye to advance from one character to next.
Last but not least, I have also managed to learned about type detailing. There are 3 words which I need to know such as widows, orphans, and hyphos.
Widow = a lone word at the end of a paragraph.
Orphan = the final one or two lines of a paragraph separated from the main paragraph to form a new column. (This should be avoided at all costs).
Hypho = a hyphenated widow that leaves half a word on a line.
Rags occur when highly noticeable shapes form by the line ends of text blocks that distract from simple, uninterrupted reading. It can include exaggerated slopes or noticeable inclines. Words may appear to overhang lines of text or creating unsightly and noticeable gaps in text blocks but they can be manually returned to make the gaps less noticeable.
Comments
Post a Comment