ADVANCED TYPOGRAPHY/ TASK 2A & B - KEY ARTWORK & COLLATERAL

28.03.2022 (Week 1-Week 3)
Luisa Audrey / 0348741 / Bachelor of Design in Creative Media
Advanced Typography
Task 2A & B - Key artwork & Collateral

---

LECTURES

ADVANCED TYPOGRAPHY: CONTEXT & CREATIVITY

Handwriting

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

The shape and line of hand drawn letterforms are influenced by the tools and materials used to make them. Sharpened bones, charcoal sticks, plant stems, brushes, feather and steel pens all contributed to the unique characteristics of the letterform.

Additional factors included the material upon which the forms were written: clay, papyrus, palm leaf, animal skins (vellum and parchment) and paper.

Juan Jose Marcos (Ancient Greek/Latin)

Cuneirform, c. 3000 B. C. E.

The Egyptian writing system is fused with the art of relief carving. The system was a mixture of both rebus and phonetic characters the first link to a future alphabetic system. Hieroglyphic images have the potential to be used in three different ways:

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

Built on the Egyptian logoconsonantal system, the Phoenicians developed a phonetic alphabet consisting of 22 letters

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.

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

Carolingian Minuscule

A 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. A new script emerged, the Carolingian minuscule

Black Letter 12-15 C. CE

Movable Type, 11 C.—14 C

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. 

Why do we talk about Greek influence on Rome, but not Egyptian or Near Eastern influence on Greece?

Because in the 19th century and the rise of the modern British Empire, it became out of style to credit Africa or Africans with anything of value, and therefore Greece and Rome were elevated over much older, much more influential civilizations, specifically Ancient Egypt, but also less extensive or old civilizations like Mesopotamia, the Indus Valley, China, etc.

What is important to note is that later day typographers, through research, curiosity and a respect for history would pay homage to these developments. This would result in books being written and published, recreation of the hand written styles into mechanical forms for printing. 

Evolution of Middle Eastern Alphabets

The Evolution of the Chinese script

‘Indian’ subcontinent the Indus Valley Civilization (IVC) script, 3500-2000 BCE

The Brahmi script (450–350 BCE)

Kedukan Bukit inscription from Sumatra (Pallava script)

The oldest writing systems present in Southeast Asia were Indian scripts. There were a few, but the most important would be Pallava (or Pallawa in Malay), a South Indian script originally used for writing Sanskrit and Tamil.

Indonesia has a great number of historical writing systems. We will look into the scripts of the communities that assimilated into Peninsula Malay communities.

A related script to the Rencong grouping 

The Batak script

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 or standard that for form, spacing and conventions mechanical type would try and mimic.

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

Baloo

Local Movements and Individuals

In Malaysia, murasu.com spear-headed by programmer and typographer Muthu Nedumaran. The programming language needed to encode the different types of vernacular writing systems was cracked by Muthu. The system is now used in mobile phones and desktops. 

Huruf a local group of graphic designers interested in the localized lettering of latin and vernacular letters painted or inscribed on walls and signages are amongst the more prominent organizations  digitizing and revitalizing typefaces in Malaysia.

Creativity and originality are properties that are most often intertwined. It is important for young designers to look inward and examine their histories, civilization, culture and communities to bring these past developments into the future and develop on them instead of blindly appropriating cultures and developments that have no context, relatability or relevance.

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

UNIVERS by Adobe Illustrator, Indesign 2015

This book tells the story of the typeface Univers and its creator, Adrian Frutiger. In particular, this book uses description and diagrams.

Adrian Frutiger received many honors, "at the university in the “holy city of India”, Varanasi, he felt he had received the highest of honors, without medals or certificates. He had designed a new Devanagari font for modern typesetting and printing processes at the request of the Indian Design Institute. His goal was to simplify the sacred characters, without compromising their ancient calligraphic expression. 

Adrian Frutiger at the National Institute of Design (NID), India 1964

Matthew Carter is the son of Harry Carter, Royal Designer for Industry, contemporary British type designer and ultimate craftsman. Carter 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 those posed by early computers… Let us look at 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.

Georgia (top/right) and Verdana (bottom/left)

Verdana

Off screen, Georgia and Verdana have also made appearances in print. In 2010 there was a lot of “fontroversy” when it was announced that IKEA would be changing from Futura to Verdana. 

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.

Edward Johnston is the creator of the hugely influential London “Underground” typeface, which would later come to be knows as “Johnston Sans” (1916). 

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

Johnston's design

General Process of Type Design:

1. Research
2. Sketching
3. Digitization
4. Testing
5. Deploy

1. Research

Research

When creating type, we should understand type history, type anatomy and type conventions. We should also know terminologies, side-bearing, metrics, hinting.

2. Sketching

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.

3. Digitalization

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.

4. Testing

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

5. Deploy

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:

Construction grid for the Roman Capital using 8 x 8 cells.

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. More here and here.

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:

Construction and considerations

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.

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.

---

INSTRUCTION

<iframe src="https://drive.google.com/file/d/1L5PA28zz66ylvETb4NdDxCG_H_Nr1s5U/preview" width="640" height="480" allow="autoplay"></iframe>

TASK 2A : KEY ARTWORK

For the second task, we were told to make a logo based on our initial. As for me, since my name is Luisa Audrey, that means I have to make a logo based on the alphabet L and A. I can also make one from the name that people usually call me like "Odil" or "Blanca" my in game name.

However, this time I'm just gonna use La because not everyone are familiar with Odil or Blanca. The first thing I did was looking for references. I looked at many logo and typography works through pinterest. 

Fig 1.1, References for the logo, 22.05.2022

After looking at several inspirations, I decided to make the sketch in my tablet. Here are my 5 sketches:

Fig 1.2, sketches, 22.05.2022

I did not stick to only 1 occupation in the first place, therefore I made sketches that are more variable.

Here are my original thought for each occupations:

Upper left: florist

middle: boutique

upper right: juice stall

lower left: tattoo shop

lower right: singe

Personally I like the upper right and lower right. However, Mr. Vinod chose the upper right so I just followed him.

After choosing the upper right, Mr. Vinod asked me to find a better occupation. He said the logo looks more like a swimsuit shop rather than a juice stall. At first I planned to change it into bath shop like bath and body works that still has the summer vibe. But then after few thoughts, I ended up following sir Vinod's idea.

Mr. Vinod also mentioned to make a few correction which is to make the width between each letter and gap the same and see whether it looks good or not. He also told me to smaller the size of the L's tail and make it the same size as the rest. So I tried to change it in Illustrator.

Fig 1.3, progress, 22.05.2022

Personally, I don't really like the large gap between the L and a, but I do agree that smaller the size of the L's tail and make the a the same gap make it look better. Therefore, I made the last refinement by moving the a closer to L.

Fig 1.4, final look "logo", 22.05.2022

Fig 1.5, B&W logo, 22.05.2022

After making the B&W, I started to plan on the colors. Since it is a swimwear shop, I wanted to make it summer vibe. 

At first I went with these colors.

Fig 1.6, color 1, 22.05.2022

I also struggled a lot putting the color black because I always thought of summer as something fun and colorful instead of dark. In the end, I didn't use black and went with just white.

For a second there, I thought the logo didn't look fresh. I decided to search for another color palette these are the next colors that I came up with.

Fig 1.7, color 2, 22.05.2022

Personally I prefer the one with the white background. The one with the gradient background is also nice, but it looked a bit too much and I wanted to stick with something simpler but nice.

ps. I also just noticed that the colors look similar to the instagram color :"))

FINAL SUBMISSION:

Fig 1.8, B&W logo, 22.05.2022

Fig 1.8, colored logo, 22.05.2022

Fig 1.9, colored logo version 2, 22.05.2022

PDF FINAL SUBMISSION

TASK 2B : COLLATERAL

For the second task B, we had to make a poster and 1 collateral based on our logo. So because my logo is a fashion brand, I planned to do a fashion show runway poster. I tried to look for references for the runway poster, but most of them have a model in it. It took me so long just to come up with one proper design, I couldn't make more. Here are my references:

Fig 2.1 References, 30.5.2022

After looking at the references, I tried to make the poster. I got stuck multiple times xD

Fig 2.2 progression 1, 30.5.2022

Fig 2.3 progression 2, 30.5.2022

Both of them didn't work, in the end I just tried to make a complete new design. I got this inspiration from my first exercise random. I thought it would be interesting if I just overlay stuffs.

Here are some of the different composition that I made:

Fig 2.4 different composition, 30.5.2022

I asked my friends and family, and majority of them chose the left one. I moved the Luisa Audrey a bit to the right, and this is my final result.

Fig 2.5, poster attempt 1, 30.05.2022

I showed this to Mr. vinod, he said that the square doesn't really match my logo and it just came out of nowhere. He also mentioned that the placement of my information is not nice, it is hard for people to know which one to read first. He also told me to add the main logo in the poster as well, not only in the background.

I managed to change few things like what he said and this is my end result:

Fig 2.6 final result, 30.5.2022

I also made mock up version:

Fig 2.7, poster mock up version, 30.5.2022

For the collateral, I made 2 types. I planned to make a ticket and a shopping bag for the stuff you get from the fashion show convention. So here is my first ticket mockup:

Fig 2.8, ticket first attempt, 30.5.2022

For the first one, I hadn't put my logo, so I decided to make minor changes. In the process, I also added different version which is the VIP one. Therefore, I added another version and fixed the old one.

Fig 2.9 Ticket standard version, 30.5.2022

Fig 2.10 Ticket VIP version, 30.5.2022

Here is the mockup version:

Fig 2.11, tickets mock up version, 30.5.2022

The next collateral that I'm gonna make is the bag. Since the theme is beach, I looked for a specific bag that has a rope handle. Here is my design:

Fig 2.12 Bag design, 30.5.2022

Unlike the other collateral, I put my logo in the middle for this one so people can recognize the brand quickly. I also added a name card:

Fig 2.13 Namecard, 30.5.2022

Here is the mock up version:

Fig 2.14 bag and name card mockup version, 30.5.2022

After all of that, I made the animation. Honestly I was so confused on how to make the animation for this one at first. I scrolled through youtube and watched few tutorials, so some of these ideas are purely taken from tutorials ;-;

Here is my end result:

Fig 2.15, invitation gif first attempt, 30.5.2022

Fig 2.16 Video version, 30.5.2022

The video is for just in case you can't open it, because I couldn't see it with gif for some reason.

Because I thought the deadline was last week, I made the video after the poster. Good thing I didn't have to change much for the poster, meaning I don't have to change much on the animation as well.

I changed the location and I also longer the time on the logo introduction a bit longer so people have more time to look at it. Aside from that, I didn't do much change and here is the final gif:

Fig 2.17 Final Gif, 30.5.2022

Fig 2.18 Video version, 30.5.2022

For some reason the gif can't be opened, so I added the video version. It works when I open it in my own laptop and phone, but it doesn't work for my friends' device ;-;

FINAL SUBMISSION:

Fig 2.19 Poster Final Submission, 30.5.2022

Fig 2.20 Poster Collateral Final, 30.5.2022

Fig 2.21 Ticket Collateral Final, 30.5.2022

Fig 2.22 Paper Bag Collateral Final, 30.5.2022

PDF FINAL SUBMISSION

GIF FINAL SUBMISSION

---

FEEDBACK

Week 7:

General feedback: It is better not to think about the colors first and just focus on the B&W version. He also mentioned that it is better to just use our initial or name, not something else.

Specific feedback: I gave Mr. Vinod 5 sketches and he chose the upper right one. Mr. Vinod also told me to do a minor fix on the logo like smaller the size of the L's tail and fix the gap between the L and a. Mr. Vinod also told me to find better occupation, he suggested me to use swimwear clothing.

Week 9:

General feedback: Mr. Vinod mentioned that he wants the logo to be in the background and in the poster.

Specific feedback: Mr. Vinod told me that the poster works, however I have to put the full logo to be introduced. He also mentions that the square doesn't fit my logo and should be changed. He also told me to change the placement of the information so people will know which one to read first.

---

REFLECTION

Experience: Personally, I really enjoyed this task. I managed to make 5 logo because of how much I enjoyed creating it. I also like the idea that we have to match it with the occupation. The part I enjoyed the most was finding good combination of colors. Even though I was a bit confused on what color I need to use at first, in the end I was satisfied with the result. For the next task, it was a mix of struggles and fun. It was so so hard to create the poster for some reason, it took me so long to find the right design. However, after I was done with the poster, it was so much easier to create the collateral since I only needed to follow the poster. The next challenging part was the animation. It was not pleasant at all, I don't like doing animation. However, I managed to finish it by looking through youtube tutorial.

Observation: I realized that creating the key artwork doesn't always have to have the same consistency. I tried matching the length of each gap, and it didn't come out as good as I expected. So I just used my own guts and refine it as my own liking. When I was creating the poster, I also realized that the placement of the information is really important. People need to be able to read them in the right sequence and not come out as confusing. I also realized that the introduction of the logo in the animation needed to be put a bit longer, that's why I extended the duration on the logo part.

Finding: I found out that everyone has different perception on my key artwork and also about how the perceive it. Some of them may look at it and say that it looks like a juice stall logo, my family said it looks like a clothing brand and my friends say that it looks like a tattoo shop, cosmetic brand, etc. Personally, it looks the most like a juice stall logo, however since Sir Vinod said it looks like a swimwear brand, so I just followed him. I found out that creating a poster for fashion runway without a person in it is pretty hard. Most of the fashion poster has a model in it, and it was hard for me to resemble my poster as a fashion poster since I won't be able to put a person in it. However, I tried and got pretty satisfied with my work, hopefully it is acceptable. When I created my animation, I also decided to go with a fun and joyful theme so it matches the whole concept.

---

FURTHER READING

Vignelli Canon on Design

Part One

The Intangibles

Semantics

Semantics are what will provide the real bases for a correct inception of projects, regardless of what they may be. Semantics eventually become an essential part of the designer’s being, a crucial component of the natural process of design, and the obvious point of departure for designing. Semantics will also indicate the most appropriate form for that particular subject that we can interpret or transform according to our intentions.

Syntactics

Syntactics

Syntactic consistency is of paramount importance in graphic design as it is in all human endeavors. Grids are one of the several tools helping designers to achieve syntactical consistency in graphic design.

Pragmatics

Pragmatics

We like Design to be intellectually elegant - that means elegance of the mind, not one of manners,

elegance that is the opposite of vulgarity.

We like Design to be beyond fashionable modes and temporary fads. We like Design to be as

timeless as possible.

We despise the culture of obsolescence. We feel the moral imperative of designing things that will

last for a long time.

Discipline

discipline

The attention to details requires discipline. There is no room for sloppiness, for carelessness,

for procrastination. Every detail is important because the end result is the sum of all the details

involved in the creative process no matter what we are doing.

Appropriateness

The notion of appropriateness is consequent to what I have expressed. Once we search the roots of whatever we have to design we are also defining the area of possible solutions that are appropriate - specific to that particular problem.

Ambiguity

ambiguity

Rather than the negative connotation of ambiguity as a form of vagueness, I have a positive interpretation of ambiguity, intended as a plurality of meanings, or the ability of conferring to an object or a design, the possibility of being read in different ways - each one complementary to the other to enrich the subject and give more depth.

Design is One

Design is one

Design is one - it is not many different ones. The discipline of Design is one and can be applied to many different subjects, regardless of style.

Visual Power

We say all the time that we like Design to be visually powerful. We cannot stand Design that is weak in concept, form, color, texture or any or all of them. We think good Design is always an expression of creative strength bringing forward clear concepts expressed in beautiful form and color, where every element expresses the content in the most forceful way.

Intellectual Elegance

Intellectual Elegance

We often talk about Intellectual Elegance, not to be confused with the elegance of manners and mores. For me, intellectual elegance is the sublime level of intelligence which has produced all the masterpieces in the history of mankind. 

Timelessness

Timeless

We are definitively against any fashion of design and any design fashion. We despise the culture of obsolescence, the culture of waste, the cult of the ephemeral. We detest the demand of temporary solutions, the waste of energies and capital for the sake of novelty.

Responsibility

In graphic design the issue of responsibility assumes particular importance as a form of economic awareness toward the most appropriate solution to a given problem.

Equity

Many times we have been asked to design a logo or a symbol for a Company - often at the request of the marketing department to refresh the Company’s position in the marketplace.

Although this may be a legitimate request, very often, it is motivated by the desire of change merely for the sake of change, and that is a very wrong motivation.