Advanced Typography Task 1: Typographic systems & Type & Play

September 23, 2024

Advanced Typography Task 1: Typographic systems & Type & Play

27 April 2024- 3 July 2024

NABIL JULIUS DORN (037978)

(Advanced Typography) | Bachelor of Design in Creative Media | Taylor's University

Task 1: Typographic systems & Type & Play

Week 1 - Week 4

List

LECTURES

Week 1:

Advanced Typography: Typographic Systems

There are 8 major variations according to Elam, 2007:

Axial
Radial
Dilatational
Random
Grid
Modular
Transitional
Bilateral

Typographical organization is complex because it is dependent on additional criteria, such as hierarchy, order of reading, legibility, and contrast in order to function.

The typographical systems that have been made until now can be seen as a guideline for designers to use. Using this guideline as a set of rules, it allows learners to explore while their intuition develops as a designer.

1. Axial System

In the Axial system, elements are organized left or right of a single axis. This axis does not need to be a straight line.

Example:

Fig 1.1.1 Axial System, week 1 (24/9/24)

Fig 1.1.2 Axial System, week 1 (24/9/24)

2. Radial System

In the Radial system, all elements are extended from a point of focus or intersection. It can also be either one or multiple points of focus.

Example:

Fig 1.1.3 Radial system, week 1 (24/9/24)

Fig 1.1.4 Radial System multiple points, week 1 (24/9/24)

3. Dilatational System

In the dilatational system, all elements expand from a central point in a circular fashion. Multiple rings with information on either side and usage of hierarchy can also be done.

Example:

Fig 1.1.5 Dilatational system, week 1 (24/9/24)

Fig 1.1.6 Dilatational system multiple central points, week 1 (24/9/24)

4. Random System

Elements in the random system appear to have no specific pattern or relationship. However, there is a proper method to do so.

Example:

Fig 1.1.7 Random system, week 1 (24/9/24)

Fig 1.1.8 Random system, week 1 (24/9/24)

5. Grid System

The grid system is the most used system with horizontal and vertical divisions.

Example:

Fig 1.1.9 Grid system, week 1 (24/9/24)

Fig 1.1.10 Grid system, week 1 (24/9/24)

6. Transitional System

The transitional system is an informal system of layer banding. Information is segregated into different bands.

Example:

Fig 1.1.11 Transitional system, week 1 (24/9/24)

Fig 1.1.12 Transitional system, week 1 (24/9/24)

7. Modular System

The modular system is a series of non-objective elements that are constructed in as a standardized units. This allows you to move around the different units and still make it cohesive.

Example:

Fig 1.1.13 Modular system, week 1 (24/9/24)

Fig 1.1.14 Modular system, week 1 (24/9/24)

8. Bilateral System

All texts are arranged symmetrically on a single axis

Example:

Fig 1.1.15 Bilateral system, week 1 (24/9/24)

Fig 1.1.16 Bilateral system, week 1 (24/9/24)

Adobe InDesign shortcuts:

Soft line break: Shift + Enter

Presentation mode: Shift + W

Week 2:

Advanced Typography: Typographic Composition

Typography can be broken down into two aspects. The creation of letterforms and the arrangement of large amounts of texts in a given space.

Principles of Design Composition:

Emphasis, isolation, repetition, balance (symmetry/asymmetry), alignment, perspective, rhythm, contrast.

Emphasis:

Fig 1.2.1 Emphasis , week 2 (1/10/24)

Rule of thirds:

Fig 1.2.2 Rule of thirds, week 2 (1/10/24)

A photographic guide to composition. The intersecting lines form points of interest that become the focal point of the layout. Realistically no one would use this as there are better options.

Typographic systems

From the 8 systems taught in lecture 1, the Grid system is the most pragmatic and used which is derived from the compositional structure of Letter Press printing.

It then evolved into what is now known as the Swiss (Modernist) style of Typography. While the grid system may seem old, the versatile nature of this system tends to allow more adaptations.

Fig 1.2.3 Grid system, week 2 (1/10/24)

In reaction to the seemingly linear and ordered approach to Typography of the modernist era, a group began to challenge this notion of order. Thus created the post-modernist era in Typographical systems where chaos, randomness and asymmetry were explored. Legibility and readability became secondary however the best examples seem to combine the two seamlessly.

There was a method to their madness. Order was replaced with apparent chaos, which was exciting and 'new' for a generation exposed to the Punk lifestyle. As such the asymmetry, random, repetition, dilatational and radial systems began to take root in the lexicon of the designer.

Fig 1.2.4 Example of post-modern typography, week 2 (1/10/24)

Environmental Grid

Based on the exploration of an existing structure or numerous structures combined

Fig 1.2.5 Environmental grid, week 2 (1/10/24)

Form and Movement:

Based on the exploration of on existing Grid System. The placement of a form on a page over many pages creates movement. The form could represent images, text or color.

Fig 1.2.6 Example of form and movement, week 2 (1/10/24)

Fig 1.2.7, week 2 (1/10/24)

Fig 1.2.8, week 2 (1/10/24)

Fig 1.2.9, week 2 (1/10/24)

Fig 1.2.10 Steps of the form & movement system, week 2 (1/10/24)

Week 3:

Advanced Typography: Context and Creativity

The first mechanically produced letterforms were designed to directly imitate handwriting. This would be the basis for form, spacing and conventions, for mechanical type to try and mimic

Fig 1.3.1 Evolution of the Latin Alphabet, week 3 (8/10/24)

Cuneiform

This is the earliest system of writing and was used in a number of languages between 34BC and the 1st Century.

Fig 1.3.2 Cuneiform, week 3 (8/10/24)

The earliest system of writing, was written from left to right and evolved from pictograms.

Hieroglyphs

This writing system from the Egyptians, fused with the art of relief carving. This mixed both rebus and phonetic characters. Hieroglyphs can be used in three 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

Fig 1.3.3 Hieroglyphs, week 3 (8/10/24)

Fig 1.3.4 Hieroglyphs, week 3 (8/10/24)

Fig 1.3.5 Evolution of letterforms, week 3 (8/10/24)

Early Greek / 5th C. B.C.E.

Built on the Egyptian logo-consonantal system, the Phoenicians developed a phonetic alphabet consisting of 22 letters. These early Greek letters were drawn freehand, not constructed with compasses and rule, and they had no serifs. With time, the strokes of these letters grew thicker, the aperture lessened and serifs appeared.

Roman Uncials

By the 4th Century, Roman letters became more rounded. The curved form allowed for fewer strokes and could be written faster.

English Half Uncials, 8th C.

In England the uncial evolved into a more slanted and condensed form.

Carolingian Minuscule

Language was standardized. Pronunciation and spelling as well as writing conventions; capitals at the start of the sentence, spaces between words and punctuation. It was this style that became the pattern for the Humanistic writing for the fifteenth century; the latter, in turn was the basis of our lower-case roman type.

Black Letter 12-15 C. CE.

Gothic was the culminating artistic expression of the middle ages. It had evenly spaced vertical dominant lines, pointed arches, and an almond shape. It consisted of condensed line spacing and letter spacing which reduced the amount of costly materials in book production.

The Italian Renaissance

The Humanist admired the Carolingian script, which had clear open handwriting. They then 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.

Printing (carved wood block) had already been practiced in China, Korea and Japan. The introduction of moveable type was innovation was pioneered in China but achieved in Korea. The Koreans established a foundry to cast movable type in bronze.

Fig 1.3.6 Evolution of Middle Eastern Alphabets and Chinese Script, week 3 (8/10/24)

Indus Valley Civilization (IVC) 3500 - 2000 BCE.

As of right now still undeciphered and seems to have been somewhat logo-syllabic in nature.

Fig 1.3.7 Oldest writing found in the 'Indian' subcontinent, week 3 (8/10/24)

Brahmi script 450 - 350 BCE.

The earliest writing system developed in India after the Indus script. It is one of the most influential writing systems; all modern Indian scripts and several hundred scripts found in Southeast and East Asia are derived from Brahmi

Fig 1.3.8 The Brahmi script (450-350 BCE), week 3 (8/10/24)

Handwriting

The oldest writing system in SEA were Indian scripts, most notably Pallava; a South Indian script originally used for writing Sanskrit and Tamil, later becoming the basis for writing systems all across SEA. This however wasn't the only Indian script. Pra-nagari, which was also an early form of Nagari, was used in India for writing Sanskrit

Fig 1.3.9 Pra-nagari, n.d, week 3 (8/10/24)

For Nusantara, there was Kawi; Indonesia's most important historical script. It was based on Nagari, but indigenous to Java.

The word Kawi comes from the Sanskrit term, kavya, meaning poet. This script system was also used for contact with other kingdoms because it was so widespread. So much so that it became the basis of other scripts in both Indonesia and Philippines.

This means that ancient kingdoms in the Malay Peninsula would have been using both Indian scripts and Kawi to write old Malay language.

Fig 1.3.10 Lagna Copperplate Inscription, week 3 (8/10/24)

Fig 1.3.11 Incung, a South Sumatran grouping of scripts known as Rencong. n.d, week 3 (8/10/24)

Fig 1.3.12 Rejang script related to the Rencong grouping, week 3 (8/10/24)

Fig 1.3.13 Lantara, a Bugis script, week 3 (8/10/24)

Fig 1.3.14 Javanese script, week 3 (8/10/24)

In modern Malaysia, Jawi is of greater importance because its the script used for all our famous works of literature. Unlike Indonesia, we dont have a huge wealth of pre-Jawi inscriptions and writings.

All systems of writing have some form of influence. History gives us context, and helps designers with the opportunity to design and research to communicate and understand better, our collective heritage.

Fig 1.3.15 Manuscript from the 19th Century, week 3 (8/10/24)

Why is handwriting important in the study of type/typography?

We study handwriting because the first mechanically produced letterforms were designed to directly imitate handwriting. Handwriting would become the basis for the mechanical type to try and mimic.

For decades, Asea has neglected much of its written heritage by adapting western printing technologies. This made it difficult to create many of the old text in printed form, because it would take know-how, much time, effort and money.

However, with a mild renaissance in the East, the advent of computer programmers in large numbers, we are starting to see the proliferation of indigenous scripts on phones, tablets and computers.

Programmers and Type Design

More vernacular scripts are being produced by software giants (Google): in their employment, a great many Asian programmers and designers. More vernacular and "multi-script" typefaces - a term coined by Muthu Nedumaran - are being produced to cater to situations where the written matter is communicated in the vernacular script or vernacular and Latin scripts.

Fig 1.3.16 Baloo by Ek Type, n.d., week 3 (8/10/24)

Week 4:

Advanced Typography: Designing Type

Why design another typeface?

Type design carries a social responsibility so one must continue to improve its legibility
Type design is a form of artistic expression

Prominent historical typefaces

Frutinger

Designed by Adrian Frutinger in the 1968 - a renowned twentieth century Swiss graphic designer, also well known for creating "Univers". He is also known for designing the new Devangari font modern typesetting and printing at the request of the Indian Design Institute.

Fig 1.4.1 Example of Frutinger, week 4 (15/10/24)

Purpose:

Create a clean, distinctive, and legible typeface thats easy to see from both close up and far away; extremely functional.

Considerations / Limitations:

Letterforms needed to be recognised 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 indentified

Fig 1.4.2 Univers by Adobe Illustrator

Fig 1.4.3 Adrian Frutiger at the National Institute of Design, week 4 (15/10/24)

Mathew Carter

The son of Harry Carter, Royal Designer for Industry, contemporary British type designer and ultimate craftsman. Carter trained as a punchcutter at Enchede by Paul Radisch, responsible for Crosfield's typographic program in the early 1960s.

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 Veranda font exhibit characteristics derived from the pixel rather than the pen, the brush or the chisel. Commonly confused characters, such as lowercase i j l.

Fig 1.4.4 Georgia and Veranda, week 4 (15/10/24)

Fig 1.4.5 Comparison vs printed, week 4 (15/10/24)

Edward Johnston

The creator of the hugely influencial London "Underground" typeface, which would later come to be known as "Johnston Sans" (1916).

He created a typeface with "bold simplicity" that was truly modern yet rooted in tradition. His design completed in 1916, combined with 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 / Limitations:

"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."

Fig 1.4.6 Trajan's column, week 4 (15/10/24)

Fig 1.4.7 London underground exit sign, week 4 (15/10/24)

General process of type design:

Research
Sketching
Digitization
Testing
Deploy

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 then 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.

Fig 1.4.8 Traps used more as a design flair, week 4 (15/10/24)

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.

Fig 1.4.9 Sketch of Johnston Sans, week 4 (15/10/24)

3. 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.

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 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.

Fig 1.4.10 Prototype stencil by Vinod J. Nair, week 4 (15/10/24)

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. Thus, the task of revision doesn’t end upon deployment.

The rigor of the testing is important in so that the teething issue remain minor.

Fig 1.4.11 Number plate typeface designed by Vinod J. Nair, week 4 (15/10/24)

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 center 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.

Fig 1.4.12 Construction grid for the Roman Capitals, week 4 (15/10/24)

Construction and considerations:

Fig 1.4.13, week 4 (15/10/24)

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.

Most typefaces come about due to a need or demand. The need/motivation can be intrinsic and extrinsic.

Intrinsic can be best summed up this way, 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 can be summed up in this way the designer has been commissioned or the student-designer has a task to complete that involves designing a typeface.

For a design to be successful the designer needs to be invested in the idea and understand the requirement/limitations/use/stakeholder.

Designing a typeface is a labor of love. Only the brave and foolish walk this path for the reward pale in comparison to the work.

INSTRUCTIONS

This is the Module Information Booklet for this module:

TASK 1

Part 1: Typographic Systems

In the first task, we are required to explore the 8 typographic systems taught in first lecture using the following content:

The Design School,

Taylor's University

All Ripped Up: Punk Influences on Design

Open Public Lectures:

June 24, 2021

Lew Pik Svonn, 9AM-10AM

Ezrena Mohd., 10AM-11AM

Suzy Sulaiman, 11AM-12PM

June 25, 2021

Lim Whay Yin, 9AM-10AM

Fahmi Reza, 10AM-11AM

Manish Acharia, 11AM-12PM

Lecture Theatre 12

I then proceeded to find more examples of the different systems as well as punk influence in design,

Fig 2.1 Examples of typographic systems, week 1 (24/9/24)

Fig 2.2 Examples of punk posters, week 1 (24/9/24)

Punk's influence in design has embraced a rebellious, anti-establishment aesthetic. It broke away from traditional design rules, favoring DIY, chaotic and raw visuals. This also included hand-drawn elements, mismatched typefaces and cut-paste collage styles which mirrored punk's gritty, underground culture.

Typography used was mostly bold, distorted and aggressive which reflects the music's loud and confrontational nature. This design approach rejected commercial polish and instead embraced imperfection.

Fig 2.3 Gig poster, week 1 (24/9/24)

After researching on the different typographic systems and examples of punk gig posters, I noticed their preference to either the random or grid systems as these allows them to be chaotic yet cohesive in design, staying true to the music.

I decided to follow this (fig 2.3) color scheme of black, green and white as the color palettes for the following exploration designs.

1. Axial

Fig 2.4 Axial system sketch, week 1 (24/9/24)

< Week 2 Feedback 1/10/24 >

The right one is good but the texts need to align to the axis.

After feedback from Mr Vinod, I decided to redesign the axial system. He also stated that there should only be one complementary color to black.

Fig 2.4.2 Reworked axial system design, week 2 (1/10/24)

2. Radial

Fig 2.5 Radial system sketch, week 1 (24/9/24)

3. Dilatational

Fig 2.6 Dilatational system sketch, week 1 (24/9/24)

< Week 2 Feedback 1/10/24 >

Left one is too plain, middle design elements are too distracting, right texts aren't cohesive. Need to rework this system.

Here is the reworked design:

Fig 2.6.2 Reworked dilatational system design, week 2 (1/10/24)

4. Random

Fig 2.7 Random system sketch, week 1 (24/9/24)

5. Grid

Fig 2.8 Grid system sketch, week 1 (24/9/24)

< Week 2 Feedback 1/10/24 >

Left one is good but right one needs to work on alignment.

After the feedback received, I decided to rework the design and focus more on alignment. I also used ChatGPT to find out more about what makes a grid system good and what alignment meant in this context.

Here is what they said:

Fig 2.8.2 Chatgpt's wisdom, week 2 (1/10/24)

Following this, here is the reworked design:

Fig 2.8.3 Reworked grid system design, week 2 (1/10/24)

6. Modular

Fig 2.9 Modular system sketch, week 1 (24/9/24)

7. Transitional

Fig 2.10 Transitional system sketch, week 1 (24/9/24)

< Week 2 Feedback 1/10/24 >

Right one is good. Regarding the left one, stacking texts like that makes it look weird.

I decided to stick with the design on the right.

8. Bilateral

Fig 2.11 Bilateral system sketch, week 1 (24/9/24)

< Week 2 Feedback 1/10/24 >

Right one isn't properly symmetrical. Left one is good.

I decided to stick with the one on the left.

Fig 2.12 Final Output of typography systems, week 2 (1/10/24)

Without grid:

With grid:

Part 2: Type & Play

In the second part of Task 1, we are required to find an image , analyze, dissect and identify potential letterforms within the dissected image. The forms would be explored and digitized.

Upon completing the letterforms, we are required to combine the letterforms with an image that is the basis of the extracted letters.

It is important to note that the reference is an aim but not the destination. Neither is the extracted letters from the image used. The output is required to be a the child both the referenced font and the extracted alphabets.

Fig 2.12 , week 2 (1/10/24)

I began researching different materials and textures that has potential. The first 3 thoughts I had were marble, lighting and water caustics.

Here are some drafts and trails in searching for letterforms within the images:

Fig 2.7 marble sketches, week 2 (1/10/24)

Fig 2.8 lighting sketches, week 2 (1/10/24)

Fig 2.9 caustic sketches, week 2 (1/10/24)

After doing a couple of sketches, I really liked the way lightning looked and thought the outcome of the font would look nice and textured. Lightning also had a lot more sporadic movement with the secondary branches of lightning, providing a lot more detail.

I then found this image from unsplash which I thought was visually stunning.

Fig 2.10 Lightning picture from unplash, week 2 (1/10/24)

I then brought this image into Adobe Photoshop to start tracing the lightning. The words I was planning on using for the poster were "Light / Dark", so the search for these alphabets begun.

Fig 2.11 Traced lightning, week 2 (1/10/24)

The image may be hard to see as the alphabets are pretty small amidst the lightning.

Fig 2.12 Traced alphabets isolated from background, week 2 (1/10/24)

Here in Fig 2.12 are the raw forms of the alphabets traced before adjusting it using the reference font.

I then begun researching for posters on Pinterest that had similar typefaces to use as reference and inspiration for the clean up of the traced alphabets.

Here are the few I found:

Fig 2.13 Poster references, week 2 (1/10/24)

The one I found that stuck to me was the one in Fig 2.14. I liked the flow, legibility and aesthetic of the overall typeface.

Fig 2.14 Poster from pinterest, week 2 (1/10/24)

I realized there was a better way to isolate the lightning from the background using two colors. Using the threshold adjustment filter, it did just that.

Fig 2.15 Isolated lightning, week 3 (8/10/24)

Extraction, week 3 (8/10/24)

Fig 2.16 Isolated extracted letterforms, week 3 (8/10/24)

As this process helped me fill in the outlines i made earlier with a lot more precision

Fig 2.17 Arranged and adjusted, week 3 (8/10/24)

Fig 2.18 Extracted letterforms (baseline), week 3 (8/10/24)

I then arranged and adjusted each alphabet a little while also trying to standardize their weights.

I then began looking into the 10 fonts provided to use as a base for the typeface.

Considering the sporadic flares of lightning that manifests itself in the extracted alphabets, I thought that san serif fonts might work best as the base.

These are the possible options:

Fig 2.18 Possible fonts, week 3 (8/10/24)

From these fonts, I think Adobe Carlson Pro might be the best choice as a base font.

Reference font, week 3 (8/10/24)

Fig 2.19 Base font overlayed with extracted elements, week 3 (8/10/24)

Fig 2.19 Refining process, week 3 (8/10/24)

Based on the different iterations I've made, personally, I think iterations 2 and iterations 3 are my favorites. It still maintains the lightning detail but is also legible with small sizes and far distances. In fact it might be more legible the smaller it is as the silhouettes of the alphabets become more pronounced. With larger sizes, the detail becomes more apparent. The smaller branches of the lightning are more visible.

Original extraction, final letterform comparison, week 3 (8/10/24)

Final iteration (baseline), week 3 (8/10/24)

Fig 2.20 Final form and iteration, week 3 (8/10/24)

Task 1 part 2 extraction exercise, week 4 (15/10/24)

< Week 23 Feedback 8/10/24 >

Mr Vinod had nothing to comment on. He told me to carry on with the poster design.

After receiving Mr Vinods feedback, and approval, I proceeded to bring the poster into Photoshop to add more detail and play with composition of the poster.

Fig 2.21 Version 1, week 3 (8/10/24)

Here is the first version of my draft for the composition and picture. I liked the text hiding behind the cloud and the lightning connecting to the text, however, I felt the composition was lacking something.

I decided to create a new word (with the help of chatGPT) using the existing alphabets extracted. The word/sentence I decided to proceed with is "Light Trial". I felt like this suited the theme of the font more and is truly the essence of what a lightning is.

Fig 2.22 New word made, week 3 (8/10/24)

Using this new word and sentence, I decided to find a more moody and contrast-y lightning picture using unsplash.

Fig 2.23 New lightning picture, week 3 (8/10/24)

I liked this picture as there was a lot more darkness, surrounding the lightning, which is the central focus of this image. The emphasis on the lightning really drew me to this image.

With this new image, I proceeded to add the new texts into it and play with composition.

Fig 2.24 Letter placement, week 3 (8/10/24)

The moment I placed the texts into this image, I knew I was heading in the right direction. The existing lightning in the image already blends well with the text.

I then proceeded to add some glow to the words, the existing lightning in the image and also draw more branches of lightning.

I also added more detail to the words as well as connecting the individual alphabets with the neighboring alphabets and also the existing lightning in the image.

Fig 2.25 Light trail enhanced, week 3 (8/10/24)

This was when I exported the image as a .png and brought it into inDesign for the typography to make this a proper movie poster.

Fig 2.26 Movie poster #1, week 3 (8/10/24)

I decided to have fun with the typography around the poster, adding some of my friends names as well as actors that're unlikely to ever work together.

This didnt fully satisfy me as there were other images of lightning I wanted to mess with.

Here is the second lightning image I found from unsplash.

Fig 2.27 2nd lightning picture, week 3 (8/10/24)

In this image, it felt a lot more moody but less contrast-y and less emphasis on the lightning.

Using the same process as earlier, tweaking, fixing, aligning, adding detail and such, here is the other version of the poster using the 2nd lightning picture.

Fig 2.28 Movie poster #2, week 3 (8/10/24)

Based on these two versions, the first movie poster stuck to me more as the contrast in the original image is stronger, and the lightning structure suited the words more. Resulting in less effort to make it cohesive.

After some adjustments on both, I've grown to like them both.

< Week 4 Feedback 15/10/24 >

Mr. Vinod mentioned that both the posters lacked contrast in the typography due to the same sans serif style being used in the main title and everything else around it. He suggested using a serif font instead for the supporting texts as it will emphasize the title more.

I proceeded to adjust and change the fonts of both posters. I also added some awards and more elements to the poster.

Here are the final outcomes compiled together:

Task 1 part 2 extraction exercise, week 4 (15/10/24)

Here are the final outputs for the two posters in JPEG:

Fig 2.29 Movie poster output 1, week 4 (15/10/24)

Fig 2.30 Movie poster output 2, week 4 (15/10/24)

FEEDBACK

Week 2:

General feedback:

- Design elements are there to enhance the work. If it does not, it takes away and distracts the viewer.

- Generally, as a designer, you aren't supposed to change the context that is given by the clients. (There is different between communication and design communication) If you really want to do it, a multiple options need to be provided to clients.

- Be aware of technical appearance and aesthetic at the same time.

Form follow function: When we design a form, the form need to have function and meaning. It is important to justify the designs.

- Communicate clearly is the priority, be aware when outlined the text.

- Reading rhythm is important, do not disrupt the reading rhythm if there is no special meaning or function.

- When doing axial system, do not tilt the angle with large angle (suggested to be <45 degrees).

-Alignment is important in grid system.

Specific feedback:

- Axial, right one works but the gap needs to be reduced. the texts needs to be anchored to the axis

- Radial, left one is fine

- Dilatational, needs to be reworked.

- Random, both are good. pick one that has more impact.

- Transitional, stacking of text makes it look weird. it flows better if it was in a line

- Grid acceptable, not aligned. alignment needs to be adhered to.

- Modular, need to see grid lines to see if it works

- Bilateral, right version isn't symmetrical, left one works.

Week 3

General feedback:

- Refine the shape to make it more consistent. - You don't need to trace the shapes anymore once you understand the characteristics of the shape.

Specific feedback:

- Nothing to comment on your extracted letterforms.

- Its good, can carry on with the poster creation.

Week 4

General feedback:

- Both posters lack contrast with the typography choices.

Specific feedback:

- Mr. Vinod mentioned that both the posters lacked contrast in the typography due to the same sans serif style being used in the main title and everything else around it. He suggested using a serif font instead for the supporting texts as it will emphasize the title more.

REFLECTIONS

Experience

During the first part of the first task, we were taught the different typographic systems. This consisted of Axial, Radial, Dilatational, Random, Transitional, Grid, Modular and Bilateral. I thoroughly enjoyed the creative process of making a poster using the given information with the guide.

The second part of the task required us to find a natural or man-made object and extract letterforms from that image. We were then required to use a base font and use that as a baseline to alter our extracted letterforms. This process was also very exciting as we we're required to think outside the box. The final poster process was equally as fun, because it felt like the final words we extracted and altered, finally had a purpose.

Observations

I noticed myself struggling a little with some of the typographic systems as I was initially thinking to linearly and still had a lack of understanding of the different systems. This changed when I referenced my seniors work as well as getting feedback from my peers and Mr Vinod.

I also initially had a problem with the extraction of the letterforms. Given that lightning was so sporadic and random, my struggle was making the letterforms look more like lightning and not scribbles, while also maintaining legibility. This was a careful balance that paid off.

Findings

This module highlighted the different typographic systems as well as taught us how to think outside the box when making a font. It showed us how its crucial to follow the refined systems made over the years but also how to be creative using the given guidelines.