Advanced Typography / Task 1: Exercises

01.4.2022 - 29.4.2022 (Week 1 - Week 5)
Britney Chow Pei Jun / 0350043 / BDCM
Advanced Typography
Task 1: Exercise 1 & 2


JUMPLINKS


LECTURES

WEEK 1

Advanced Typography: Typographic Systems

  • All design is based on a structural system.
  • Eight major variations with an infinite number of permutations.
  • Elements are dependent on communication in order to function.
  • Additional criteria: hierarchy, order of reading, legibility and contrast
1. Axial System

fig 1.1; Axial System Examples;
  • All elements are organized to the left or the right of a single axis.
  • The axial doesn't necessarily need to be straight.
fig 1.2; Radial System Example;
  • All elements are extended from a point of focus, and spread out from POF.
fig 1.3; Dilatational System Example;
  • All elements expand from a central point in a circular fashion.
  • Can have multiple rings of circle, with information on either sides or in line.
  • Place in a hierarchical manner, most important either in outer rings or inner rings.
fig 1.4; Random System Example;
  • Elements appear to have no specific patterns or relationship.
fig 1,5; Grid System Example; 

  • A system of vertical and horizontal divisions.
  • Fairly common. 
fig 1.6; Transitional System Examples;
  • An informal system of layered banding.
fig 1.7; Modular System Examples; 
  • A series of non-objective elements that are constructed in as a standardized units.
  • The grids needs to be the same size.
fig 1.8; Bilateral System Example; 
  • All text is arranged symmetrically on a single axis.

WEEK 2

Advanced Typography: Typographic Compositions

  • 2 aspects: 
    • Creation of letters
    • Arrangement of large amounts of text within a given space
  • Principles of Design Composition
    • Dominant principles underpinning design compositions
    • Emphasis, isolation, repetition, symmetry and asymmetry, alignment, perspective. 
fig 1.9; Emphasis;

fig 1.10; Rules of Thirds
  • A photographic guide to composition.
  • A frame can be divided into 3 columns and 3 rows.
  • The intersecting lines are used as guide to place the points of interest. 
fig 1.11; 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.
  • Organized the information around this super-structure, which includes non-objective elements to create a unique and exciting mixture of texture and visual stimuli. 
  • Systems/structures were developed around key features of an environment associated to the communicators of the message. 
fig 1.12; Form and movement; 
  • Developed by Mr. Vinod! :D
  • Based on the exploration of an existing Grid Systems. (To get students to explore)
  • The multitude of options the grid offer;
  • To dispel the seriousness surrounding the application of the grid system;
  • To see the turning of pages in a book as a slowed-downed animation in the form that constitutes the placement of image, text and color. 

WEEK 3

Advanced Typography: Context and Creativity

fig 1.13; Evolution of the Latin Alphabet;

fig 1.14; Ancient Egypt Hieroglyphics Chart; 

Cuneiform​ 
c. 3000 B.C.E.
  • The earliest system of actual writing, was used in a number of languages between the 34C. B.C.E. through the 1st century C.E.
  • Its distinctive wedge form was the result of pressing the blunt end of a reed stylus into wet clay tablets.
  • Written from left to right.
Hieroglyphics​
2613–2160 B.C.E.
  • The Egyptian writing system is fused with the art of relief carving. 
  • A mixture of both rebus and phonetic characters.
  • Have the potential to be used in 3 different ways:
    •  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 sounds that "spell out" individual words.​
Early Greek / 5th C. B.C.E.

fig 1.15; Early Greek; 
  • Built on the Egyptian logo-consonantal system, the Phoenicians developed a phonetic alphabet consisting ​of 22 letters.​
  • The Phoenicians system then was adopted by the Greeks who added the necessary vowels.
  • Comprised of only capital letters, written between two guidelines to organize them into horizontal rows.
  • The words may have been in rows but the direction of reading was not yet fixed.
  • Often read in a format known as boustrophedon or “as the ox plows.” (Left to right then right to left).
  • Early Greek letters were drawn freehand, not constructed with compasses and rule, and they had no serifs.
  • In time the strokes of these letter grew thicker, the aperture lessened, and serifs appeared.
  • And those Roman inscriptional letters—written with a flat brush, held at an angle like a broad nib pen, then carved into the stone with mallet and chisel—have served in their turn as models for calligraphers and type designers for the past two thousand years."​
Roman Uncials

fig 1.16; Roman Uncials;

By the 4th century Roman letters were becoming more rounded, the curved form allowed for less strokes and could be written faster.

English Half Uncials, 8th C.

fig 1.17; English Half Uncials; 
  • In England the uncial evolved into a more slanted and condensed form.
  • ​While English and Irish uncials evolved, writing on the European continent devolved considerably and needed a reformer. 
  • Luckily it came in the Carolingian Handwriting Reform.
Emperor Charlemagne ​
8 C. CE
  • After the fall of the Roman Empire, the end of a central advanced culture resulted in general illiteracy and a breakdown of handwriting into diverse regional styles.
  • For 300 years the knowledge of writing was kept alive mainly in the remote outposts of religious cloisters and retreats.​
Carolingian Minuscule
  • ​Court school was established under the direction of Alcuin of York. 
  • During Charlemagne's patronage book production increased and language was standardized —pronunciation and spelling as well as writing conventions — capitals at the start of a sentence, spaces between words and punctuation.
  • Used for all legal and literary works to unify communication between the various regions of the expanding European empire.​
  • Was as important a development as the standard Roman capital.
    • It was this style that became the pattern for the Humanistic writing of the fifteenth century; this latter, in turn was the basis of our lower-case roman type.​
Black Letter ​
12-15 C. CE

fig 1.18; Black Letter;
  • Gothic was the culminating artistic expression of the middle ages, occurring roughly from 1200—1500.
  • The term Gothic originated with the Italians who used it to refer to rude or barbaric cultures north of the Italian Alps. ​
  • The Gothic spirit took hold in France, Germany and England where it was manifested through unhindered upward striving:​
    • The vertical supplanted horizontals as the dominant line in architecture
    • The pointed arch replaced the round arch of the Romans.
    • The almond shape, or mandorla, was preferred. 
  • Characterized by tight spacing and condensed lettering.
  • Condensing line spacing and letter spacing reduced the amount of costly materials in book production. ​
The Italian Renaissance​
  • ​As the Gothic spirit reached its apex in the other areas of western Europe, Humanist scholars in Italy were slowly reviving the culture of antiquity.
  • The renaissance embrace of ancient Greek and Roman culture spurred a creative wave through Italian art, architecture, literature and letter form design.​
  • The Humanist admired the Carolingian script , which had clear open handwriting.​
  • 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.​
Movable Type​
11 C.—14 C. 

fig 1.19; Movable Type;
  • Printing (wood block) had already been practiced in China, Korea and Japan (Dharani Sutra, AD 750).
  • Earliest known printed book (AD 868) is the Diamond Sutra: 16’ scroll with the world’s first printed illustration. ​
  • China had attempted use movable type for printing but was unsuccessful due in part to the number of characters and the material used (clay).​
  • In late 14 C. several decades before the earliest printing in Europe, the Koreans establish a foundry to cast movable type in bronze—allowed the dismantling and resetting of text.​
  • With the creation of their new script Han’gul, the Koreans would succeed where the Chinese failed.
  • To conclude: 
    • The introduction of moveable type was introduced in the 1000-1100 CE. This innovation was pioneered in China but achieved in Korea (Diamond Sutra).
    • In the late 1300-1399 CE, several decades before the earliest printing in Europe (Guttenberg’s bible 1439), the Koreans establish a foundry to cast movable type in bronze.

WEEK 4

Advanced Typography: Designing Type

So why design another typeface?
  • Xavier Dupré (2007) in the introduction of his typeface Malaga suggested two reasons for designing a typeface:​
    • Type design carries a social responsibility so one must continue to improve its legibility.​
    • Type design is a form of artistic expression.​
Adrian Frutiger
  • A renowned twentieth century Swiss graphic designer.
  • His forte was typeface designing and he is considered responsible for the advancement of typography into digital typography.
  • His valued contribution to typography includes the typefaces; Univers and Frutiger.
Frutiger

fig 1.20; Frutiger Arabic;

fig 1.21; Frutiger;
  • A sans serif typeface in 1968.
  • Designed specifically for the newly built Charles de Gaulle International Airport in France.
  • Purpose:
    • “The goal of this new typeface was create a clean, distinctive and legible typeface that is easy to see from both close up and far away.  Extremely functional.”
  • Considerations/Limitations:
    • Letterforms needed to be recognized even in poor light conditions or when the reader was moving quickly past the sign. He tested with unfocused letters to see which letterforms could still be identified.​
Matthew Carter

fig 1.22; Verdana;
  • Son of Harry Carter.
  • Royal Designer for Industry.
  • Contemporary British type designer and ultimate craftsman. 
  • Trained as a punchcutter at Enschedé by Paul Rädisch.
  • Responsible for Crosfield’s typographic program in the early 1960s.
  • Mergenthaler Linotype’s house designer 1965–1981. ​
  • Many of Carter's fonts were created to address specific technical challenges
    • For example: Verdana (1996) for Microsoft​
  • Purpose:
    • The font was tuned to be extremely legible even at very small sizes on the screen due in part to the popularity of the internet and electronic devices.​
  • Considerations/limitations:
    • The Verdana fonts exhibit characteristics derived from the pixel rather than the pen, the brush or the chisel. Commonly confused characters, such as the lowercase "i, j, l".​
Edward Johnston

fig 1.23; Johnston Sans;

fig 1.24; Johnston Sans;
  • The creator of the hugely influential London “Underground” typeface, later come to be knows as “Johnston Sans” (1916). ​
  • Was asked to create a typeface with “bold simplicity” that was truly modern yet rooted in tradition. 
  • Johnston’s design, completed in 1916, combined classical Roman proportions with humanist warmth.​
  • Purpose:
    • London's Underground railway ordered a new typeface for its posters and signage from the calligrapher Edward Johnston. 
  • Consideration/limitation: 
    • "Johnston's remit was to unite the London Underground Group, the different companies all using the same rails and tunnels," "All the advertising, all the signage was all completely different - there was this cacophony of letters. Johnston applied the proportions of Roman capital letters to his typeface, so it was rooted in history, rooted in traditional calligraphy. But it has an elegance and a simplicity that absolutely fitted the modern age."​
General Process of Type Design:​

1. Research
  • When creating type, we should understand type history, type anatomy and type conventions.
  • We should also know terminologies, side-bearing, metrics, hinting, etc
  • It is important to determine the type’s purpose or what it would be used for, what different applications it will be used in such as whether the typeface is for school busses or airport signages, etc.​
  • We should also examine existing fonts that are presently being used for inspiration/ideas/reference/context/usage pattern/etc.​
2. Sketching​
  • Some designers sketch their typeface using the traditional tool set (brushes/ pens, ink and paper) then scan them for the purpose of digitization. 
  • They are more confident with their hands and have better control using it.​
  • Some designers sketch their typeface using digital tool sets, such as Wacom directly into a font design software (much quicker, persistent, and consistent) but this can sometimes impede the natural movement of hand strokes.​
  • Both methods have their positives and negatives.
3. Digitization​
  • Professional software that are used in the digitization of typefaces, amongst the leading software are: FontLab and Glyphs App. ​
  • There are designers that also use Adobe Illustrator to design or craft the letterforms and then introduce it into the specialized font apps. (However is frowned upon by the purist.​)
  • Attention should not only be given to the whole form at this stage but also to the counter form.
  • The readability of the typeface is heavily dependent on it.
4. Testing​
  • Testing is an important component in the design thinking process. 
  • The results of the testing is part of the process of refining and correcting aspects of the typeface. 
  • Prototyping is also part of the testing process and leads to important feedback.​
  • Depending on the typeface category (display type/text type) the readability and legibility of the the typeface becomes an important consideration.
  • However it is not as crucial if the typeface is a display type, where expression of the form takes a little more precedence. ​
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 doesn’t end upon deployment.​
  • The rigor of the testing is important in so that the teething issue remain minor. 

WEEK 5

Advanced Typography: Perception and Organization 

Perception
  • “The way in which something is regarded, understood, or interpreted”. 
  • In Typography deals with the visual navigation and interpretation of the reader via contrast, form and organization of the content. 
  • Content can be textual, visual, graphical or in the form of color. 
Contrast

fig 1.25; Contrast; 
  • To create distinction / differentiation between information
  • Hierarchy
  • Carl Dair 
    • On the other hand adds a two more principles into the mix; texture and direction
    • “To make design work and meaning pop out — clearly and unambiguously, and with flair.”
    • 7 kinds of contrast: size, weight, contrast of form, contrast of structure, contrast of texture, contrast of color and contrast of direction.​
  • Contrast / Weight​
    • Describes how bold type can stand out in the middle of lighter type of the same style. 
    • Other than using bold, using rules, spot, squares is also provide a “heavy area” for a powerful point of visual attraction or emphasis.
  • Contrast / Form
    • 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 under the contrast of form.
  • Contrast / Structure​
    • Different letterforms of different kinds of typefaces. 
    • For example, a monoline sans serif  and a traditional serif, or an italic and a blackletter.
  • Contrast / Texture​
    • By putting together the contrasts of size, weight, form, and structure, and applying them to a block of text on a page, you come to the contrast of texture. 
    • Refers to the way the lines of type look as a whole up close and from a distance. This depends partly on the letterforms themselves and partly on how they’re arranged. ​
  • ​Contrast / Direction​
    • Opposition between vertical and horizontal, and the angles in between. 
    • Turning one word on its side can have a dramatic effect on a layout. 
    • Text blocks also have their vertical or horizontal aspects of direction. 
    • Mixing wide blocks of long lines with tall columns of short line can also create a contrast.​
  • ​Contrast / Color​
    • Suggested that a second color is often less emphatic in values than plain black on white.
    • Therefore it is important to give thought to which element needs to be emphasized and to pay attention to the tonal values of the colors that are used.​
Form
  • Refers to the overall look and feel of the elements that make up the typographic composition. 
  • It is the part that plays a role in visual impact and first impressions. 
  • A good form in typography tends to be visually intriguing to the eye; it leads the eye from point to point, it entertains the mind and is most often memorable. ​
  • Originating from the Greek words “typos” (form) and “graphis” (writing), typography means to write in accordance with form. 
  • Typography can be seen as having two functions: ​
    • To represent a concept
    • To do so in a visual form.​
  • Displaying type as a form provides a sense of letterforms’ unique characteristics and abstract presentation.
  • 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 no longer reads as a letter because it has been manipulated by distortion, texture, enlargement, and has been extruded into a space.​
Organization / Gestalt.​

fig 1.26; Gestalt;
  • ​Gestalt is a German word meaning the way a thing has been “placed” or “put together”. 
  • Gestalt Psychology is an attempt to understand the laws behind the ability to acquire and maintain meaningful perceptions.​
  • The Gestalt psychologists, especially Max Wertheimer, developed a number of “laws” that predict how perceptual grouping occurs under a variety of circumstances (Wertheimer, 1923/1938). Technically, in sciences, laws are predictions that are true. 
  • In reality, these laws are better classified as principles​
  • ​Emphasizes that the whole of anything is greater than its parts—this is based on the idea that we experience things as unified whole: 
    • Instead of breaking down thoughts and behavior to their smallest elements, the gestalt psychologists believed that you must look at the whole of experience.​

  • The Law of Similarity 
    • Elements that are similar to each other tend to be perceived as a unified group. 
    • Similarity can refer to any number of features, including color, orientation, size, or indeed motion.​
  • The Law of Proximity 
    • Elements that are close together tend to be perceived as a unified group.
    • 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.
  • The Law of Closure 
    • Refers to the mind’s tendency to see complete figures or forms even if a picture is incomplete, partially hidden by other objects, or if part of the information needed to make a complete picture in our minds is missing​.
  • Law of (Good) Continuation 
    • Humans tend to perceive each of two or more objects as different, singular, and uninterrupted object even when they intersect. 
    • The alignment of the objects or forms plays a major role for this principle to take effect.
  • The Law of Symmetry​
  • Law of Praganz (Law of Simplicity)

INSTRUCTIONS

Task 1: Exercise 1 - Typographic Systems

We were told to do a design for each of the typographic system (Axial, Radial, Bilateral, Transitional, Random, Grid, Modular, Dilatational). The document size should be 200mm x 200mm, and we could use 3 colors, black, white and a color of our choice. And of course, the design should only contain minor graphical element. The information I have chosen is: 

fig 2.1; Information provided by Mr. Vinod; 

After watching the video recorded by Mr. Vinod that helps us refresh our memory on how to use InDesign, we start to get to work. Although I may not have much of an idea on how to do it yet, but I have done some of them in InDesign. 

fig 2.2; First attempt at Typographic Design; (7/4/22); 

I choose the color yellow since I think perhaps it would be a bit related to the punk theme and perhaps wouldn't look as common. After our lecturer provided wonderful feedbacks to my design I then start to edit it by a bit. 

fig 2.3; Second Attempt at Typographic Systems; (13/4/22)

The left one is Axial System, after much debate and thoughts, I decided to choose this one instead of the other that I have design. The second one, on the right is Grid System. I think that this looks okay and I didn't change much of it. 

Font used in Axial System:
Futura Std, (Book, Heavy)

Font used in Grid System:
ITC Garamond Std, (Bold condensed Italic, Light, Book Narrow)

fig 2.4; Second Attempt at Typographic Systems; (13/4/22)

The left one is Dilatational System while the right one is Radial System.

Font used in Dilatational System:
Futura Std, (Book); ITC Garamond Std, (Book, Bold Condensed)

Font used in Radial System:
Futura Std, (Heavy, Book)

fig 2.5; Second Attempt at Typographic Systems; (13/4/22)

The left one is Random system, and to be really honest, I'm really bad the random system since I do not know how to achieve both readability and well, random together. The right one Modular System. For this, my first attempt at it is very bad since I couldn't grasp the idea, but after I did, I feel like this is more modular for it. 

Font used in Random System:
ITC New Baskerville Std (Bold Italic, Bold)

Font used in Modular System:
Bodoni Std (Bold Italic, Bold, Regular)

fig 2.6; Second Attempt at Typographic Systems; (13/4/22)

The left one is Transitional System, and for this I'm very unsure as to if it works or not during the time I was doing it and I keep having doubts for it, since first of all it looks weird. The right one Bilateral System, and I know that it is not strictly bilateral, but multi-lateral instead, but it is acceptable and I think the title looks cool?

Font used in Transitional System:
Futura Std (Bold Condensed Oblique, Medium, Bold Italic, Regular)

Font used in Bilateral  System:
Adobe Caslon Pro (Semi bold); Futura (Heavy, Heavy Oblique)  

Final Task 1: Exercise 1 - Typography Systems

fig 2.7; Final Axial System; (14/4/2022)

fig 2.8; Final Grid System; (14/4/2022)


fig 2.9; Final Dilatational System; (14/4/2022)


fig 3.1; Final Radial System; (14/4/2022)

fig 3.2; Final Random System; (14/4/2022)

fig 3.3; Final Modular System; (14/4/2022)

fig 3.4; Final Transitional System; (14/4/2022)

fig 3.5; Final Bilateral System; (14/4/2022)

fig 3.6; Final Exercise 1: Typographic System - PDF (14/4/22)

fig 3.7; Final Exercise 1: Typographic System with grids - PDF (14/4/22)

Task 1: Exercise 2 - Type and Play

Part 1: Finding Type 

For this part of the exercise, we're required to look for a picture of any object, living or non-living and extract letter forms from the picture chosen. I have chosen a picture of butterfly.

fig 4.1; Butterfly by Joshua J. Cotten; sauce: (Unsplash)

fig 4.2; Extract Letter Forms; (13/4/22)

fig 4.3; Extracted Letters -  -  J, B, n, h, E, F, V; (13/4/22)

After choosing an image, I then extracted the letters from it using the pen tool from Adobe Illustrator. As shown above, (fig 4.5) I have extracted the letter J, B, n, h, E, F, V. After extracting, I then start to refine it. 

fig 4.4; Reference - Gloria Hallelujah; sauce: (Google Font

The above is what I have chosen as a reference. I chose a typeface that is sans serif since I don't think that using a serif typeface would look nice and suitable. After much browsing, I decided to use Gloria Hallelujah as my typeface reference. 

Attempts at Refining

fig 4.5; Chosen letterforms; (15/4/2022)

I have decide to go with the letters, "F, J, E, V" out of the other because I think it would be nice if I choose the uppercase letters instead of the lowercase ones, although I did tried to refine the letter "h" at first, I simply think that perhaps it would better to do this one instead. 

fig 4.6; 1st Attempt; (20/4/2022)

For the first attempt, I plan to refine it by not making it seem so ugly as the extracted letterforms it looks really ragged and uncomfortable to read if applied on a paragraph or something. So basically what I do here is just trying to resize and perhaps straighten it by a bit. 

fig 4.7; 2nd Attempt; (20/4/2022)

For the second attempt, I tried to adjust the anchor points by a bit to see if it would look okay and related to the butterfly picture that I have picked. From the picture, I have observe that the wings have some thick and thin lines, there's also a small tear part at the bottom left of the right wing, however I wasn't too sure where I should put it since I didn't trace that part out. I have attempted to put a bit of tear for the letter "F", but then it looks quite weird so I scrapped that idea and focus more on the thick and thin lines and the parts that stick out like letter "E".


fig 4.8; 3rd Attempt; (20/4/2022)

For the third attempt, I have tried to imitate some parts of the butterfly on to the letterforms and also shorten some strokes of the letters to make it less weird, however the letter "V" isn't really working and I'm not too sure as to how I should adjust it. I thought of making the strokes thinner and a bit roundish for the bottom edge of the "V" but it looks quite ugly and weird. 

fig 4.9; 4th Attempt; (22/4/2022)

For the 4th attempt, I tried to refine it even more by straightening some of the strokes and delete some of the anchor points so that some part of the letters won't look so ugly and messy. I have also readjust a lot on the letter "V". I have first thicken the strokes on the two side and then close it in by a bit so it won't look so wide. Then, I decide to leave out roundish bottom part of the "V" since it doesn't look right. 

Final Type and Play: Part 1 - Finding Type

 

fig 5.0; Final Type Design Refinement Progression; (25/4/2022)

fig 5.1; Final Type Design Refinement Comparison; (25/4/2022)

fig 5.2; Final Type Design; (25/4/2022)

fig 5.3; Final Type and Play: Part 1 - Finding Type in PDF; (25/4/2022)

Part 2: Type and Image

For this part of the exercise, we are to combine a visual with either a letter, word or sentence of our choice. The text must be woven into a symbiotic relationship with the image chosen. 

fig 5.4; Image Choice 1; sauce: (Unsplash); (27/4/2022)

I have this image as one of my choice since I think this image has quite a lot of space to let you do whatever you want and also the image itself looks quite nice and I like it. 

fig 5.5; Photoshop progression; (27/4/2022)

First of all, I insert the word into the image using the type tool. The typeface I used here Serifa Std. 

fig 5.6; Photoshop progression; (27/4/2022)

Since the effect I want to create is by making the word looks like it's implanted to the road. For that to work, I need to adjust the perspective. However, since I haven't really done this before, I tried using the transform-warp tool to do it. Though it doesn't turn out the way I wanted it to. It looks very very weird and also ugly. 

fig 5.7; Photoshop progression; (27/4/2022)

I then tried to do it using Vanishing Point. For this, I first select the word, copy the selection then invisible that layer, create a new layer and the select Vanishing Point under the Filter. 

fig 5.8; Photoshop progression; (27/4/2022)

For here, I need to use the create panel tool to create the blue panel thingy as shown above in fig 5.8, you will have to adjust the panel till it's blue.

fig 5.9; Photoshop progression; (27/4/2022)

After that, I pasted the selection that I have previously copied, and move it into the panel box that I created. At first, the selection will be super huge, so I have to adjust the size by using the transform tool on the left side. 

fig 6.0; Photoshop progression; (27/4/2022)

Next, I then tried to integrate the word with the image by using the blending options. The blending mode for this word is Linear Dodge. I also play around a bit for the fill opacity and the blend if part, to make it look better. The steps are almost the same for the words, "The" and "Way". Perhaps change a bit here and there. 

fig 6.1; Photoshop progression; (27/4/2022)

It looks okay after much exploring, however Mr. Vinod had told me that maybe I could crop a bit of the image on the building since it shows, not a lot but it shows. 

fig 6.2; Photoshop progression; (30/4/2022)

After cropping the building a little bit, it looks nice as it emphasize the word more. 

fig 6.3; 1st Attempt on Type and Image; (30/4/2022)

Font used:
Serifa Std, 65 Bold

Tools used:
Vanishing Point
Blending 

fig 6.4; Image choice 2; sauce: (Unsplash); (27/4/2022)

I have chosen this image for my second choice. Though it may not look as good as the first one, I thought I find this quite interesting but then again, when I was choosing this image, I do not know how I should proceed with this, considering that it looks quite dark and stuff, and well, I'm not creative enough. 

fig 6.5; Photoshop progression 2; (27/4/2022)

I first insert the words "Spotlight" letter by letter and proceed to change the colors randomly. Since I've planned to use the same blending method as I have done so in the 1st attempt, I didn't really pay much attention on the colors first. 

fig 6.6; Photoshop progression 2; (27/4/2022)

Although it isn't very obvious, I have applied both warp tool and vanishing point.

fig 6.7; Photoshop progression 2; (27/4/2022)

I then added a bit gaussian blur to it so it won't look so bland and solid. However, I think the effort for this is futile, sigh. 

fig 6.8; 2nd Attempt on Type and Image; (27/4/2022)

Font used:
Bodoni Std - Bold condensed, Poster Italic, Book.

Tools used: 
Vanishing Point
Warp 
Gaussian Blur
Blending 

Final Type and Play: Part 2 - Type and Image

fig 6.9; Final Type & Image - JPEG; (30/4/2022)

fig 7.0; Final Type & Image Before and After - JPEG; (27/4/2022)

fig 7.1; Final Type & Image - PDF; (30/4/2022)

FEEDBACKS

WEEK 2

General Feedbacks: The color of your choice should not be in pastel as it would be hard to see. The point size of the text should be 8pt to 12pt. When using letters and numbers together, the numbers would be at the same capital height with the letters, one can decrease the numbers' font size by 0.5pt, however this is only applies short text. Do not use too much of graphical elements. 

Specific Feedbacks: Leading in the Axial system needs to be adjusted, for the second axial system, it looks interesting, however it also needs to be adjusted. Bilateral is not... bilateral. Modular also needs to be adjusted as it is not obvious and cannot see how the unit works. Transitional and Radial works, however Random does not look random enough. Grid is fine as the headline looks nice, but there's non-objective element there. Dilatational also has some non-objective elements, though it is acceptable.

WEEK 3

General Feedbacks: Everyone should have a reference. 

Specific Feedbacks: The formation of the sides, whether they are straight or they go frayed, that could show. The extraction looks fine. The reference used should be something similar to optima. 

WEEK 4

General Feedbacks: Look out for the consistency of the stroke.

Specific Feedbacks: The letter "V" is not working. One of the the parts of "E" is too prominent, the rounded edges is a bit too much as some part of the butterfly isn't really rounded, and has a bit flattage, unevenness there, it tends to be more edgy than rounded.

WEEK 5

General Feedbacks: You can adapt the word to the image, and you should also observe more and pay attention to the details of the image, texture, color, styles, etc. 

Specific Feedbacks: The first attempt is good, the addition of the texture had helped, however maybe you can crop a little of the image since it shows the building, not a lot though. The second attempt... nah. 

REFLECTIONS

Experience: I think the first exercise is really quite challenging for me, since first of all, my dumbo brain couldn't come up with at least 8 designs for the 8 systems in one week. However, even so, I find myself quite enjoying the exercise. Not only was I able to learn how to "re-use" InDesign but I have also learn the systems and how to use them. Though, of course I couldn't say that I'm an expert in it, but I would like to think that at least I have improved compare to the last time and to me, that's at least some progression! 

For part 1 of exercise two, I personally think it's really fun considering how we were attempting to make new typeface by tracing objects that exist in the world. And there's so many objects and stuff in the world you just don't know what to choose from. Plus, I now know how sometimes designers create their own typeface for their own logo/brand/movie/games/etc. While the first part of it is nice and fun, I find the second part of the exercise a bit stressful considering it's been awhile since I used Photoshop, plus I do not know exactly what to do to make the outcome looks great, however I think I manage to pull it off by researching a lot on YouTube and other sources. 

Observations: I observe that sometimes working under pressure helps, though it's not a good thing because I'm also a slow worker and that I get stress more easily and starts to procrastinate. However, I think that the pressure would help in some ways. I also found out that I am more efficient when working with someone, as in not in a same group but just working with friends. I had some help from my friend Jo Min, and I am definitely grateful for it. I hope I would be able to help her too in the future projects and assignments. 

Findings: I realized that by continuously browsing through numerous sources like Pinterest, YouTube, Xiao Hong Shu, Students' work or maybe some books or whatnot helped me a lot in developing ideas. 

FURTHER READINGS

fig 7.2; Typographic Systems by Kimberly Elam; 

The above is a book talking about the typographic systems entitled, "Typographic Systems of Design: Frameworks for Type Beyond the Grid" by Kimberly Elam. The book is very easy to understand as it is quite straightforward when explaining the typographic systems. 

fig 7.3; Circle and Composition PG12; Provided by Mr. Vinod;
  • The Circle and Composition
    • The circle is a wildcard elements, which means it can be used anywhere in the composition.
    • The circle gives the designer a tool to guide the eye, create a pivot point, tension and emphasis, or contribute to visual organization or balance. 
    • The placement of the circle can dramatically change the composition.
    • Squeezing the circle between lines of text can create tension.
    • Close proximity to a line or word can create emphasis.
    • Aligning the circle with lines give a sense of organization.
fig 7.4; Nonobjective Elements PG14; Provided by Mr. Vinod;
  • Using Nonobjective elements sharpens and articulates the composition
  • Enhance the functions of emphasis, organization, and balance.
  • Become functional guides when used with typography and communicate the message more clearly by enhancing a hierarchical order and directing the viewer's eye. 
  • Strengthen a message by communicating a sense of organization and direction
    • Rule Series
      • Can both organize and emphasize a message.
      • Create a rhythm and guide the eye downward when there is a change in weight.
      • Creates a strong diagonal when altering the length of the rules.
      • Creates a hierarchy by guiding the eye to the largest volume of black.
    • Circle Series
      • Can act as a nonobjective pivot point or as an element that creates hierarchy.
      • The circle draws the eye to a single word, making the word to be the first read in the composition.
    • Tone Series
      • Can dramatically alter the hierarchy of a message.
      • The eye is drawn to the largest volume of black on a while background or vice versa.
      • Words or portions of the words can be emphasized, giving the message a sense of visual punctuation.

Comments

Popular posts from this blog

Major Project // Final Submission

Game Development // Task 1: Game Proposal

Design Principle: Project 2