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:
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)
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.
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
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
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.
- 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
Post a Comment