Advanced Typography - Task 1- Exercise 1 & 2
Week 1-Week 5
Tan Pei Yun / 0345386
Advanced Typography /Bachelor of Design in Creative Media
Task 1 - Exercise 1 & 2
LECTURES
WEEK 1 - 31/08/2022
Typographic System
Typographic systems are akin to what architects term
shape grammars. The typographic systems are similar that the systems has a set of rules
that is unique and provides a sense of purpose that focuses and directs the
decision making.
"All design is based on structural system"According to Elam, 2007
there are eight major variations with an infinite number of permutations.
Theres eight major variations are as follows:
|
|
Fig 1.0 Axial Systems, Source - types365 |
Axial System
All elements are organised to the left or right of a single axis.
|
|
Fig 1.1 Radial Systems, Source - types365 |
Radial System
All elements are extended from a point of focus.
|
| Fig 1.2 Dilatational Systems, Source - types365 |
Dilatational System
All elements are expand from a central point in a circular fashion.
|
|
Fig 1.3 Random Systems, Source - types365 |
Random System
Elements appear to have no specific pattern or relationship
|
|
Fig 1.4 Grid System ,
Source - types365 |
Grid system
A system of vertical and horizontal divisions.
|
|
|
Modular System
A series of non-objective elements that are constructed in as a
standardised units
|
|
Fig 1.6 Transitional System , Source - types365 |
Transitional System
An informal system of layered banding
|
|
Fig 1.7 Bilateral System , Source - types365 |
Bilateral System
All text is arranged symmetrically on a single axis
WEEK 2 - 07/09/2022
Typographic Composition
|
| Fig 2.0 Principles of Design - Emphasis |
|
|
Fig 2.1 The Rule of Thirds |
The rule of thirds : It is a photographic guide to composition, it basically suggest that a frame
(space) can be divided into 3 columns and 3 rows. The intersecting lines are
used as guide to place the points of interest, within the given space.
|
| Fig 2.2 Typographic Form & Communication |
Environmental Grid : This system is based on the exploration of an existing structure or numerous
structures combined. An extraction of crucial lines both curved and straight
are formed.
|
| Fig 2.3 Form & Movement |
Form and Movement :
This system is based on the exploration Grid system (Developed by Mr
Vinod) this system is to get students to explore, the multitude of
options the grid offer ; to dispel the seriousness surrounding the application
of the grid system ; and to see the turning of pages in a book as slowed down
animation in the form that constitutes the placement of image, text and
colour. The placement of a form (irrespective) on a page, over many pages
create movement.
WEEK 3 - 12/09/2022
Context & Creativity
The first mechanically produced letterforms were designed to directly
imitate handwriting. Handwriting would become the basis or standard for
form, spacing and conventions mechanical type would try and mimic. The shape
and line of hand drawn letterforms are influenced by the tools and materials
used to make them. (Sharpened bones, charcoal sticks, brushes, feather and
steel pens all contributed to the unique characteristics of the
letterforms)
|
| Fig 3.0 Cuneiform c.3000 B.C.E |
Cuneiform : the earliest system of actual writing. Its distinctive wedge form was the result of pressing the blunt end of a read stylus into wet clay tablets. Written from left to right and evolved from pictograms.
|
|
Fig 3.1 Hieroglyphics 2613-2160 B.C.E |
Hieroglyphics :
The Egyptian writing system is fused with the art of relief carving.
1. As Ideogram, to represent the things they actually depict
2. As determinatives to show that the signs preceding are meant as phonograms
and to indicate the general idea of the word.
3. As phonograms to represent sounds that "spell out" individual words
Letterforms through the ages
|
| Fig 3.2 Early Greek (5th C. B.C.E) |
Early greek , 5th C. B.C.E. : Built on the Egyptian logo-consonantal system.The Phoenicians developed a phonetic alphabets consisting of 22 letters. The Phoenicians system then was adopted by the greeks who added the necessary vowels. Drawn freehand, not constructed with compasses and rules, and they had no serifs. In time the strokes of these letters grew thicker, the aperture lessened, and serifs appeared.
|
|
Fig 3.3 Roman Uncials |
Roman Uncials :
By the 4th century Roman letters were becoming more rounded, the curved
form allowed for less strokes and could be written faster
|
|
Fig 3.4 English Half Uncials 8th C. |
English Half Uncials, 8th C. : In England, the uncial evolved into a more slanted and condensed
form.
|
|
Fig 3.5 Carolingian Minuscule |
Carolingian Minuscule : It was used for all legal and literary works to unify communication
between the various regions of the expanding European empire. Important as
a development as the standard Roman Capital for it was this style that
became the pattern for the Humanistic writing of the fifteenth
century.
|
|
Fig 3.6 Black Letter 12-15 C.CE |
Black Letter, 12-15 C.CE : Characterised by tight spacing and condensed lettering. Evenly spaced
verticals dominated the letterform. Condensing line spacing and letter
spacing reduced the amount of costly materials in book
production.
|
|
Fig 3.7 Italian Renaissance |
The Italian Renaissance: Humanist named the newly rediscovered letterforms Antica. The renaissance analysis of form that was being applied to art and
architecture was directed toward letterform — resulting in a more perfect
or rationalised letter.
|
| Fig 3.8 Evolution of Middle Eastern Alphabets |
Evolution of Middle Eastern Alphabets : The Phoenician letter marks a turning point in written language, use of sound represented in letters, the script itself has been possibly influenced by the Egyptian Hieroglyphics and Hieratic Scripts
|
| Fig 3.9 The Evolution of the Chinese Script |
The Evolution of the Chinese Script : From the Oracle bone to Seal Script to Clerical Script, Traditional and
Simplified scripts.
|
| Fig 4.0 Indian subcontinent the Indus Valley Civilization Script |
The oldest writing found in the ‘Indian’ subcontinent the Indus Valley
Civilization (IVC) script (3500-2000 BCE), is as yet undeciphered and seems
to have been somewhat logo-syllabic in nature.
WEEK 4 - 19/09/2022
Designing Type
General Process of type design :
1.Research
-When creating type,understand type history, type anatomy and type
conventions.
-Understand the terminologies, side bearing, metrics, hinting.
-Determine the type's purpose or what it would be used for, examine
existing fonts that are presently being used for inspiration/
ideas/reference/context/usage pattern/etc
2. Sketching
Sketch the typeface using the traditional tool set/ digital tool set
then scan them for purpose of digitization. Both methods have their
own postive and negatives
3. Digitization
Professional Softwares for digitizations of typefaces: Font Lab
and Glyphs App. Designers use adobe Illustrator to design or craft
letterforms then introduce it into the specialized font apps.
4.Testing
Process of refining and correcting aspects of the typeface.
Prototyping is also part of the testing process and leads to important
feedback. The readability and legibility of the typeface become an
important consideration.
5.Deploy
The rigour of the testing is important in so that the teething issue
remain minor.
Typeface construction:
|
|
Fig4.1 Typeface Constructions |
Roman Capital :
Using grids (with circular forms) can facilitate the construction of a
letterforms and is a possible method to build/create/design
letterforms
WEEK 5 - 28/09/2022
Perception & Organisation
|
||
Fig 4.2 Contrast, several of methods in typography to create contrast.
|
Weight -
Weight describes how bold type can stand out in the middle of
lighter type of the same style. Other than using bold, using
rules, spot, squares is also provides a "heavy area" for a
powerful point of visual attraction or emphasis.
Form - The distinction between a capital letter and its lowercase
equivalent, or roman letter and its italic variant, condensed
and expanded versions of typeface are included the contrast of
form.
Structure - The different letterforms of different kinds of types
Texture - Putting together the contrast of size, weight, form and structure, and
applying them to a block of text on a page. Texture refers to the way
the lines of type look as a whole up close and from a distance.
Direction - The opposite between vertical and horizontal, and the angles in
between.
Colour - The use of colour is suggested that a second colour is often less
emphatic in values than plain black on white.Therefore it is
important to give thoughts to which elements needs to be emphasized
and to pay attention to the tonal values of the colours that are
used.
INSTRUCTIONS
TASK 1 - EXERCISE 1
Typographic System
Typographic System
For our very first task, there are 8 types of typographic systems
which are Axial, Radial, Dilatational, Random, Grid, Modular,Transitional
and Bilateral. We have to create 2 example works for each typographic
system.
Things to take note :
- Adobe In-Design with size 200 x 200 mm canvas
- Graphical elements (line, dot, etc.) can be used but limitedly.
- Only allowed to use typeface from the 10 type family
- Only black text colours and only one another colour is allowed
InDesign Progress
|
|
Fig 5.0 InDesign Progress , Week 1 (31/08/2022) |
After watching the recorded playlist, it was quite hectic for me while using
back the Adobe InDesign again, it takes a few days to used to it with memoized
the short-cut keys as well. I decided to do it without any sketches and just
go ahead do it straight in InDesign.
Axial System
|
|
Fig 5.1 Axial - Attempt #1, Week 1 (31/08/2022) |
I decided to do the axial system for the very first attempt in typographic
system. Gill Sans And Futura typeface always catch my attention and I decided
to use them for the my the task 1. During week 2 feedback session from Mr
Vinod suggest where the right side can be slightly diagonal to give it
more movement.
|
|
Fig 5.2 Axial - Revised Week 2 (07/09/2022) |
Radial System
|
|
Fig 5.3 Radial - Attempt #1, Week 1 (31/08/2022) |
While working on Radial system, I find it quite fun cause this is my first
time trying out with this kind of layout, its like a spreading out effect. After that, I changed the text colour and changed the background colour, which eventually the outcome turn a lot more better.
|
|
Fig 5.4 Radial - Revised Week 2 (07/09/2022) |
Dilatational System
|
|
Fig 5.5 Dilatational - Attempt #1, Week 1 (31/08/2022) |
Dilatational system is also another fun but challenging at the same time
with the type on the path and also with the curve shape of the circle.
There's too many text to consider the title and also with
|
||
|
Fig 5.6 Dilatational - Revised #1 Week 2 (07/09/2022)
|
Random System
|
|
Fig 5.8 Random - Attempt #1, Week 1 (31/08/2022) |
Random system is defiantly one of my favourite system, just like all of a
sudden "freedom" is allowed , no rules just fun and enjoy. It took me less
than 20 minutes to done this random system.
|
|
Fig 5.9 Random - Revised Week 2 (07/09/2022) |
Grid System
|
|
Fig 6.0 Grid - Attempt #1, Week 1 (31/08/2022) |
During the feedback session, my 2 attempts were not in the proper grid
system. There's a few error where the amount of leading and paragraph
spacing. It took me for awhile to understand about grid system. But thanks
to Mr Vinod who explaining the differences between grid and modular system
again and again during class, I started to have clear understanding
about this 2 system again.
|
|
Fig 6.1 Grid - Revised #1 Week 2 (07/09/2022) |
|
|
Fig 6.2 Grid - Revised #2 Week 2 (07/09/2022) |
Modular System
|
|
Fig 6.3 Modular - Attempt #1, Week 1 (31/08/2022) |
One of the hardest yet complicated system to me, it looks similar to
grid system but it just slightly. For Modular, I try to keep it safe by doing
the 1 units with 1 shape like square and circle.
|
|
Fig 6.4 Modular - Revised Week 2 (07/09/2022) |
Transitional System
|
|
Fig 6.5 Transitional - Attempt #1, Week 1 (31/08/2022) |
Mr Vinod suggest on the left side where it can be more tilted and allow some
movement while on the right side , theres amount of space on the top, so
below I make some changes by changing the colour and the arrangement :
|
|
Fig 6.6 Transitional - Revised Week 2 (07/09/2022) |
|
|
Fig 6.7 Transitional - Revised Week 2 (07/09/2022) |
Bilateral System
|
||
|
Fig 6.8 Bilateral - Attempt #1, Week 1 (31/08/2022)
|
|
|
Fig 7.0 Bilateral - Revised Week 2 (07/09/2022) |
Bilateral system is also another system that I enjoyed the most too, its quick
and straight-foward to understand the system , I decided to keep it more
minimalist by changing colour and add some lines to it.
Final Task 1 : Exercise 1 : Typographic Systems
|
|
|
Fig 7.1 Final Axial System in JPG, Week 2 (07/09/2022) |
|
|
|
Fig 7.2 Final Radial System in JPG, Week 2 (07/09/2022) |
|
|
|
Fig 7.3 Final Dilatational System in JPG, Week 2 (07/09/2022) |
|
Fig 7.9 Final Task 1 - Exercise 1 : Typographic Systems in
PDF, Week 2 (07/09/2022)
Fig 8.0 Final Task 1 - Exercise 1 : Typographic Systems Grids And Guides
in PDF, Week 2 (07/09/2022)
TASK 1 - EXERCISE 2
Type And Play : Part 1 - Finding Type
Type And Play : Part 1 - Finding Type
For the next task, students will be asked to make a selection of image between man-made objects (chair, glass, etc.) or structures (buildings), and nature (Human, landscape, leaf, plant, bush,clouds, hill, river, etc). Students will analyse, dissect and identify potential letterforms within the dissected image. The forms would be explored and ultimately digitized. It is expected that through a process of iteration the forms would go from crude representation to a more refined celebration that would reflect to a degree its
origins.
Chosen subject
|
|
Fig 8.1 Chosen Subject, Week 3 (14/09/2022) |
Here's the chosen subject that I find from Pexels, from theoriginal author, he mentioned its about an abstract illustration, but I find it quite interesting, it kinda reminds about the cell that learnt from bio class, it shapes looks like bacteria, I believe this could be an interesting piece to try out for this task.
Letterform Extraction
|
|
Fig 8.2 Traced Letters Alphabets ,Week 3
(14/09/2022) |
I start by reduce the opacity of the image in 50% which could help in
the tracing progress , The letters I able to find are quite a few
which are letter of "P,B,U,Q,Y"
Digitalisation
|
| Fig 8.3 Digitalisation Progress in Illustrator ,Week 3 (14/09/2022) |
|
|
Fig 8.4 Guides in Illustrator ,Week 3 (14/09/2022) |
|
|
Fig 8.5 Typeface Reference, Gill Sans -Ultra Bold,Week 3
(14/09/2022) |
|
| Fig 8.6 Raw crude of the font (outline) - Week 3 (14/09/2022) |
|
|
Fig 8.7 Fill with black colour - Week 3
(14/09/2022) |
These are the extracted letterforms without making any changes, I choose Gill Sans Ultra Bold as my typeface reference I love the boldness that give some impression and characteristic to it. It somehow gives me the idea of transferring them into chubby and bubbly letterforms.
|
|
Fig 8.8 Aligned to baseline, First attempt - Week 3
(14/09/2022) |
|
|
Fig 8.9 Second attempt - Week 3 (14/09/2022) |
|
| Fig 9.0 Third attempt - Week 3 (14/09/2022) |
|
||||
Fig 9.1 Forth attempt - Week 3 (14/09/2022)
|
.jpg)
|
| Fig 9.3 Changes made in fifth attempts, Week 3 (14/09/2022) |
|
|
|
Making changes to the letters Y and V in Illustrator can be quite challenging. I mainly use the pen tools and smooth tools to help me with the curves and angles. The letters Q are quite difficult to achieve what I really wanted. In the feedback session, Mr Vinod pointed out that the tail of Q is slightly awkward. Trying my best, I changed the tail of the letter Q.
Final Type And Play : Part 1 - Finding Type
|
| Fig 9.5 Final Type Design in JPG , Week 3 (14/09/2022) |
|
|
Fig 9.6 Letter P in JPG, Week 3 (14/09/2022) |
|
| Fig 9.7 Letter Q in JPG, Week 3 (14/09/2022) |
|
|
|
|
|
|
|
|
|
.png)
|
Fig 10.1 Final Type Design in PDF , Week 3
(14/09/2022) |
|
Fig 10.2 Final Letter "PQBYV" in PDF, Week 3
(14/09/2022) |
Type And Play : Part 2 - Type & Image
In part 2, we will combine a visual with a letter, word, or sentence of their choice. Letters/words/sentences should be enhanced/supported by the selected visuals. A symbiotic relationship must exist between the text and the image.
Contest design themes for HONOR :
- Cultural Prosperity - Celebration (A totem of renewing festive culture)
- Renewal of life - Return (Contemplate human beings' relationship with all things)
Visual Research
|
| Fig 11.0 Koi Fishes , Week 5 (28/09/2022) |
|
| Fig 11.1 colour palette , Week 5 (28/09/2022) |
Find it interesting colour palette from siamese fighting fish, there are
variety of colours. A siamese betta fish also called as Chinese fighting
fish. It represent prosperity and fertility, some people also regard them
as a good hours warming gift is a symbol of good fortune for the receivers
in Chinese culture
In Chinese, Koi fish (in traditional Chinese :錦鯉魚) symbolizes positivy and they are considered to be powerful symbols of
perseverance in strength ,wealth and success. Koi fish are rich with
symbolic significance especially in Japanese and Chinese culture and
history. Known universally as a symbol of strength, perseverance, love,
bravery and dedication.
Digitisation Progress
|
||
Fig 11.2 Traced the Koi Fish , Week 5 (28/09/2022)
|
|
|
Fig 11.4 Progress in Week 5 (28/09/2022) |
|
| Fig 11.5 First attempt, Week 5 (28/09/2022) |
Since I'm more interested participate in foldable wallpapers , I try
to adjust the size and the placement of the koi fish with the items that surrounded them. With the feedbacks given by Mr Vinod, he suggest on
either maintain the current design or lower down into a flat one. I personally enjoy a
slightly strong visual appealing looked, so I try to maintain and added few more items and
hoping make it like koi fishes that swim in a galaxies
|
| Fig 11.6 Second attempt, Week 5 (28/09/2022) |
I adjust the hue and brightness to match the background colour (purple theme) with the fishes and flowers. I added some sparkle starts to create the galaxies effect which looked like koi fishes swimming in the galaxy (look more dreamy)
|
| Fig 11.7 Final attempt, Week 5 (28/09/2022) |
|
|
Fig 11.8 Foldable Wallpaper Templates, Week 5 (28/09/2022) |
|
|
|
 | |
|
|
|
|
|
|
|
|
|
|
Fig 12.3 Final Foldable Wallpaper Type & Image in PDF,
Week 5 (28/09/2022)
Link to my final Honor foldable wallpaper design with description
:
FEEDBACK
Week 2 (07/09/2022)
Specific Feedback
Typographic systems
Axial : Suggest the axial can be slightly diagonal to give it more
movement
Radial : Both can work but suggest on the left side design
Transitional : Both are ok , but the left side suggest to do some tilting to allow some movement
Grid : The amount of leading and paragraph spacing
Bilateral : Both works, the right one has good potential , the left is good but 2 segments at the bottom are just too far apart
Random : Right is better
Radial : Both can work but suggest on the left side design
Transitional : Both are ok , but the left side suggest to do some tilting to allow some movement
Grid : The amount of leading and paragraph spacing
Bilateral : Both works, the right one has good potential , the left is good but 2 segments at the bottom are just too far apart
Random : Right is better
General Feedback
Fews thing to consider : the weight of the text , reduction
of the weight (able to create contrast) , ensure the information
and readability , relationship between the positioning and
placement as well.
Week 3 (14/09/2022)
Specific Feedback
Type and Play : Part 1 - Finding Type. Remember the consistency of the letterforms and the letter of "Q" , its tail still need to be more work
Week 4 (21/09/2022)
Specific Feedback
Overall the letters are quite consistency, although
letter Q still seems slightly awkward and the tail still can be diagonal.
Week 5 (28/09/2022)
Specific Feedback
Type and Play : Part 2 - Type And Image
Interesting work there, good way in embedding the word within the floating koi fish, interesting way in use of background, shapes and forms to indicate the flow of water. Suggest to use flat shapes. It seems quite strong , need to be tone down a little bit.Don't just rely on what you see , read , be creative
REFLECTIONS
Experience
Finally back and start a new semester with Mr Vinod again ! But this time
in fully physical class. I find myself enjoyed in the actual class compared to online
class. In here, I could see my friends and directly ask for helps and
feedback. The first task as always give me the feeling of overwhelmed at
first, but sooner I getting better and on the right track.Well, its defiantly that I gained some new skills during this exercises especially with the first and last exercises. The honour talents competition are one of my enjoyable task, its feels like freedom doing whatever design I want without consider the restriction in colours and layouts.
Observation
Its really good that I observed that I could and mange to work well compare with the last semester, typography module. The work flow went smoother than I thoughts, with followed the design process that work
well on me. Starting by researching , sketching and digitization and more.
Findings
I found that it was good to be present in class when listening to other's feedback sessions so I could gauge in the areas where I lacked, as well as see what other's were doing well in to improve myself to be better.
Besides, I realize about "design progress over perfection". At first through this semester, I had a bad case of imposter syndrome. Sometime , lacking a step makes me feel uncomfortable and I would delay showing my work until I thought it was perfect trying to cover all the possible use cases.Both of these scenarios led me to more work and stress in the end. So, I think we all don't have to come up with a perfect version of a typography design. Instead make it a daily goal to make progress over perfection.
FURTHER READING
7 Essential Typographic Layout Systems
 |
| Fig 13.0 Cover of the Blog by Lucas Czarnecki |
Being a designer means solving problems. The tools to do this include color, type, graphics, images, motion, medium, and layout. Layout, though, often feels like a forgotten step-child. We will see the same ones over and over. Learning to become a versatile designer means learning various layouts. Here are the best seven of them including layouts in Axial, Radial,Dilatational, Grid, Transitional, Bilateral and Modular. This blog have guide me well in doing the exercises and useful info that have been mentioned in the lectures
The future of typography. Inspiration
 |
| Fig 13.1 Cover of the Blog by Aileen Kwun & Ariela Kozin |
From experimental fonts and application, to advocating for wider representation within the industry, heres show how designers are pushing the field of typography. There are typeface designs for any product, mood, or scenario imaginable — and then some. But even with a seemingly endless number of fonts available today, the world of typography is continually ripe for innovation.
Comments
Post a Comment