Labels

Advance Typography - Task 1/Exercises

30/9/2023 - 24/9/2023 / Week  1 - Week4
Janice Marie Eng Chia Hui  / 0361521
Advance Typography / Bachelor of Design in Creative Media / Taylors University 
Exercises

Table of contents

Lectures

1. AdTypo_1_Typographic System

  • Axial System - Text on the left or right of the axis/Multiple axis can be used in real-life
  •  Radial System - Elements are extended from a point of focus (can be multiple points)
  • Dilational System - Elements are expanded from the center in a circular manner
  •  Random System - No specific pattern or relationship between elements
  • Grid System - A vertical and horizontal division of grids
  • Modular System - Series of non-objective elements that are constructed in a standardized unit
  • Transitional System - Informal system of layered banding
  • Bilateral System - All text are arranged symmetrically 
Figure 1.1 8 major Typographical Elements

2. AdTypo_2_Typographic Composition 

Principle of Design Composition 
  • Most of the design principles are better in imagery 
  • They are hard to translate to text, but some are easier to translate to text than others
  • For example, emphasis and symmetry in layout. The ones that translate badly are repetition or perspective 
The rule of 3rd
  • A 3 x 3 grid to put in a given space, and the interesting points are used as guides to place stuff
  • Generally never used in typography but still a good guide to follow for layouts
Figure 1.2 Example of the rule of third in web design 

Typographic Systems
  • 8 major systems 
  • The most used is the grid system because it is extremely versatile
  • But in the modernist era, asymmetry, dilatational, radial, and repetition began to get popular
Figure 1.3 Example of  random and modular typo poster

Other models / systems
  • Exploration of existing structures or a combination of multiple structures 
  • For example, arranging our text layout based on real-life structures like buildings
Figure 1.4 Example of using real-life image for text layout
  • Next is form and movement 
  • Explore how to make an interesting layout in a grid system. For example, making a spread with the grid system but makes it interesting so that when flipping the pages it would form an interesting and unexpecting experience for the readers
Figure 1.5 Grid systems

3. AdTypo_3_Context&Creativity 

Handwriting
  • First letterforms were made to imitate handwriting
  • basic and standard
  • materials to make them are sharpened bones, charcoal, sticks, plant stems, brushes, feather and steel pens
Figure 1.6 Evolution of Latin Alphabet (1715BCE)

Cuneiform 
  • The earliest system in actual writing
  • Numbers of languages
  • Pressing the blunt end of a reed stylus into wet clay tablets 
Hieroglyphics 
  • Egyptian writing system
  • Art of relieved carving
  • Mixture of both rebus and phonetic characters
  • Hieroglyphics images could be used as ideograms, determinations and phonograms
Figure 1.7 Hieroglyphics Chart 
  • Early Greek 
  • Phonetic alphabets consisting of 22 letters
  • Adopted by the Greeks 
  • They have no serifs
  • the letters grew thicker
  • Model for calligraphy in the past 2000 years
Figure 1.8 Early Greek 

  • Roman Uncials
  • Roman letters were becoming more rounded
  • Curved forms allow for less strokes therefore faster writing 
Figure 1.9 Roman Uncials 

  • Printing on wood block has already been practice in China, Korea and Japan 
  • Korea established a foundry to cast movable text in bronze
  • This allowed the dismantling and resetting of text hangul.
Figure 1.10 Movable type 

  • Oldest writing found in the India Continent, Indus Valley Civilization(IVC)(3500-2000 BCE)
  • It is undeciphered and is believed to have non- linguistic nature
  • The script is very decorative, showing how advance the IVC was 
Figure 1.11 IVC Script in seal(left), IVC script(right)
  • The Brahmi script (450-350 BCE), A parent script to most of the scripts in south India, is the earliest writing system developed in India after the Indus script.
  • A lot of script/writing in South Est Asia derived from this script
  • It is believed that this script was at least influenced by one or more Semitic script due to much cross cultural exchange
 
Figure1.12 The Brahmi Script

Handwriting
  • Oldest writing system in South East Asia were Indian script, with the most important being Pallava and Pra-nagari for writing Sanskrit 
 
Figure 1.13 Pallava
 
Figure 1.14Pra-Nagari
  • However, not all the script in Nusantara was borrowed from India.
  • Indonesia had a script used for communication with other kingdom called Kawi(poet)
  • This made Kawi widespread, resulting in the kingdoms in the Malay Peninsula to use both Indian and Kawi script to write old Malay
Figure 1.15 Kawi Script
  • Indonesia have a variety  of scripts that are assimilated into Peninsula Malay. For example. Incung is used in Kerinci
  • Jawi was introduced along with Islam
  • Ancient Societies in SEA and SA were often classiest. Islam did not changed this entirely but encouraged teaching for the sake proselytization
  • Missionaries practising Islam would have taught in Jawi, spreading Jawi among the upper and middle classes
  • Jawi is important in Malaysia bc it was the script used for all the famous literary work (like hikayat and al)
  • But Jawi is not “tulisan asal Melayu”
Why is handwriting important?
  • Important to learn because all digitized handwriting is derived from actual handwriting
  • Programmers and type Designers
  • More software giants(google) are producing vernacular script 
  • More vanacular and ‘multi-scrip’ typeface are being produced to cater to situation where written matter is communicated in vernacular script or vernacular and Latin script. 
Figure 1.16 Baloo(font with a blend of latin and vernacular fonts)

Local movements and individuals(to help preserve local handwriting and scripts)
  • Murasu.com by Muthu Nedumaran
  • Huruf 
  • Ek Type and Indian Type Foundry 

4. AdTypo_4_Designing_Type

Why do designers design new type?
  • Social responsibility to improve it
  • Its an art form
1. Adrian Frutiger (Swiss)
Figure 1.17 Adrian Frutiger
  • Considered the one responsible for the advancement of typography into digital type
  • Type includes Univers and Frutiger
  • Frutiger (San serif) was developed for the Charles De Gaulle International Airport in France
  • The letterform needed to be easily readable even when the reader was moving quickly
  • In India, he created a typeface where he simplified their sacred characters without compromising their ancient calligraphic expressions 
2. Matthew Carter
Figure 1.18 Matthew Carter
  • Fonts he created were usually used to address technical challenges posed by early computers
  • The font was extremely readable even at a small size
  • Verdana was created by him and was made with Pixels
  • Created Bell Centennial to overcome the ink bleed in the font when being printed for phone books
3. Edward Johnston
Figure 1.19 Edward Johnston
  • Created Johnston Sans
  • Was commissioned by London's Underground Railway to create a standardized font for their posters and signage
  • Used Roman capitals which had a lot of history in traditional calligraphy but was also simple and mordent enough for that time
  • He got rid of the serifs in the Roman capitals and refined it to the current underground typeface. 
The general process of type design 
  • Research - Need to understand type history, anatomy, and conventions as well as the terminology / Type needs to have a purpose of use / look to existing font for reference
  • Sketching  - Physically sketching or doing it digitally
  • Digitization- Fontab/Glyphslab
  • Testing - Leads to feedback / see if font is readable
  • Deploy - Revision upon deployment to see if there's any problem
Constructions and considerations 
  • Some forms of the letterform are similar in shape and hence can be grouped together to help speed up the designing process
  • Curved forms extrude from the baseline or capline(overshoot)
  • Kerning

AdTypo_5_Preception And Organization

Preception
  • Preception in typography - visual navigation and interpretation of the reader through contrast, form and organization of the content.
  • Contrast in typo is important to create distinction and differentiate between information 
Figure 1.20 Contrast in Typography
  • Carl Dair adds that using texture and direction can also add contrast to type
  • Carl Dair had 7 ways to create contrast - size, weight, contrast of form, contrast of structure, contrast of texture, contrast of colour and contrast of direction

Figure 1.21 Contrast of size

Figure 1.22 Contrast in Weight

Figure 1.23 Contrast in Form

Figure 1.24 Contrast in Structure

Figure 1.25 Contrast in Texture

Figure 1.26 Contrast in Direction 

Figure 1.27 Contrast in colour
  • Form is the overall look and feel of the elements in a typographic composition
  • Good form in typo tends to be visually appealing to the eye 
Figure1.28 Form in Typography
Organization and Gestalt
  • Gestalt in German means the way things has been placed or put together 
  • Gestalt theory states that experiencing things as a unified whole is greater than experiencing it in parts, this can be the same to design layouts
  • A few of the Gestalt 'laws' are : proximity, similarity, continuity, closure, area, and symmetry
  • LAW OF SIMILARITY: states that elements that are similar to each other tend to be perceived as a unified group
  • LAW OF PROXIMITY: states that elements in close proximity to each other tend to be perceived as a unified group 
  • LAW OF CLOSURE: refers to how the mind see complete pictures even though the picture is incomplete.
  • LAW OF GOOD CONTINUATION: refers to how humans tend to perceive each of 2 or more objects as diff, singular and uninterrupted objects even when they intersect
Figure 1.29 Law of Similarity 

Figure 1.30 Law of Proximity 

Figure 1.31 Law of Closure 

Figure 1.32 Law of Good Continuation 

Instructions

Task 

1. Exercise 1

For this exercise, we were asked to go through the 1st lecture to understand the 8 major typographic systems. After that, we were to choose a topic from 3 topics given to make a 200mm x 200mm spread for each of the typographic systems. The topic I chose to use was 'Russian Constructivism & Graphic Design'. 

Visual Reference 

Figure 2.1 Reference

Figure 2.2 Reference

Sketching 

After reading up on Russian Constructivism, I started sketching out some layouts on paper. After sketching, I went straight ahead with InDesign to do the layouts because I did not know what else to do. 

Figure 2.3 Sketches (3/9/23)

Process

Figure 2.4 Transitional Layout (3/9/23)

Figure 2.5 Making the Radial Layout (3/9/23)

Figure 2.6 Attempt at making a heading for modular (3/9/23)

Figure 2.7 Heading made for random layout (3/9/23)

Figure 2.8 Struggling Attempting to find a layout for dilatational(3/9/23)

Figure 2.9 White space (3/9/24)

For the radial piece(Fig 2.2), I was inspired by a Russian Constructivism poster I saw on Pinterest and based the layout on that. I made use of the scissors tool to help me cut out the circles. In Fig 2.3, I was trying to make a heading for the modular layout so that it would fit into the grid, but I did not like how it looked so I did not use it.

I had a hard time coming up with a layout for dilatational, random, modular and grid. For me, my modular and grid were looking a bit too similar. Meanwhile, I feel like for random and dilatational, I could not find a composition that could work other than putting text onto the screen and hoping for the best. 

However, for the rest of the systems, it was quite ok. 

Spreads
Figure 2.7 Axial Spread(6/9/23)

Figure 2.10 Radial Spread(6/9/23)

Figure 2.11 Dilatatinal Spread(6/9/23)

Figure 2.12 Grid Spread (6/9/23)

Figure 2.13 Bilateral Spread(6/9/23)

Figure 2.14 Transitional Spread; ignore the overlap(6/9/23)

Figure 2.15 Random Spread(6/9/23)

Figure 2.16 Modular System (6/9/23)

Final Outcome
Figure 2.17 Axial Final Layout(6/9/23)(jpeg)

Figure 2.18 Bilateral Final Layout (6/9/23)(jpeg)

Figure 2.19 Random Final Layout (6/9/23)(jpeg)

Figure 2.20 Modular Final Layout (6/9/23)(jpeg)

Figure 2.21 Radial Final Layout (6/9/23)(jpeg)

Figure 2.22 Transitional Final Layout (6/9/23)(jpeg)

Figure 2.23 Grid Final Layout (6/9/23)(jpeg)

Figure 2.24 Dilatational Final Layout (6/9/23)(jpeg)

Figure2.25 Final layout, no guides(pdf)(6/9/23)


Figure2.25 Final layout, guides(pdf)(6/9/23)

Figure 2.26 Axial Final Layout Grids(jpeg)(6/9/23)

Figure 2.27 Bilateral Final Layout Grids(jpeg)(6/9/23)

Figure 2.28 Random Final Layout Grids(jpeg)(6/9/23)

Figure 2.29 Modular Final Layout Grids(jpeg)(6/9/23)

Figure 2.30 Radial Final Layout Grids(jpeg)(6/9/23)

Figure 2.31 Transitional Final Layout Grids(jpeg)(6/9/23)

Figure 2.32 Grid Final Layout Grids(jpeg)(6/9/23)

Figure 2.33 Dilatational Final Layout Grids(jpeg)(6/9/23)

2. Exercise 2
 
Type and play. For this exercise, we were to find an image with a pattern, either natural or man-made. 

I initially wanted to do human skin but I did not know exactly how to go about it. So I went to the link Mr Vinod provided to read up on this exercise. 

I still did not know what to do, so I just went ahead and took some pictures and started outlining some alphabets. 

Finding an Image

Figure3.1 Skin 

Figure 3.2 Bread 

Figure 3.3 Pan Mee

Identifying Letterform

I had started deconstructing and identifying letterforms in all 3 pictures. 

Figure 3.4 Bread letterform identification (9/9/23)

Figure 3.5 Skin letterform identification (9/9/23)

Figure 3.6 Noodle Letterform Identification (9/9/23)

Extracting Letterform

I initially decided to extract letterforms from bread. However, halfway into the extraction process, I realized that the pattern of the bread was quite inconsistent, making it hard to refine the letters. So I decided to change my extraction to skin.
Figure 3.7 Bread extraction (ignore the skin image)(10/9/23)

HOWEVER, halfway doing extraction for skin/wrinkle, I realized yet again that the pattern was a bit hard for me to refine. So I changed my image to noodle.


Figure 3.8 Wrinkle extraction (10/9/23)

Refining Letterform 

Figure 3.9 Extracted letterforms from noodles (11/9/23)

The reference font I used was called MONTSERRAT. After extracting the letterforms, I placed the Montserrat font behind the extraction and edited the extraction from there.

Figure 3.10 MONTSERRAT font behind extracted letterform(11/9/23)

Figure 3.11 Montserrat font
Figure 3.12 Evolution (12/9/23)
Figure 3.13 Final refinement vs Original extraction(12/9/23)

Honestly, this exercise made me want to kill myself. I struggled a lot and reworked my letter a few times. 

Mr Vinod mentioned that my initial extraction was very crude so I redid it again.

Figure 3.14 extraction 2(14/9/23)

Figure 3.15 extraction 2(14/9/23)

I however did not change my letterform much other than increasing the thickness of the white stroke.

Poster

Started this section by finding a nice picture online to be used as the poster.  The poster was supposed to look like a movie poster and must have the letterform created in Type and Play as the main focus. The font must also be interactig with the image.

Figure 3.16 Noodle 

Figure3.17 Noodle 2

Figure 3.18 Noodle 3

Figure 3.19 Noodle 4

After finding the images I started doing the poster. We were to make the pictures Black and White. We were also given the option to make it monotone. I put all the pictures in Photoshop and added to some texture to some of them before placing them into Ai to make the poster.

In Ai, I put some colour into the pictures.

Figure 3.20 Black and White poster

After that, I tried to arrange the letterform into the poster. 

Figure 3.21 Initial Poster (13/9/23)

I did not like this poster because the layout did not appeal to me. And the letterform also did not interact with the background.

Figure 3.22 Second Poster (14/9/23)

The second poster, I tried to make the letters interact with the picture more. However, I still did not really like the layout.

Figure 3.23 Third Poster (15/9/23)

For this poster, I made one of the letters interact with the picture. I also slapped a lot of noise filters onto the picture and the font. I quite like this poster, but I still wanted to try out some more layouts.

Figure 3.24 Fourth Poster (15/9/23)

After getting feedback from Sir, I changed my poster accordingly.

Figure 3.25 Fifth poster (21/9/23)

Final Work

Figure 3. 26 Extraction from image (14/9/23)

Figure 3.27  Letterform Evolution (12/9/23)

Figure 3.28 Final letterform vs First Extraction (12/9/23)

Figure 3.29 Final Letterform(alone)(12/9/23)

Figure 3.30  F Letterform and outline(12/9/23)
Figure 3.31 S letterform and outline (12/9/23)

Figure 3.32 B letterform and outline(12/9/23)

Figure 3.33 K letter form and outline (12/9/23)

Figure 3.34 A letterform and outline(12/9/23)

Figure3.35 Final Poster(21/923)


Figure 3.36 Final Progress (PDF)(21/9/23)

Honor Competiton

The program director made it compulsory to submit a work for the Hoor Competition 2023. Themes for this competition include renewal of life, genesis, and cultural prosperity. The theme I chose to do was renewal of life. 

I went with a snake as my main character. I had initially wanted to use a phoenix or lotus flower but decided on a snake in the end. The snake means renewal of life, so I thought it'd fit the theme. 

My design elaboration is as follows: 

The image shows a snake coming out of some bushes. This highlights how human activity has affected animals, causing them to leave their homes and venture into human cities and houses. To fit with the theme of renewal of life, I choose to use a snake as they represent renewal. If we flip the narrative, it shows a snake walking along an empty road, with flowers and nature blooming behind it, making the snake the bringer of new life. This is in stark contrast with our reality where the population of wild animals is slowly decreasing. I hope to highlight that with this work.

This work is ungraded.

Figure 3.37 Wallpaper Design (8/10/23)

Figure 3.38 Phone wallpaper mockup(8/10/23)

Feedback

Week 2
General Feedback: elements should be balanced and don't make one side too heavy/Make use of the white space and don't leave too much white space/content should be maintained in the column / bilateral one line of axis / Don't make the graphical elements to eye-catching / make use of emphasis 

Specific Feedback: Dilatational is no good redo/grid is a bit claustrophobic, rework this both / the rest is passable 

Week 3 
General Feedback: Ensure that there is consistency in the letterform / look for characteristics in your image to transfer/don't make the lines cross in the letterform / make your own brush if its not too complicated

Specific Feedback: White lines should be thicker / Skin you can just plaster the skin texture on it / do the extraction properly

Week 4
Specific Feedback: The image is too distracting, the letterform should stand out more

Reflection 

My experience with this exercise was, well it was an experience. I struggle a lot with it honestly. I have come to the realization that graphic design is not my passion(I say as a design student). Other than that, my experience with this task was decent. The information given and resources were sufficient. 

My observations during this take is that type can be arranged very nicely when done well(I came to this conclusion after looking at my classmate's work). I also realized that anything can be a font is we beat and refine it enough. This allowed for very interesting and unique fonts to be created. 

My findings for the 8 typographical systems exercises is that having a guide to where you can arrange your type is nice, but we can still be creative when following the guide. The process of designing is different for each person, so we don't really have to follow the guides to a t/ For the type and lay exercise, I found that I'm not very detail-oriented. As that task required us to observe the characteristics of the object we were extracting, I found myself having a hard time trying to note down the details in the object.

Further Reading

1. Russian Constructivism and Graphic Design

Russian Constructivism was a groundbreaking art, design, and architecture movement that began in Russia in 1913. This style mainly uses minimal colours mainly red, black, and sometimes yellow. It was initially used for political messages and eventually seeped into product adverts and posters of all kinds (wow, commercialism). Prominent designers included Alexander Rodchenko, El Lissitzky, and the Stenberg Brothers.

2.  Prizmp Unregistered: Typographic Systems 

Figure 4.2 Typographic Systems by Kimberly Elam

This book talks about the typographic system. 

The 1st the the axial system which is the simplest system. It states that asymmetrical are more interesting than symmetrical arrangements, while an off-centered axia is more interesting than a central axis. However, there are times when a central axis and symmetry is bettered, this depends on the reason behind the design and other elements. This system helps us group information before slowly breaking off from the axis to enhance communication. 

Next is the radial system. Most examples of this system are highly symmetrical as it would form a circle, making it visually appealing. The process usually start with evenly spaced text before they are slowly grouped. This system is hard to read and usually for visual messages with limited text.

Following up is the dilatational system. Text used in the dilatational system can be easily turned upside down or placed in an awkward position for reading, hindering reading comfort.
This composition usually becomes complex and a good grouping of info is needed.

Random system. Multiple angles immediately impart a sense of randomness in a layout. Straight lines in one direction are a big no-no for random.  Overlapping text can also help achieve that sense of randomness. Adding texture to the text also adds to it being random.

Next up is grip which is very self-explanatory. Just open any book and there should be at least one gridded layout of text in it. Also, you can use both horizontal and vertical text in the layout who knew. Should have read this book before I did the first exercise.

Next, we have TRANSitional. Think of it as the earth moving planes. It is the most informal of all systems because we are not aligned to an axis(I thought that was random but what do I know). 

Figure 4.3 Circle Module
Modular is up. Someone apparently used one letter in one box for modular once and made it into a chessboard-looking poster. There are also circle modules, what.

Last of all, we have the bilateral system. Everything is symmetrical. But this makes it a bore fast, that's why make use of space.

Comments

Post a Comment