ADVANCED TYPOGRAPHY: Task 01 EXERCISES
28/03/2022 - 18/04/2022 (Week 01 - Week 04)
ALICIA TENG YI LING / 0345159 / BDCM
ADVANCED TYPOGRAPHY
TASK 1 (EXERCISES)
LECTURE
Week 01: Typographic Systems
Most people’s understandings of typographic systems through a very linear lens
and one that is very historical in nature is due to the typo technology used
at that particular point in time
We will learn today eight major systems worked out by Kimberly Elam:
- Axial
- Radial
- Dilatational
- Random
- Grid
- Modular
- Transitional
- Bilateral
Typographical Organization elements are dependent on:
- Communication (when giving form to content, it is very important that communication is clear to the viewers)
- Hierarchy
- Order of reading
- Legibility
- Contrast
A 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 organised to the left or right of a single axis
- The axis being the red lines above
- Information is divided into groups and then placed in different angles and sides of the axis
- Axial does not have to be straight; it can be bent like the example on the right
- Possibilities for variation in axial, it must be a single line though but information can be placed on either side of that single line
|
|
Fig 1.1 Axial System Layouts |
Second example of an axial system of how information has been placed on a
single axis (the diagonal one going across to the right)
Radial System
- All elements are extended from a point of focus
- It is spread out according to that particular point of focus
- All the sentences are essentially pointing towards that point of focus
|
|
Fig 1.2 Radial System Layout |
Dilatational System
- All elements expand from a central point in a circular fashion
- There may be multiple rings of circles with information on either sides or in line with those circles
- Information may be placed in a hierarchical manner where the most important details take precedence in the outer rings or vice versa and it is in the inner rings of the circle and the less important info is in the outer rings
- Information may be divided into clubs of info and place them on the different rings as per your hierarchy or how you determine the reading rhythm for that particular text
|
|
Fig 1.3 Dilatational System Layouts |
Random System
- Elements appear to have no specific pattern or relationship
- Note that even though it is random, there is method in creating this chaos within the page
- Highly organised people tend to find difficulty initially trying to attempt this system
- Examples of random system by a student
|
|
Fig 1.4 Random System Layout |
Grid System
- A system of vertical and horizontal divisions
- It is a fairly common system as everyone uses it
- Example of a layout of a grid system. How information has been structured according to the different grids within that page
- There are different sizes and weights to create emphasis and hierarchy
|
|
Fig 1.5 Grid System Layout |
Modular System
- A series of non-objective elements that are constructed in as a standardized unit
- The units (the red squares) have to be standardized/the same size
- Modular allows you to move individual units to different portions of the page
- E.g., It replaces another unit at the bottom
|
|
Fig 1.6 Modular System Layout |
Transitional System
- An informal system of layered banding
- Banding would mean segregating information within certain bands
- E.g., a headline would remain in one band, and the middle amount of text that would be within another band, integral information that points to a venue would be in another band as well
|
|
Fig 1.7 Transitional System Layout |
Bilateral System
- All text is arranged symmetrically on a single axis
- The bilateral system in the middle image has two axis’s, it has a single axis in the middle and another axis that goes horizontally, which is why you see information on either side of the layout
|
|
Fig 1.8 Bilateral System Layout |
Many layouts could be a combination of two different systems (E.g., for the
headline, you could use interesting types of typographic systems, but with
larger amounts of text, you could use the grid system to be more ‘rigid’)
Conclusion:
Many designers focus primarily on the grid system for design and are unaware
of the potential that other systems hold and by knowing these different
systems, it allows you some distinctiveness in the approach towards placing or
organizing information on a page. Basically, typography plays a visual role
not just a reading role.
Week 02: Typographic Composition
Principles of Design Composition
Some of these principles are Emphasis, isolation, repetition, symmetry and asymmetry, alignment, and perspective.
The Rule of Thirds
A frame that is divided into three equal columns and rows. The main subject should be put on the intersecting points of the grid, however, realistically it would not be utilised for typographic systems where other options are open.
Based on the rule of thirds, subject of focus should be put on the intersecting points of the grid. But, realistically it wouldn't be use for typographic composition when there are other options available.
 |
Fig 1.9 Rule of Thirds Example |
Typographic Systems
The grid system is the most commonly used out of the eight systems. It is derived from the gridded compositional structure of Letter Press Printing.
Randomness and asymmetry systems were developed during the post-modernist era. The importance of readability declined during this time.
Other Models/Systems
Environmental Grid
This composition is based on the observation of existing structures.
 |
Fig 1.10 Environmental Grid Process Example |
Form & Movement
The position of a form on a page, over many pages creates movement. Whether the page is paper or screen does not matter.
 |
Fig 1.11 Form & Movement Grid Example |
Week 03: Context and Creativity
Handwriting
The first mechanically produced letterforms were designed to imitate handwriting. The different materials and writing tools all contribute to the unique outcome and appearance of the letterforms.
Examples of writing tools:
- Plant Stems
- Charcoal sticks
- Brushes
- Feathers
- Steel pens
Example of utilised materials:
- Clay
- Papyrus
- Palm leaf
- Animal Skins (Vellum & Parchment)
- Paper
Cueniform
 |
Fig 1.12 Cueniform Writings Source: https://www.britannica.com/topic/cuneiform |
The earliest system of writing. Produced by utilising reed styluses to write on wet clay tablets. It is written from left to right.
Hieroglyphs
This Egyptian writing system was the first connection to a future alphabetic system. It can be utilised in three ways:
- As ideograms for literal pictorial presentation
- As determinatives to display the sighs preceding are meant as phonograms & to indicate the general idea of the word
- As phonograms where it represents the sound of an individual word
Early Greek
A writing system consisting of 22 phonetic alphabets, based on the Egyptian logo-consonantal system. It contains only capital letters that are written between two guidelines that organise them into horizontal rows. It was later adopted by Greeks, where necessary vowels were entered. Words are read both left from right and right from left. Letters are not serif and free-handed.
Roman Uncials
By the fourth century, roman letters had become more rounded. This curved form allowed for quicker writing as it required less strokes.
English Half Uncials
In England, the uncial developed into a more slanted, condensed form.
Carolingian Minuscule
 |
| Fig 1.13Carolingian Minuscule Writings Source: https://omniglot.com/writing/carolingian.htm |
On the other hand, writing in Europe devolved considerably. In Emperor Charlemagne's time, a script emerged that standardized the style of writing. This style came to be the pattern of Humanistic writing for lower-case roman type in the Roman capital 15th century and later.
Black Letter
Gothic was the culminating artistic expression of the middle ages. The term originated with Italians who used it to refer to rude or barbaric cultures north of the Italian Alps. The vertical supplanted horizontals as the dominants line in architecture, the pointed arch replaced the round arch of the Romans, the almond shape, or mandorla, was preferred. Blackletter is characterized by tight spacing and condensed lettering with evenly spaced verticals dominated the letterform.
 |
Fig 1.14 Black Letter Source: https://jakerainis.com/blog/learning-blackletter-alphabets/ |
The Italian Renaissance
As the Gothic spirit reached its peak in the other areas of western Europe, Humanist scholars in Italy were steadily reviving the culture of antiquity. The renaissance embraced ancient Greek and Roman culture which spurred a creative wave through Italian art, architecture, literature and letter form design.
Movable Type
Printing had already been practiced in China, Korea and Japan. The introduction of movable type was introduced in the 1000-1100 CE.
China had attempted use movable type for printing but was unsuccessful due in part to the number of characters and the material used (clay).
 |
Fig 1.15 Korean Woodblock Printing |
Evolution of Middle Eastern Alphabets
The script is possibly influenced by Egyptian Hieroglyphics and Hieratic Scripts.
 |
Fig 1.16 Evolution of Middle Eastern Alphabets Source: https://webspace.ship.edu/cgboer/evolalpha.html |
Evolution of Chinese Script
From oracle bone to Seal Script, to Clerical Script, Traditional and finally Simplified scripts.
 |
Fig 1.17 Evolution of the Chinese Script |
Indus Valley Civilization (IVC) Script
A writing system that has not yet been deciphered. The scripts appear to be somewhat logo-syllabic in nature, however it is not known if they are linguistic in use.
 |
Fig 1.18 IVC Script Source: https://pt.slideshare.net/MahamArooj/indus-valley-civilization-53246757 |
The Brahmi Script (450-350 BCE)
The earliest writing system developed in India after the Indus script.
 |
Fig 1.19 The Brahmi Script Source: https://commons.wikimedia.org/wiki/File:Brahmi_script_consonants_according_to_James_Prinsep_March_1838.jpg |
Programmers & Type Design
More vernacular scripts are being produced by software giants (such as Google) to cater to situations where vernacular scripts are needed for writing a document.
Week 04: Designing Type
Two reasons for designing a typeface according to Xavier Dupré:
- Type design has a social responsibility. One must continue to improve the legibility of type.
- Type design is a form of artistic expression.
Adrian Frutiger
Frutiger is a sans-serif typeface that was designed by Adrian Futiger in 1968. His purpose was to develop a clean and distinctive typeface with good readability both near and far from it. Considerations: Letterforms must be recognisable in poor light or when the reader moves quickly past the words.
 |
Fig 1.2.1 Frutiger |
Matthew Carter
Many of his fonts were designed to resolve technical challenges. His purpose was to develop typefaces to be highly legible even at small sizes. Considerations: Verdana font exhibit characteristics derived from pixels rather than pen, brushes or chisels. Some commonly confused characters: lowercase i, j and l.
.png) |
Fig 1.2.2 Carter |
Edward Johnston
He was tasked to create a bold and simple typeface which was modern but also contained tradition. His purpose was to develop a new typeface for posters and signages for London's Underground Railway. Limitations: he applied the proportions of Roman capital letters but developed it to suit modern aesthetics.
.png) |
Fig 1.2.3 Johnston |
General Process of Type Design
Research
To design and develop types, we should understand and learn type history, type anatomy and type conventions. We should also know the terminologies, side-bearings, metrics, and hinting.
Then, it is vital to ascertain the type's purpose or what it should be used for. We should also examine existing fonts that are presently being used for inspirations, ideas, reference, context, usage patterns/etc.
.png) |
Fig 1.2.4 Research |
Sketching
Some designers sketch their typeface using traditional tools and scan them for the purpose of digitization. They are more at ease using their hands and have better controls using them.
On the other hand, other designers prefer to sketch their typeface using digital tool sets which is much quicker, persistent and consistent. However, this can sometimes impede the natural movement of hand strokes.
.png) |
Fig 1.2.5 Sketching |
Digitization
There are professional software that are used for digitizing typefaces. The leading ones being FontLab and Glyphs Lab.
Designer's attention should be given to both the whole form and counter form at this stage as the readability of type is highly reliant on it.
.png) |
Fig 1.2.6 Digitization |
Testing
Testing is an important aspect of the design thinking process. The results of the testing is part of the refining and correcting aspects of the typeface. Prototyping is also part of the process and leads to important feedback.
.png) |
Fig 1.2.7 Testing |
Deploy
Even after deploying the completed typeface, there are always teething issues which did not appear during the prototyping and testing phases. Therefore, revision does not end upon deployment.
Typeface construction
Roman Capital: The grid consists of a square and inside it is a circle that barely touches the lines of the square in four places. Additionally, within the square is a rectangle which is 3/4 the size of a square and is positioned in the centre of the square. Thus, using grids with circular forms can simplify the construction of letterforms and is a possible method to build letterforms.
.png) |
Fig 1.2.8 Roman Capital |
Constructions & Considerations
.png) |
Fig 1.2.9 Constructions |
Depending of the form and construction, the alphabet characters can be arranged into groups, wherein a distinction is can be made between a group for the capitals and a group for lowercase letters.
The various forms and constructions must be taken into account when designing a new type. An important visual correction is the extrusion of curved and protruding forms past the baseline and cap line. Additionally, this applies to vertical alignment between curved and straight forms.
.png) |
Fig 1.2.10 White Spacing |
A visual correction is also needed for the distance between letters. It is simply not possible to place letters next to each other with equal spacing between them. The letters must be altered to a uniform ‘visual’ white space. This signifies that the white spacing between the letters should appear the same. This is also known as 'fitting’ the type.
INSTRUCTIONS
EXERCISE 1: Typographic Systems
Info:
The text I chose to work with:
"The Design School,
Taylor's University.
The ABCs of Bauhaus Design Theory
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
William Harald-Wong, 11AM-12PM
Lecture Theatre 12"
Process
I started off by creating a Photoshop document to do a very rough, simple
sketch for each system and I used lines to just get a general idea of the
layouts I wanted to create.
For the single colour I could choose, I decided on a red colour with the
code (#b00000) that would be a nice graphical pop of colour but could also
be dark enough to use as the text colour.
Sketches
|
|
Fig 2.1 System Sketches (02/04/2022) |
InDesign Progress
To begin, I added the necessary grids and guidelines to the pages and then
inserted the basic shapes and words. It is very different seeing the actual
compositions on the document compared to the rough sketch so I had to do
some tweaking to make it look nicer and more organized. Once I liked the
overall layout, I started developing each system further until I was
satisfied with how it was or if I wasn't, I would try a completely new
layout.
Axial
The first system is axial so I tried a simple vertical line for my first
attempt. In both of the pages, I made some words red to add a visual point.
For the second layout, I tilted the words slightly for a more dynamic look
and added a black background to half of the page to create contrast between
the opposing light and dark values. Additionally, I added different
typefaces to emphasize the 'split' between the page and I think it looks
better like this.
|
|
Fig 2.2 Axial System Tryouts (02/04/2022) |
Typefaces used:
- Adobe Caslon Pro Bold
- Adobe Caslon Pro Regular
- Bodoni Std Roman
- Gill Sans Std Regular
- Gill Sans Std Italic
- Gill Sans Light
|
|
Fig 2.3 Chosen Axial Attempt (02/04/2022) |
After week 1 feedback, I made some updates to the system based on the
feedback Mr. Vinod gave, which was to reduce the black side to grey,
then changing the text to black to soften the contrast.
|
|
Fig 2.4 Updated Axial System (08/04/2022) |
Radial
For my radial system, I wanted to replicate sun rays from a point which
would be the 'sun'. For the first attempt, I used red for the centre circle
as I wanted to grab attention there first but I thought it looked too strong
overall so I made some changes to the second layout to tone it down. I also
added more lines to imitate the sun rays and guide readers eyes towards the
information better. It also looks more aesthetic overall.
|
|
Fig 2.5 Radial System Tryouts (02/04/2022) |
Typefaces used:
- Bodoni Std Book
- Futura Std Light
- Gill Sans Std Light
- Gill Sans Std Bold Italic
- Gill Sans Std Regular
|
|
Fig 2.6 Chosen Radial Attempt (02/04/2022) |
Feedback: There are too many graphical elements, reduce the strength.
Perhaps, reduce the number of lines. Add one more line in a circular
fashion to aid the emptiness after.
|
|
Fig 2.7 Updated Radial System (08/04/2022) |
Dilatational
In my dilatational system composition, I wanted to create a spiraling effect
hence why my first and second tryouts are centered around a focal point and
revolve around that. The first one was a general idea as to how I wanted to
create the layout then I developed the second one to be more to my liking
and with more graphical elements. The third tryout was simply to test a
completely different composition to see if I would like it more, I did not.
|
|
Fig 2.8 Dilatational System Tryouts (02/04/2022) |
Typefaces used:
- Bodoni Std Roman
- Futura Std Light
- Futura Std Heavy
- Futura Std Light Oblique
- Gill Sans Std Regular
Feedback: Good, but reduce the capital letter 'J' size and numbers
to match the rest of the text
|
|
|
Random
The random system was by far the hardest for me to create. I did not know
where to begin and being too cautious hindered the process. I managed to
start by placing large general words and shapes and then putting smaller
details and text around or on top of those. I used a lot of different fonts
for that 'random' effect and played with sizes and orientation a lot to try
to create an interesting composition. I used this method for the first two
but tried something completely different for the third one.
For the third random system tryout, I started from the centre with the large
letters, 'A', 'B', and 'C' then branched out as neatly as I could from
there. I slowly added information and used lines as graphical elements to
guide them. While I do like the look, I decided to put the second layout as
my final because I liked the vibrant chaos aesthetic it has.
|
|
Fig 2.10 Random System Tryouts (02/04/2022) |
Typefaces used:
- Bodoni Std Book
- Bodoni Std Bold Italic
- Futura Std Oblique
- Futura Std Book
- Futura Std Light
- Futura Std Heavy Oblique
- Futura Std Extra Bold Condensed Oblique
- Gill Sans Std Regular
- Gill Sans Std Extra Bold
Feedback: Nice
|
|
Fig 2.11 Chosen Random System (08/04/2022) |
Grid
For this system, I wanted to add a literal grid in there then place the
letters erratically around it to kind of contradict the grid. The first
tryout was to see where I wanted to place each element then the second was
more developed with colours and improved placing of text, I ended up liking
this one the most. The final composition was to test out another grid system
and I did like it for it's clean appearance and attention drawing red dot
but still not as much as the second one.
|
|
Fig 2.12 Grid System Tryouts (02/04/2022) |
Typefaces used:
- Bodoni Std Bold
- Gill Sans Std Regular
- Gill Sans Std Bold Italic
|
|
Fig 2.13 Chosen Grid System (02/04/2022) |
Feedback: Use less graphical elements, remove the red circle.
Leading space is too tight, increase it for readability.
|
|
Fig 2.14 Updated Grid System (08/04/2022) |
Modular
For my modular system, I wanted to play with slicing and splitting up text
at the edges of the page. The second tryout ended up being the final one, I
like the colours and orientation of the texts. I'm not sure if I'm allowed
to layer the text over each other but I really like the look of it, I think
it adds a dynamic appearance to the composition but I'll have to see if it's
allowed in the next feedback.
|
|
Fig 2.15 Modular System Tryouts (02/04/2022) |
Typefaces used:
- Gill Sans Std Bold Condensed
- Futura Std Bold
- Gill Sans Std Regular
- Gill Sans Bold
Feedback: Nice
|
|
Fig 2.16 Chosen Modular System (08/04/2022) |
Transitional
Despite my work for this system appearing more 'uncomplicated', it was
actually a system I initially struggled with due to me running out of
inspiration at the time I was creating it. I was afraid of making it too
simple. I started my first tryout with a horizontal orientation for all the
text then shifting their positions to an slope-like form. I also added
graphical elements to try and add interest to it but it isn't so effective.
So, for my second composition, I sloped the texts and increased the variety
in the types of fonts and sizes. I shifted the elements to the end of the
page where the words stop to try and guide the eye to finish reading there.
|
|
Fig 2.17 Transitional System Tryouts (02/04/2022) |
Typefaces used:
- Futura Std Light
- Futura Std Heavy Oblique
- Bodoni Std Bold
- Gill Sans Std Regular
|
|
Fig 2.18 Chosen Transitional System (08/04/2022) |
Bilateral
For the bilateral system, I played with colours and alignment for my
tryouts. I made the vowels in the titles italicized so it would not appear
too flat. I ended up liking the second composition the best due to it's
cleanness and it's colour scheme.
|
|
Fig 2.19 Bilateral System Tryouts (02/04/2022) |
Typefaces used:
- Bodoni Std Bold
- Gill Sans Std Regular
- Gill Sans Std Light
Feedback: Nice, but increase leading.
|
|
Fig 2.20 Chosen Bilateral System (08/04/2022) |
Final Task 1 / Exercise 1: Typographic Systems
|
|
Fig 3.1 Final Axial System (08/04/2022) - PNG |
|
|
|
|
|
Fig 3.4 Final Random System (08/04/2022) - PNG |
|
|
Fig 3.5 Final Grid System (08/04/2022) - PNG |
|
|
Fig 3.6 Final Modular System (08/04/2022) - PNG |
|
|
Fig 3.7 Final Transitional System (08/04/2022) - PNG |
|
|
Fig 3.8 Final Bilateral System (08/04/2022) - PNG |
| Fig 3.9 Final Typographic Systems Outcome (08/04/2022) - PDF |
| Fig 3.10 Final Typographic Systems Outcome with Grids (08/04/2022) - PDF |
Type & Play - Part 01: Finding Type
For first part of our second exercise, we were tasked to select an
image of either man-made or organic/natural objects or structures and
find potential letterforms within the image.
Extraction and Identification of Letterforms
I decided I wanted my image to be organic as I love the erratic and
free shapes and forms that form very uniquely. I chose peonies as they
are my favourite flower. Additionally, I wanted to try out tracing
letterforms in waves as I thought the concept and shapes could be
cool.
|
|
Fig 4.1 Chosen Subject - Peony Flowers (09/04/2022) |
|
|
Fig 4.2 Test Subject - Ocean Waves (09/04/2022) |
|
|
Fig 4.3 First Draft Extracted letterforms from Fig 4.1 (09/04/2022) |
Letters: V, I, B, W
After Week 3 feedback, Mr. Vinod suggested that I try to utilise the
entire petals instead of the small parts as they would make for more
interesting forms.
|
|
|
Letters: L, P, A, O
I quite liked these tracings from the waves image but Mr. Vinod
suggested I proceed with the peony flower image for this exercise.
|
|
Fig 4.5 Second Attempt: Tracing Potential Letterforms utilising entire petals (14/04/2022) |
|
|
Fig 4.6 Extracted Letterforms (14/04/2022) |
After Mr. Vinod's feedback in week 3, I tried to make the extractions
more free flowing and to be less pedantic about the shape of the
letterforms since I am supposed to refine it further later on. I
actually quite like these tracings more than the first draft, as they
have such interesting lines and shapes which has a lot of potential in
refining.
Typeface Study
|
|
Fig 4.7 Typeface Reference - Futura Std Source: https://www.cufonfonts.com/font/futura-std-4 |
|
|
Fig 4.8 Letters in Typeface Reference Font |
We were instructed to have a reference to help with the construction and refinement of our typeface. From the ten provided typefaces, for my updated typeface reference (previous was Bodoni Std) I chose Futura Std and studied the letter constructions and noted that the widths in the letters vary and I wanted incorporate this while refining my typeface to give it a more unique shape. I especially like the letter B as the weight of the bottom and top segments are different and I thought it would look more interesting to refine my B in that manner. I wanted a non-serif typeface as I thought that they would look cleaner and more well rounded or balanced throughout the letters.
Attempt One Refinement
Below in Figure 4.9, is the refinement process of the first draft of
letterforms.
In each artboard are:
- Unprocessed, extracted letters
- Simplified them to look more like typical letterforms
- Refined letters to consistent heights and added serifs according to the chosen typeface
- Refined letters to look sharper
- Refined letters to have more consistent shapes, stroke weight and elements
|
|
Fig 4.9 Refining Letters with Guides (16/04/2022) |
|
|
Fig 4.10 Letter N Evolution (17/04/2022) |
|
|
Fig 4.11 Letter B Evolution (17/04/2022) |
|
|
Fig 4.12 Letter N Evolution (17/04/2022) |
The letter that I struggled with the most was 'N' because it was my
first letter that I attempted to refine and I was actually unsure
whether I should make it N or W. I decided to go with N as it looked
more clearly like a N. Out of all the letters, I disliked this one the
most as it looks kind of awkward to me, but in the end, I'm glad it
looks consistent with the other letterforms. The other letters were
easier after the first one. My process was to simplify the forms first
then try to add the elements from the original picture back in and I'm
quite happy with how they turned out.
Details:
- Indentations in the letters - from the irregular petal outlines
- Small points throughout the letters - Originated from the refined letter 'V' so I added it throughout the other letters for consistency and aesthetics
This attempt was rejected due to it being too sharp and it did not
reflect the original curvatures and texture of the flowers.
Further Refinement and Development of Digitization
Below in Figure 5.1, is the refinement and development process of my
final letterforms.
In each artboard are:
- Reference Typeface (Futura Book).
- Unprocessed, extracted letterforms.
- Simplified letter shapes to become more like their letters and rounded them.
- Thinned out the forms to reference my typeface and matched the other letterforms to the points seen in 'N'.
- Refined letters to have more consistent shapes, stroke weight and elements.
- Added similar curvatures that 'N' has to the rest of of the letters for a consistent look and to emphasize the 'fluffiness' of the flower from the original picture.
|
|
Fig 5.2 Letter Progressions (20/04/2022) |
|
|
Fig 5.2 Letter N Evolution (20/04/2022) |
|
|
Fig 5.5 Letter L Evolution (20/04/2022) |
My thought process with refining the letters was to follow the second
refinement of the letter 'N' as Mr. Vinod instructed me to, due to the
fact that it has retained the 'fluffy' petal element from the original
image. I noticed that it has points near the top which I thought would
be a good contrasting aspect to keep and implement throughout the rest
of the letters. I'm pretty happy with the final outcome, and I believe
it's a has a nice combination of rounded forms and sharp points which
do reflect the form of the flowers.
Week 05: Mr. Vinod said that the second refinement for the letter V is
cool and that it does not necessarily have to have a space in the
middle to be considered a 'V' but said that ultimately the choice is
up to me. I decided to combine both our ideas and updated my V to have
a closer space with a wavy curvature that still contains the points I
obtained from it's original traced form.
Final Type & Play - Part 01: Finding Type
|
|
Fig 6.1 Final Letter N - PNG (20/04/2022) |
 |
Fig 6.2 Final Letter V - PNG (20/04/2022) |
|
|
Fig 6.3 Final Letter B - PNG (20/04/2022) |
|
|
Fig 6.4 Final Letter V - PNG (20/04/2022) |
|
||
|
Fig 6.5 Final Letter L - PNG (20/04/2022)
|
Fig 6.8 Final Type Design - PDF (20/04/2022)
Type & Play: Part 02 - Type & Image
For the second part of the exercise, we were tasked to select any
picture that we like and think of a word, sentence or letter that is
relevant to the picture and integrate the text and picture
together.
To start off, I looked for interesting images to use on my Pinterest. I
wanted to try out text manipulation so I picked out four images to
practice on. The images:
|
|
Fig 7.1 Pinterest Image I |
|
|
Fig 7.2 Pinterest Image II |
|
|
Fig 7.3 Pinterest Image III |
|
|
Fig 7.4 Pinterest Image IV |
I used the images from Figures I and IV to practice methods of editing
and manipulating words. I used the software Adobe Photoshop. I used the
warp transformation and smudge tool for these. For Figure 7.5, I used a
clipping layer on top of the words to add colour so the fading into the
fog looks more natural.
|
|
Fig 7.5 "I SEE YOU" Editing into Picture (24/04/2022) |
This is actually a yoga image but it's supposed to be aesthetic. I suppose it looks slightly creepy because of the colour palette, the fogginess and the woman's position but that's why I chose a slightly creepy text to match. Seeing that this is my first attempt, I'm pretty happy with the outcome but I think it can be better with more shadow values for a more 3D looking effect.
|
|
Fig 7.6 "Lover?" Edited into the picture (24/04/2022) |
This exercise was highly dependent on the smudge tool as I was practicing it more heavily in this image. I also wanted to try make the text 'glow' more and face out like smoke illuminated by fire. I'd say it's a 50/50 success.
Following this, I decided to try angling the words to look more like
they are projecting or originating from a certain point, and also to
look more "natural" inside the image. As if they were meant to be there
in the first place. I used the smudge tool to make the form of the words
look more aligned to the image and also to add a blur to match the grain
of the pictures. I used warp and skew to angle the words.
|
|
Fig 7.7 "Thirsty? Water, Parched" Edited into Picture (24/04/2022) |
This one is my favourite so far because the words blend pretty seamlessly into the image. Both the light and shadowed words look quite natural in my opinion. I also like the overall composition and colour palette and it looks clean. I decided to write those words because of the water in the centre of the image and the person just lying beside it looked kind of funny so I just put whatever popped into my head when I first saw it.
|
|
Fig 7.8 "Blinded by the Light" Edited into Picture (24/04/2022) |
This picture has the same process as Figure 7.7 without the skewing as I
thought this picture would be interesting to try to play with light values
due to the extreme contrast between the values and the specific focal
point of light. I tried making one word look illuminated but it looks
quite flat still so I have to work on that. I think that practicing has
made me feel more confident and comfortable manipulating text with skew,
and warp transformations so that's great for future projects.
References:
Fig 7.1: https://www.pinterest.com/pin/77335318586271111/
Fig 7.2: https://www.pinterest.com/pin/37506609387766324/
Fig 7.3: https://www.pinterest.com/pin/281543719078019/
Fig 7.4: https://www.pinterest.com/pin/221028294202070504/
After feedback in week 5, I decided to go with figure 7.7 as it is my
personal favourite and Mr. Vinod seemed to like the shadow word
('parched'). I attempted to fix how the words made of light do not look
like they mimic the way the light falls. I removed the word 'water'
entirely and increased the size of 'thirsty?' to fill up the space and I
like how it looks more overall. Below is what the final words look like on
a plain black background which makes the colours look pretty weird.
|
|
Fig 8.1 Updated Words (03/05/2022) |
And here's what the words look like when they're in the actual image which
is much better in my opinion. I used Adobe Photoshop for this exercise. To
angle the words, I mostly used the skew, warp and distort
transformations. To blend in the words more naturally into the
background I used the smudge tool to get rid of the sharp edges, and an
airbrush brush to shade some parts of the words so they don't look
entirely flat.
|
|
Fig 8.2 Updated Type & Play Attempt (03/05/2021) |
For the below image, I removed the word 'Thirsty?' to see how it would
look and looks less overwhelming in my opinion but also a little empty so
I'm conflicted with which one I like better. So I decided to put both of
them in.
|
|
Fig 8.3 Version without 'Thirsty?' (03/05/2022) |
I put the word 'yes' for the shadows across the face and 'ah' for the shining light. I'm pretty happy with the way this turned out and I think it all blends in and fits the theme of the image well.
I used the typeface: Futura Std Bold Condensed.
Final Type & Play Submission
 |
|
|
|
|
|
| Fig 9.3 Final Type & Play "Thirsty?" - PDF (03/05/2022) |
| Fig 9.4 Final Type & Play "Without Thirsty?" - PDF (03/05/2022) |
FEEDBACK
(04/04/2022) - Week 02
General Feedback
- Textual information point size is generally between 8-12. Keep this as a benchmark
- When there are capital letters and numbers in body text, down size it by 0.5 (e.g. text 9 points , capital letters and numbers 8.5) to make it look more homogenous
Specific Feedback
- Axial good because of the diagonal cut, provides balance. Suggest reducing the black side to grey then changing the text to black to soften the contrast. Also add a little bit more leading space between the lines
- Too much graphical elements for radial, reduce the strength. Add one more line in a circular fashion to help the emptiness after.
- Random good
- Dilatational good - but reduce the size of J in JUNE and numbers to match the text better.
- Modular nice
- Grid system needs less graphical element, remove red circle, leading space is too tight (if point size is 9, leading should be 11-12 for comfortable readability)
- Bilateral is nice - leading should increase more
(11/04/2022) - Week 03
General Feedback
- When refining, processing the letterform, do not be pedantic in the sense that the form has to look a particular way
- You can also introduce an element to it, in order for it to look like whatever it is that you have extracted it from
Specific Feedback
- Try to utilise the entire petal to create more interesting forms
- The characteristics of
- Stick with the flowers, it is more fun
- Proceed with sketches and refinement
(18/04/2022) - Week 04
General Feedback
- Maintain characteristics from the original picture in the letterforms and ensure there is consistency throughout all of them.
Specific Feedback
- Flower element and origins disappears towards the bottom refinements
- The original shapes are good but I need to maintain the curvatures in texture
- There are too many sharp points, make them more rounded
- The petals are not sharp, they are soft so that feeling does not come through with sharp edges
- The second refinement is good (Follow the letter 'n')
(25/04/2022) - Week 05
General Feedback
- Avoid very clear or sharp edges it looks unnatural, instead reference the texture of your image to blend in the text.
Specific Feedback
- No issues with figure 7.5 and 7.8
- For figure 7.7, the words made of light ('thirsty?' and 'water')don't look completely natural (their angle is weird), they do not mimic the way the light falls, try to tweak them. Try adding one or two letters alongside the shadows on the person's face, it could be an interesting effect.
REFLECTION
Experience
I felt that this exercise was rather rushed because it was to be done in one
week. So, I had manage my time well along with other module assignments
which was a bit stressful. It was really interesting learning about the
eight typographic systems and when Mr. Vinod explained that they are quite
similar to design principles in essence, I found it a lot easier to
understand them for some reason. My biggest struggles were creating the
random system due to the fact that there was no specific explanation for it
and I had to create chaos but methodically, which was difficult. I managed
to push through by placing larger elements firsts then adding smaller
details around it. Overall, this exercise was a fun and stressful learning
experience.
Observations
I observed that using shapes/graphical elements and colours can create
visual focal points that guide the viewer's eyes or create emphasis to pull
together a layout. This was very fun to play around with and see how the
'weight' of a layout could change based on these elements.
Findings
I found that adjusting and rotating the words to different orientations
added a much more dynamic look to the layouts rather than leaving all of the
text flat (horizontal) and it also helps to guide readers eyes through the
composition at some points. Additionally, when I stuck too much inside the
borders, the overall layout looked a bit closed off but when I pushed past
the edges, it opened up a lot more space and created opportunities to
explore cutting of text and adding non-objective elements.
FURTHER READING
For my further reading, I read this book named "Typographic Systems" by
Kimberyly Elam which was recommended by Mr. Vinod for the Exercise 1.
To begin, I read Elam's explanations on each system to get a better understanding of what they were before attempting to start my sketches. Elam has similar explanations to Mr. Vinod's but I liked being able to see her descriptions next to layout examples and real life works.
|
||
|
Fig 0.0 Examples of Axial, Radial & Dilatational Systems (30/03/2022)
Following this, I looked at constraints and options which provide
opportunities for variations in system layouts. Lines can be
broken to allow changes in grouping and how the text is read. This
can be done through utilising line breaks, leading, word and
letter space.
|
Next, I studied circles and composition which is described as a "wildcard
element". It can guide the eye, create a pivot point, give tension and
emphasis and many more visual effects. In this sense, I consider circles to
be very useful in adding visual aids and aesthetics to my system layouts so
I will try to utilise this information.
|
|
Fig 0.0 Circles and Composition |
Comments
Post a Comment