💧 Exercises
NG MEI YING (0340563)
Advanced Typography
Exercises
LECTURE NOTES
14/04/20 (W1): Typographic Systems
Today Mr Vinod guided us through the first lesson "Typographic Systems" with the publication written by Kimberly Elam after he had briefed us on the modules and the tasks on Facebook Live. Lecturer soon started zoom live streaming to help students do a warm-up revision on the Adobe InDesign Software to ensure students' efficiency on setting up the task 1. The next open consultation on other students task for the whole class was helping others to avoid making the same mistakes. Moreover, My group which was group 3 had assigned to prepare for the presentation slide on the given topic of "Typographic Perception & Organization" for week 3.
The 8 Typographic Systems
 |
| Fig 1.0 Picture of <Typographic System> written by Kimberly Elam. |
- Axial System: All elements are organized either to the left or right of a single axis.
- Radial System: All elements are extended from a focus point.
- Dilatational System: Textual information surround the circumference of a circle.
- Modular System: Text is constructed as standard size unit which is interchangeable.
- Random System: Elements appear to have no specific pattern or relationship.
- Grid System: All text is divided into vertical columns and horizontal rows.
- Transitional System: An informal system of layered banding or flowy system.
- Bilateral System: All text is centred aligned, arranged symmetrically on a single axis.
21/04/20 (W2) : Typographic Composition
Today Mr Vinod guided us through the second lesson "Typographic Composition". The designer might face the situation that sometimes the layout principles did not really work when it came to the larger content with complex layout.
Other Typographic Composition
- The Rule of Third - Nobody really uses this however is interesting to try
- Environmental Grid - Trace the keyline and create text within it to get a unique style.
- Form and Movement - Most layout hierarchy is created by picture, colour, text.
Fig 1.1 Lecturer Note PDF of <Typographic Composition>.
28/04/20 (W3) : Typographic Perception & Organisation
Today was time for my groupmate (Melissa, Maria, Ehtasham, Ridho, Ke En, Ming De, Maisarah, Mokshanah, Nizam and me) to deliver a lecture. It was great that I could learn more about the topic presented and the presentation this time was more like an extra summary of what we had learnt during the previous semester.
Typographic Perception & Organisation
- Form & Content
- Gestalt Psychology & Layout
- Creating Visual Hierarchy
Fig 1.2 Lecturer Note PDF of <Typographic Perception & Organization>.
05/05/20 (W4) : Context & Creativity
The lecture of this week.
Fig 1.3 Lecturer Note PDF of <Content & Creativity>.
INSTRUCTION
Typographic Systems
14/04/20 (W1)
The first task was assigned after the lecturer, we needed to create 2 example works for each of the typographic systems which means that we had to come out with a total of 16 pages of works in Adobe InDesign in before next week. To ensure that I could have a better grasp on the lessons taught by the lecturer, I decided to go through the book provided by Lecturer again as well as did more online research on the specific topic.
Task 1 (Part 1 / Typographic System)
- Create 200mm x 200mm canvas in Adobe InDesign
- Chose typeface from the 9 Typefamily
- Limited 2 different text colours
- Only minimal non-objective decorative elements allowed
- Create 2 example works for each typographic system
Layout Version 1:
Below was the first version of the layout design with the 8 typographic system applied.
 |
| Fig 2.0 Axial System (Version 1) |
 |
| Fig 2.1 Bilateral System (Version 1) |
 |
| Fig 2.2 Grid System (Version 1) |
 |
| Fig 2.3 Module System (Version 1) |
 |
| Fig 2.4 Dilatational System (Version 1) |
 |
| Fig 2.5 Radial System (Version 1) |
 |
| Fig 2.6 Transition System (Version 1) |
 |
| Fig 2.7 Random System (Version 1) |
Layout Version 2:
Below was the second version of the layout design. I try to make some of the design into a slanted form aiming to bring some interesting changes to the way we read. The position of the non-objective elements was adjusted according to the layout design.
 |
| Fig 3.1 Axial System (Version 2) |
 |
| Fig 3.2 Bilateral System (Version 2) |
 |
| Fig 3.3 Grid System (Version 2) |
 |
| Fig 3.4 Module System (Version 2) |
 |
| Fig 3.5 Dilatational System (Version 2) |
 |
| Fig 3.6 Radial System (Version 2) |
 |
| Fig 3.7 Transition System (Version 2) |
 |
| Fig 3.8 Random System (Version 2) |
Layout Version:
Below was the final version of the layout design after the consultation with the lecturer. Some format of the text had readjusted as well as the non-objective elements. The non-objective elements for the radial system had reduced to avoid affecting the visual hierarchy of reading.
 |
| Fig 4.1 Axial System (Final Version) |
 |
| Fig 4.2 Bilateral System (Final Version) |
 |
| Fig 4.3 Grid System (Final Version) |
 |
| Fig 4.4 Module System (Final Version) |
 |
| Fig 4.5 Dilatational System (Final Version) |
 |
| Fig 4.6 Radial System (Final Version) |
 |
| Fig 4.7 Transition System (Final Version) |
 |
| Fig 4.8 Random System (Final Version) |
Fig 4.9 Typographic System Layout Design (Final Version PDF)
Type & Play (Part 1): Finding Type
21/04/20 (W2)
The second task was assigned regarding font designing, we need to search for some images with a man-made or natural object. Base on the image we find, we need to observe, analyze and identify the texture as well as the decorations form by the natural phenomena. Extract the potential forms from the image for font design and undergo the iteration dissection to make the crude font to a well-refined font without losing its natural characteristic and origin.
Below was the image I search for from Pinterest. I found it was interesting to extract the crude form of text by observing the flow of the feminine curve line. The image was converted into a greyscale version in order to analyze the form easily without the distraction of colours.
 |
| Fig 5.0 The Jpeg image found on Pinterest. |
 |
| Fig 5.1 The Jpeg image was inverted into black & white |
 |
| Fig 5.2 Dissection of the image to find the hidden potential font. |
Process of Refining Fonts
 |
| Fig 5.3 The raw and crude form of font. |
 |
| Fig 5.4 Baskerville typeface was used as a reference for the font formulation. |
 |
| Fig 5.5 The second phase of font design. |
 |
| Fig 5.6 The third phase of font design. |
 |
| Fig 5.7 The final phase of font design. |
 |
| Fig 5.8 The final design of letter A. |
 |
| Fig 5.9 The final design of letter B. |
 |
| Fig 5.10 The final design of letter O. |
 |
| Fig 5.11 The final design of letter P. |
 |
| Fig 5.12 The final design of letter U. |
Fig 5.13 Final Font Design (Final Version PDF)
Type & Play (Part 2): Type & Image
28/04/20 (W3)
The last exercise assigned was to stitch the text or a quote into the image. An image of a man-made structure or an object, and nature will be combined with a letter/word/sentence. The objective is to enhance/support the interplay between the letter/word/sentence and the selected image. The text must be woven into a symbiotic relationship with the image.
Task 1 (Part 3 / Type & Image)
- Create A4 canvas
- Chose typeface from the 10 typefamily
- Free to use any colours (less is more)
- Stitch the sentences/quote with around 4 texts
First Attempt: Working with the scenery picture
 |
| Fig 6.1 The Original Image Jpeg. |
 |
| Fig 6.2 New Baskevill Italic text added. |
 |
| Fig 6.3 Edit & merge the text with the cherry tree. |
 |
| Fig 6.4 Edit the colour of the sky. |
 |
| Fig 6.5 Final JPEG: Rainbow & blur effect added. |
Fig 6.6 Final PDF
05/05/20 (W4)
Second Attempt: Working with the human figure.
For the second attempt, a new image was got from Pinterest. According to my observation, this image was a great choice for text interplay. Staring to the image, I tried to digest the message wanted to deliver by this image; the word "solitude" appeared in my mind which I thought this word it suited the image very much! I started to image the possible arrangement for each of the text to interplay with the image. The colour of the text changed gradually to find out the balance in the image. Below were the steps for the poster design with text interplay.
For the second attempt, a new image was got from Pinterest. According to my observation, this image was a great choice for text interplay. Staring to the image, I tried to digest the message wanted to deliver by this image; the word "solitude" appeared in my mind which I thought this word it suited the image very much! I started to image the possible arrangement for each of the text to interplay with the image. The colour of the text changed gradually to find out the balance in the image. Below were the steps for the poster design with text interplay.
 |
| Fig 7.1 The Original JPEG. |
 |
| Fig 7.2 Letter "S" was placed. |
 |
| Fig 7.3 Play with the text colour. |
 |
| Fig 7.4 Arranging the texts inflows. |
 |
| Fig 7.5 Final JPEG. |
Fig 7.6 Final PDF.
FEEDBACK
14/04/20 (W1)
- Specific feedback: -
- General feedback: Lecturer reminded us that we must make use of our time wisely. Also, students were advised to get more answer from the google proactively rather than just waiting for answers. , the first thing to do when we were starting our task 1 was to understand the system been used then proceed to identify the visual hierarchy.
21/04/20 (W2)
- Specific feedback: For the grid system work, spaces between paragraph were too wide and it was suggested to increase the leading of the text to ensure the negative space looked balance. For the modular system work, I should ensure that the shape in wavy lines was placed exactly within the text cells. For the radial system work, I need to be aware of the application of non-objective structures. For the transition system work, avoid the boxy visual effect when it came to the horizontal arrangement. As a conclusion, the overall works was lovely and excellent. Try to avoid making the text italic, underline and bold at the same time, the use of either 1 or 2 text effect was sufficient to create a good visual hierarchy, Less is more.
- General feedback: Lecture reminded us that the latest work must be uploaded once we have done the correction on the error. As usual, the blog should always be updated to avoid the accumulation of workload. The progress works must be included in the blog in JPEG format with clear captions but not simply the screenshot images.
28/04/20 (W3)
- Specific feedback: Lecturers mentioned about the font design was well-done.
- General feedback: Our lecturer reminded us that the font design should be refined at a certain level in order to make the font looks well modified without losing its natural characteristic. If there were too many characteristics in the potential font, we should only choose one characteristic to ensure that the set of font design visually united.
05/05/20 (W4)
- Specific feedback: For the first attempt, the letter "R" and "N" does not look well. Overall it's not a good text interplay artwork. For the second attempt, the interaction of text with the human figure looks better. The merging of the letter "S" is tuneful. Mr Vinod said that I had finally done a great job. I nailed it finally.
- General feedback: We need to ensure that the text is fused well with the raw image elements to create a good interplay of text as well as choose the right text that match & mimic with the atmosphere of the image.
12/05/20 (W5)
- Specific feedback: Student needed to ensure that the blog was completely done. Besides that, students can have the blog as the resource for further reading but not only limited to books.
- General feedback: The overall refinement for the final poster design was great. It's good to look at personal work in a third party shoe so one's could observe it more critically. The suggestion was given on the shadow performing, it could be improved in a higher level by adjusting the fuzziness of shadow according to the source of light.
REFLECTION
Experience
(14/04/20 Week 1): To be honest, it was quite challenging to get used to the new learning approach --- Live stream E-Learning as it gave me a surreal and nervous experience. (21/04/20 Week 2): I slowly began to adapt to the way of having online class however the learning atmosphere was affected directly. The long learning duration on the blue-ray screen leads to the eyestrain. (28/04/20 Week 3): It's was great to have the presentation for the class as we could learn more from the usual lecture from Mr Vinod. With this opportunity, I could correct my previous knowledge as well as gain extra information from the lecturer. (05/05/20 Week 4): It was not as good as I expected for the consultation by using Teams for my lecturers, too much audio problem occurring in between the session that was quite frustrated... (12/05/20 Week 5): Time management for the lecture and consultation was much more efficient than the previous time.
(14/04/20 Week 1): To be honest, it was quite challenging to get used to the new learning approach --- Live stream E-Learning as it gave me a surreal and nervous experience. (21/04/20 Week 2): I slowly began to adapt to the way of having online class however the learning atmosphere was affected directly. The long learning duration on the blue-ray screen leads to the eyestrain. (28/04/20 Week 3): It's was great to have the presentation for the class as we could learn more from the usual lecture from Mr Vinod. With this opportunity, I could correct my previous knowledge as well as gain extra information from the lecturer. (05/05/20 Week 4): It was not as good as I expected for the consultation by using Teams for my lecturers, too much audio problem occurring in between the session that was quite frustrated... (12/05/20 Week 5): Time management for the lecture and consultation was much more efficient than the previous time.
Observation
(14/04/20 Week 1): Comparing with the on-site learning experience, the biggest advantage for the online virtual learning approach was the lecture was well recorded with a richer and simplified way that allowed the student to access anytime without the time constrains. (21/04/20 Week 2): I found that the way my peers exert the ideas and creativity on the design task given had changed. Students tend to have a more diverse composition and design style applied to the work. I guess it might because we were searching the ideas from the internet rather than get inspired by our peers. (28/04/20 Week 3): I found that one of my classmates had done a great job on the font design by getting the idea from the ordinary wool knitting item. I was very surprised at how he was able to create something unique yet appealing from the inconspicuous item. (05/05/20 Week 4): I found the problem in my interplay work while waiting for my turn during the consultation. From the advice given by Mr Vinod for the other students, I discover the same problem was hidden in my work! (12/05/20 Week 5): I obviously observed that the works of my peers had a better improvement after the guidance by lectures.
Findings
(14/04/20 Week 1): There was no webcam on my laptop and I found it was not that convenience as I could not interact with lecturers "directly" but only could use text typing was quite frustrated to me. (21/04/20 Week 2): The benefits of e-learning was I do not need to commute for a long time to school hence it saved more time for learning and exercises. Lecturers were well recorded concisely which is good for revision. (28/04/20 Week 3): I found that I need to read more as well as practice my presentation skill. (05/05/20 Week 4): I try my best to make use of the time while waiting for the consultation for my turn to redesign on new poster design, time was the biggest challenge for me. I felt even more anxious when it was my turn as Mr.Vinod sounded like quite looking forward to my work when he said "Okay, Cerene! Come, surprise me." He bursted into laughter when he knew what I was doing. (I felt quite embarrassed hhh) However, I knew its very important for a design student to train themselves to be a professional designer who was able to discover the problem from his/her work during the learning process. (12/05/20 Week 5): My findings for this week was I could learn a lot by looking into others works critically during the consultation session. Critical thinking was a great practice to improve one's work with self-conscious.
FURTHER READING
05/05/20 (W4)
Book Name: Typographic System
By: Kimberly Elam
About the book:
This is the e-book written by Kimberly Elan. The typographic organization has always been a complex system in that there are so many elements at play, such as hierarchy, the order of reading, legibility, and contrast. In Typographic Systems, the author shares and explores about like eight major structural frameworks beyond the grid including random, radial, modular, and bilateral systems. Rich examples are provided to show a broad range of design solutions.
Comments
Post a Comment