Advanced Typography / Task 2: Key Artwork & Collateral

Handwriting is being studied because the first mechanically produced letterforms were designed to directly imitate handwriting. It 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.

Fig 1.1.1: Evolution of the Latin Alphabet

1. Cuneiform (3000 B. C. E.)
This is the earliest system of actual writing and it was used in a number of languages between the 34C. B. C. E. through the first century C. E. Its distinctive wedge form was the result if the result of pressing the blunt end of a reed stylus into wet clay tablets.

Fig 1.1.2: Cuneiform

2. Hieroglyphics (2613-2160 B. C. E.)
The Egyptian writing system is fused with the art of relief carving. It was a mixture of both rebus and phonetic characters. Hieroglyphic images have the potential to be used in three different ways:
- As ideogram to represent the things they actually depict.
- As determinations 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.1.3: Hieroglyphics Chart

3. Early Greek (5th C. B. C. E.)
Built on the Egyptian logo-consonantal system, the Phoenicians developed a phonetic alphabet consisting of 22 letters. Early Greek was 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. It was often read in a format known as boustrophedon or as the "ox plows". One row would read left to right and then switch from right to left.

At first, 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. The new forms which was used for inscriptions throughout the Greek empire, served as models for formal lettering in imperial Rome.

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

Fig 1.1.4: Early Greek Letterforms

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

Fig 1.1.5: Roman Uncials Letterforms

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

Fig 1.1.6: English Half Uncials Letterforms

6. Carolingian Minuscule (8 C. CE)
By then, 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.

The Carolingian minuscule was used for all legal and literary works to unify communication between the various regions of the expanding European empire. It was as important a development as the standard Roman capital–for it was the style that became the pattern for the Humanistic writing of the 15th century. This letter was the basis of the lower-case roman type.

Fig 1.1.7: Carolingian Minuscule Letterforms #1

Fig 1.1.8: Carolingian Minuscule Letterforms #2

7. Black Letter (12-15 C. CE)
Gothic was the culminating artistic expression of the middle ages.

LECTURE 4: Designing Type

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.

Fig 1.2.1: Univers

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.

Fig 1.2.2: Frutiger

Considerations/Limitations: letterforms needed to be recognized even in poor light conditions or when the reader was moving quickly past the sign. Adrian Frutiger tested with unfocused letters to see which letterforms could still be identified.

Fig 1.2.3: Airport Sign using Frutiger

Matthew Carter, the son of Harry Carter, trained as a punchcutter, and responsible for Crosfield’s typographic program in the early 1960s. Many of Carter's fonts were created to address specific technical challenges, for example those posed by early computers.

Fig 1.2.4: Verdana (Left); Georgia (Right)

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

Fig 1.2.5: London Underground logo

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.

Fig 1.2.6: Johnston Sans

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

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

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.

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 rigour of the testing is important in so that the teething issue remain minor.

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 labour of love. Only the brave and foolish walk this path for the reward pale in comparison to the work.

INSTRUCTIONS

Task 2(A): Key Artwork

Key artwork behaves like a logo, but is also an artwork. As a logo it is used to identify an event/person but it 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.

In this particular exercise, students are given a task to create a key artwork. We can use the initial from our name 2-4 letters. The final key artwork must be an elegant solution, not complicated or confusing that leads to a functional and communicable key artwork. It will be used for the subsequent task, which is designing collateral.

For this task, I picked two different initials retrieved from my name, one is "LLL" and the other one is "LULU". I came out with three different ideas of key artwork, and it also has different occupation.

Fig 2.1.1: Key artwork options, 07.05.2022

- The first one (left) consists of "LLL" with two capital L and one lowercase l to make a little variation. I use Baskerville Italic for the typeface. For the occupation of this key artwork, I thought of a fashion designer brand.
- The second design (middle) consists of "LU" and I doubled it. I use Univers LT Std (55 Roman) for the typeface. With the combination, I thought of a shoe brand logo for the occupation.
- The last one (right) consists of "LULU" and I'm using the same typeface as the second design. While creating this key artwork design, I was thinking of the home appliance (vacuum) brand.

During the feedback session, Mr. Vinod looked more satisfied with the first design, so he commented a lot on it. When I told him the occupation of it, he gave me suggestion to change it into an umbrella manufacturer since it somehow looks like an umbrella. I also received some suggestion to modify the key artwork.

With the feedback given, I proceed to fix and refine the first key artwork. Here are the whole processes.

First thing first, I increase the gap between both left and right side with the center part. The vertical stroke of the capital 'L' is also being shorten.

Fig 2.1.2: 1st modification, 09.05.2022

Next, I refined the sharp serif edge of the middle part and also decreased the width of both left and right capital 'L' vertical stroke.

Fig 2.1.3: 2nd modification, 09.05.2022

Fig 2.1.4: 3rd modification, 09.05.2022

I also remove more serifs from two edges and smoothen them so it looks more clean and tidy.

Fig 2.1.5: 4th modification, 09.05.2022

Below here is the final look of my key artwork design, with the occupation "Umbrella Manufacturer Company". There's two version of it, one is black and white version, and colored version. For the colored version, I use color palette from Adobe Color.

Fig 2.1.6: B&W Key Artwork Final Outcome, 09.05.2022

Fig 2.1.7: Colored Key Artwork Final Outcome, 09.05.2022

Task 2(B): Collateral

Second (B) section of the task requires students to design a poster and create the animated invite using the key artwork from Task 2(A), and also pick one collateral item to work with it. Students will work on the poster first and fine-tune the outcomes before going on to the animated invite and other collateral material. The graphic output must result from in-depth exploration and must communicate both visually and textually the desired message and mood set by the key artwork and its function.

Once the key artwork has been developed, the artwork is then expanded into several iterations that are then applied across the various collateral (applications/promotional material): A3 Poster, Animated Invite (800/1024 px), and any 1 relevant collateral of our choosing for our event/occupation.

I started to work for the poster first. For the background color, I am using the color from the same color palette as the colored key artwork. The other informations in the poster are using dark brown color because I think it'll be the most suitable color to mix with the background and key artwork color. Before making the poster, I went to find for some inspiration in Pinterest and got these posters.

Fig 2.2.1: Reference #1

Fig 2.2.2: Reference #2

Fig 2.2.3: Reference #3

I made two designs for the poster with the different approach. For the first one, I forgot to record the process, so I only have the working process of the second poster design.

Fig 2.2.4: Poster #1, 13.05.2022

After done with the first design, I was thinking that this one will most likely be rejected by Mr. Vinod because it looks weird and isn't consistent at all. Therefore, I decided to create another design.

Fig 2.2.5: Making process, 13.05.2022

Fig 2.2.6: Adding 3D effect to key artwork, 13.05.2022

This is how the second poster looks like.

Fig 2.2.7: Attempt for Poster #2, 13.05.2022

With the given feedback from Mr. Vinod, I tried to repair the poster. I increased the size of the 3D key artwork and reintroduced it in smaller size at the bottom right. The typeface of the poster contents also being changed and at the end I chose to use one typeface only, which is Futura, to maintain the consistency, but I'm still playing with the typeface style.

Fig 2.2.8: Modifying the poster, 16.05.2022

Mr. Vinod also told us to make the poster looks more real, so we need to create the mockup for our poster. This is my chosen mockup for my poster.

Fig 2.2.9: Poster Mockup

So here's the final result of my key artwork poster and the simulation.

Fig 2.2.10: Key Artwork Poster Final Outcome, 16.05.2022

Fig 2.2.11: Poster Simulation Final Outcome, 16.05.2022

Next, I began to work on the collateral. For the collateral, since it is free to choose what to use, so I chose to work on the label tag/price tag. The reason why I chose label tag as my collateral is because I was so confused what is the most relevant collateral to do with the umbrella, and suddenly I thought of the label tag. I went to Google to explore the most suitable label tag mockup for my design, and this is my final pick.

Fig 2.3.1: Label Tag Mockup

And below are my working process for the collateral.

Fig 2.3.2: Making process #1, 14.05.2022

Fig 2.3.3: Making process #2, 14.05.2022

Fig 2.3.4: Making process #3, 14.05.2022

Finally, here's the final look of my label tag. I will provide front and back look, and the mockup version below.

Fig 2.3.5: Label Tag (front) Final Outcome, 14.05.2022

Fig 2.3.6: Label Tag (back) Final Outcome, 14.05.2022

Fig 2.3.7: Label Tag Final Outcome, 14.05.2022

Fig 2.3.8: Collateral Final Outcome, 14.05.2022

For the last one, animated invite, I followed some styles from my poster and did some experiment on it. I want to point out the key artwork more than everything there so I put it at the beginning and give it great animation. I use masking for the animation. And for the rest event information, I made like a quick but interesting animated gif so audience will not be bored with it.

Fig 2.4.1: Animating process #1, 20.05.2022

Fig 2.4.2: Animating process #2, 20.05.2022

At first, I went with brown for the background color. However, after a long consideration, I decided to change it into mint green (the same color as in the poster) because it turns out so dark. Here's the final result of my animated invite.

Fig 2.4.3: Animated Invite #1, 20.05.2022

Actually I already satisfied with the final outcome, but when I rewatched the animated invite, the animation flow looks too fast, and I don't think it is nice for the audience to see it. The duration of informations there only have like 2 seconds to be presented, so I redo it and make the duration longer.

Fig 2.4.4: Animated Invite Final Outcome, 21.05.2022

Final Submission

Lastly, this is the compilation of my Task 2(A) and 2(B) to be submitted.

1. Key Artwork

Fig 2.5.1: Final B&W Key Artwork

Fig 2.5.2: Final Colored Key Artwork

2. Poster

Fig 2.5.3: Final Key Artwork Poster

Fig 2.5.4: Final Key Artwork Poster Simulation

3. Collateral

Fig 2.5.5: Final Key Artwork Collateral

4. Animated Invite

Fig 2.5.6: Final Animated Invite

5. PDF Compilation

Fig 2.5.7: Final Compilation in .pdf

FEEDBACK

WEEK 7

General Feedback:

- Better to think about the occupation while designing the key artwork

Specific Feedback:

- The first design looks more like an umbrella manufacturer, try to work more on it
- Increase the gap between the left and right side with the middle part
- Shorten the 'L' (uppercase one) stroke

WEEK 8

Independent Learning Week

WEEK 9

General Feedback:
- Remember to reintroduce the key artwork in a complete form (not cropped at all) in the poster

Specific Feedback:
- Try to increase the size of the main key artwork (the 3D one), it's okay to have it cropped a bit
- Put smaller key artwork (reintroduce) somewhere else, where it still can be seen clearly in the poster
- There's no consistency at the typeface and alignment (using all different styles with no consistency) for all the poster infos, and it's somehow a bit weird

REFLECTIONS

Experience

This whole task 2 creating a key artwork was so fun. I really enjoyed the process from the beginning, designing the key artwork, putting it into a poster and collateral, and also creating the animated invitation poster. The whole journey was very interesting because we were already given a challenge to create the key artwork from our own name initial. Also I would like to add this, while doing this task, I feel like there's so many little things to achieve in order to complete the whole things.

Observations

During these two continuous task, I realized that we can't underestimate the impacts of typography in design. It is because typography really relates to everything around design. Every design, especially poster and the collateral needs typography so it can achieve the aesthetic standard. We can't deny that typography is very important here. That's why when we have good sense of design but we don't play that much on typography, the design won't be that great, or can maybe look awful.

Findings

When I mentioned that typography is very impactful in design, I wasn't lying. It happened to me while I was doing the designs. I already have my key artwork, detailed informations, and also the color palette for the whole thing, but I couldn't make them fit together. I tried so many times to fit them together so it can create a nice design with great typography. And finally, after few attempts I satisfied with the results.

FURTHER READING

Fig 3.1: Typography Referenced

Reference:

Haley, A., Poulin, R., Tselentis, J., Seddon, T., Leonidas, G., Saltz, I., Henderson, K., Alterman, T.
(2012). Typography Referenced: A Comprehensive Visual Guide to the Language, History, and Practice of Typography
Rockport Publishers.

[Chapter 3: Type Design and Development]

Character Expansion
The demand for typefaces with extended character sets has been growing steadily for many years. Operating systems and application interfaces must be able to display many languages. Typical custom typeface for a big brand may easily extend to several thousand characters and span five or more scripts nowadays. The current minimum for international brands covers the wider European region: Cyrillic, Greek, and extended Latin. Increasingly character sets also cover Arabic, Hebrew, and Indian scripts.

Fig 3.2: Example of Character Expansion

Typeface design is linked to the limitations of the typesetting environment. Most subsets of the Latin script (simple, alphabetic, left-to-right models) do not push the limits of a system based on a simple structure of sequential rectangular units. But this approach is strained by multiple diacritics and collapses when the shapes do not fit in boxes or change shape in algorithmically complicated ways. As a result, typesetting systems have had to be adapted, extended, and even rewritten to accommodate the complexities of non-Latin scripts.

Although designers do design Latin typefaces with typesetting technology in mind, in many cases of non-Latin scripts, they had to modify their designs quite drastically just to get the shapes to render. In general, non-Latin scripts do not have the full profusion in styles that arises from a competitive publications market, as well as a culture of constant text production. This is gradually changing, largely under the pressure of international branding and localized publications. We begin to see the rapid growth in new typefaces for non-Latin scripts, and a growing interest by typeface designers.

Search This Blog

Lulu Luisa Linardi [0349358]

Advanced Typography / Task 2: Key Artwork & Collateral