Advanced Typography: Task 1 Exercises

21/04/2025 - 13/05 /2025 / Week 1 - Week 4

Ye YingYing / 0364398

Advanced Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University

Task 1 / Exercises: Typographic Systems & Type & Play (20%)

TABLE OF CONTENTS

1. Lectures 
2. Instruction 
3. Task 1 
4. Feedback 
5. Reflection 
6. Further Reading


LECTURES

- Lecture 1 - Typographic System


“All design is based on a structural system.”
  • Typographical organization is complex because it depends on communication to function. 
  • Key criteria: hierarchy, order of reading, legibility, contrast. 
  • Typographic systems are like architects' "shape grammars”, which have a set of rules that are unique and provide a sense of purpose that focuses and directs the decision-making. (Elam, 2007) 
  • Even though some people feel systems limit intuition, they provide a strong framework to guide learners as intuition matures. 
There are eight major variations:
Fig. 1.1.1- Major System [week 1- 27/04/2025]
1. Axial system "轴向"
All elements are organised to the left or right of a single axis. 
  • Information is divided into groups, then placed at different angles on different sides of the axis 
  • The axis is not necessarily straight, which can also be bent 
  • The axial system requires a single line 
2. Radial system "径向" 
All elements are extended from a point of focus (spread out)
  • There can be multiple points 
3. Dilatational system "扩张"
All elements expand from a central point in a circular fashion 
  • There can be multiple rings of circles 
  • Can hierarchically place the information 
  • Can divide the information into clubs 
  • It can be a simple but also complex organization
Fig. 1.1.2- Major System [week 1- 27/04/2025]
4. Random system "随机" 
Elements appear to have no specific pattern or relationship 
  • There is a method in the chaos 
5. Grid system "网格"
A system of vertical and horizontal divisions 
  • Different sizes and weights can create emphasis and hierarchy 
6. Transitional system "过渡"
An informal system of layered banding 
  • Segregating information within certain bands 
  • Different colours/weights/sizes can contribute to the readability
Fig. 1.1.3- Major System [week 1- 27/04/2025]
7. Bilateral system "双边"
All texts are arranged symmetrically on a single axis 
  • Often used in invitation cards and other types of formal invites 
  • Every system needs to be used appropriately
8. Modular system "模块化"
A series of non-objective elements that are constructed in as standardised units 
  • Each units have to be standardised (same size) 
  • Modular allows you to move the individual units to different portions of the page (replacement) 
  • You can shift different elements in different spaces

- Lecture 2 - Typographic Composition

1. Principles of Design Composition
- create visual harmony and effective design
  • Isolation
  • Repetition 
  • Balance
  • Symmetry
  • Alignment
  • Contrast
  • Rhythm – A visual tempo or beat in the design.
  • Emphasis – Drawing attention to specific elements.
  • Perspective – Creating depth and spatial relationships.
  • Asymmetry – Uneven but still visually balanced composition.
2. Rule of Thirds
- A composition guide that is often used in photography and design. Divides a layout into 3 columns and 3 rows. The points of interest are placed at the intersections of the lines to create a natural visual flow.
Fig. 1.2.1 - Rule of Thirds [week 2 - 03/05/2025]

3. Typographic Systems

Grid System (Swiss/Modernist Style)
  • Most widely used system.
  • Originated from letterpress printing.
  • Provides structure and clarity.
  • Modernist typography often uses this system for clean, consistent layouts.
Fig. 1.2.2 - Grid System [week 2 - 03/05/2025]
While the Grid System may seem to be old or rigid, the versatility of the system and its (to some degree) modular nature tends to allow an infinite number of adaptations. This is why it continues to remain popular.

More Systems
Environmental Grid
  • Based on exploring existing structures or a combination of them.
  • Not just strict lines, can also reflect architecture, maps, or patterns.
  • Used to create dynamic and context-driven compositions.
Fig. 1.2.3 - Environmental Grid [week 2 - 03/05/2025]

Form and Movement
  • Uses grid principles to introduce motion over multiple pages.
  • The placement of a form on a page over many pages creates movement.
Fig. 1.2.4 - Form and Movement [week 2 - 03/05/2025]

- Lecture 3 - Context & Creativity

1. Handwriting and Early Letterforms
  • Early mechanical types imitated handwriting.
  • Handwritten letterforms were influenced by tools and materials.
  • These letterforms shaped how modern typography looks, including spacing and structure.
Fig. 1.3.1 - Evolution of the Latin Alphabet [week 3 - 10/05/2025]

Fig. 1.3.2 - Evolution of the Middle Eastern [week 3 - 10/05/2025]

Western Development
  • Cuneiform (c. 3000 BCE) – One of the earliest writing systems.
  • Hieroglyphs – Used ideograms and phonograms to convey meaning and sound.
  • Greek Letterforms (5th C. BCE) – Freehand, no serifs originally.
  • Roman Uncials (4th C.) – Rounded letters, faster to write.
  • English Half Uncials (8th C.) – More slanted, condensed forms.
  • Carolingian Minuscule – Introduced spaces between words, sentence capitals, and punctuation.
  • Blackletter (12–15th C.) – Dense, vertical strokes, optimized for material saving.
  • Italian Renaissance – Rationalized, perfected Roman letterforms based on classical principles.
Asian Development
  • Indus Valley Script (3500–2000 BCE) – Undeciphered, possibly logo-syllabic.
  • Brahmi Script (450–350 BCE) – Foundation of many modern South and Southeast Asian scripts.
  • Southeast Asian Scripts – Evolved from Brahmi, adapted by local communities like the Peninsula Malays.
Fig. 1.3.3 - Evolution of the Chinese Script [week 3 - 10/05/2025]
Chinese Script
- Evolved from pictographic forms to complex character systems with deep historical roots.

2. Multiscript & Vernacular Typography
  • Multiscript type design involves creating fonts for Latin and local scripts together.
  • Designers are encouraged to draw from their local culture and language systems.
  • This opens doors for innovation rooted in tradition.
3. Local Context & Creative Inspiration
  • Creativity should come from observing your environment.
  • Local culture, traditions, and surroundings offer meaningful design ideas.
"Looking behind gives you context. Looking forward gives you opportunities." — Mr. Vinod


- Lecture 4 - Designing Type

2 Reasons for Designing Typefaces (Xavier Dupre, 2007)
  • Type design carries social responsibility, so it must continuously improve readability.
  • It is also a creative and artistic form of expression.
Recommended reading: 21st Century Type Remake, for deeper insights into type design.

1. Frutiger by Adrian Frutiger (1968)
Fig. 1.4.1 - Frutiger [week 4 - 16/05/2025] 
  • Designed by the designer Adrian Frutiger (Swiss type) in 1968, specifically for use in the French airport.
  • Purpose: Clean, distinctive, and highly legible from near or far.
  • Considerations: Must be readable in poor lighting and when viewed quickly

2. Verdana by Matthew Carter
Fig. 1.4.2 - Verdana [week 4 - 16/05/2025]
  • Designed to address specific technical challenges
  • Purpose: Extremely legible at small screen sizes, optimized for digital devices.
  • Considerations: Based on pixel structure rather than traditional tools like pens or chisels.

3. Johnston Sans by Edward Johnston (1916)
Fig. 1.4.3 - Verdana [week 4 - 16/05/2025]
  • Created with a request for bold simplicity
  • Purpose: used as a new typeface in posters and signage on London's Underground Railway and clarity in public posters/signs 

General Process of Type Design

1. Research
  • Study type history, anatomy, conventions, terminologies, sidebearing, metrics, hinting, etc
  • Understand type’s purpose and what it would beused for 
  • We should examine existing fonts that are presently being used for inspiration/ ideas/ reference/ context/ usage patterns and more
2. Sketching
  • Can be done traditionally (paper, ink) or digitally.
  • Traditional methods offer more natural hand strokes.
3. Digitization
  • Software: FontLab, Glyphs, Adobe Illustrator.
  • Focus on both the letterform and counter form, which affects readability.
4. Testing
  • An important component in the design thinking process. 
  • The results of the testing are part of the process of refining and correcting. Prototyping is one of them.
  • Readability and legibility of the typeface become an important consideration depending on the typeface category ( display type/text type)
5. Deploy
  • There are always teething problems that do not come to the fore during the prototype and testing stages.
  • The rigour of the testing is important so that the teething issues remain minor. 

Typeface Construction:
Fig. 1.4.4 - Construction of grid for the Roman Capital using 8*8 cells [week 4 - 16/05/2025]

Roman Capital
  • The grid consists of a square with a circle inside that touches the lines of the square in four places.
  • A rectangle with 3 quarters the size of the square is also included within the centre of the square.
  • Using grids with circular forms can facilitate the construction of letterforms and is also a possible method to build/ design your letterform. 
Construction & Considerations
Fig. 1.4.5 - Classification according to form and construction [week 4 - 16/05/2025]
  • When designing a new typeface, various shapes and constructions need to be considered. One key visual adjustment involves allowing curved elements to extend slightly beyond the baseline and cap height, which also helps align curved and straight shapes more effectively.
  • Visual correction also plays a role in adjusting the spacing between letters. Simply placing characters side by side with equal spacing doesn't result in balanced visual spacing. Instead, the spacing must be refined to achieve consistent optical white space—this process is known as "type fitting"
Fig. 1.4.6 - Example of Fitting [week 4 - 16/05/2025]

Context & Creativity
The need/ motivation of most typefaces can be intrinsic and extrinsic

Intrinsic
  • The designer seeks out a form that comes close to fulfilling a desire. 
  • The designer maybe also identifies a gap/ problem and endeavours to solve it through the design of the typeface.
Extrinsic
  • When the designer has been commissioned or the student-designer was given a task to complete that involves designing a typeface. 
For a designer to be successful, we need to be invested in the idea and understand the requirements, limitations, use, and stakeholders.

- Lecture 5 Perception and Organization
Perception in typography focuses on how readers visually navigate and interpret content via:
  • Contrast
  • Form
  • Organization
Content may be textual, visual, graphical, or color-based, but here the focus is specifically on typographic design.
Fig. 1.5.1 - Methods of Contrast by Rudi Rueff [week 5 - 20/05/2025]
Creating contrast is essential to highlight important information and make distinctions between elements.

7 Types of Contrast by Carl Dair:
Fig. 1.5.2 - Methods of Contrast by Carl Dair [week 5 - 20/05/2025]

1. Contrast / Size
Fig. 1.5.3 - Contrast / Size [week 5 - 20/05/2025]
  • A larger element (e.g., title or heading) naturally draws the reader’s attention.
  • Most commonly used to differentiate titles from body text.
2. Contrast / Weight
Fig. 1.5.4 - Contrast / Weight [week 5 - 20/05/2025]
    • Using bold type to stand out among lighter text of the same style.
    • Visual emphasis can also be added through shapes like squares or rules
    3. Contrast / Form
    Fig. 1.5.5 - Contrast / Form [week 5 - 20/05/2025]
      • Refers to differences between capital and lowercase letters, Roman and italic, or condensed and expanded versions of a typeface.
      4. Contrast / Structure
      Fig. 1.5.6 - Contrast / Structure [week 5 - 20/05/2025]
      • Involves variation in letterform structure across typefaces, such as monoline sans-serif vs traditional serif, italic, or blackletter
      5. Contrast / Texture
      Fig. 1.5.7 - Contrast / Texture [week 5 - 20/05/2025]
      Fig. 1.5.8 - Example of Contrast / Form [week 5 - 20/05/2025]
      • Texture emerges when size, weight, form, and structure combine.
      • Refers to how blocks of type appear both close-up and from afar.
      6. Contrast / Direction
      Fig. 1.5.9 - Contrast / Direction[week 5 - 20/05/2025]
      • Contrast between vertical and horizontal orientations (or angles in between).
      • Rotating or stacking text can create dramatic directional contrasts.
      7. Contrast / Colour
      Fig. 1.5.10 - Contrast / Colour [week 5 - 20/05/2025]
      • Use of color to establish hierarchy.
      • A second color usually has less visual weight than black-on-white.
      • Attention must be given to tonal values when assigning color emphasis.
      Form in Typography:
      Form refers to the overall look and feel of a typographic composition. It significantly influences visual impact and first impressions.
      Fig. 1.5.11 - Form [week 5 - 20/05/2025]
      • A strong form guides the eye and enhances memorability.
      • The word "typography" comes from Greek: 'typos' (form) + 'graphis' (writing), meaning writing according to form.
      Typography serves two key functions:
      • To represent a concept
      • To represent that concept in a visual form
      When typography is perceived as form, letters can become abstract shapes through manipulation (e.g., distortion, enlargement, texture). This fusion of meaning and form achieves harmonious expression.
      Fig. 1.5.12 - Examples [week 5 - 20/05/2025]

      Perceptual Organization / Groupings
      “Gestalt” is a German term that means “the way a thing is put together.” It’s a psychological theory focused on how humans perceive grouped visual elements as a whole, rather than in isolation.

      Developed by psychologist Max Wertheimer, the following Gestalt laws help explain how we perceive and organize visual data:
      Fig. 1.5.13 - Gestalt Laws [week 5 - 20/05/2025]
      1. Law of Similarity
      • Elements that are visually similar (in color, shape, size, etc.) are perceived as part of the same group.
      2. Law of Proximity
      • Elements that are close together tend to be perceived as a unified group.
      • Distance between objects affects how we group them mentally.
      3. Law of Closure
      • Our minds tend to "fill in the gaps" to perceive complete shapes, even when information is missing or incomplete.
      4. Law of Continuation
      • We perceive elements as part of a continuous flow, even when they intersect.
      • Alignment of elements guides this perception.
      5. Law of Symmetry
      • The mind naturally favors balanced and symmetrical forms for a sense of stability and clarity.
      6. Law of Simplicity (Prägnanz)
      • The human brain simplifies complex visuals into the simplest, most recognizable forms.
      • This principle supports our preference for clarity, order, and ease of understanding.

      INSTRUCTION
      <iframe src="https://drive.google.com/file/d/1Pu4D-dXuBKCzUh0EgY4_S0cBuHBdm3wS/preview" width="640" height="480" allow="autoplay"></iframe>

      TASK 1

      - Exercise 1 - Typographic System -

      I used the title "All Ripped Up: Punk Influences on Design" and its contents for my layout design.

      First Attempt
      Fig. 2.1.1 - Typographic System First Attempt  [week 1 - 26/04/2025] 

      Before I had my first attempt, I watched the lecture video and also did some further reading from Typographic Systems by Kimberly Elam to understand the fundamentals of typographic systems.

      Refinement & Progress
      After receiving feedback from Mr. Vinod on my first attempt, I refined my work by adding color and simple graphic elements, but mainly kept the layout. But I need to rework the modular system layout.

      1. Axial System
      Fig. 2.1.2 - Axial System  [week 2 - 30/04/2025] 
      • First, I defined the axis I wanted to use for the design, and then I dragged a guideline to help structure and align my layout.
      • I kept the layout as it was but refined it by adding red colour and small elements behind important dates to emphasize key information.
      2. Radial System
      Fig. 2.1.3 - Radial System  [week 2 - 30/04/2025] 
      • First, I defined the points I wanted to use for the radial design. I used three points in total.
      • Using the points as the center, I created two circles. Then, I used the Line Segment Tool, and I dragged lines outward from each point, adjusting the angles of each line to create the radial layout.
      • I used the "Type on Path" tool to input text along the lines. I made sure the first letter of the text aligned (touched) the outer circle.
      • I refined my design by adding red color and some circular elements.
      3. Dilatational System
      Fig. 2.1.4 - Dilatational System  [week 2 - 30/04/2025] 
      • I dragged a large circle as the main shape to expand, then added several smaller circles around it to form the foundation of the design.
      • Using the "Type on Path" tool, I input my text along the paths of the circles. 
      • I carefully adjusted the angles and direction of the path to create a smooth, flowing feel throughout the layout.
      • I refined it by adding red colour and bolding key parts of the text.
      4. Random System
      Fig. 2.1.5 - Random System  [week 1 - 26/04/2025] 
      • I created multiple textboxes and randomly typed in the text.
      • I changed the color, font weight, leading, and others randomly.
      • Change the directions for the text boxes, and do some overlapping.
      5. Grid System
      Fig. 2.1.6 - Grid System  [week 2 - 30/04/2025] 
      • I set up the columns on my page as a guide to structure the layout first.
      • I then added the text, ensuring that the text boxes were aligned with the grid.
      • For the refinement, I did some changes, some layout, typeface face and colour.
      6. Transitional System
      Fig. 2.1.7 - Transitional System  [week 2 - 30/04/2025] 
      • I started by placing the text directly onto the page, arranging it in a way that maintained a natural sense of flow.
      • I made small adjustments to the placement and spacing to ensure the layout looked clean and visually balanced.
      • For refinement, I explored with different background colours. One version with red and another with black, and I decided to go with black.
      7. Modular System
      Fig. 2.1.8 - Axial System  [week 2 - 30/04/2025] 
      • Because my first attempt didn’t get approved, I need to redo the layout. 
      • I set a standard unit to use first.
      • I placed the word “PUNK” first and enlarged it to make it stand out. 
      • By using the standard unit as a guide, I began placing the rest of the text.
      • I did a check by moving each text box to a different placement to ensure it aligned with the modular system.
      • After finalizing the structure, I chose one layout that I felt worked best. I then added color and simple graphic elements.
      8. Bilateral System
      Fig. 2.1.9 - Bilateral System  [week 2 - 30/04/2025]
      • I first set a single central axis to use for this system, placing a guideline down the middle of the layout to help align the text symmetrically.
      • I arranged the text, making sure it was balanced and aligned properly. I also paid attention to maintaining enough white space to keep the layout clean.
      • For refinement, I changed the background color to black.
      Final Outcome of Typographic System

      1. Axial System
      - Fonts Used: Serifa Std
      Fig. 2.1.10 - Axial System Final Layout  [week 2 - 30/04/2025]
      2. Radial System
      - Fonts Used: Univers LT Std
      Fig. 2.1.11 - Radial System Final Layout  [week 2 - 30/04/2025]

      3. Dilatational System
      - Fonts Used: Janson Text LT Std
      Fig. 2.1.12 - Dilational System Final Layout  [week 2 - 30/04/2025]

      4. Random System
      - Fonts Used: Gill Sans Std

      Fig. 2.1.13 - Random System Final Layout  [week 2 - 30/04/2025]

      5. Grid System
      - Fonts Used: Serifa Std
      Fig. 2.1.14 - Grid System Final Layout  [week 2 - 30/04/2025]

      6. Transitional System
      - Fonts Used: ITC Garamond Std
      Fig. 2.1.15 - Transitional System Final Layout  [week 2 - 30/04/2025]
      (I added a grey border to have a clearer view)

      7. Modular System
      - Fonts Used: Adobe Caslon Pro
      Fig. 2.1.16 - Grid System Final Layout  [week 2 - 30/04/2025]

      8. Bilateral System
      - Fonts Used: Adobe Caslon Pro
      Fig. 2.1.17 - Bilateral System Final Layout  [week 2 - 30/04/2025]
      (I added a grey border to have a clearer view)

      More Attempts
      Fig. 2.1.18 - Typographic Systems More Layouts  [week 2 - 30/04/2025]

      Final Compilation of Task 1-Exercises 1-Typographic System
      Fig. 2.1.19 - 8 Typographic Systems - PDF without grid [week 2 - 30/04/2025]

      Fig. 2.1.20 - 8 Typographic Systems - PDF with grid [week 2 - 30/04/2025]

      - Exercise 2 - Type & Play Part 1 / Finding Type -

      Finding an image
      For this exercise, we were asked to extract letterforms from an image. I chose to take a photo in front of Taylor’s College Block E, the rock wall beside the driveway. I think the rock wall's texture and shapes have potential, and it would be fun to try extracting letterforms from it.
      Fig. 2.2.1 - Chosen Image [week 2 - 02/05/2025]
      First Attempt

      Fig. 2.2.2 - First Attempt [week 2 - 04/05/2025]

      My feedback from Mr. Vinod on the first attempt is that overall my work is okay, but I need to improve the line quality. I may keep the jagged texture from the original extraction, but I must ensure consistency in each stroke, especially by maintaining a consistent thickness within all the letters.

      Refinement & Progress

      1. Extraction
      Fig. 2.2.3 - Letter Extraction [week 2 - 03/05/2025]
      • I first outlined the potential letterforms from the image using my iPad and found letters Y, C, O, V, D, L, K, A, H, P, and R.
      • I chose the word "ROCKY" because it fits well with the image, a rock wall.
      • I then used the Pen Tool in Adobe Illustrator to trace and refine the selected letters for a cleaner result.
      Fig. 2.2.4 - Final Letter Extraction [week 2 - 03/05/2025]
      2. Reference Font
      Fig. 2.2.5 - Reference Font [week 3 - 07/05/2025]
      • Then I started looking for a reference font, and I chose Source Code Variable Bold. Its stroke weight can help me set a better standard for my extracted letterforms, and its clean structure makes it easier to follow and refine my designs.
      Fig. 2.2.6 - Before and After font reference [week 3 - 09/05/2025]
      • When referring to the reference font, I focused on the stroke weight and consistency to guide my letterform design, while still maintaining the jagged texture from the original rock wall image.
      3. Progress
      Fig. 2.2.7 - Refining Letterforms [week 3 - 09/05/2025]
      • First, I dragged out the guidelines and placed them based on the reference font to help with font structure before adjusting my letters.
      • Then, I used the Direct Selection Tool and Pen Tool to fine-tune each of the letterforms.
      Fig. 2.2.8 - Refining Process [week 3 - 10/05/2025]
      Fig. 2.2.9 - Original extraction (top), Reference font (middle), and final letterform (bottom) comparison (baseline) [week 3 - 10/05/2025]


      Final Outcome of Type & Play Part 1 / Finding Type
      Fig. 2.2.10 - Final Outcome (Template) [week 3 - 10/05/2025]
      Fig. 2.2.11 - Final Letterforms [week 3 - 10/05/2025]
      Fig. 2.2.12 - Final Compilation of Type & Play Part 1 / Finding Type - PDF [week 3 - 10/05/2025]

      - Exercise 2 - Type & Play Part 2 / Poster -

      Since my letters were extracted from a rock wall, I looked up images of rock climbing and rock textures for inspiration. I decided to design a poster for a documentary about a climber to match my letterforms.
      Fig. 2.3.1 - Inspiration Reference Images [week 3 - 11/05/2025]
      I decided to use the second image from the first row because it has a beautiful contrast that works well with my poster concept. And the fourth image from the same row is for my title text pattern.

      First Attempt
      Fig. 2.3.2 - First Attempt Design [week 3 - 11/05/2025]
      Based on the feedback from Mr. Vinod on my first attempt, I needed to adjust the placement of the title, it should be placed horizontally across the poster. I also had to add margins to ensure all elements stay within the layout and don’t get cut off. For the description text, I need to change the color to make sure it remains visible and readable on all devices.

      Refinement & Progress
      Fig. 2.3.2 - Title Progress [week 4 - 15/05/2025]
      • I used the Clipping Mask tool to apply a rock-like pattern to my title text.
      • Then, I duplicated the title text and changed its color to black.
      • I placed the black version underneath the original to create a shadow effect.
      • I added a Diffuse Glow effect to enhance the overall visual impact of the title.

      Fig. 2.3.4 - Logo elements progress [week 4 - 15/05/2025]
      • First, downloaded the clear version of the logos online
      • Used the Image Trace tool, then expanded it to convert the image into a vector.
      • I changed the logo color to white to match the overall design.
      • Finally, I placed all the logos neatly at the bottom of the poster.

      Fig. 2.3.5 - Final Refinement [week 4 - 15/05/2025]
      • I typed in the necessary text information, such as the description and credits.
      • Then, I adjusted the layout to make sure all elements stayed within the margins and maintained a clean, balanced composition.
      Fig. 2.3.6 - More layout explorations [week 4 - 15/05/2025]

      • I explored different layout options for my design and decided to go with the last one, as I felt it had a better composition and looked more like a real movie poster.
      Final Outcome of Type & Play Part 2 / Poster
      Fig. 2.3.7 - Final outcome of Type & Play Part 2 / Poster ROCKY [week 4 - 15/05/2025]
      (I added a grey border to have a clearer view)
      Fig. 2.3.8 - Final Compilation of Type & Play Part 2 / Poster ROCKY - PDF [week 4 - 15/05/2025]

      FEEDBACK

      - WEEK 1 -
      General Feedback :
      In the first week of class, Mr. Vinod introduced the Module Information Booklet and explained the overall goals for the module. He also walked us through the upcoming tasks and assessments. Before the next class, we need to complete the requirements listed in the Teams post.
      Specific Feedback : 
      No specific feedback this week.

      - WEEK 2 -
      General Feedback :
      This week, Mr. Vinod reviewed each of our works and provided specific feedback. He said that we should not only reflect on our own feedback but also learn from the comments he gave to other classmates. After the feedback session, Mr. Vinod introduced Exercise 2, which must be completed before Week 3. Before we started, do check the link that he provided in Teams. 
      Specific Feedback : 
      Overall, my 8 system design compositions are acceptable. However, the modular system needs to be refined and improved, the modular system is not presented strongly enough.

      - WEEK 3 -
      General Feedback :
      Mr. Vinod reviewed each of our works and provided specific feedback. After the feedback session, we started working on the poster design. For the feedback sheets, do not delete the red reminder texts, add the word "Updated" before instead. Make sure to keep the feedback sheet up-to-date to avoid mark deductions.
      Specific Feedback : 
      Overall, my work is okay, but I need to improve my understanding of the line quality. I may keep the jagged texture from the original extraction, but I must ensure consistency in each stroke, especially by maintaining a consistent thickness within all the letters.

      - WEEK 4 -
      General Feedback :
      Mr. Vinod provided individual feedback to each of us on our posters. After that, he let us have a feedback session, reflecting on our experience over the past few weeks. He also introduced Task 2 and set the due date for Task 1 to 20 May, so we must complete all work and update our blogs before then.
      Specific Feedback : 
      Mr. Vinod mentioned that I need to change the placement of the title, it should be placed horizontally across the poster. He also reminded me to add margins before starting the design to ensure that all elements stay within the layout and don’t get cut off. For the description text, I need to change the colour to make sure the text is visible on all devices.

      REFLECTION

      Experiences
      At first, I had only a blur idea about what typography system is. But through the practice in Exercise 1, I gained a deeper understanding of how to apply it in real design work. I experimented with different layouts and found the process actually enjoyable and calming. It cleans my mind when I was working on it. This task also helped me pick up the skills in using InDesign, which I hadn’t used for a while. Exercise 2 was also very interesting, as I extracted the letterforms from my own photographs. Although the process was a bit challenging, I found it meaningful.

      Observation
      While working on the exercises, I noticed that many of my classmates were bold and creative in exploring different design layouts. In Exercise 2, some of them selected unusual photos that stood out. And I realized I was "playing safe" with my choices because of my fear of making mistakes. This made me reflect on how my hesitation might have limited some creative possibilities and learning opportunities.

      Findings
      Throughout this project, I found that even very small changes in typography can have a big impact on the overall visual effect. And it’s important to explore different variations to find the most effective solution. I also realized that the random system was particularly difficult for me to work with because I personally prefer order and structure, so it challenged me to think differently. In Exercise 2, I discovered how many hidden design possibilities exist in our daily life, every object can actually become an interesting inspiration.

      FURTHER READING

      To improve my work on the typography system exercise, I decided to read Typographic Systems by Kimberly Elam.
      Fig. 3.1.1 - Typographic Systems by Kimberly Elam [week 1- 27/04/2025]
       
      Fig. 3.1.2 - Typographic Systems reading notes [week 1- 27/04/2025]

      From my reading, the Grid System stands out as the most adaptable and effective for general design. It offers a structured approach while providing clear communication. However, I found that the Grid System and the Modular System are quite similar, which makes me a little confused. To differentiate them, I focus on how the space is divided. The Modular systems break the layout into repeated units or blocks, while grid systems use columns and rows more flexibly, often with different unit sizes.

      Personally, my favorite system is the Random System. I like it because of its strong visual impact and the creative possibilities of it. But I also find it is actually the most challenging system to apply. For those people who prefer order and structure, working with the Random System pushes them out of my comfort zone, making it both difficult and exciting

      Comments

      Popular Posts