Week 5 - Week 9 : 25 Apr 2022 - 23 May 2022
Tan Yi Yun 0345559Bachelor of Design (Hons) in Creative Media
Task 2
LECTURE
Lecture 1-3 were jotted down at
Task 1 / Exercises
Week 6
Designing Type
2 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.
Frutiger
-Frutiger is a sans serif typeface designed by the Swiss type
designer Adrian Frutiger in 1968 specifically for the newly built
Charles de Gaulle International Airport in France.
-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.
- 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.
|
| Figure 1.1, Example of Frutinger in use in an airport, Week 6 (2/5/2022) |
Verdana
- Designed by Matthew Carter.
- Many of Carter's fonts were created to address specific technical
challenges, for example those posed by early computers.
- 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.
|
| Figure 1.2, Georgia and Verdana, Week 6 (2/5/2022) |
Web designers hated him because Georgia (top/right) and Verdana (bottom/left) were among the few fonts they could use.
Inktraps
|
| Figure 1.3, On screen (left), Printed (right), Week 6 (2/5/2022) |
In 1976, AT&T commissioned the design of a new typeface whose sole
purpose would be for use in their telephone directories. The design had to
solve multiple technical and visual problems related with the existing
phonebook typeface, Bell Gothic. The solution, named in honour of the
company's 100th anniversary, was Bell Centennial.
Underground Sans/Johnston Sans
|
|
|
- Edward Johnston is the creator of the hugely influential London
“Underground” typeface, which would later come to be knows as “Johnston
Sans” (1916).
- a typeface with “bold simplicity” that was truly modern yet rooted
in
- 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. He handed over
details and examples of letter shapes that would set the tone for printed
text until the present day.
- 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."
|
||
|
- His former student was perhaps driven by the guilt of seeing the
success of his own typeface, Gill Sans, which he admitted had been
heavily based on Johnston’s work.
Type Design
General Process of Type Design:
1. Research
2. Sketching
3. Digitization
4. Testing
5. Deploy
Research
- When creating type, we should understand type history, type anatomy and
type conventions. - We should also know terminologies, side-bearing,
metrics, hinting…
- 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.
Sketching
- Some 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.
Digitization
- There are 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.
This 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.
Testing
- 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 typ) 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.
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. Thus, the task of revision doesn’t end upon deployment.
- The rigour of the testing is important in so that the teething issue
remain minor.
Typeface Construction
|
|
|
Roman Capital: The grid consists of a square, and inside it a circle
that just touches the lines of the square in four places. Within the
square, there is also a rectangle. This rectangle is three quarters the
size of the square and is positioned in the centre of the square.
Thus, using grids (with circular forms) can facilitate the construction
of a letterforms and is a possible method to build/create/design your
letterform.
Construction and considerations:
|
| Figure 1.7, Classification according to form and construction, Week 6 (2/5/2022) |
- Depending on their form and construction, the 26 characters of the
alphabet can be arranged into groups, whereby a distinction is made
between a group for the capitals and a group for lowercase letters.
- Many different forms and constructions must be taken into account when
designing a new type. An important visual correction is the extrusion of
curved (and protruding) forms past the baseline and cap line. This also
applies to vertical alignment between curved and straight forms.
- A visual correction is also needed for the distance between letters.
It is not possible to simply place letters next to each other with equal
spacing between them. The letters must be altered to a uniform ‘visual’
white space. This means that the white space between the letters should
appear the same. This is called ‘fitting’ the type.
|
| Figure 1.8, Letter 'c' and 'e', Week 6 (2/5/2022) |
- Most typefaces come about due to a need or demand. The
need/motivation can be intrinsic and extrinsic.
- Intrinsic : the designer has an inexplicable need driven by interest
to design a typeface, and seeks out a form that comes close to
fulfilling a desire. It is also possible that the designer identifies
a gap/problem and thus endeavors to solve it through the design of the
typeface.
- Extrinsic : the designer has been commissioned or the
student-designer has a task to complete that involves designing a
typeface.
"Designing a typeface is a labour of love. Only the brave and foolish
walk this path for the reward pale in comparison to the work."
Week 7
Perception and Organisation
Perception is “the way in which something is regarded, understood, or
interpreted”. So, is perception what you see—and therefore understand—or
what you are manipulated into seeing and understanding?
Perception in typography deals with the visual navigation and
interpretation of the reader via contrast, form and organisation of the
content. Content can be textual, visual, graphical or in the form of
colour. However our focus today is in typography.
Contrast
|
|
|
These are self-explanatory contrast devised by Rudi Ruegg.
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.” via the use of contrast in
typography.
Dair posits 7 kinds of contrast (most of which has already been covered
by Rudi Reugg albeit using different terms): 1. Size, 2. weight, 3.
contrast of form, 4. contrast of structure, 5. contrast of texture, 6.
contrast of colour and 7. contrast of direction.
Contrast / Size
|
|
|
A contrast of size provides a point to which the reader’s attention is
drawn. For example if you have a big letter and a small letter you
will obviously see the big letter first before the small. The most
common use of size is in making a title or heading noticeably bigger
than the body text.
Contrast / Weight
|
|
|
Weight describes how bold type can stand out in the middle of lighter
type of the same style. Other than then using bold, using rules, spot,
squares is also provide a “heavy area” for a powerful point of visual
attraction or emphasis, therefore not only types of varying weight.
Contrast / Form
|
||
|
Contrast of form is the 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
|
||
|
Structure means the 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. 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
|
|||
|
Contrast of direction is the 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 / Colour
|
|||
|
The use of color is 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
|
|||
|
For 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.
|
| Figure 3.1, Attractive combination of form, Week 7 (9/5/2022) |
Organisation / 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.
Gestalt theory 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.
Therefore in design (read: typographic layouts), the components/
elements that make up the design is only as good as its overall visual
form. While each component may be functional at an elemental level, the
sum of its parts is not greater than the whole or the overall form.
|
|
Figure 3.2, Gestalt, Week 7 (9/5/2022) |
The Law of Similarity : gestalt grouping law that states that
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 : gestalt grouping law that states
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 : holds that 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. For
more.
Organisation of information in the form of laying out complex content in a
hierarchical manner requires practice and the knowledge gained herein but
also elsewhere. Knowledge obtained from reading, listening and viewing
must be exercised or put to use for it to be retained and of
standard.
INSTRUCTIONS
TASK 2 (A) : Key Artwork
What is a Key Artwork? In the context of this task, the key artwork behaves
like a logo, but is also used as an artwork, adorned on a poster
(collateral) or disassembled into constituent shapes to form vibrant
patterns that continue to maintain its visual identity and relationship with
the key artwork from which it is derived from. It is the artwork which is repeated across media such as posters, print,
television and digital advertisements, streaming or download thumbnails, and
game or film DVD/Blu-Ray box covers
For this task, we are to use the initial letters of our name or our full
name. Explore and compose as many permutations and combinations of these
initials. The final key artwork must be an elegant solution, not complicated
or confusing that leads to a functional and communicable key artwork. This
key artwork will subsequently be used in Task(B) on various
collateral.
Inspiration
Here are some good examples provided by Mr. Vinod.
|
| Figure 2.1, Paula Scher's designs, Week 6 (3/5/2022) |
|
| Figure 2.2, Paula Scher's designs, Week 6 (3/5/2022) |
Here are some inspirations of the monograms/letter designs found in
Pinterest.
|
|
Figure 2.3, My inspirations, Week 6 (3/5/2022) |
Sketches
Have yet to decide the direction.
Curve or straight?
Thin or bold?
Round or sharp?
Or combination of both characteristics? since I'm such a paradoxical
human.
|
| Figure 2.4, Brainstorming #1, Week 6 (4/5/2022) |
|
|
|
|
|
|
|
|
|
After receiving feedback, I decided to picked the second design as my key
artwork. I experimented with various strokes.
|
|
|
|
|
Figure 2.9, #2 Flat edge, Week 7 (12/5/2022) |
|
|
|
I first added gradient in AI and converted the file into PSD to add 3D
effect on it.
After that, it was time to experiment and play with different blending
options.
|
|
|
|
|
|
|
|
|
|
|
Figure 3.5, Key Artwork (Light Version), Week 7 (15/5/2022) |
.jpg)
|
|
Figure 3.6, Key Artwork (Dark Version), Week 7 (15/5/2022) |
TASK 2 (B) : Collateral
We are tasked to design an A4 poster design, an animated invite and a
collateral using the key artwork we have developed from Task
2(A).
Poster info :
- Title
- Venue
- Website
- Date and Time
Initially I used Adobe Illustrator to tryout with different compositions.
Thing just doesn't feel right.
|
|
|
I straightaway worked in Adobe Photoshop because I am more familiar with
this software compared to Adobe Illustrator. I decided to go for dark
mode.
|
|
Figure 3.8, Compositions, Week 7 (15/5/2022) |
After receiving feedback, I cropped the key artwork and rearranged the information. I removed the dots from the background because it did not seem to be related to my key artwork. Figure 3.9 showed the revised poster. However, the title looks awkward at that position.
|
|
|
The title is edited using wrap tool.
|
||
|
|
|
|
Collateral
First try - Tote bag design
Second try - Ticket design
The collaterals are designed using Adobe Photoshop.
|
|
|
|
|
|
|
|
|
|
|
|
Animated Invite
The animated invite should be simple and interesting. The initial
approach was to animate bouncing balls that contains information. It was
fun to animate the bouncing balls. However, it didn't seem to be related
to my key artwork.
|
|
|
Figure 4.7, First tryout - Animated invite, Week 9
(15/5/2022) |
|
|
Figure 4.8, Bouncing balls, Week 9 (15/5/2022) |
I decided to remove the bouncing ball effect, and replaced with the swipe effect.
.gif)
Animated GIF, Week 11 (6/6/2022)
Final Submission - Key Artwork
|
|
|
|
|
|
.jpg)
|
|
|
|
|
|
|
|
Figure 5.4, Final poster mockup, Week 11 (6/6/2022)
Final Submission - Collateral
Figure 5.5, Collateral - ticket, Week 11 (6/6/2022)
Figure 5.6, Ticket mockup, Week 11 (6/6/2022)
Final Submission - Animated GIF
|
.gif)
Final animated GIF, Week 11 (6/6/2022)
PDF Submission, Week 11 (6/6/2022)
FEEDBACK
Week 7 :
General Feedback
The key art you are creating would be developed into a logo,
but it can also function like an artwork. Mr. Vinod suggested
us to think about your alternative occupation (if you are not
a designer) before designing the key artwork. Design is always
about the "form". Movement, flow, stroke, negative and
positive, these are the elements that we should consider when
constructing a key artwork.
Specific Feedback
The second design (partially finalised key artwork) caught Mr. Vinod's attention. He said that I can work more on the
type of stroke. The form has potential. Explore from there and
experiment with the stroke variations. The fourth design is too complex
and the form is very different from each other. "Conflicting stroke" he
said. Although that was my intention to put "conflicting stroke"
together, seems like it doesn't work out well. Might need a little bit
more work if I were to go for this design. The third design has the same
problem. They don't really "well-formed" and the form is not stable
because of the descender of 'y'. The first and the second design are
quite cool, specifically the second one.
Week 8 :
Independent learning week.
Week 9 :
General Feedback
Make use the identity of your key artwork.
Specific Feedback
Integration can be a lot better. The dots in the background has no relationship. Mr. Vinod suggested to add
semi outlines of my key artwork (ripple effect). It isn't necessary to
show the entire key artwork in the poster. Make it visible as little
as possible. Crop in a interesting way and paste information in the
negative space.
Week 12 :
Specific Feedback
Valiant effort. Use of black can be a double-edged sword. KA is decent.
REFLECTION
Experience
This is an unforgettable experience because this is the first time I dragged the overall progress so much due to a group competition happening at the same time. Although I think I could cramp everything in one/two nights to finish before the expected deadline, I realized my health started to going downhill. I decided to take the *special offer* by Mr. Vinod to extend my deadline and took a good rest (finally a day with 8 hours sleep) before continuing the rest of this project. Anyhow, I am glad that I still managed to complete it within a week. General speaking, the experience for this task wasn't too bad but I am a bit worried for the next task.
Observation
I observed that most of the students struggled in the beginning of the task, which is to create an key artwork. It is not just a logo, but it also stands as an artwork by itself. I also observed that the most important thing to take note is the consistency of style. For example, the poster design should be relevant to the key artwork. Avoid adding unnecessary/irrelevant elements.
Findings
I found that using the initials of our name to create key artwork is not an easy task. Most of the designers might use to design for others, but seldom for themselves. It is a challenging task to bring up our own identity through the key artwork.
In terms of the technicality, the mockup posters and tickets are satisfying for me. Once the poster design is finalized, things become easier to manage. Animated invite is also a challenging task when sound is not included. It is easy to get bored if the invite is too long or the information is too heavy.
FURTHER READING
Typographic Basics
Font categories
Most of the references subdivide the font into 2 major categories : serif and sans serif.1) Serif
2) Sans Serif
Typographic Basics
by David Creamer
 | |
|
Most of the references subdivide the font into 2 major categories : serif and sans serif.
1) Serif
- Most common text or body font.
- Works nicely for headline as well
- Considered the easiest font to read and come in 3 subcategories : Oldstyle, Modern, and Square Serif.
- Oldstyle : based on classical Roman inscriptions, letters are very open, wide and round with pointed serifs and a pleasing contrast
- Modern : based on font designed over 200 years ago (not modern at all lol), have greater degree of mechanical perfection than Oldstyle fonts, and a greater distinction between the heavy/light strokes and thin/squared off serifs.
- Square serif : contemporary style used mainly for small amounts of text, such as advertising copy, subheads and headlines, mostly uniform strokes with little contrast.
2) Sans Serif
- little contrast
- can evoke more modern look for a report, but can be harder to read than Serif fonts
- generally used for small amounts of copy, subheads and headlines
3) Display
- designed to be used as attention-getting headline
- rarely used a body copy fonts
4) Script
- designed to mimic handwriting
- more traditional type used for formal invitations
- should never use in all capital letters
5) Text
- based on the hand-drawn letters made by early monks for religious books
- have an "Old-World" feel to them
- mostly used for certificates, diplomas, and invitations
- should never use in all capital letters
6) Mono-spaced
- typewriter-style fonts, take up same amount of space regardless of the actual letter.
7) Dingbats
- symbols that are small pieces of art used to enhance the design of the text or page
- while Zapf Dingbats and Wingdings are the most common dingbats, there are hundreds, if not thousands, of different designs available.
Figure 5.8, Dingbats, Week 12 (19/6/2022)
