Advanced Typography / Task 1: Exercise
28.3.2022 - 18.4.2022 (Week 01 - Week 04)
Adeline Wong Chyn Nee / 0344017 / Mr.Vinod N
Advanced Typography
Task 1 / Exercise 1
LECTURES
Week 01- Lecture 1 (28/03/2022): Typographic Systems
In our first week of lecture, Mr. Vinod guided us through a Facebook group page as well as briefed us on the MIB, and touched on the assignments. From there, Mr. Vinod went on to the lecture where we were introduced to the 8 structural systems used in typography. These elements are dependent on communication to function and we are to make sure that communication is right at the forefront of our design when constructing them.
- Axial
- Radial
- Dilatational
- Random
- Grid
- Modular
- Transitional
- Bilateral
These elements are dependent on communications to function, so their typographical organization is complex. Not only that, but other criteria like hierarchy, order of reading, legibility, and contrast also come into play. The word 'shape grammar' can be used to describe this typographic system as a set of unique rules set out to provide a sense of purpose that focuses and directs the decision-making, just like the typographic systems. This allows learners to have been guided through their exploration while their intuition matures and develops.
1) Axial System- all elements are arranged from a single axis, either to its left or right
2) Radial System- all elements are extended from a point of focus
3) Dilatational System- all elements expand from a central point in a circular manner
4) Random System- all elements that appear have no specific pattern or relationship
5) Grid System- a system with vertical and horizontal division
6) Transitional System- an informal system of layered banding
7) Modular Systems- a system of non-objective elements that are constructed as a standardized unit
8) Bilateral System- all text is arranged symmetrically on a single axis
As stated by Elam in 2007, An understanding of the systems organization process allows the designer to break free from "the rigid horizontal and vertical system of letterpress". It allows designers to use more fluid means to create typographical messages.
Week 03- Lecture 2 (11/04/2022): Typographic Composition
- The dominant principles under design composition are emphasis, isolation, repetition, symmetry, asymmetry, alignment, and perspective. We learn that even though these principles are more translatable with imagery rather than in typography, they are not to be disparate from the principles for imagery for they have their own use when looking at typographic layout and composition aspects.
Fig. 1.1 Screenshot from lecture, week 3 (11/4/2022)
- The emphasis on typography can be shown through the proper layout and choice of the font size, for example, in the visual below.
Fig. 1.2 Screenshot from lecture, week 3 (11/4/2022)
- The rule of third is a photographic guide to composition, it suggests that a frame can be divided into 3 columns and 3 rows. Within the given space, points are placed on the intersecting lines to guide a designer. It's an interesting translation however is rarely used in typography.
- Just like what we've been learning presently, the typographic system most used is the Grid System (Raster Systeme). Although old and rigid, it is a versatile system and allows an infinite amount of adaptation, it's still frequently used today.
- To challenge the notion of order, the post-modernist era of the Typographic system like chaos, randomness, and asymmetry was born. In a system where legibility and readability are put to the back, the best examples seem to combine the two seamlessly with intuition and gut.
Fig. 1.3 Screenshot from lecture, week 3 (11/4/2022)
- For Environmental Grid, is an existing structure or the combination of numerous structures combined, including the mixture of textures and visual stimuli. It shows an interesting way of design exploration. The elements are reduced to a framework for non-objective elements and information is placed in the space, it is visually appealing but also unique to the particular context.
Fig. 1.4 Screenshot from lecture, week 3 (11/4/2022)
- Form and Movement are derived from the exploration of the grid system. To dispel the seriousness surrounding the application of this system. The form could represent an image, text, or color. The spread of the animated book mimics the frame-by-frame nature of a moving screen.
At the end of the lecture, we were shown a quote from Oscar Levant, and Mr. Vinod himself. "There is a fine line between genius and insanity, just as there is a fine line between legibility- readability, and memorability.
INSTRUCTION:
Task 1: (29, March 2022)
We are required to create 8 final 200mm x 200mm sized designs using the Typographic Systems. In this task, we would have to explore the various types of systems. The following are the conclusions I have made from watching the lecture as well as the briefing.
- In addition to black, we can use one other color
- Graphical elements like lines, dots, etc can be used but limitedly
- Create a new document with 2 pages and 3 columns
- Use minimum 10mm margins for the document
- The point size should be between 8-12pt
- Use small caps for Ante meridiem given in the content
- Leading has to be 2 or 3 times more than the font size (eg: font size-12pt then leading- 14.5pt)
- Use 14.5 pt for Space After to suit the leading
- Must have the right grids for the correct guides
Content provided for this task:
Fig. 2.1 Screenshot from MIB of the task's content
The Content:
The Design School,
Taylor’s University
All Ripped Up: Punk Influences on Design
or
The ABCs of Bauhaus Design Theory
or
Russian Constructivism and Graphic Design
Open Public Lectures:
June 24, 2021
Lew Pik Svonn, 9AM-10AM
Ezrena Mohd., 10AM-11AM
Suzy Sulaiman, 11AM-12PM
June 25, 2021
Lim Whay Yin, 9AM-10AM
Fahmi Reza, 10AM-11AM
William Harald-Wong, 11AM-12PM
Lecture Theatre 12
PROGRESSION:
WEEK 01:
Colour Selection:
Starting with this exercise, I chose my additional color with care. Just like my chosen topic from the given content (Russian Constructivism and Graphic Design), I searched up the hex code for the Russian flag colors, which are red and blue.
Maximum Red #DA291C
Dark Powder Blue #0033A0
Fig. 1.2 Colours of the Russian flag
I then came down with one color from the flag which is Maximum Red, the reason is that the red would make a great undercoat for black. It is a technique to make a richer black. It is how color is reflected. By putting the red undercoat it blocks the light, making it heavier. Another reason is the color red means passion, importance, and attention, suiting the topic, that is why I chose red.
Fig. 1.3 Progression- Axial, Week 1 (2/3/2022)
Fig. 1.4 Progression- Radial, Week 1 (2/3/2022)
Fig. 1.5 Progression- Bilateral, Week 1 (2/3/2022)
Fig. 1.6 Progression- Grid, Week 1 (2/3/2022)
Fig. 1.7 Axial System Attempt #1 - #4
Fig. 1.8 Axial System Attempt #1 - #4
Fig. 1.9 Axial System Attempt #1 - #4
Fig. 1.10 Axial System Attempt #1 - #4
2) Radial System
Fig. 1.11 Radial System Attempt #1 & #2
Fig. 1.12 Radial System Attempt #1 & #2
3) Dilatational System
Fig. 1.13 Dilatational System Attempt #1 & #2
Fig. 1.14 Dilatational System Attempt #1 & #2
4) Bilateral System
Fig. 1.15 Bilateral System Attempt #1 & #2
Fig. 1.16 Bilateral System Attempt #1 & #2
5) Random System
Fig. 1.17 Random System Attempt #1 & #2
Fig. 1.18 Random System Attempt #1 & #2
6) Grid System
Fig. 1.19 Grid System Attempt #1 & #2
Fig. 1.20 Grid System Attempt #1 & #2
7) Modular System
Fig. 1.21 Modular System Attempt #1 & #2
Fig. 1.22 Modular System Attempt #1 & #2
8) Transitional System
Fig. 1.23 Transitional System Attempt #1
FINAL WORKS:
Fig. 2.1 Final typographic system with grid pdf Week 2 (11/4/2022)
Fig. 2.2 Final typographic system pdf, Week 2 (11/4/2022)
Task 2: Type & Play (part 1) (4, April 2022)
We were tasked in week 2, to have a selection of images between man-made objects or structures, and nature. Students will analyze, dissect and identify potential letterforms within the dissected image. The forms we create would then have to be explored and digitized. The aim is to create a more refined celebration that would reflect a degree of its origins
Starting this task, we had a few days to look upon the internet for dissectable images to identify potential letterform. These are the 2 I found on Pinterest.
(Left- Contemporary wall design, Right- Contemporary plastic art installation)
Week 2 (9/4/2022)
Dissecting Process:
.jpeg)
Fig. 3.1 Two dissectable images found on Pinterest, Week 2 (9/4/2022)
Fig. 3.2 Dissecting process, Week 2 (9/4/2022)
Fig. 3.3 Dissected image 1 & 2, Week 2 (9/4/2022)
Fig. 3.4 Letters of the dissected image, Week 2 (9/4/2022)
Week 3 (12/4/2022)
Refinement Process:
Fig. 3.5 Refinement process, Week 3 (12/4/2022)
Fig. 3.6 Extracted letterforms, Week 3 (12/4/2022)
Fig. 3.5 Added characteristics of the alphabet, Week 3 (12/4/2022)
Fig. 3.6 Letterforms according to height, Week 3 (12/4/2022)
Fig. 3.7 Refined letterforms according to height, and width, Week 3 (12/4/2022)
Letterform Equation:
Fig. 3.8 Extracted letterforms, reference font, and refined letterforms, Week 3 (12/4/2022)
Evolution of the letterform:
Fig. 3.9 Evolution of letterforms during the process of refinement, Week 3 (12/4/2022)
Draft 1:
Fig. 3.10 Letterforms with refined height, width, and stroke weight, Week 3 (12/4/2022)
Week 4 (23/4/2022)
Updated letterform after feedback:
Fig. 3.11 Letterforms after feedback, Week 4 (23/4/2022)
Fig. 3.12 Letterforms with a guide, Week 4 (23/4/2022)
Fig. 3.13 Final letterforms, Week 4 (23/4/2022)
Fig. 3.14 Final letterforms, PDF, Week 4 (23/4/2022)
Task 2: Type & Image (part 2) (18, April 2022)
For this exercise, we would have to find images online to combine the visual with a letter/word/sentence of our choosing. The objective is to enhance/support the interplay between the letter/word/sentence and the selected visual. The text must then be woven into a symbiotic relationship with the image.
Week 4 (18/4/2022)
Image Selection process:
I found these 3 images while browsing through Pinterest, the idea was to create a reflective effect on the words and incorporate them into the image. If I were to choose the first image, I would try a stained glass effect. The second one is to have glass effect letters and incorporate them on the water surface. Lastly, the idea for the last image would be letters as shadows with perspective.
Fig. 4.1 Images from Pinterest, Week 4 (18/4/2022)
Attempt 1:
Fig. 4.3 First attempt, Week 4 (18/4/2022)
I added letters of different colors with an overlay effect on the green stained glass and achieved a translucent effect on the glass, however, I was not satisfied with it as there wasn't any dynamic in this idea.
Fig. 4.4 Progression on the first attempt, Week 4 (18/4/2022)
Fig. 4.5 First attempt (improved), Week 4 (18/4/2022)
Attempt 2:
Fig. 4.6 Second attempt, Week 4 (18/4/2022)
On my second attempt, I played around with the Bevel and Emboss option under "Blending Option" and achieved an irregular glass effect on the word "GLASS".
Fig. 4.7 Progression on the second attempt, Week 4 (18/4/2022)
Fig. 4.8 Second attempt (improved), Week 5 (25/4/2022)
After the feedback session during our Monday class, I was advised by Mr. Vinod to fix the perspective on my letters and add more of the water ripple nearer to the letters to make it appear more like one. Not only that, I applied blur to some edges of the letters to make it appear as though the letters are actually in the water.
Fig. 4.9 Second attempt (final), Week 5 (25/4/2022)
This is the final design after fixing some details such as brightness, saturation, and contrast. I've come to the conclusion that the second attempt would be better compared to the execution of the first image. Therefore, I went with the second attempt as my final design.
Fig. 4.10 Final Type & Image, PNG, Week 5 (25/4/2022)
Fig. 4.11 Final Type & Image, PDF, Week 5 (25/4/2022)
FEEDBACK:
WEEK 2
General Feedback: Avoid using a 45-degree angle for Axial systems, it will look too extreme. Get proper alignment for all the Grid systems. Can do more exploration to make random system designs more random.
Specific Feedback:
(Axial) Align the title leading for the second Axial, Separate it so there’s spacing, other than that it’s good placement.
(Radial) Too many graphical elements. Other than that, it’s excellent.
(Dilatational) Fix the position slightly for the text box connecting to the shape then it’ll be better. Too many graphical elements for the 2nd design.
(Bilateral) Both designs are good and well arranged.
(Random) Can be even more random, your organizing instinct is in the way.
(Grid) Both designs are good.
(Transitional) Transitional is fantastic.
(Modular) The first design is good, and the second one relies too much on graphical elements.
Week 3
General Feedback: Utilise the inner lines of your selected image. Avoid using the lines and use the shapes instead. Also, don’t forget to include the cracks and texture of your image. When extracting the letters, you need to keep in mind that the element of your chosen object has to be within the letterforms, rather than just the lines.
Specific Feedback: You have to know what exactly is your object from the image of your first extracted letters, so remember to search it up and find out what is it, that way you can understand it better. For your second extracted letters, you have to include the cracks and details of the wall, that is what makes them look brick-like
Week 4
General Feedback: We have to keep in mind that when extracting the letters, we have to maintain their characteristics of it and try not to stray away from their original elements.
Specific Feedback: I was advised to add more contrast to my letters by including more thick and thin strokes.
Week 5
Specific Feedback: Soften the edges to mimic the texture of the water, make it blur at some parts of the edges, and hard on some, the perspective has to be tuned too. I like the glossy effect on the letters.
REFLECTION:
WEEK 01
Experience
The first week of Advanced Typography was familiar yet fun as we got to see Mr. Vinod who has taught us during our first semester. However, I was still on alert or should I say worried about the incoming workload in this module, but then again, just in semester 1, I pushed through the doubts I had and completed my tasks as assigned, and just like then, I realized it wasn't as bad as I thought once I actually finish the task. So, I believe that I'll do fine just like I always did and that I should worry less. Finishing this task, I had more fun than I expected myself to have haha. Completing each of the Typographic Systems one by one gave me a sense of accomplishment and slowly, it became fun to do.
Observations
Through the first task, I observed the significance of grid usage on the pages, it helped me to create a composition and place the layout of the text. The complexity of a typeface description can create layouts so different from each other, which was fascinating to learn.
Findings
Upon finishing this task, I discovered that constructing designs from text, can turn into art, and with task 1, I find it fun to create as the Typographic Systems are already given to us and we just had to use those systems and build them into our desired design. Like art, each detail has its own reason to be created and then be placed where it needs to be placed, and for typography, elements are aligned by grid and columns.
WEEK 02
Experience
I don't know about the others but I personally feel like this week, I'm still trying to get the hold of all the incoming tasks and assignments but with enough good time management, I managed to get all my To-do list done in time without having to delay any of them. The end of exercise 1 was so quick and we straight away started with task 2 with no day rest, so the directing process, which is the early process part of task 2 part 1, was slightly rushed.
Observations
With task 2, I observed the importance of looking out for contrasting type sizes, in my found image, I was able to observe the different types of extracted letterforms in them, such as the thinner kinds and the thicker kinds. Both can be made into letters but with enough transformation of the letters, I was able to decide on the better one.
Findings
Starting with this task, I realized that we'd have to actually create the texture of our chosen image when dissecting the image. For instance, I chose an image of an interesting wall pattern and at first, I chose to use the shape of the pattern when actually it is best to dissect the image based on the object in that image, for me, it was the wall texture. That way, when we start to refine the letterforms, it won't lose its original look.
FURTHER READING:
Fig 5.1 The Vignelli Canon on Design by Massimo Vignelli
A. Focused content for further reading: Grids, Margins, Columns, and Modules
From reading this topic, I have gathered and written my part of the conclusion. Firstly, written in the book are the various reasons why grids are used and why it is so important to use them.
- It organizes the content
- It provides consistency
- It gives an orderly look
- It projects a level of intellectual elegance that we like to express
After knowing the importance of using the grid, I now learn which type of grid to use for my design use. I need to find the most appropriate one and the basic understanding is that the smaller the module of the grid the least helpful it could be, however, coarse grids can also be restricting and offers too few alternatives. So the secret is to find the proper kind of grid for the job at hand.
Fig 5.2 Grid Variation, 3x6 (left) 5x4 (right)
Next, I learned what makes a grid. There is the vertical grid which provides consistency, which is columns, and also a horizontal grid called modules, which are horizontal frames of reference to assure certain levels of continuity throughout the publication.
Lastly, once the page is structured, we can now begin to structure the information and place it in the grid in such a way that the clarity of the message will be enhanced by the placement of the text on the grid. So, one should learn to use it to retrieve the most advantageous results.
B. Focused content for further reading: Contrasting Type Sizes
From reading this topic, I have gathered and written my part of the conclusion. Firstly, written in the book is the purpose of contrast in type and its examples
- It is the play between a very large type size for headlines versus a much smaller type size for the body text
- White space for me is a very important element in the graphic composition. It is really the white that makes the black sing
Fig 5.3 Example of contrast in type, taken from the book
How important is the white space in this matter?
Taken from the book is this statement, "It is really the white that makes the black sing. White, in typography, is what space is in Architecture. It is the articulation of space that gives Architecture the perfect pitch."
With the contrast in type, the first rule is to stick to one or two type sizes at the most. If necessary, there are other devices such as bold, light, roman, and italic to differentiate different parts of a text.
Lastly, there is a quote from the book that I think is worth noting, "In a world where everybody screams, silence is noticeable. White space provides silence. That is the essence of our typography."
Comments
Post a Comment