31/8/2022- 7/10/2022 / Week 1 - Week 6
Chuah Kwai Pin / 0348376
Advanced Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 1: Exercises
LECTURES:
Lecture 1: Typographic Systems
For radial system, it reminded me of sun rays and wheels because of
the circular nature. It required quite some precision in adjusting the
texts so that it follows the curve of the circles
Fonts:
Left: Gill Sans Std (Regular & Bold) and Univers LT Std (Regular, Bold & Oblique)
While doing dilatational system, I learned that we could make a circle
and type on the path. At first I struggled with it because my text kept
disappearing, but after trying a few more times, I got it solved. On the
left, I wanted to attempt the concept of a dandelion whereby the
information detaches from the main body and flows out.
For random system, I really tried to make it as chaotic as possible but still keeping some sort of order in it. I used almost all the 10 typefaces given and tried to make it look so bizarre yet interesting enough to make people want to read it.
This was a picture that I took in a botanical garden at Bukit Tinggi. I love nature and I always take pictures of unique and bright coloured flowers like these when I travel. From the flower itself, I can see thick and thin lines that have potential in forming letterforms. Some of the letters I found include K, L, E, W, X, Y and A.
From these 7 letterforms, I had to choose 5 which I liked the most and develop from there. Out of all of them, I preferred K, E, Y, X and A.
From the 10 typefaces, I found Futura Std to have a similar letter width as my extracted letterforms and it is also a sans serif font. The reference we chose is help us with the construction and refinement of our typeface.
Attempt 1:
For my first attempt, I tried to straighten most of the letters so that it follows the same letter width as the letters in Futura Std font. I did not really change the thickness of the strokes so it still looks quite similar to the original extracted letterforms. However, they are a little too thin to be read from afar so I decided to make the strokes thicker.
As I was comparing the letter A of my letterform with Futura std, I realised that the x-height has a big difference. Hence, I readjusted the letter to make it look more similar to the letter A in Futura Std.
From the two themes given, I have decided that Cultural Prosperity would be much easier for me to work and experiment on. Hence, I went home and rummaged through a bag of Chinese New Year decorations and laid them out to take a photo of them. The 3 Chinese gold ingots, also known as "Yuan Bao" are a symbol of prosperity. Whereas the lucky cat in the center with the word "Fu" below it means bringing good fortune and wealth. Therefore, I felt that these decorations were a great reflection of the word "Prosperity".
As the final outcome will be used as a wallpaper, the image
had to be cropped into 6000 x 3000px dimension. While I was
figuring out how to incorporate the word with the visual so
that it sits naturally together, I went online to search for
some doable word effects.
I thought about playing with the gradient of the words to bring out a metallic gold effect, since the overall graphics is pretty much shining in gold, adding a different colour will not go well with the visual. After that, I just placed the letters on top of the visual image and trimmed out the parts that are overlapping with the visual. I then make the words pop by distorting and transforming it.
For my second attempt, I went for a more illustrative
approach whilst keeping the same theme and visual concept of
the lucky cat. I also limited the number of colours to red,
orange, black and grey for this since it should not be too
harsh as a wallpaper. Besides having the lucky cat as the
main focus of the illustration, I also added some simple
graphic elements such as circles, rectangles and lines to
fill up and balance the space in the background. I then
fitted the word "Prosperity" into the background and make
the letters flow naturally to fill up the space behind the
cat.
I then played around and rearranged the visuals and elements to leave more negative space. Compared to Fig. 5.4, it definitely looks a lot less busy. I also tried putting the cat into the circle and conveniently make that into the letter "O" so that it still forms the word "Prosperity" when you see it. Once I was satisfied, I then tested it out as a laptop wallpaper again to find that the contrast between the desktop file icons and background colour is not very well achieved.
I then changed the background colour into a dark grey and make the rest of the visuals and elements stand out by using the vibrant orange, red and cream colours. I realised that the dark background is much more comfortable on the eyes and the word "Prosperity" pops out a lot compared to Fig 5.5. Overall, I was quite satisfied with this darker version and went to test it out as a wallpaper again.
With both the versions put close together for comparison, I would definitely prefer Fig. 5.8, the darker version as I am able to identify my file icons from a distance compared to Fig. 5.8. Hence, I chose to proceed with my fourth attempt as my final, which is Fig. 5.6
Final Task 1 - Exercise 2: Type and Play Part 2
FEEDBACK
REFLECTION
FURTHER READING
After watching the lectures in the 8 typographic systems, I felt like I needed more visual research which could be found in this book. While reading about these typographic systems, it helped me further understand the characteristics of each one of them, and the examples as well really gave me an idea of how my final outcome should look like. It was very interesting to see how information can be expressed in different ways using the variety of typographic systems.
For these 3 systems, I found it quite difficult to execute
because of how "free" it is. I find it much more difficult to
execute something that has no exact order and organisation
whatsover because it is harder to make them look pleasing to the
eyes.
Chuah Kwai Pin / 0348376
Advanced Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 1: Exercises
LECTURES:
Lecture 1: Typographic Systems
All design is based on a structural system, and there are eight major
variations with an infinite number of permutations, including:
- Axial
- Radial
- Dilatational
- Random
- Grid
- Modular
- Transitional
- Bilateral
Typographical organization is complex because the elements are
dependent on communication in order to function. There are also
additional criteria such as hierarchy, order of reading, legibility, and
contrast. The typographic systems are similar to what architects term
shape grammars. The typographic systems has a set of rules that is
unique and provides a sense of purpose that focuses and directs the
decision making. It provides a solid framework that guides
learners.
- Axial system: All elements are organised to the left or right of a single axis.
- Radial system: All elements are extended from a point of focus.
- Dilatational system: All elements expand from a central point in a circular fashion.
- Random system: Elements appear to have no specific pattern or relationship.
- Grid system: A system of vertical and horizontal divisions.
- Transitional system: An informal system of layered banding.
- Modular system: A series of non-objective elements that are constructed in as a standardised units.
- Bilateral system: All text is arranged symmetrically on a single axis.
Many designers focus primarily on the grid system for design and are
unaware of the potential that other systems hold. An understanding of
the systems organisation process allows the designer to break free from
the "rigid horizontal and vertical grid systems of letter press". It
allows designers to use more fluid means to create typographic
messages.
Lecture 2: Typographic Composition
1) Principles of Design Composition: Emphasis, Isolation,
Repetition, Symmetry and Asymmetry, Alignment and Perspective.
2) The Rule of Thirds: Photographic guide to composition. A
frame that can be divided into 3 columns and 3 rows, intersecting
lines are used as guide to place points of interest.
3) Environmental Grid: Based on the exploration of an existing
structure or numerous structures combined. An extraction of crucial
lines both curved and straight are formed. Designer then organizes his
information around the super-structure, which includes non-objective
elements to create a unique and exciting mixture of texture and visual
stimuli.
4) Form and Movement: Based on the exploration of an existing
Grid System. 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 a slowed-down animation in
the form that constitutes the placement of image, text and colour.
Lecture 3: Context & Creativity
Why is handwriting important in the study of type / typography?
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.
Cuneiform (3000 B.C.E)
- The earliest system of actual writing, was used in a number of languages.
- Distinctive wedge form was the result of pressing blunt end of a read stylus into wet clay tablets.
- Cuneiform characters was written from left to right, and soon evolved to pictograms.
Hieroglyphics (2613-2160 B.C.E)
- As ideograms, to represent the things they actually depict.
- As determinatives to show that the signs preceding are meant as phonograms and to indicate the general idea of the word.
- As phonograms to represent sound that "spell out" individual words.
1) Early Greek (5th C. B.C.E.): Drawn freehand, not
constructed with compasses and rule, and they had no serifs. In time the
strokes grew thicker, the aperture lessened and serifs appeared. Often
read in a format as boustrophedon, "as the ox plows" so from left to
right, then switch from right to left.
2) Roman Uncials: Letters were becoming more rounded, the curved
form allowed for less strokes ad could be written faster.
3) English Half Uncials, (8th C.): In England, the uncial evolved
into a more slanted and condensed form.
4) Carolingian Minuscule: Capitals at the start of a sentence,
spaces between words and punctuation. It was this style that became a
pattern for the Humanistic writing of the fifteenth century, this latter,
in turn was the basis of our lower-case roman type.
5) 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.
6) 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 rationalized letter.
The oldest writing systems present in Southeast Asia were Indian scripts.
There were a few, but the most important would be Pallava, a South Indian
script originally used for writing Sanskrit and Tamil. Pallava was highly
influential, becoming the basis for writing systems across Southeast
Asia.
Jawi, the Arabic-based alphabet was introduced along with Islam. In
modern Malaysia, Jawi is of greater importance because it's the script
used for all our famous works of literature. Every hikayat and Malay charm
book is written in Jawi.
Lecture 4: Designing Type
1) Type design carries a social responsibility so one must continue to
improve its legibility.
2) Type design is a form of artistic expression.
General Process of Type Design:
1) Research
- Understand type history, type anatomy and type conventions
- Determine the type's purpose or what it would be used for
- What applications it will be used in (school busses, airport signages, etc.)
2) Sketching
- Some designers sketch their typeface using the traditional tool set (brushes/pens, ink and paper) then scan them for digitization.
- Some designers sketch their typeface using digital tool sets such as Wacom directly into a font design software.
3) Digitization
- Digitization of typefaces software: FontLab and Glyphs App
- Use Adobe Illustrator to design or craft the letterforms, and then introduce it into the specialized font apps.
4) Testing
- Important component in the design thinking process.
- Results of the testing part is the process of refining and correcting aspects of the typeface.
5) Deploy
- Even after deploying a completed typeface there are always teething problems that did not come to the fore during the prototyping and testing phases.
- The task of revision does not end upon deployment.
Typeface Construction
Roman Capital: Using grid that consists of a square and inside it a circle that just
touches the lines of the square in four places. Within the square there is
also a rectangle. This rectangle is three quarters the size of the square
and is positioned in the centre of the square.
Construction and Considerations
An important visual correction is the extrusion of curved (and
protruding) forms past the baseline and cap line. This also applies to
vertical alignment between curved and straight forms.
Fitting the type: A visual correction is also needed for the distance
between letters. It is not possible to simply place letters next to each
other with equal spacing between them. The letters must be altered to a
uniform 'visual' white space. This means that the white space between the
letters should appear the same.
Lecture 5: Perception and Organisation
Perception: The way in which something is regarded, understood, or
interpreted. Perception in typography deals with the visual navigation and
interpretation of the reader via contrast, form and organisation of the
content. Content can be textual, visual, graphical or in the form of
colour.
Contrast: To make design work and meaning pop out- clearly and
unambiguously, and with flair. Carl Dair posits 7 kinds of contrast,
including:
1) Size
- Provides a point to which the reader's attention is drawn.
- The most common use of size is in making a title or heading noticeably bigger than the body text.
- Describes how bold type can stand out in the middle of lighter type of the same style.
- Using rules, spot, squares also provide a 'heavy area' for a powerful point of visual attraction or emphasis.
- The distinction between a capital letter and its lowercase equivalent, or a roman letter and its italic variant.
- Condensed and expanded versions of typeface are also included.
- The different letterforms of different kinds of typefaces.
- Example: Monoline sans serif, traditional serif, or an italic and a blackletter
- Putting together the contrasts of size, weight, form, and structure, and applying them to a block of text on a page.
- Refers to the way the lines of type look as a whole up close and form a distance.
- Suggested that a second colour is often less emphatic in values than plain black on white.
- Important to give thought to which element needs to be emphasized and to pay attention to the tonal values of the colours that are used.
Form: Refers to the overall look and feel of the elements that
make up for the typographic composition. It is the part that plays a role
in visual impact and first impressions. The interplay of meaning and form
brings a balanced harmony both in terms of function and expression.
When a typeface is perceived as a form, it is no longer read as a letter
because it has been manipulated by distortion, texture, enlargement, and
has been extruded into a space.
Gestalt: The way a thing has been "placed" or "put together".
Gestalt theory emphasizes that the whole of anything is greater than its
parts. Therefore in design, the components/ elements that make up the
design is only as good as its overall visual form.
1) Law of Similartity
- Elements that are similar to each other tend to be perceived as a unified group. (Colour, orientation, size or motion)
2) Law of Proximity
- This straightforward law states that items close to each other tend to be grouped together, whereas items further apart are less likely to be grouped together.
3) Law of Closure
- The mind's tendency to see complete figures of forms even if a picture is incomplete, partially hidden by other objects.
4) Law of Continuation
- Humans tend to perceive each of two or more objects as different, singular, and uninterrupted object even when they intersect.
5) Law of Symmetry
- To ensure awareness and inform your work process. Organisation of information in the form of laying out complex content in a hierarchical manner requires practice and the knowledge gained.
6) Law of Simplicity
INSTRUCTIONS:
TASKS
Task 1: Exercise 1- Typographic Systems
In this first exercise, we are to explore the 8 typographic systems
learned from our first lecture which includes: Axial, Radial,
Dilatational, Random, Grid, Transitional, Modular and Bilateral. The
content that we have to include is given in the MIB and we have to pick
one out of the 3 titles provided.
- Size 200 x 200mm
- Mainly black colour with an additional colour
- Minor graphic elements such as lines and dots
Week 1 Progress
1) Axial System
After watching the lecture and reading the book on typographic systems,
I found axial system to be the most straightforward one out of all 8
systems. However, there were still some complications as to keeping the
text balanced on both sides of the axis.
Fonts:
Left: Adobe Caslon Pro (Regular & Bold) and Univers LT Std (Bold, Bold Oblique, Oblique, Roman)
Fonts:
Left: Adobe Caslon Pro (Regular & Bold) and Univers LT Std (Bold, Bold Oblique, Oblique, Roman)
Right: Adobe Caslon Pro (Regular & Bold) and Univers LT Std
(Bold, Oblique, Roman)
2) Radial system
2) Radial system
|
|
|
Fonts:
Left: Gill Sans Std (Regular & Bold) and Univers LT Std (Regular, Bold & Oblique)
Right: Gill Sans Std (Regular & Bold) and Univers LT Std (Regular,
Bold & Oblique)
3) Dilatational system
|
|
|
Fonts:
Left: Adobe Caslon Pro (Regular & Bold) and Univers LT Std (Bold, Roman)
Left: Adobe Caslon Pro (Regular & Bold) and Univers LT Std (Bold, Roman)
Right: Adobe Caslon Pro (Regular & Bold) and Univers LT Std (Bold,
Roman)
4) Random system
|
|
|
For random system, I really tried to make it as chaotic as possible but still keeping some sort of order in it. I used almost all the 10 typefaces given and tried to make it look so bizarre yet interesting enough to make people want to read it.
Fonts: Most of the 10 typefaces
5) Grid system
5) Grid system
|
|
Fig. 1.5 Grid system, Week 1 (6/9/22) |
Surprisingly, grid system was one of the more difficult systems
for me. Since there is also a modular system, I was worried that
I would mix the both of them up. For this system, I made use of
the rows and columns in InDesign so that it could guide my eyes
and layout to look like it follows the grid system.
Fonts:
Left: Adobe Caslon Pro (Regular & Bold) and Univers LT Std
(Bold, Bold Oblique, Oblique, Roman)
Right: Adobe Caslon Pro (Regular & Bold), Univers LT Std
(Bold, Bold Oblique, Oblique, Roman) and Futura Std (Medium
Condensed)
6) Transitional system
|
|
Fig. 1.6 Transitional system, Week 1 (6/9/22) |
For transitional system, I understood it to be layered information
so I tried to layer all my text so that some of them are really
close together but still readable.
Fonts:
Left: Adobe Caslon Pro (Regular & Bold), Univers LT Std
(Oblique, Roman) and Futura Std (Heavy & Book)
Right: ITC New Baskerville Std (Roman), Univers LT Std (Oblique,
Roman) and Futura Std (Heavy & Medium)
7) Modular system
|
|
Fig. 1.7 Modular system, Week 1 (6/9/22) |
After watching the tutorial for modular system, it was quite clear
to me how I should structure my information. I had to use boxes
for the layout on the right because without it, it might look like
grid system.
Fonts:
Left: Adobe Caslon Pro (Regular & Bold) and Univers LT Std (Bold, Bold Oblique, Oblique, Roman)
Left: Adobe Caslon Pro (Regular & Bold) and Univers LT Std (Bold, Bold Oblique, Oblique, Roman)
Right: Univers LT Std (Bold, Bold Oblique, Oblique, Roman) and
Futura Std (Book & Bold)
8) Bilateral system
|
|
Fig. 1.8 Bilateral system, Week 1 (6/9/22) |
For bilateral system, it was quite straightforward like axial
system as well. It is where all information has to be lined up in
the center neatly, just like making an invitation card. I tried to
experiment tilting it like the one on the right since it adheres
to the bilateral system as well.
Fonts:
Left: Univers LT Std (Bold, Bold Oblique, Oblique, Roman) and Futura Std (Book, Heavy & Bold)
Left: Univers LT Std (Bold, Bold Oblique, Oblique, Roman) and Futura Std (Book, Heavy & Bold)
Right: Univers LT Std (Bold, Bold Oblique, Oblique, Roman) and
Futura Std (Book, Heavy & Bold)
After Feedback on Week 2
Based on feedback given on week 2, I made some changes and
adjustments to some of my layouts.
|
| Fig. 2.1 Radial system, Week 2 (10/9/22) |
For this radial system, I adjusted the text and information so
that it is visually more centered. I also changed the background
colour to blue and added a white circle behind the text so that it
is more readable. Overall, it reminded of a rotating disc because
of how the text is being laid out.
|
| Fig. 2.2 Dilatational system, Week 2 (10/9/22) |
For this layout, I tried to give a better ending to the text by
adding a smaller dot behind it. I also added a few more dots to
guide the reader's eyes on the flow of information, from the
bigger circle to the smallest.
|
| Fig. 2.3 Grid system, Week 2 (10/9/22) |
I made a new layout for the grid system only because I was not
satisfied with the previous 2. I tried to keep most of the text
towards the left side and leave details on location on the right
side so that it is given emphasis.
|
| Fig. 2.4 Transitional system, Week 2 (10/9/22) |
For transitional system, I just removed the extra line at the
bottom that was next to Lecture Theatre 12.
|
| Fig. 2.5 Bilateral system, Week 2 (10/9/22) |
For bilateral system, I decided to work on my first layout instead
because the contrast between text and background in the second one
was difficult to change. Instead of keeping all my information in
one straight line, I made it branch out to the side which consists
of information about the location.
Final Task 1 - Exercise 1: Typographic Systems
|
| Fig. 3.2 Final Radial System, Week 3 (13/9/22) |
|
|
Fig. 3.3 Final Dilatational System, Week 3 (13/9/22) |
|
|
Fig. 3.4 Final Random System, Week 3 (13/9/22) |
|
|
Fig. 3.5 Final Grid System, Week 3 (13/9/22) |
|
|
Fig. 3.6 Final Transitional System, Week 3
(13/9/22) |
|
|
Fig. 3.7 Final Modular System, Week 3 (13/9/22) |
|
|
Fig. 3.8 Final Bilateral System, Week 3 (13/9/22) |
Fig. 3.9 Final 8 Typographic Systems - PDF, Week 3
(13/9/22)
Fig. 3.10 Final 8 Typographic Systems with guidelines -
PDF, Week 3 (13/9/22)
Task 1: Exercise 2- Type and Play
Part 1: Finding Type
We are tasked to select images between man-made objects,
structures and nature to analyse, dissect and identify
potential letterforms within the dissected image. The forms
will then be explored and digitized.
- Uppercase or lowercase only
- Choose reference from the 10 typefaces provided
1) Chosen image
|
| Fig. 4.1 Chosen image - flower, Week 3 (13/9/22) |
This was a picture that I took in a botanical garden at Bukit Tinggi. I love nature and I always take pictures of unique and bright coloured flowers like these when I travel. From the flower itself, I can see thick and thin lines that have potential in forming letterforms. Some of the letters I found include K, L, E, W, X, Y and A.
2) Extracting Letterforms
I used the pen tool and curvature tool in Adobe Illustrator to trace out the letterforms that I could see.
|
|
| Fig. 4.2 Extracting letterforms from chosen picture, Week 3 (13/9/22) |
I used the pen tool and curvature tool in Adobe Illustrator to trace out the letterforms that I could see.
|
|
| Fig. 4.3 Extracted 7 letterforms, Week 3 (13/9/22) |
From these 7 letterforms, I had to choose 5 which I liked the most and develop from there. Out of all of them, I preferred K, E, Y, X and A.
Reference:
|
|
| Fig. 4.5 Typeface reference - Future Std Book, Week 3 (13/9/22) |
From the 10 typefaces, I found Futura Std to have a similar letter width as my extracted letterforms and it is also a sans serif font. The reference we chose is help us with the construction and refinement of our typeface.
3) Digitisation
|
|
|
|
From these extracted letterforms, I tried to straighten them
and make it look less organic and crooked. The thickness of
the letter strokes are also very inconsistent so I tried to
keep the thickness the same so that there is still a sense of
cohesiveness.
|
|
|
|
|
|
| Fig. 4.9 Attempt 1 on digitization, Week 3 (13/9/22) |
For my first attempt, I tried to straighten most of the letters so that it follows the same letter width as the letters in Futura Std font. I did not really change the thickness of the strokes so it still looks quite similar to the original extracted letterforms. However, they are a little too thin to be read from afar so I decided to make the strokes thicker.
Attempt 2:
In my second attempt, I tried to thicken the strokes and
straighten the letter "E" so that it does not look so awkward.
I also added tried to make the letterforms consistent by
adding a crooked element into the letters.
|
|
|
Fig. 4.10 Attempt 2 on digitization, Week 3
(13/9/22) |
Attempt 3:
|
|
|
Fig. 4.11 Attempt 3 on digitization, Week 3
(13/9/22) |
After the feedback session given on Week 3, I began
further refine my letterforms with more care. When I
placed the reference font, Futura Std behind my
letterforms in attempt 2, I realised that the cap height
is different. Hence, I had to change my letterforms and
make them the same as my reference font. I also thicken
some of the strokes again like for letters E, Y and K.
Overall, I think it looks much better than the previous
attempts because they look too thin and light.
|
|
|
Fig. 4.12 Making changes to letter A, Week 4
(20 /9/22) |
As I was comparing the letter A of my letterform with Futura std, I realised that the x-height has a big difference. Hence, I readjusted the letter to make it look more similar to the letter A in Futura Std.
|
|
|
Fig. 4.13 Progress of letterforms, Week 4 (20
/9/22) |
|
| Fig. 4.15 Type Showcase, Week 4 (20/9/22) |
After we have finalised our type, we were told to
place it on an image and see if it works well
altogether. The image I have chosen is a type of
flower. As I was doing some research to see if "Keyxa"
is a word, the search results showed usernames of
people. Hence, I decided to make "Keyxa" a flower's
name since flowers usually also have very unique names
like Chrysanthemum, Hydrangea, Dahlia and etc.
Final Task 1 - Exercise 2: Type and Play Part
1
|
| Fig. 4.16 Final Compilation of Process, Week 4 (20/9/22) |
|
|
|
|
| Fig. 4.18 Final Type Design, Week 4 (20/9/22) |
|
| Fig. 4.19 Final Type Design Letter "K", Week 4 (20/9/22) |
|
| Fig. 4.20 Final Type Design Letter "E", Week 4 (20/9/22) |
|
|
Fig. 4.21 Final Type Design Letter "Y", Week
4 (20/9/22) |
|
|
Fig. 4.22 Final Type Design Letter "A", Week
4 (20/9/22) |
|
|
Fig. 4.23 Final Type Design Letter "A", Week
4 (20/9/22) |
|
|
Fig. 4.24 Final Type Design Showcase, Week 4
(20/9/22) |
Task 1: Exercise 2- Type and Play
Part 2: Type and Image
For Part 2, we are required to combine visual with a word
or sentence of our choice. The main objective of the task
is to enhance or support the interplay between the word or
sentence with the chosen visual.
Our given themes were
1) Cultural Prosperity • Celebration: A Totem of Renewing Festive
Culture
2) Renewal of life • Return: Contemplate human beings' relationship with all
things
From these two themes, we are to either take original
photographs or illustrate something that relates to the
theme, and then incorporate the word or phrase into the
visual.
Attempt 1:
|
| Fig. 5.1 Photograph of my CNY decorations at home, Week 5 (27/9/22) |
From the two themes given, I have decided that Cultural Prosperity would be much easier for me to work and experiment on. Hence, I went home and rummaged through a bag of Chinese New Year decorations and laid them out to take a photo of them. The 3 Chinese gold ingots, also known as "Yuan Bao" are a symbol of prosperity. Whereas the lucky cat in the center with the word "Fu" below it means bringing good fortune and wealth. Therefore, I felt that these decorations were a great reflection of the word "Prosperity".
|
|
Fig. 5.2 First Attempt on word and visual
interplay, Week 5 (27/9/22) |
|
|
|
Fig. 5.3 Adjusting gradient on the word, Week 5 (27/9/22) |
I thought about playing with the gradient of the words to bring out a metallic gold effect, since the overall graphics is pretty much shining in gold, adding a different colour will not go well with the visual. After that, I just placed the letters on top of the visual image and trimmed out the parts that are overlapping with the visual. I then make the words pop by distorting and transforming it.
After Feedback on Week 5:
While I received feedbacks from my lecturer, I realised
that I had forgotten that my final outcome will be used as a
wallpaper. Mr. Vinod advised us to ask ourselves if we will
use our work as a wallpaper, and if not, that means we have
to keep making improvements. With that question in mind, I
began working on my second attempt for this task.
|
|
|
Fig. 5.4 Second attempt on word and visual
interplay, Week 6 (4/10/22) |
While I was quite happy with this compared to my first
attempt, I tried asking myself and my friends if they would
use this as a wallpaper. I also tested it out on my own
laptop wallpaper and realised that it is still too cluttered
with very little space for me to place my files and icons on
my desktop.
|
|
|
Fig. 5.5 Third attempt on word and visual
interplay, Week 6 (4/10/22) |
I then played around and rearranged the visuals and elements to leave more negative space. Compared to Fig. 5.4, it definitely looks a lot less busy. I also tried putting the cat into the circle and conveniently make that into the letter "O" so that it still forms the word "Prosperity" when you see it. Once I was satisfied, I then tested it out as a laptop wallpaper again to find that the contrast between the desktop file icons and background colour is not very well achieved.
|
|
Fig. 5.6 Fourth attempt on word and visual
interplay, Week 6 (4/10/22) |
I then changed the background colour into a dark grey and make the rest of the visuals and elements stand out by using the vibrant orange, red and cream colours. I realised that the dark background is much more comfortable on the eyes and the word "Prosperity" pops out a lot compared to Fig 5.5. Overall, I was quite satisfied with this darker version and went to test it out as a wallpaper again.
|
|
|
Fig. 5.8 Screenshot of my desktop with the darker
wallpaper, Week 6 (4/10/22) |
With both the versions put close together for comparison, I would definitely prefer Fig. 5.8, the darker version as I am able to identify my file icons from a distance compared to Fig. 5.8. Hence, I chose to proceed with my fourth attempt as my final, which is Fig. 5.6
Final Task 1 - Exercise 2: Type and Play Part 2
|
|
Fig. 5.9 Type and Play Part 2 Final (JPEG)- Prosperity |
Fig. 5.10 Type and Play Part 2 Final (PDF)- Prosperity
Week 2: Exercise 1- Typographic Systems
Specific Feedback: Radial system needs a bit of adjustment so that the information is
more centered. Dilatational system has compositional issue, the tail
end of the text does not sit well, needs a bit of adjustment. Grid
system, the dates look awkward as it stretches to maximise the space
unlike the other text. Transitional system looks alright, but the two
lines at the end is not necessary, can keep to just 1 line. Bilateral
system has a way of dividing information that is difficult to read due
to the contrast between positive and negative space, preferably to
avoid.
General Feedback:
Needs a bit of attention to the overall compositional layout.
Distribution of text can be improved so that it maximizes the space
while keeping both sides equal.
Week 3: Exercise 2- Type and Play Part 1
Specific Feedback: In the right direction, continue to
refine further with care and consideration. May need to modify
certain strokes to maintain consistency, or discard certain
features / maintain others to achieve consistency.
General Feedback: Maintain the axis of the font,
choose either leaning or straight and keep it to one
direction.
Week 4: Exercise 2- Type and Play Part 1
Specific Feedback: Should have extracted the whole petal of the
flower rather than just the gaps because the letters don't really look
like it was extracted from a flower
General Feedback: There is consistency throughout the letters though.
General Feedback: There is consistency throughout the letters though.
Week 5: Exercise 2- Type and Play Part 2
Specific Feedback: Just use the cat paw to represent prosperity.
The current image used might be a bit too harsh as a wallpaper.
General Feedback: The image is too direct with the theme.
General Feedback: The image is too direct with the theme.
REFLECTION
Experience
In Exercise 1, we learned about the 8 typographic systems through our
lecture. Although it seemed straightforward trying to understand each
systems, when putting it into practice, I did struggle a lot trying to
make it look proper and nice. I read and referred to the Typographic
Systems book, which helped me generate more ideas for each system.
However, I was also quite worried that some of my works will be similar
to my friend's since some of them are quite generic.
For Exercise 2 Part
1, I was contemplating on which pictures to use for extraction of form
and I found the flower with interesting lines and veins on it. It took
me awhile to see the possible letters from that picture, because the
flower is quite small so it was also limiting with the letters I can
extract. Besides that, the digitization process was quite smooth as I
did not have any major hiccups. I tried my best to maintain consistency
throughout all of the letters, and thankfully Mr. Vinod did say that it
was consistent *sighs breath of relief*.
Moving on with Exercise 2 Part 1, I felt that I struggled a lot trying to find the most suitable picture to be used as a wallpaper and also to achieve the word and visual interplay. Not to mention, we also had to follow the themes and use the words given, which became a bit of a limitation. Although it gave me quite a headache, it was still a great learning experience for me as I had learned how to achieve certain word effects by watching a YouTube tutorial.
Observation
When doing Exercise 1, I realised that we have a lot of smaller details
to pay attention to such as the alignment, equality of text in given
space as well as the execution of the systems itself. It definitely took
a lot of time trying to get them look presentable without any awkward
spaces and weird placements of text.
For Exercise 2 Part 1, I realised
how it important it is to show the process of developing text from the
extracted letterform to the final type. It was fascinating seeing how
the text evolved, some discarding the unnecessary elements while keeping
all of the letters consistent by having something in common. It was
rather a fun process for me because every time I change the letters and
evolve it into a better version than before, they all look like they
belong in the same family.
As for Exercise 2 Part 2, I notice how the interplay of words play an important role in enhancing the visuals. It brings out more character in an image and also sets the mood that we want our audience to feel.
Findings
For Exercise 1, I initially thought that we have to follow a set of
rules to be able to execute the systems, which limits my room for
creativity. However, as I start to work on it myself and also learn from
my peers, I realise that there are so many more possible ways to bring
out the typographic systems in a unique and creative method.
While working on Exercise 2 Part 1, I find that having a reference font makes my refining process much easier because I can get a clear picture of whether my font would work or not. When I first started developing my letterform, I just could not see it as a working typeface because it looked really incomplete. However, once I started using the reference font as a base for my letters, it started looking more proper and refined.
Moving on to Exercise 2 Part 2, I find that placing words in an image is quite challenging. It is easy to slap in a word and call it a day, but of course that is not how it works. It requires some sort of typographic sense and also creativity to really enhance the visual using words. To put it simply, it takes time and a lot of failed attempts to achieve one passable result. However, I believe all my failed attempts were a meaningful learning journey for me because I was able to notice my mistakes and also discover new methods to improve it.
FURTHER READING
|
|
| Fig. 6.1 Typographic Systems by Kimberly Elam |
After watching the lectures in the 8 typographic systems, I felt like I needed more visual research which could be found in this book. While reading about these typographic systems, it helped me further understand the characteristics of each one of them, and the examples as well really gave me an idea of how my final outcome should look like. It was very interesting to see how information can be expressed in different ways using the variety of typographic systems.
|
|
|
Fig 6.2. Project Elements and Process Axial, Radial, Dilatational |
After reading through this page, I could understand and clearly
differentiate between the systems, especially between Radial and
Dilatational.
|
|
|
Fig. 6.3 Project Elements and Process Random, Grid, Transitional |
|
|
|
Fig. 6.4 Project Elements and Process Modular and Bilateral |
I could understand Bilateral system well since it is pretty
straightforward, but it took me awhile to differentiate between
Modular system and Grid system because they seemed so similar
yet different. Through the help of this book and an extra
tutorial on the Modular system in the lecture playlist, I was
able to understand better and I am glad that I was able to
execute it well in my exercise 1.

.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)




























Comments
Post a Comment