Eric Chang (0378298)
Bachelor Of Design in Creative Media
Advanced Typography: Task 1 Exercises
Table of contents:
3. Work Progress
Lecture:
Week 1: Typographic System
The typographic system has eight variations: Axial, Radial, Dilational, Random, Grid, Modular, Transitional,
and Bilateral.
|
|
Fig 1.0.1 Typographic System (Week 1, 22/04/2025)
|
Axial System: All elements are organized to the left or right of a
single axis.
Radial: All elements are extended from a point of focus
Dilational: All elements expand from a central point in a circular
pattern.
Random: Elements appear to have no specific pattern or
relation.
Grid: A system of vertical and horizontal divisions.
Modular: A series of non-objective elements that are constructed in
standardized units.
Transitional: An informal system of layered bending.
Bilateral: All text is arranged symmetrically on a single
axis.
Week 2: Typographic Composition
There is a total of 6 design composition which are
Emphasis, Isolation, Repetition, Symmetry & Asymmetry, Alignment and
lastly Perspective.
The ideas mentioned above and their application to real-life content
(images, textual information, and color) on a page or screen can
sometimes feel disconnected. However, some principles are more easily
translatable than others.
Emphasis layout:
|
|
Fig 1.0.2 Emphasis Layout (Week 2, 28/04/25)
|
The Rule Of thirds:
The Rule of Thirds is a photographic guide to composition. It
suggests dividing a frame into three columns and three rows, with
intersecting lines guiding the placement of points of interest within
the space.
|
|
Fig 1.0.3 The Rule Of Thirds (Week 2, 28/04/25)
|
Typographic System:
There are 8 systems that we have covered in theory and practice.
And the most practical and used system is the Grid System (or
Raster Systeme), derived from the grided compositional structure of
Letter Press printing. It was enhanced by the Swiss (Modernist) style of
Typography, championed by Josef Muller Brockmann, Jan Tschichold, Max
Bill, and others.
|
|
Fig 1.0.4 Typographic System (Week 2, 28/04/25)
|
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.
In response to the ordered approach to Typography of the modernist era,
younger designers questioned and challenged this notion of order,
leading to the post-modernist era in Typographical systems. Chaos,
randomness, and asymmetry were explored, but legibility and readability
were prioritized. Notable proponents include David Carson, Paula Scher,
and Jonathan Barnbrook.
This methodical approach to apparent chaos was exciting and novel for a
generation exposed to Punk anti-establishment thought and music.
Asymmetry, randomness, repetition, dilatational, and radial systems
became part of the designer’s lexicon.
|
|
Fig 1.0.5 More Typographic System
|
(Week 2, 28/04/25)
|
The Environmental Grid system explores existing structures or
combines multiple structures. It extracts crucial curved and straight
lines, organizing the information around a super-structure that includes
non-objective elements to create a unique texture and visual
stimulus.
|
|
Fig 1.0.6 Environmental System
|
(Week 2, 28/04/25)
|
This exploration provides context to the forms developed in the designs
because the system/structures were developed around key features of the
environment associated with the communicators of the message.
The Form & movement system explores existing Grid Systems to dispel
the seriousness surrounding their application. It shows how the grid’s
options can be seen as a slowed-down animation of image, text, and color
placement. Placing a form on a page, over many pages, creates movement,
regardless of whether the page is paper or screen.
|
|
Fig 1.0.7 Form & Movement System (Week 2, 28/04/25)
|
|
|
|
Fig 1.0.8 Form & Movement System Example
|
(Week 2, 28/04/25)
|
Week 3: Context & Creativity
The first letterforms produced are designed to mimic handwriting; the
shape and the line of hand-drawn letterforms are influenced by the tools
and the materials (such as sharpened bones, charcoal sticks, etc.
|
|
Fig 1.1.0 Evolution of latin alphabet
|
(Week 3, 05/05/25)
|
1. Cuneiform (3000 BCE)
Cuneiform was one of the earliest writing system, which is made by
pressing a blunt end of reed stylus to wet clay tablets.
|
|
(Week 3, 05/05/25)
|
2. Hieroglyphics (2613-2160 BCE)
Hieroglyphics, is a system that's fused with relief carving, mixing both
rebus and phonetic characters, This is also the first link of the future
alphabet system, and there are 3 ways the Hieroglyphics are used. which is
1. Ideograms : represent what is depicted
2. Determinatives: Showing what the signs are phonograms and to indicate
general idea of the word
3. Phonograms: Represent sound that spell out individual words.
|
|
(Week 3, 05/05/25)
|
3. Early Greek (5th BCE)
Early greek was based on Egyptian logo-consonantal system (by the
Phoenicians). Created 22 letters, the greeks added necessary vowels. and
their writing system only had uppercase letters placed between a
guidelines. at this time the direction of reading wasn't fixed yet.
|
|
(Week 3, 05/05/25)
|
4. Roman Uncials (4th CE)
By the 4th century Roman letters were becoming more rounded. the curved
form allowed for less strokes and could be written faster.
|
|
(Week 3, 05/05/25)
|
5. English half unicals (8th C)
in England the uncial evolved into a more slanted and condensed form. While
English and Irish unicals involved, writing on the European continent
developed considerably and needed a reformer. Luckily, it came in the
carolingian handwriting reform.
|
|
Fig 1.1.5 English Half Unicals (Week 3, 05/05/25)
|
6. Black Letter (12-15 C CE)
Gotchic was the culminating artistic expression of the middle ages,
occurring from 1200-1500. The term "Gothic" originated with the italians who
used it to refer to rude or barbaric cultures north of the Italian
Alps.
|
|
Fig 1.1.6 Black Letter (Week 3, 05/05/25)
|
7. Movable Type (11 C - 14 C)
Printing (wood block) already had been practiced in China, Korea and Japan.
China attempted to used movable type for print but was unsuccessful due in
part to the number of characters. In summary the introduction of movable
type was in the 1000-1100 CE.
|
|
Fig 1.1.7 Movable type (Week 3, 05/05/25)
|
Evolution Of Middle Eastern Alphabets
While the Phoenician letter marks a turning point in written language - use of
sound to represent letters, the script itself has been possibly influenced by
the egyptian Hieroglyphics and Hieratic scripts.
|
|
Fig 1.1.8 Evolution of middle eastern alphabets (Week 3, 05/05/25)
|
The Evolution of the Chinese Script
From the oracle bone to seal script to clerical script, traditional and
simplified scripts.
|
|
Fig 1.1.9 Chinese Scripts (Week 3, 05/05/25)
|
The Brahmi Script (450 - 350 BCE)
This is the earliest writing system developed in India after the indus
script. it is one of the most influential writing system, all modern indian
scripts and several hundred scripts found in southeast and east Asia are
derevired from Brahmi.
|
|
Fig 1.2.0 Brahmi Script (Week 3, 05/05/25)
|
Indonesian Scripts
Jawi
Jawi is the Arabic based alphabet, we all know jawi was introduced along with
Islam. but how does this happened is more interesting. The ancient Hindu
societies in both south and southeast Asia were classist and often
caste-based.
|
|
Fig 1.2.1 Jawi script (Week 3, 05/05/25)
|
In modern Malaysia, jawi is of greater importance because its the script used
for all the famous works of literature, every hikayat and malay charm book is
written in jawi.
Programmers and Type Design
|
|
1.2.2 Programmers & Type Design (Week 3, 05/05/25)
|
More vernacular scripts produced by the software giants (Google), they have
many asian programmers and designers. More vernacular and multi-script
typefaces are being produced to cater to situations where the written matter
is communicated in the vernacular script or vernacular and latin scripts.
"Looking behind gives you context, Looking forward gives you
opportunities"
Exercise 1:
For this exercise we are asked to create 8 designs, 1 for each typographic
system with a size of 200x200 on Adobe inDesign, we are required to use
minimal colours and shapes. The 8 typographic system is
Axial,Radial,Dilational,Random,Grid,Modular, Transitional and Bilateral.
The Content of our Design is:
The Design school,
Taylor's University
All Ripped Up: Punk influences on design
or
The ABCs of Bauhaus Design Theory
or
Russian Constructivism and Graphic Design
Open Public Lectures:
June 24, 2021
Lew Pik Svonn, 9am-10am
Ezrena Mohd., 10am-11am
Suzy Sulaiman., 11am-12pm
June 25, 2021
Lim Whay Yin, 9am-10am
Fahmi Reza, 10am-11am
Manish Acharia, 11am-12pm
Research:
Before Creating my first design I decided to look for some inspiration on the
internet, I used multiple sources other than Pinterest. This is to further
refine my understanding of the typographic system.
|
|
Fig 2.1: Research (Week 1, 22/04/2025)
|
Next after I've gathered some reference, I decided to jump to Adobe
InDesign to play around with the design. The first design that I decided to do
is the Axial System because I think its the easiest typographic system out of
the 8.
|
|
Fig 2.2: Axial First attempt (week 1, 22/04/2025)
|
Above is my first attempt at creating the axial system. I decided to go with
a simple approach to make it more memorable. for the second one I decided to
go with Radial.
Fonts Used:
1. Adobe Caslon Pro (Bold)
2. Adobe Caslon Pro (Regular)
|
|
Fig 2.3 Radial System (Week 1, 22/04/2025)
|
For the radial system, at first I wanted to create something that's more
complex. sadly I forgot to take a screenshot of it, however I figured out
that using a complex design would decrease the readability of the overall
design. thus I decided to go with this more simple approach.
Fonts Used:
1. Adobe Caslon Pro (Bold)
2. Adobe Caslon Pro (Regular)
Next is the dilational typograhic system, at first I was confused on how I
would do this one. at first I wanted to create something that's more like
dilational-transitional (Like the image below (Fig 1.4)), however I was afraid
that I would make it hard to read. so I decided to do it with a more simple
aproach
|
|
Fig 2.4: Dilational Reference (Week 1, 22/04/2025)
|
|
|
Fig 2.5 Dilational first attempt (Week 1, 22/04/2025)
|
For the first attempt, I think it looks good, and the reason why I put some
circles in the middle of the design is to make it as the focus point which is
also why its colored in red. also I didn't remove the outline of the second
and third circle, at first I thought it was a good idea, however in the final
design I decided to removed it because it looks better with all the outlines
removed.
|
|
Fig 2.6 Dilational Second Attempt
|
Fonts Used
Adobe Caslon Pro (Regular & Bold)
Next is the modular system, for this system I used 3 collums instead
of 2 (like mentioned on the lecture)
and I also used a simple approach for this one.
|
|
Fig 2.7 Modular System
|
Also for this part I decided to play around with other font rather
than using Adobe Caslon Pro, I decided to go with Gill sans family for this
design, Overall I think it looks good at it's readability is also good.
Fonts Used:
Gill Sans STD (Shadowed)
Gill Sans STD (Regular)
Gill Sans STD ( Bold)
Gill Sans Std (Bold Condensed)
Next is bilateral system, this system is pretty straightforward and I didn't
do a lot of experiment for this one.
|
|
Fig 2.8 Bilateral system
|
After completing the bilateral design, I thought that the design is really
boring because there was no elements, so I decided to add some.
|
Fig 2.9 Bilateral system improved
|
Fonts Used:
Gill Sans STD (Regular, Bold, & Condensed)
Next is transitional, at first I was confused on how I was going to do
this design, however after watching Mr. Vinod explanation on the lecture, I
tried my best to create something that is readable and simple.
|
|
Fig 3.0 Transitional (Week 1, 22/04/2025)
|
Fonts Used:
Gill Sans STD (Regular, Bold, & Condensed)
Grid System
|
Fig 3.1 Grid (Week 1, 22/04/2025)
|
For the grid system I wanted to create something with really high readability,
so I decided to go with a very simple approach.
Fonts Used:
Gill Sans STD (Regular, Bold)
Random System:
|
|
Fig 3.2 Random (Week 1 22/04/2025)
|
The last system is random system, for this design I wanted to create something
that's chaotic, but it's still readable.
Final Submision:
|
|
Fig 3.3 Dilatational System (Week 2, 29/04/25)
|
|
|
Fig 3.4 Axial System (Week 2, 29/04/25)
|
|
|
Fig 3.5 Radial System (Week 2, 29/04/25)
|
|
|
Fig 3.6 Modular System (Week 2, 29/04/25)
|
|
|
Fig 3.7 Bilateral System (Week 2, 29/04/25)
|
|
|
Fig 3.8 Transitional System (Week 2, 29/04/25)
|
|
|
Fig 3.9 Grid System (Week 2, 29/04/25)
|
|
|
Fig 4.0 Random System (Week 2, 29/04/25)
|
PDF With No Grid:
PDF With Grid:
Exercise 2: Type & Play
For this exercise we are required to extract a font from some image that we've
chosen, after that we're asked to make a fake movie poster using the font that
we extracted.
For this part I decided to go with branches, initially I wanted to extract the
font from a picture of a tree, however I decided to go with branches because
it is more simple. below are the picture that I picked for this exercise and
also the deconstruction of the image.
|
|
Fig 5.0 Image for extraction (Week 2, 28/04/25)
|
|
|
Fig 5.1 Extracting Progress 1 (Week 2, 28/04/25)
|
|
|
Fig 5.2 Extracted Part (Week 2, 28/04/25)
|
After the deconstruction, next I moved the extracted letter to Adobe
Illustrator for the refining process,
|
|
|
Fig 5.1 Deconstructing image (Week 2, 28/04/25)
|
After the deconstruction, next I moved the extracted letter to adobe
illustrator for the refining progress,
|
|
Fig 5.2 Extracted Letter (Before Refining)
|
|
|
Fig 5.3 Reference Font (Week 2, 28/04/25)
|
After I decided on the reference font, it's time to do the refinement
process:
|
|
Fig 5.4 Refinement 1 (Week 2, 28/04/25)
|
On the first refinement, I decided to make the bottom part of the "L"
smaller, while at the same time maintaining the shape of a leaf.
|
|
Fig 5.5 Refinement 2 (Week 2, 28/04/25)
|
On the second refinement, I made the bottom part of the L smaller again, and
at this second refinement, I also made the "y" and "X" a little wider to
make it more similar to my reference font. it was also at this point that
Mr. Vinod mentioned to me that my font lacks consistency on the thickness
part.
|
|
Fig 5.6 Final Check (Week 3, 06/05/25)
|
On the last refinement progress I made sure that the thickness is consistent
across the font, Mr Vinod teaches me the easiest way to check whether the
thickness is consistent or not by using the square tool.
Final Outcome for Part 1:
|
|
Fig 6.0 Initial Extraction (Week 3, 06/05/25)
|
|
|
Fig 6.1 First Refinement (Week 3, 06/05/25)
|
|
|
Fig 6.2 Second Refinement (Week 3, 06/05/25)
|
|
|
Fig 6.3 Trid Refinement (Week 3, 06/05/25)
|
|
|
Fig 6.4 Final Refinement (Week 3, 06/05/25)
|
Part 2:
Next after we've created the font, we need to make a mockup of a movie
poster.
|
|
Fig 7.0 First Attempt at the poster (Week 3, 06/05/25)
|
Above is my first attempt at creating the poster, however Mr.Vinod gave me
a suggestion to improve the overall look of the poster, he suggested that
I could change the image that's used or I could change the color of the
font itself, I decided to change the font color.
|
|
fig 7.1 Testing the colour (Week 4, 13/05/25)
|
I tried to change the color to white, so it would be the same color as the
background. However, I noticed that using this color would make it harder
to read the title, so I decided not to use it. I tried other colors, but
every colour that's not bright makes the title harder to read, so I
decided to stick with red, but I made it less bright.
Final Outcome For Part 2 (Poster):
|
|
Fig 7.2 Final Poster (Week 4, 13/05/25)
|
Final Poster PDF:
Feedback & Reflections:
Week 2: Mr. Vinod gave feedback to our Exercise 1.
Specific: On this week, I Haven't finished my Exercise 1. So i didn't get
any feedback
Week 3: Mr. Vinod gave feedback to our works.
Specific: He said that that my font lacks consistency, especially on
the thickness. On this week he also teaches me on how to make each of
the font consistent.
Week 4: Mr. Vinod gave final feedback for our Task 1.
Specific: He says that my poster is fine, however I could improve it by
using a more relevant image, he also suggested that I should’ve used a
rarely used color for the font.
Reflections:
Experience:
After doing both exercises on this task, I have a better understanding
of the typography system, and after doing exercise 2, I learned that
most of the time I thought that the task given in this course is hard,
however, when you start doing it's not as hard as i thought it would
be.
Observations:
When doing both of my exercises, I realized that it is important to
look for every small details, such as the consistency in thickness. and
i realized that it is important to pay attention to the feedback that
was given to other students, because maybe it also applies to my own
work
Findings:
A few things that i realized after doing both exercise is that I need
to manage my time well, because by finishing the exercise earlier, I had
more time to make adjustments. This means that if i have another idea
that came up to my mind i could apply the new idea to my design.
Further Reading:
|
Fig 8.1 Typographic Systems
|
|
Fig 8.2 Constraints & Options
|
Constraints & Options
Line Breaks: Lines may be broken at will to make multiple lines.
Leading: Leading can be tight to over-lapping or wide and airy.
Word Letter & Space: Varying word spacing and letter spacing can
create different texture. as letter spacing is increased word spacing must
also be increased.
|
Fig 8.3 Circle and composition
|
Circle is a wildcard element, which means that it can be used anywhere in
the composition, The circle is usually used to create a focus point, tension
and even balance
Comments
Post a Comment