Week 01 - Week 04
Ahmad Firas Bin Ahmad Fisal | 0345121
Advanced Typography (GCD61004) | Bachelor of Design (Hons) in Creative Media
Task 01: Exercises - Typographic Systems and Type & Play
LECTURES
Lecture 01: Typographic Systems
There are 8 different significant variations in Typographic
Systems.
Hierarchy, Order of reading, legibility and contrast are criteria in a
typographical organisation.
Axial System: All elements are organised to the left or right
of a single axis. It could be a bent singular axis or a straight line.
Information could be placed on either side of the single axis.
Radial System: Elements are extended from the point of focus.
Work done could be from multiple points of focus.
Dilatational System: Elements expand from a central point in
a circular manner. Rings and Inner rings filled with pieces of information
on top of the line. This could be used to differentiate the hierarchy of
the information to determine its importance.
It could also be in an inorganic manner a burst-out effect of the
system.
Random System: Elements appear to have no specific pattern or
relationship. It takes more effort trying to determine the beauty of this
unorganised system.
Grid System: A system of vertical and horizontal divisions
(most common).
Transitional System: Informal system of layered banding.
Words placed on top of multiple bands that would look like waves in the
outcome.
Modular System: A series of non-objective elements that are
constructed as a standardised unit.
Bilateral System: All text is arranged symmetrically on a
single axis (common in invitation cards or multiple-course meals
menu)
Lecture 02: Typographic Composition
Principles of Design Composition: dominant principles
underpinning design composition, which are emphasis, isolation,
repetition, symmetry and asymmetry, alignment, perspective and many
more.
In magazine layout, emphasis could be seen from the main picture from the
composition, it draws the reader's attention to the layout.
Rule of Thirds: This rule is a photographic guide to
composition, The intersecting line on the grids is used as a guide to
place the points of interest within the given space. In typography,
usually, other favourable composition options are used rather than this
Rule of Thirds.
Environmental Grid: Based on the exploration of an existing
structure or numerous structures combined. An extraction of crucial lines
both curved and straight is formed. Content will then be organised around
this super-structure, which includes non-objective elements to create a
unique and exciting mixture of texture and visual stimuli.
Form and Movement: Based on the exploration of an existing
Grid System. The placement of form on a page, over many pages, creates
movement. Whether the page is paper or screen is irrelevant. Turning of
pages in a book as a slowed-down animation in the form that constitutes
the placement of image, text and colour.
Lecture 03: Context and Creativity:
History of Letterforms
Early Greek (5th C. B.C.E.): Drawn freehand, not constructed
with rules and compasses, with no serifs. The strokes of the letters grew
thicker, lessened aperture and serifs appeared with time.
Roman Uncials: By the 4th century, Roman letters became more
rounded, and fewer strokes from having curved letterforms enable them to
write faster and more efficiently.
English Half Uncials (8th C.): In England, the uncial evolved
into a more slanted and condensed form.
Carolingian Minuscule: Capitals at the start of a sentence,
spaces between words and punctuation. These unwritten rules became the
pattern for the Humanistic writing of the 15th century.
Black Letter (12-15 C. CE): Characterised by tight spacing
and condensed lettering with evenly spaced verticals. Line Spacing and
Letter Spacing were condensed to reduce the amount of cost in book
productions.
The Italian Renaissance: Newly rediscovered letterforms
Antica. The Renaissance analysis of form that was being applied to art and
architecture was directed towards this letterform, resulting in a more
perfect of rationalised letters.
Lecture 04: Designing Type
Type Design Processes: Research - Sketching - Digitisation - Testing -
Deploy
1. Research: Understand the history of the type, anatomy,
conventions and terminologies. Determine the purpose of the design and
what it would be used for and what different applications it will be used
in. Studying existing fonts that are used in your
inspirations/reference/ideas would be a great step to start your Type
Design projects.
2. Sketching: Traditionally or Digitally on
Paper/Devices
3. Digitisation: To use software like FontLab, Glyphs and
also Adobe Illustrator to start before moving to the specialised font apps
are quite the practice as well but is frowned upon by some other
professionals.
4. Testing: The multi-results of this stage are part of the
processes of refining and correcting certain aspects of the typeface
design. Prototyping is also part of testing and leads to further
refinement from the feedback received. In some cases, readability and
legibility of the typefaces are considered but it is not as crucial if the
typeface is for displays. where expression is much more important.
5. Deploy: Even after finishing a typeface, there are always
problems to fix that did not come forth during the previous stages. So,
this proves that the Deploy stage is not the end of the development of
your typeface. The rigour of the testing is important so that the teething
issues remain minor.
Typeface Construction:
- Using grids can facilitate the construction of letterforms and it is
one of the methods to create and design your own letterforms.
- To have the guidelines in mind eg; baseline, cap line, etc.
- Visual correction to the spacing between letters is also a crucial
refinement step that is important in typeface construction.
Lecture 05: Perception and Organisation
Contrast and Form: When a typeface is perceived as a form, it
no longer reads as a letter because it has been manipulated by distortion,
texture, and enlargement, and has been extruded into a space. The
interplay between meaning and form brings a balanced harmony in function
and expression.
INSTRUCTIONS
TASK 1 - EXERCISE 1: TYPOGRAPHIC SYSTEMS
Software used:
Adobe InDesign - 200 x 200 mm, In addition to black, we can use one
other colour, Minimal graphical elements.
Content used:
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
Manish Acharia, 11AM-12PM
Lecture Theatre 12
Week 01 - 05/04/2023
For the first class, we were introduced to the module and what to
expect for the following weeks to come. This week, we were to watch
all the first five lectures and document them here in the blog and
also continue with the Typographic Systems task. In class, we were
required to complete the first system in class; the Axial
typographic system. Our lecturer mentioned that this task is similar
to the ones we did in the Typography module semesters ago and this
is to act as a refresher for other future tasks.
Axial System: All elements are organised to the left or right of a
single axis.
It has been a while since I've used Adobe InDesign with the short
semester gap between the Typography module and the Advanced Typography
module. I took some time in class to watch the basic tutorial videos
provided by the lecturer to refresh my memory on how to work with the
software. The picture below is an attempt that I did in class before a
quick feedback session provided before the lecturer ended the class
.jpg)
|
| Figure 1.1: Axial System (Attempt #1), Week 01 (05/04/2023) |
Typeface used: Futura STD
This is what I came out with within the 15 minutes given to produce this
work which is an attempt to adhere to the Axial system. However, after
the feedback session passed, the lecturer made me realise the flaws in
this design.
- The main title should be right-aligned to the axis
- The secondary main title shouldn't be slanted that way because the
paragraph alignment needs to be next to the line of axis.
After class, I decided to revisit the design and tweaked it accordingly.
.jpg)
|
|
Figure 1.2: Axial System (Attempt #2), Week 01 (05/04/2023) |
During our feedback session, he mentioned that most of my systems are
adhering to the technicalities but the aesthetics of all of the systems
need to be worked on. This is also another reason why I decided to go back
to the software and tweak a few of the systems with a pop of colour and
also layout compositions.
|
|
Figure 1.3: Axial System (Final Attempt #3), Week 02
(12/04/2023) |
Radial System: All elements are extended from the point of focus.
Typeface used: ITC Garamond STD
The feedback given was it technically adheres to the system and the
point of focus is present. However, a lot of space creates an imbalance.
The area of interest does not attract viewers strongly enough. It is
readable but it doesn't seem to balance very well (the dynamism is not
present well in this 1st attempt.
2.jpg)
|
|
Figure 1.4: Radial System (Attempt #1), Week 01 (05/04/2023) |
These graphical elements added put a balance to my whole composition by
occupying those white spaces from Attempt #1. The reading hierarchy was
maintained by varying the font sizes and bolded words.
|
|
Figure 1.5: Radial System (Final Attempt #2), Week 02
(12/04/2023) |
Dilatational System: All elements expand from a central point in a
circular fashion.
Typeface used: Serifa STD
This system took the longest to execute because of the complex nature of
creating curved/text on path features. However, the first was commented
on the lack of creative decisions and the lack of character/personality
in the piece.
3.jpg)
|
|
Figure 1.6: Dilatational System (Attempt #1), Week 01
(05/04/2023) |
I struggle with this system for quite some time but I totally agree with the recommendation by my lecturer and also from further research on this particular typographical system that Dilatational works best when we further dictate the creative decisions rather than sticking to the plain and boring circular format that blooms from a single point of focus.
|
|
Figure 1.7: Dilatational System (Final Attempt #2), Week 02
(12/04/2023) |
Random System: Elements appear to have no specific pattern or
relationship.
Typeface used: Janson Text LT STD
Instantly, the feedback was that this is not in any way adhering to the
technicalities of the system. When I take a look at it, I find myself
tilting them and rearranging them in a 'random' order which is not the
way to do this particular system. So, I went back to the drafting stage
and read more on how to further create a random system and came up with
a new outcome further below.
4.jpg)
|
|
Figure 1.8: Random System (Attempt #1), Week 01
(05/04/2023) |
For me, even the touch of colour in the main headline of the text really makes it more interesting to look at. Next, the hierarchy of the body texts is present by the varying text sizes and bolded words.
|
|
Figure 1.9: Random System (Final Attempt #2), Week 02
(12/04/2023) |
Grid System: A system of vertical and horizontal divisions.
Typeface used: Futura STD
Our lecturer further explained to us the differences between Grid and
Modular systems because most of us are still confused about what really
makes them different. Grid System can also be seen from our body texts
aligned to the columns from one end to the other and he reminded us of
our past editorial assignment semesters ago.
We should also determine where our main content/header is first in the
layout before determining where to arrange the other body texts. This
way our workflow will be smoother.
5.jpg)
|
|
Figure 2.0: Grid System (Attempt #1), Week 01
(05/04/2023) |
I purposely arranged the main and subheader on one side and the remaining body texts on one side to further accentuate the hierarchy between these two. The graphical lines added are to balance out the composition because, without them, the outcome will look right-side heavy and imbalanced.
|
|
Figure 2.1: Grid System (Final Attempt #2), Week 02
(12/04/2023) |
Modular System: A series of non-objective elements that are
constructed as a standardised unit.
Typeface used: Bodoni STD
In class, we were separated into groups and tasked to critique each
other's work and this system is the most confusing one out of all due
to its rigid technical requirements. Direct feedback that I received
from the lecturer is to ensure that my text is not exceeding its
modular units for it to be considered modular. The header is an
example of it not following the system requirements.
6.jpg)
|
|
Figure 2.2: Modular System (Attempt #1), Week 01
(05/04/2023) |
Just like the Grid System, I decided to separate the main header and subheader to the right side of the layout and right-aligned texts too. Whereas, the remaining body texts are left-aligned and to the left side of the layout. Every text is now grouped into one modular unit or two modular units for the main header.
|
|
Figure 2.3: Modular System (Final Attempt #2), Week 02
(12/04/2023) |
Transitional System: An informal system of layered banding
Typeface used: Janson Text LT STD
This first attempt of mine is technically adhering however the
information hierarchy is a little difficult to decipher. The placement
of the texts is not clear enough, making it not dynamic. The composition
is not memorable and exciting enough.
7.jpg)
|
|
Figure 2.4: Transitional System (Attempt #1), Week 01
(05/04/2023) |
While thinking about the next attempt, I am more interested in directing my design outcome for this system into a transition flow between the header and body texts.
|
|
Figure 2.5: Transitional System (Final Attempt #2), Week 02
(12/04/2023) |
Bilateral System: All texts are arranged symmetrically on a single
axis.
Typeface used: Gill Sans STD
The feedback given was it is adhering to the system but it is not
aesthetically memorable. Which makes sense because it is monotoned. This
is why I decided to make it consistent throughout the systems and
introduce colour and bridge it together with necessary graphical
elements as well.
8.jpg)
|
|
Figure 2.6: Bilateral System (Attempt #1), Week 01
(05/04/2023) |
This system is the most simple and at times boring because of its
principle to maintain it on a single axis or play it around with
symmetrical body texts. So, instead of keeping it straight like we have
in the first one, I tilt it to add character and play with the coral
colour and introduce bolded texts to the subheader which was absent in
the first one. The line is subtle to fill the space and it does not look
like it's influencing the axis to me because it is quite further apart
from the body of the text.
|
|
|
FINAL TASK 1 - EXERCISE 1: TYPOGRAPHIC SYSTEMS
|
| Figure 2.8: Axial System (Final) - JPEG, Week 02 (12/04/2023) |
|
|
Figure 2.9: Radial System (Final) - JPEG, Week 02
(12/04/2023) |
|
|
Figure 3.0: Dilatational System (Final) - JPEG, Week 02
(12/04/2023) |
|
|
Figure 3.1: Random System (Final) - JPEG, Week 02
(12/04/2023) |
|
|
Figure 3.2: Grid System (Final) - JPEG, Week 02 (12/04/2023) |
|
|
Figure 3.3: Modular System (Final) - JPEG, Week 02
(12/04/2023) |
|
|
Figure 3.4: Transitional System (Final) - JPEG, Week 02
(12/04/2023) |
|
|
Figure 3.5: Bilateral System (Final) - JPEG, Week 02
(12/04/2023) |
Figure 3.6: Task 1 - Exercise 1: Typographic Systems (Final) - PDF,
Week 02 (12/04/2023)
Figure 3.7: Task 1 - Exercise 1: Typographic Systems with Grids
& Guides (Final) - PDF,
Week 02 (12/04/2023)
TASK 1: EXERCISE 2 - TYPE & PLAY
This second exercise requires us to select an image of a man-made
object or structure or something from nature. Ensure that the image does
not contain many different elements. The picture will be analysed,
dissected and identified to find 5 letterforms. It is expected that
through a process of iteration, the forms would go from crude
representation to a more refined celebration that would reflect to a
degree its origins.
|
| Figure 4.0: Pre-Extraction of Letters, Week 03 (19/04/2023) |
After roughly extracting the letterforms, I looked at the image closely to
study the curves and lines to look for the characteristics to ensure that
I had the letterforms ready for refinement and editing. I used the
Paintbrush Tool to create the letter E and decided it should be a
benchmark for the other letterforms during the refinement stage.
|
|
|
|
|
|
Direct comparison from the Extraction of Letters and Refinement of
Letters stages:
|
|
|
We are required to put our letterforms on a related image to the picture
of your letter extraction to mimic a movie poster/album cover. The
feedback I received from my attempt is that this was a successful
attempt generally with a good background image chosen, the letterforms
and the image feeling coherent.
|
|
|
However, minor tweaks on a couple of letters to make it even more
coherent between the letterforms and also to maybe introduce rough edges
to the existing letterforms to make blend it with the edges of the
leaves from the background image
Further refinement:
|
|
|
The figure below shows the integration of the further refined
letterforms to make all of them more cohesive with the strokes and
letterforms with crooked edges to mimic the leaves in the background. It
was made using the pencil tool and the smooth tool.
|
|
|
During Week 07, our lecturer instructed us to integrate our poster with the integrated letterforms and turn it into an inspired movie poster of our liking and submit it as our final refinement to the whole Task 1 - Exercise 2: Type & Play.
FINAL TASK 1 - EXERCISE 2: TYPE & PLAY
|
| Figure 4.7: Task 1 - Exercise 2: Type & Play (Final) - JPEG, Week 07 (17/05/2023) |
|
FEEDBACKS
Week 01
General Feedback:
There should be better planning on the layout to the planned axis
while bearing in mind the final aesthetical look of the whole
wording without jeopardising other important criteria. We could also
downsize the time capital letter by -0.5pt or use small capital
letters if the situation allows. Alignment and Consistency in
spacing throughout the whole layout is other important aspect to
really look at for a cleaner finished product.
Specific Feedback:
The bigger title should've been near and right-aligned to the
imaginary axis and the 90 degrees tilted secondary title should be
in a normal position because the paragraph alignment should connect
to the axis to achieve a better layout in the Axial typographical
system.
Week 02
General Feedback:
The form must always follow function, and bear this in mind when
decorating with graphical elements, it could easily stray the layout
from the intended system. In the Radial system, we could have
multiple radial points as long as it's aiming towards one.
Specific Feedback:
Most of the systems are technically adhering to the requirements.
Systems like Grid, Modular, Random and Transitional should have
tweakings done before submitting. Improve the aesthetics of the
work.
Week 3
General Feedback:
I was told by Mr Vinod to look at the class recording for feedback
on my Type & Play because some if not most of the advice given
to everyone generally.
Week 4
General Feedback:
Ensure that the poster of choice needs to relate back to the
original chosen picture for extraction. Existing album cover or
movie posters are a good source of inspiration to see how the
designers relate the title to the chosen background image.
Specific Feedback:
Final letterforms do have some consistent characteristics like in
the letter A and E. Some consistency in E but it's a little thicker.
A suggestion was given to make the letters B and O similar to A and
V to further make it coherent. The spaces in letter B are too large
(the strokes are a little thinner compared to A and V, similar issue
with the letter E in comparison with A and V) Get these right to
make it more consistent and better. Final Poster, the use of the
letterforms and the image is well thought out. Suggestions given
were to make the title transparent to integrate it better into the
image behind it. High contrasts between the letterforms and chosen
image could further highlight the weaknesses present in crafting the
letterforms (adding a slight blur effect to the letterforms help to
conceal the weaknesses too). Maybe I could mimic the edge of the
letterforms with the edges of the leaves from the background image
to further integrate it.
REFLECTIONS
During the first exercise of Task 1, I noticed that I was trying to
recap what I've learned from semesters ago and it got better after
moments of refiguring out on how to utilise the software as taught. I
also find myself subconsciously thinking about the design principles and
typographical basics when doing these exercises. Exercise 2 is similar
to what we did before; creating letterforms. Having to find the letters
from abstract images and refine them to the selected typeface reference
but also not losing the personal style of the typeface design is the
challenge here. However, I feel like I am improving my sense of
typography even based on the feedback given by my lecturer.
FURTHER READING
|
| Typographic Systems by Kimberly Elam (2007) |
Apart from the lecture videos from our lecturer, this book by Kimberly
Elam really helped us with the principles of typographic systems and how
each of the systems has its own role to play and portray. Most
importantly when the author touched on compositions and the importance
of having a clear visual hierarchy and tips to maintain it regardless of
the system types.
Comments
Post a Comment