30/08/2023 - 29/09/2023 (Week 1 - Week 5)
Lee Wing Kie / 0364251
Advanced Typography / Bachelor of Design (Hons) in Creative Media
Task 1 - Exercise 1 and Exercise 2
LECTURES
Week 1 - AdTypo_1_Typographic Systems
Typography systems serve a crucial purpose by providing guidance and
direction for decision-making processes.
Shape grammar is a set of shape rules that apply in a step-by-step
way to generate a set, or language, of designs.
Axial System: All elements are organized to the left and right
of a single axis.
|
| Fig 1.1 Axial System |
Radial System: All elements are organized to the left and right of a single axis.
|
| Fig 1.2 Radial System |
Dilatational System: All elements are extended from a point of focus.
|
|
Fig 1.3 Dilatational System |
Random System: Elements appear to have no specific pattern or relationship.
|
| Fig 1.4 Random System |
Grid System: A system of vertical and horizontal divisions.
|
|
Fig 1.5 Grid System |
Transitional System: An informal system of layered
banding.
|
| Fig 1.6 Transitional System |
Modular System: A series of non-objective elements constructed
as a standardized unit.
|
| Fig 1.7 Modular System |
Bilateral System: Text is evenly placed on one line.
|
| Fig 1.8 Bilateral System |
Week 2 -AdTypo_2_Typographic Composition
The Rule of Thirds
The Rule of Thirds in photography is a composition technique that divides a
frame into a grid of 3 columns and 3 rows, using intersecting lines as
guides to position points of interest within the frame.
In practical terms, the rule of thirds is not commonly used because there
are better composition techniques available.
|
| Fig 1.9 The Rule of Third |
Typographic Systems
In response to the highly structured typography of the modernist era, a
new generation of designers emerged during the post-modernist era. They
challenged the concept of order and embraced chaos, randomness, and
asymmetry in typographical systems. While legibility and readability took
a back seat, some of the best examples seamlessly combined both
approaches. Prominent proponents of this movement included David Carson,
Paula Scher, and Jonathan Barnbrook.
Their unconventional methods were influenced by the punk
anti-establishment ethos of their time, leading to the adoption of
asymmetry, randomness, repetition, dilatational, and radial systems in
design.
Other models / Systems
Environmental Grid
This design system involves examining an existing structure or a
combination of structures, extracting important curved and straight lines.
The designer arranges their information around this super-structure,
incorporating non-objective elements to create a visually stimulating mix
of texture.
This approach offers an intriguing way to explore and gives context to the
design forms, as the system is based on features from the environment
relevant to the message communicators.
|
| Fig 1.10 Environmental Grid |
Form and Movement
This system encourages students to explore existing grid systems to
discover the numerous creative possibilities they offer. Its purpose is to
break away from the rigid perception of grid applications and to view the
layout of images, text, and color on book pages as a deliberate form of
animation. Placing forms on pages, regardless of the medium (paper or
screen), generates a sense of movement throughout the content.
|
| Fig 1.11 Form and Movement |
The project involved static forms positioned on spreads with hidden
grids. Emphasis was placed on creating visual connections and surprises
on each page, with forms representing images, text, or color. In the
animated version, the book spreads simulate the sequential nature of a
moving screen.
Week 3 -AdTypo_3_Context & Creativity
Handwriting
Handwriting served as the original model for form, spacing, and mechanical
type conventions. Hand-drawn letterforms were shaped by various tools,
such as bones, charcoal, plants, brushes, feathers, and steel pens, each
contributing to their distinctive characteristics.
Additional factors included the material upon which the forms were
written: clay, papyrus, palm leaf, animal skins (vellum and parchment) and
paper.
|
| Fig 1.12 Cuneiform c. 3000 B.C.E |
|
| Fig 1.13 Hieroglyphs |
2. 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.
|
|
Fig 1.14 Early Greek |
The Phoenicians created a 22-letter phonetic alphabet based on the
Egyptian logo-consonantal system. The early Greek letters were handwritten
without compasses or rules, and they lacked serifs. Over time, the letters
became thicker, the openings got smaller, and serifs were added. These new
forms were used as models for formal lettering in the Roman Empire.
|
| Fig 1.15 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 lowed for less
strokes and could be written faster.
|
| Fig 1.16 English Half Uncials, 8th C |
English Half Uncials, 8th C.
Uncial script in England transformed into a slanted and condensed style.
Meanwhile, in Europe, writing deteriorated and required reform, which came
with the Carolingian Handwriting Reform.
|
| Fig 1.17 Emperor Charlemagne |
Emperor Charlemagne 8 C. CE
The fall of the Roman Empire led to widespread illiteracy and the
emergence of various regional handwriting styles. Writing knowledge
survived primarily in religious cloisters and retreats for about 300
years.
|
| Fig 1.18 Carolingian Minuscule |
Carolingian Minuscule
Under Charlemagne's patronage, book production increased, and language
standards were established, including pronunciation, spelling, and writing
conventions like capitalization, spacing between words, and punctuation.
The Carolingian minuscule script was introduced for legal and literary
works to promote communication across the expanding European empire. This
script later influenced Humanistic writing in the fifteenth century,
which, in turn, served as the basis for our lowercase Roman type.
|
| Fig 1.19 Black Letter |
Black Letter 12-15 C. CE
Characterized by tight spacing and condensed lettering. Evenly spaced
verticals dominated the letterform. Condensing the line spacing and letter
spacing reduced the number of costly materials in book production.
|
| Fig 1.20 The Italian Renaissance |
The Italian Renaissance
The Renaissance period led to the rediscovery and analysis of
letterforms known as "Antica." This era's focus on artistic and
architectural perfection also extended to letterforms, resulting in more
refined and rationalized letters.
|
|
Fig 1.21 Movable Type |
Movable Type 11 C.—14 C.
Printing began in China, Korea, and Japan as early as AD 750 with the
Diamond Sutra being the first printed book in 868. China attempted
movable type but faced challenges due to the number of characters. In
the late 14th century, Koreans successfully cast movable type in bronze,
leading to the eventual development of Han'gul script, surpassing
Chinese efforts. This innovation emerged between 1000-1100 CE, predating
European printing by several decades, such as Gutenberg's Bible in 1439.
|
| Fig 1.22 Indus Valley Civilization (IVC) script |
Indus Valley Civilization (IVC) script
The ancient script of the Indus Valley Civilization, dating from 3500-2000 BCE, remains undeciphered. It appears to be logo-syllabic, with debates over whether the symbols represent a non-linguistic system or a Dravidian language.
|
| Fig 1.23 The Brahmi script |
The Brahmi script (450–350 BCE)
The earliest writing system developed in India after the Indus script.
It is one of the most influential writing systems; all modern Indian
scripts and several hundred scripts found in Southeast and East Asia are
derived from Brahmi.
|
| Fig 1.24 Southeast Asia scripts, scripts of the communities that assimilated into Peninsula Malay communities |
Week 4 -AdTypo_4_Designing Type
General Process of Type Design
1. Research
Typeface design involves understanding type basics, purpose, and
potential applications, along with exploring existing fonts for
inspiration and context.
2. Sketching
Typeface designers use two primary methods for sketching: traditional
tools like brushes, pens, and paper, which are then digitized, or
digital tools like Wacom tablets directly in font design software.
Each method has its advantages and disadvantages.
3. Digitization
Professionals use specialized software like FontLab and Glyphs
App for digitizing typefaces. Some designers prefer Adobe
Illustrator but it's not favored by purists. During this process,
focus is not only on the whole form but also on the counter form,
which significantly impacts readability.
4.Testing
Testing is a vital part of the design thinking process for
typefaces, aiding in refining and correcting various aspects.
Prototyping also contributes valuable feedback. The importance of
readability and legibility varies depending on the typeface
category, with display types prioritizing form expression over
strict readability.
5. Deploy
Even after deploying a typeface, unforeseen issues may arise that
were not discovered during prototyping and testing. Therefore, the
revision process continues post deployment, emphasizing the
importance of thorough testing to minimize potential
problems.
Typeface Construction
|
| Fig 1.25 Construction grid for Roman Capital |
Roman Capital letterforms can be constructed using a grid consisting of a square with an inner circle and a smaller central rectangle. This grid-based approach, incorporating circular forms, offers a method for designing letterforms.
Construction and considerations
Classification according to form and construction
Depending on their form and construction, the 26 characters of the
alphabet can be arranged into groups, whereby a distinction is made
between a group for the capitals and a group for lowercase
letters.
|
| Fig 1.26 Capital and a group of lowercase letters |
When designing type, various forms and constructions are considered, especially concerning extrusions of curved forms beyond the baseline and cap line, as well as vertical alignment between curved and straight forms. Additionally, visual corrections are necessary to ensure uniform spacing between letters, referred to as "fitting" the type.
INSTRUCTIONS
Task 1: Exercises 1 - Typographic Systems
For this exercise, we are to explore 8 systems: Axial,
Radial, Dilatational, Random, Grid,
Modular, Transitional, and Bilateral. We were also
instructed to watch the InDesign demonstration videos in the lecture
playlist.
- Size 200 x 200 mm
- Graphical elements (line, dot, etc.) can be used but limitedly
We are required use the following content:
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
Lecture Theatre 12
I chose 'The ABCs of Bauhaus Design Theory' from among three
options.
Week 1 :
InDesign Progress
|
|
Fig 2.1 First draft of Axial System (Week 2: 06/09/2023)
|
|
|||
Fig 2.2 First draft of Radial System (Week 2: 06/09/2023)
|
|
| Fig 2.4 First draft of Random System (Week 2: 06/09/2023) |
|
|
Fig 2.5 First draft of Grid System (Week 2: 06/09/2023) |
|
|
Fig 2.6 First draft of Transitional System (Week 2: 06/09/2023) |
|
|
Fig 2.7 First draft of Modular System (Week 2: 06/09/2023) |
|
||
|
Fig 2.8 First draft of Bilateral System (Week 2: 06/09/2023) |
After creating drafts for each system, I refine the designs based on
feedback from Mr. Vinod in class and determine the best composition.
Final Task 1- Exercise 1: Typographic Systems
|
| Fig 2.9 Final Axial System - JPEG (Week 2 :06/09/2023) |
|
|
|
|
||
|
Fig 2.11 Final Dilatational System - JPEG (Week 2
:06/09/2023) |
|
| Fig 2.12 Final Random System - JPEG (Week 2 :06/09/2023) |
|
| Fig 2.13 Final Grid System - JPEG (Week 2 :06/09/2023) |
|
| Fig 2.14 Final Transitional System - JPEG (Week 2 :06/09/2023) |
|
| Fig 2.15 Final Modular System - JPEG (Week 2 :06/09/2023) |
|
| Fig 2.16 Final Bilateral System - JPEG (Week 2 :06/09/2023) |
Fig 2.17 Final Task 1 - Exercise 1: Typographic Systems - PDF (Week 2:
06/09/2023)
Fig 2.18 Final Task 1 -Exercise 1: Typographic Systems with Grids - PDF
(Week 2: 06/09/2023)
Task 1: Exercises 2 - Type and Play
Progress of work
1. Picture selection:
The picture that I have chosen is a broken glass.
|
| Fig 3.1 Chosen Image (Week 3: 13/09/2023) |
2. Letterform extraction:
|
|
Fig 3.2 Traced Letters - A,F,H,M,K (Week 3: 13/09/2023) |
3. References:
We were required to have a reference to help us refine our typeface. I
chose Futura Std Light Condensed from the 10 typefaces because it has a
similar appearance.
|
|
Fig 3.3 References font (Week 3: 13/09/2023) |
After I decided on the alphabets that I thought would be more fun to work with for typos (A, F, H, M, K), I used Adobe Illustrator to create extraction letterforms.
|
|
Fig 3.4 1st attempt of digitalization (Week 3:
13/09/2023) |
After receiving feedback from Mr. Vinod, I realized that my work was too
simple. I decided to redo it to make the letters more consistent and
amusing. As a result, I revised it again, fixing typos in 'A,' 'N,' 'K,'
'R,' and 'H.
|
|
|
|
|
Fig 3.6 Final attempt (Week 3: 13/09/2023) |
5. Final
|
|
Fig 3.7 Compiled Process (Week 3: 13/09/2023) |
|
|
Fig 3.8 Original Extracted letters compared to final type design
(Week 3: 13/09/2023) |
|
|
Fig 3.9 Letter A (Week 3: 13/09/2023) |
|
|
Fig 3.10 Letter N (Week 3: 13/09/2023) |
|
|
Fig 3.11 Letter K (Week 3: 13/09/2023) |
|
|
Fig 3.12 Letter R (Week 3: 13/09/2023) |
|
|
Fig 3.13 Letter H (Week 3: 13/09/2023) |
Fig 3.14 Final Finding Type - PDF (Week 3: 13/09/2023)
The second part of exercise 2 requires us to select an image and combine it with the final letters that were refined in Part 1. The goal is to enhance and support the connection between the letterforms and the chosen visual. The text must be integrated into a symbiotic relationship with the image.
|
|
Fig 3.16 Original photo sourced from Pinterest (Week 4:
20/09/2023) |
My idea is to integrate the letterforms into a horror or mysterious movie poster. I will use red color for the letterforms to convey a sense of horror, while the other informational details will be in a light font.
Final Outcome:
-01.jpg)
|
| Fig 3.17 Final Type and Image - JPEG (Week 4: 20/09/2023) |
Fig 3.18 Final Type and Image - PDF (Week 4: 20/09/2023)
FEEDBACK
Week 2
General Feedback :
- Can added some colour.
- The Radial System is not enough consistently, make sure to use the focus
point line.
Week 3
General Feedback :
All letter strokes need to be consistent in shape, size, and curve.
REFLECTIONS
Experience
For Exercise 1, my main struggle was being creative with the layouts
because I felt that some of the rules and systems were fixed. I was
concerned about my work looking too similar to my classmates. Some of the
systems were less worrisome, especially the 'random' system, which was
really casual and fun. Regarding the Finding Type Exercise, I actually
enjoyed it very much and liked the idea. However, when I began the 'finding
type' exercise, I encountered some problems. I was worried that the
typefaces I found and then digitized might appear too simple and boring.
Overall, it was a really enjoyable exercise.
Observations
In Exercise 1, I had to focus on typography basics like spacing and
alignment. I also needed to make sure designs were balanced, even if they
were asymmetrical. For example, the 'random' system had to be random but
still readable. In Exercise 2, I need to ensure balance and consistency in
the digitized letterforms like shape, curve, and size.
Findings
Before I began Exercise 1, I had a rigid view of typographic systems. I
thought they were limiting and lacked creativity. However, as I experimented
with different layouts, my perspective changed. Additionally, during the
type and image exercise, I discovered the fluidity and movement effect of
text in Adobe Illustrator while working on the poster design. It was really
enjoyable and provided me with new knowledge.
FUTHER READING
|
| Fig 4.1 Book Cover: Typographic Systems |
Typographic Systems is written by Kimberly Elam. It's a book that explores
the eight typographic systems in detail, providing examples for each series
within each system. Due to various elements involved, such as hierarchy,
reading order, legibility, and contrast, typographic organization has always
been a complex system.
|
| Fig 4.2 The Circle and Composition pg12 |
The circle is a wildcard element in the composition, allowing it to be used
anywhere. It provides designers with a tool to guide the viewer's eye,
create a pivot point, and emphasize elements. Additionally, it contributes
to visual organization and balance.
|
| Fig 4.3 Radial system pg40 |
The radial composition style presents a challenge because each line is
typically connected only to a central point. Initial designs often look like
starbursts with evenly spaced elements, which can seem complex because the
lines aren't organized, and empty spaces resemble pie wedges. As designers
gain experience, they start placing the focal point off-center or even off
the page, becoming more mindful of white space. With practice, they discover
unique ways to group lines, simplify designs, and create denser textures.
Radial compositions inherently have strong diagonal elements, making them
visually active and dynamic. However, they're not easy to read and work best
for visual messages with limited text.
|
| Fig 4.4 Book Cover: Typographic Basics |
|
|
Fig 4.5 Paragraph Spacing (pg20) |
Comments
Post a Comment