Typography - Task 1: Exercises


23/09/2024 - 29/10/2024 / Week 1 - Week 6

Ye YingYing / 0364398

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

Task 1 - Exercises


TABLE OF CONTENTS

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


LECTURES 

Week1 - Typo 0: Introduction -


Calligraphy - Refers to the writing styles
Lettering - Refers to how you draw the letters out
Typography - Refers to the art of arranging and styling text to make it visually legible, appealing, and readable when displayed.

Font - Refers to the individual font or weight within the typeface.
For example: Georgia Regular, Georgia Italic, and Georgia Bold

Typeface - Refers to the entire family of fonts/weights that share similar characteristics or styles.
For example: Georgia Arial, and Times

More Resources:kreatifbeatsType History


Week 1 - Typo 01: Development -


1. Early letterform development: Phoenician to Roman

# Phoenicians Letters

- Early writing tools included sharpened sticks for scratching wet clay and chisels for carving stone.
- Uppercase letterforms evolved from the tools and materials of early writing. [nearly 2000 years]
- The design of uppercase forms consists of simple straight lines and curves.


Figure 1.1.01 - Phoenician letters

# Greek

People from the Middle East wrote from right to left.

The Greeks changed the direction of writing [New style "Boustrophedon" (how the ox plows) ] 
- they read alternately from right to left and left to right
- they changed the orientation of the letterforms while the direction of reading changed

Figure 1.1.02 - Boustrophedon reading style

# Roman

- Etruscan and Roman carvers painted letterforms on marble before inscribing them
- The carved letterforms show a change in weight from vertical to horizontal, a broadening of the stroke at start and finish.

Figure 1.1.03 - Development of letter A


2. Hand script from 3rd - 10th century C.E.

Figure 1.1.04 - Hand-scripted letterforms


3. Blackletter to Gutenberg's type

Figure 1.1.05 - Blackletter and Gutenberg's type


4. Development of Typefaces in different regions


Figure 1.1.06 - Development of Typefaces in different regions from 1460 - 19th century


5. Text Type Classification

Text type classification dates of origin are estimated to the nearest quarter century, and it is based on a model by Alexander Lawson and focuses on the main forms of text type.

Figure 1.1.07 - Text Types [1450s to 1990s]

#1450 Blackletter
- Earliest printing type, based on Northern European hand-copying
Examples: Cloister Black • Goudy Text

#1475 Oldstyle
- Evolved from Italian humanist book-copying styles; uppercase inspired by Roman inscriptions
Examples: Bembo • Casion • Garamond • Janson 
#1500 Italic
- Condensed and close-set; initially separate, later used alongside Roman forms
- Used in text typefaces since the 16th century

#1550 Script
- Replicates calligraphic forms, ideal for shorter texts
Examples: Kuenstler Srcipt • Mistral • Snell Roundhand

#1750 Transitional
Refined Oldstyle with higher contrast between strokes and lighter brackets
Examples: Baskerville • Bulmer • Century • Time Roman

#1775 Modern
- Further rationalization, with unbracketed serifs and extreme stroke contrast
Examples: Bell • Bodoni • Caledonia • Didot • Walbaum

#1825 Square Seric / Slab Serif
- Bold type for advertising, with minimal contrast and heavily bracketed serifs
Examples: Clarendon • Memphis • Rockwell • Serifa

#1900 Sans Serif
Serif-less, clean designs, popularized in the 20th century
- Also known as grotesque (German "grotesk") or Gothic
Examples: Gill Sans • Futura • Helvetica

#1990 Serif / Sans Serif
- Typeface families include both serif and sans serif forms
Examples: Rotis • Scala • Stone



Week 2 - Typo 03: Text Part 1 -


1. Kerning and Letterspacing


Kerning: automatic adjustment of space between letters
Letterspacing: to add space between the letters
Tracking: addition and removal of space in a word or sentence

Uppercase: are drawn to be able to stand on their own
Lowercase: maintain the readability (don't adjust the letterspacing)

2. Formatting Text

  • Readability is priority
  • Don't use scripted typefaces in capital
Flush Left: the most readable and natural way of formatting (create an even gray value), make sure the ragging on the right is smooth
Centered: used sparingly for small amounts of text (difficult to read for long text)
Flush Right: used in small amounts of text, or captions, make sure the ragging on the left is smooth
Justified: sometimes need to impose a hyphen in the text to maintain the reading rhythm and avoid the rivers (gaps between words)

3. Texture

  • When the x-height is larger than the normal, there is more readability
  • Sensitivity to the gray value of text is fundamental for creating successful layouts
Figure 1.2.01 - Different grey values in different typefaces


4. Leading and Line Length

  • The goal in setting text type is to allow for easy, prolonged reading (read more in a shorter duration of time)
  • A field of type should occupy the page as much as the photograph does
Type Size : First thing to decide for formatting text
Leading : Generally decide on the vertical eye movement of the reader or the gray value, which is about 2pt to 3pt larger than the type size
Line Length : Not more than 55 to 65 characters occupy one sentence(line)
[These three things above basically determine the readability]

5. Type Specimen Book

      Type specimen book basically is a sheet or a book that shows a particular typeface in different point sizes in different leading and different combinations (A testing sheet for a better decision)
      • The text should create  a field that can occupy a page or a screen
      • It is useful to enlarge the type to 400% on the screen to get a clear sense of the relationship between descenders on one line and ascenders on the line below
      • Nothing replaces the actual printed work
      Figure 1.2.02 - Type specimen sheet of Times Gothic


      Week 3 - Typo 04: Text Part 2 -

      6. Indicating Paragraphs

      Pilcrow: Used in the text to indicate paragraph spacing
      Line Space: Example - [Text font: 10pt] [Leading: 12pt] [Paragraph Spacing: 12pt], this ensures cross-alignment across columns of text. 
      Indentation: Normally is the same size as the font size, and whenever using the indentation, don't use left alignment (no ragging on the right). It is best to use it for justification.

      Line Space vs Leading :
      Line Space - starts with the descender from one sentence to the descender of another sentence
      Leading - the space between two sentences


      Figure 1.3.01 - Line Spacing vs Leading



      7. Widows and Orphans

      Widows and Orphans must never occur in design
      Widows: A short line of type left alone at the end of a column of text
      Orphans: A short line of type left alone at the start of a new column
      When addressing the widows, don't do kerning more than three times in one line, and keep the tracking in 5/1000em

      Figure 1.3.02 - Example of widows and orphans


      8. Highlighting Text

      1. Italics
      2. Blod
      3. Change Type Family + Bold
      4. Change Colour: Black, Cyan, Magenta
      5. Create Box behind 
      It is good to reduce the point size by 0.5 when changing the typeface from serif to sans serif because generally sans serif typefaces tend to look larger.

      Figure 1.3.03 - Same font size in different typefaces


      9. Heading within Text

      1. A head: clear break between topics within a section
      2. B head: indicate a new supporting argument
      3. C head: highlights specific facets of material within B head text (2 spacebars after it)
      Figure 1.3.04 - Different typefaces to show the 3 headings


      10. Cross Alignment

      Cross-alignment can be achieved by multiplying the number of the body text's leading



      Week 4 - Typo 02: Basic -

      1. Letterform Parts


      Baseline: The imaginary line that forms the visual base of letterforms
      Median: The imaginary line that defines the x-height of letterforms
      - X-height: The height of the lowercase 'x' in a typeface

      Figure 1.4.01 - Type anatomy

      * Optical Adjustment
      - the uppercase letters are smaller (reach cap height only)
      - the lowercase letters are bigger (reach ascender height)

      - Reason -
      Capital letters are generally wider with more surface area at the top, while ascenders in lowercase letters have less. To create the illusion of equal height, ascenders are often designed to extend slightly above capital letters

      # Ascender
      - The portion of the stem of a lowercase letterform that projects above the median
      - An ascending letter is a lowercase letter that has an ascender—a part that extends above the x-height of the typeface. Examples of ascending letters include b, d, f, h, k, l, and t.

      # Descender
      - The portion of the stem of a lowercase letterform that projects below the median
      - A descending letter is a lowercase letter that has a descender—a part that extends below the baseline of the typeface. Examples of descending letters include g, j, p, q, and y.


       
      Figure 1.4.02 - Describing Letterforms 01

       
      Figure 1.4.03 - Describing Letterforms 02



      2. Letterform styles

      ' It is always good to select a type family that has a good range of typefaces '
      ' The message should be first, and the typeface later '
      ' For every message that you convey as a designer, you have to choose an appropriate type family that respects and presents the messages

      # Uppercase
      # Lowercase

      # Small Capitals
         - Uppercase letterforms draw to the x-height of the typeface
         - When it comes to Acronyms, use Small Capitals instead of Uppercase

      Figure 1.4.04 - Letterform styles

      Uppercase Numerals (Lining Figures)
         - Same height as uppercase letters 
         - All set to the same kerning width
         - Works well with tabular material

      Lowercase Numerals (Style/ Text Figure)
         - All set to x-height with ascenders and descenders

      Italic
         - Most fonts are produced with a matching italic
         - Small Cap is always with only Roman
         - When a typeface is designed based on handwriting called Italic
         - When it is not, it is known as an Oblique

      # Punctuation, miscellaneous characters
         - all fonts include standard punctuation marks
      (like periods, commas, and question marks)
         - miscellaneous characters can vary from one
      typeface to another
         - it is important to review all characters in a font
      to ensure it meets the needs of your project.

      Ornaments
        - only a few traditional or classical typefaces contain ornamental fonts
        - commonly found in decorative and display fonts and are used in things like invitations, certificates, or book designs to enhance the overall aesthetic

      Figure 1.4.05 - Different categories within a type family



      - Week 5 - Typo 5: Understanding -

      1. Understanding Letterforms

      When designing a typeface, it’s essential to simplify the stroke characteristics of each letter, ensuring they can be consistently replicated across all letterforms. This maintains a cohesive and unique style throughout the font.
      Also, it is important to analyze an existing typeface that is under the same category.

      2. Maintaining the x-height

      Generally x-height refers to the height of lowercase letterforms. But, curved strokes, like the letter 's', must extend above the median or drop below the baseline to visually match the size of the adjoining vertical and horizontal strokes.
      [ The letters with curved strokes tend to look smaller because they have lesser real estate on the top, and lesser area touching the median and baseline]


      3. Letters/Form/Counterform

      Understanding the negative space around each letterform is equally important, as it helps improve both the readability and legibility of the text.

       
      Figure 1.5.01 - Counterform


      4. Contrast

      Contrast is the most powerful dynamic in design.

       
      Figure 1.5.02 - Different types of contrast

      INSTRUCTION

      Figure 2.1.01 - Module Booklet
      <iframe src="https://drive.google.com/file/d/1BAt0CUuHVndrIuRMZKLmkyTJKeP54XE6/preview" width="640" height="480" allow="autoplay"></iframe>


      TASK 1: Exercises

      -  Ex.01 / Research & Idea -

      Research

      This week I first started doing research about typographic expression, which involves using the style, arrangement, and appearance of type to visually convey the meaning, tone, and emotion behind words while keeping them readable.
      Figure 3.1.01 - References of typographic expression (week1)

      Initial Ideas

      Jump
      Visual Impression: I imagine an upward motion or something energetic and playful like a seesaw and jump rope, perhaps with letters that appear to be leaping or stretching upward
      As a Word: As both a noun and a verb, "jump" shows an action and quick, vertical movement.

      Shake
      Visual Impression: I think of a vibrating motion, with letters that look wobbly or unsettled, as if they’re trembling. It also brings to mind things that feel shaky or unsteady, like a ladder. Which I think it could add an element of instability to the design.
      As a Word: "Shake" can be a noun or a verb, such as "milkshake" or "handshake" 

      Fish
      Visual Impression: I picture the letters could move in a way that feels underwater, or something fluid and smooth, with curved lines that might resemble the shape of a fish or water ripples.
      As a Word: "Fish" is a noun but also can be used as a verb (to fish), which reminds me of fishing lines and hooks, and it can show both the movement of fish and the action of fishing

      Chop

      Visual Impression: I think this word is a forceful, segmented motion, with letters that are sharply cut or sliced apart. This shows the act of chopping, with a quick, decisive action
      As a Word: "Chop" is a verb, like chopping, an impactful cutting action


      -  Ex.01 / Sketch -

      Digital Sketching

      In Week 2, I worked on sketching out ideas for each word

      Fish: I drew inspiration from both the shape of a fish and the action of fishing

      Shake: I experimented with wavy lines to show the word. I also developed two concepts: one where letters shake and fall from a shaky ladder, and another where letters shake like items in a bag

      Chop: I focused on conveying the feeling of something being "sliced," experimenting with breaking apart and cutting the letters

      Jump: I aimed to capture motion, exploring how the letters could reflect different types of jumps, with varied rises and falls
      Figure 3.2.01 - Sketches of initial ideas (week2)



      -  Ex.01 / Design Development & Animation -

      Digitization

      In this week, I began digitalizing my final selected ideas in Adobe Illustrator. 

      Shake: I chose to go with the shaky ladder idea
      Fish: I try to focus more on the shape of the fish 
      Jump: I used the 'seesaw' idea *Figure 3.2.01 - bottom right*
      Chop: For this word, I try a new concept that incorporates both the motion and the feeling of being "sliced". Where I designed the letter "p" to slice the letter "o" into pieces, conveying a chopping motion. The letters "c" and "h" appear to hold the "p" as if aiding in the action. 

      Figure 3.3.01 - First attempt (week3)

      Development

      With Ms. Vitiyaa's feedback on my first attempt:
      Shake - try simplifying the design by reducing unnecessary elements
      Fish - still acceptable
      Jump - letter "p" is too distorted in the current design
      Chop - the concept is ok, but the "c" is too distorted, still needs improvement 

      I started making adjustments and improvements to my design based on the feedback.

      Figure 3.3.02 - Improved work based on feedback (week4)           

      Process

      Shake
      Concept: Letters shake and fall from a shaky ladder

      After receiving the feedback, I deleted the lines that represent rungs in the letter 'A', and rotated a little bit to achieve the shaky effect. Then I removed the second falling-off letter of each of the rest letter

      Figure 3.3.03 - 'Shake' type expression

      - Progress -
               Figure 3.3.04 - 'Shake' progress         
      1. Place the letter 'A' in the center as the ladder
      2. Slightly tilt the letter 'A' to create a sense of imbalance, enhancing the feeling of the unstable ladder
      3. Place the letters "S," "H," "K," and "E" to create a falling effect, as if they were shaking off and falling off the ladder. 
      4. Repeat the previous step, creating one more set of letters with lower opacity and smaller sizes. These were placed further back to enhance the sense of distance and simulate the letters falling away into the background.
                   


      Jump
      Concept: The letter 'J' takes off, jumping up the staircase of letters

      Figure 3.3.05 - 'Jump' type expression

      - Progress -
                        Figure 3.3.06 - 'Jump' progress            
      1. Position the letters in a staircase formation, increasing their height progressively.
      2. Slightly tilt the letter 'J' to create a sense of imbalance, enhancing the feeling of movement.
      3. Draw curved lines beneath the "J" to simulate a bouncing effect, indicating the moment of takeoff.



      Fish
      Concept: Crafting the fish shape that visually flows from head to tail.
      Figure 3.3.07 - 'Fish' type expression
      - Progress -
      Figure 3.3.08 - 'Fish' progress

      1. First, select the typeface that would fit well with my concept. I chose Bembo Std, using the letter 'i' to represent the fish’s face, with the dot acting as the fish's eye. 
      2. Save a fish image to use as a reference which helps map out the placement of each letter when "tracing" the shape. 
      3. Use Free Distort and Perspective Distort tools to modify each letter, shaping them to resemble different parts of the fish.




      Chop
      Concept: Present the chopping action by using the letter "P" as a knife that chops the letter "O" in half.
      Figure 3.3.09 - 'Chop' type expression

      - Progress -

              Figure 3.3.10 - 'Chop' progress         

      1. Place the letters 'C' and 'H' nicely
      2. Use the path divide method to slice the letter 'O' in half
      3. Overlap the letter 'P' on the letter 'O' to create a chopping effect
      4. Add white stroke to the letter 'P' to help it stand out, and also highlight the chopping effect on the letter 'O'


      Final Type Expression

      Figure 3.3.11 - Final Type Expression - JPEG (week4) 

      Figure 3.3.12 - Final Type Expression - PDF (week4)



      Animation

      Concept: The letter "J" bounces up to jump over the staircase which is formed by the letters "U" "M" "P"

      Figure 3.3.13 - 'Jump' animation steps in Ai. (week4)

      - Progress in Illustrator -
      1. The letter "J" presses down, creating a sense of tension before the takeoff
      2. Curved lines appear beneath the "J" and then disappear sequentially, simulating a powerful launch as the "J" bounces upward.
      3. The "J" leaps over the letters "U" "M" and "P" 
      4. After jumping over the letters, the "J" descends and moves off-screen

      Figure 3.3.14 - 'Jump' animation frames in Ps. (week4)

      - Progress in Photoshop -
      1. Place all frames in the correct sequence to show the jump action clearly.
      2. Use the preview feature to check the flow of the animation and delete any unnecessary frames that disrupt the continuity of the animation, I reduce the frames from 33 to 27 to enhance smoothness.
      3. Modify the duration of the frames, particularly increasing the seconds for the frames leading up to the jump to emphasize the jumping effect.


      Final Animated Type Expression

      Figure 3.3.15 - Final animated type expression (week4)




      - Ex.02 / Text Formatting -

      Text formatting refers to adjusting the appearance of text to enhance readability, emphasize important points, and improve overall presentation. It includes changing elements like font size, style (bold, italic, underline), color, and alignment, as well as adding lists, spacing, and indentation.

      Skill Development

      I first started applying kerning and tracking to my name using the given ten fonts.
      Figure 3.4.01 - Name without kerning (week4)
      Figure 3.4.02 - Name with kerning (week4)


      Exploration

      Finishing practicing kerning and tracking with my name, I’ve developed a basic understanding of how these tools work. Then, I moved into the next stage of experimentation, trying out various text layouts with the provided content in Adobe Indesign.

      Figure 3.4.03 - First Experimental Layouts (week5)

      Development

      With Ms. Vitiyaa's feedback on my first experimental layouts:
      Try to apply the golden ratio to the layouts, and always look for harmony.

      #2 Layout - enlarge the image, and move the byline below the title
      #3 Layout - try to rearrange the text and image to the center, to achieve a focus point
      #5 Layout - rearrange the text and image to show the golden ratio

      Figure 3.4.04 - Layouts after adjustment based on feedback (29/10/24-week6)


      Figure 3.4.05 - Six Experimental Layouts (29/10/24-week6)


      Final Review

      After evaluating and comparing the six layouts, I think the first layout is the best choice. It is a classic text formatting layout, and has a clear hierarchy and effective use of white space. The white space surrounding the text blocks works well and reduces visually crowded fell, which I think enhances readability and ensures the reader’s eye moves naturally, making the content easy to navigate. 

      Figure 3.4.06 - #1 Layout without grids (week5)
      Figure 3.4.07 -#1 Layout with grids (week5)






      Figure 3.4.08 - Final Layout - PDF - (week5)


      Figure 3.4.09 - Final Layout with grids- PDF - (week5)


      Text Formatting Details

      HEADLINE
      Typeface: Bodoni Std
      Font/s: Bodoni Std Bold
      Type Size/s: 32 pt + 77 pt
      Leading: 26 pt
      Paragraph spacing: 0 pt

      BYLINE
      Typeface: Bodoni Std
      Font/s: Bodoni Std Italic
      Type Size/s: 19 pt
      Leading: 26 pt
      Paragraph spacing: 0 pt

      BODY
      Typeface: Bodoni Std
      Font/s: Bodoni Std Book
      Type Size/s: 11 pt
      Leading: 13 pt
      Paragraph spacing: 13 pt
      Characters per line: 54
      Alignment: Left Justification
      Margins: 12.7mm top, 12.7 mm left, 12.7 mm right, 12.7mm bottom
      Columns: 4
      Gutter: 5 mm


      FEEDBACK


      - WEEK 1 -
      General Feedback : 
      All course materials and updates will be available on Microsoft Teams. We are encouraged to do work during class time, which allows us to ask questions about our projects and receive immediate feedback. We were instructed to begin our eBlog, we can refer to lecture videos for guidance on the layout and other requirements. Download the ten given fonts in Teams for the upcoming tasks and explore this various typefaces.
      Specific Feedback :
      No specific feedback for this week.

      - WEEK 2 -
      General Feedback :
      After reviewing our sketches and ideas, Ms. Vitiyaa felt that the word "Small" was too general, which often led to similar designs. To encourage more creativity and diversity, she replaced "Small" with ''Fish''. 
      We are not allowed to create new elements other than the given words. So what we can do is "twist" the letters to create unique elements that enhance the visual expression
      Specific Feedback :
      Ms. Vitiyaa encouraged me to just let my instincts, my first thought, guide my sketches, stop overthinking about each expression, and just let them flow freely to start sketching. And after finishing the sketches, choose two ideas for each word and start digitalizing, explore how different typefaces work on different words, and then choose the best one to finalize

      - WEEK 3 -
      General Feedback :
      Choose the one that best captures the expression for animation, and while digitalizing the work, try to use the same letterform style for each letter within a word, ensuring that the overall design is harmonious and visually appealing. 
      Specific Feedback : 
      In this week's session, I am still working on the idea for the word "Chop" which I found it quite difficult to come out with a creative and unique design.  Ms. Vitiyaa said I need to catch up since we will start the animation next week.

      - WEEK 4 -
      General Feedback :
      We need to strictly follow Mr. Vinod's weekly timeline on Teams which helps ensure that we stay on track with our assignments. All assigned tasks must be completed before class. As the class time is meant for receiving feedback and making improvements. Many of us have distorted the letters too much, which detracts from their readability and intended design. We should focus on maintaining the original forms of the letters, ensuring that our designs are recognizable. And do avoid adding extra elements or decorations to the design, the focus should remain on the letterforms themselves.
      Specific Feedback : 
      [Shake] The letter 'A' is too distorted. Simplify the design, and reduce unnecessary elements, focusing on the core letterforms.
      [Fish] This design is generally acceptable. But still, look for any small adjustments to improve it.
      [Jump] The letter 'p' in this design is too distorted. Try to consider how to express the idea of movement and action effectively.
      [Chop] The concept of the design is nice, but the letter 'c' is too distorted. 

      - WEEK 5 -
      General Feedback :
      The deadline for Task 1 is set for November 29th, and all the work will be reviewed in the E-Blog, so make sure everything is well-prepared and organized. We need to start working on Task 2 (new post), for guidance and details of this task, refer to the teams. While doing the lecture summary in the E-Blog, we should avoid posting too many images. Instead, we can put them into one figure and include captions. The contents of the blog make sure they flow smoothly and are well organized. We need to include at least two books in the further reading section.
      Specific Feedback :
      No specific feedback from Ms. Vitiyaa this week, as there was insufficient time for individual comments.
             
      - WEEK 6 -
      General Feedback :
      Ms. Vitiyaa advised us to pay close attention to applying design principles in our layouts. It is important to follow Mr. Vinod's requirements on Teams carefully to ensure our work meets the expected standards. She recommended reviewing our designs on printed paper, as this can help us see the grey values more accurately. 
      Specific Feedback : 
      It is better to try to apply the golden ratio or other design principles to the layouts, and always look for harmony in each layout. Negative space is also important.
      [2 Layout] - enlarge the image, and move the byline below the title
      [3 Layout] - try to rearrange the text and image to the center, to achieve a focus point
      [5 Layout] - rearrange the text and image to show the golden ratio
      The rest look fine

      REFLECTIONS

      - WEEK 1 -
      When we voted for the four words for our first assessment, I found it interesting that words like "small" or "shake," which seem simple at first glance, can actually be more challenging for this task. They are relatively general with solid definitions, which tends to lead to similar designs among us. I realized that words with more fluid definitions, like those that can act as both nouns and verbs, might offer better creative potential and can be presented in unique ways, allowing for more diverse designs.

      - WEEK 2 -
      This week, I learned a lot by watching the type expression-word video and the shortcuts for Adobe Illustrator. The tutorial videos show me several ways and tips on how to bring my sketches to life in a digital format. And with the feedback from Ms. Vitiyaa, I tried to stop thinking too much and to trust my instincts. By focusing on the meaning behind each word, I’m developing a better sense of how to express emotions and concepts visually.

      - WEEK 3 -
      By Week 3, I felt more confident with my progress and ready to start digitalizing my sketches. I realized how each part of this process builds toward a final product and how beneficial it is to explore others’ work and browse different websites for inspiration. It allowed me to learn and adapt to my own style from these various typographic expressions and creative approaches. I also recognized the importance of managing my time well so I can spend more time refining my designs. 

      - WEEK 4 -
      This week, I learned the importance of following Mr. Vinod's timeline to manage my time effectively. Completing tasks before class allows me to focus on feedback and improvements, which I can have a better finalization. I appreciate the specific feedback from Ms.Vitiyya on my words, especially the suggestions to simplify designs and focus on the essential elements. By improving my work based on the feedback, I get a better understanding of the balance between creativity and clarity in designs.

      - WEEK 5 -
      By finishing exercise 2 - text formatting, trying all these different layouts I’ve gained a deeper understanding of how various design choices or even just a tiny change can impact readability and visual appeal and how each layout presents a unique perspective. The working process let me have a better understanding of the relationship between text and layout, enhancing my ability to create balanced and engaging compositions. Throughout this exercise, I found that working on doing layout really made me feel calm and relaxed, I really enjoyed the process of exploring new layouts, and I really liked my final work.


      - OVERALL -

      Experience
      Throughout this task, I learned a lot about typography and design, progressing from initial concept to final review. Each week, I faced new challenges that helped me grow. I started by thinking of type expression to create unique designs and then moved on to turn my sketches into digital formats using Adobe Illustrator. And I got to know more about the beauty of text formatting, and how to create my own unique layout in Adobe Indesign. This process helped me be more creative while also managing my time better so I could focus on improving my work based on feedback.

      Observation 
       I noticed that simple words could be more challenging to design than I expected. They often led to similar designs because of their clear meanings. On the other hand, words with flexible meanings allowed for more creative ideas. I also find that it is good to let your first thought or instinct take control sometimes because it feels the most natural and provides a strong foundation for further development. Meanwhile, overthinking could lead to unnecessary complications.

      Findings
      Through these several weeks, I found that even just a small change could dramatically affect readability and visual appeal. I also learned that keeping designs simple and focusing on the key elements makes them clearer and more creative. Most importantly, I discovered that the process of text formatting itself could be enjoyable and calming, allowing me to immerse myself in exploring new layouts. And I also found that feedback played a major role in improving my work and helped me see things from a different perspective. Ms.Vitiyaa always helped me to identify something I did not notice and encouraged me to come out with better work.


      FURTHER READING

      To improve my work on the text formatting exercise, I decided to read Typographic Systems by Kimberly Elam. I believe that understanding the design principles outlined in this book will help me apply more effective and professional text layouts in my project.

      Figure 6.1.01 - Typographic Systems

      Typographic Systems reading notes

      From my reading, the Grid System stands out as the most adaptable and effective for general design. It offers a structured approach while allowing for creativity and providing clear communication. However, the right choice depends on the specific goals of the project. 

      Personally, my favorite system is the Bilateral System. I love this system because of its symmetry and simple design, which creates a feeling of balance and harmony. In this system, elements are arranged around a central axis, making the layout clear and easy to read. This system not only conveys information effectively but also creates a visually pleasing aesthetic.

      Comments

      Popular Posts