Advanced Typography - Task 2

22.05.2024 - 19.06.2024  / week 5 - week 9

Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media

Advanced Typography

JUMPLINK:

1. Lecture
• Week 5 Perception and Organization
2. Instruction
3. Task 2 - Key Artwork
• Progress
• Final Result
• Task 2(A) Key Artwork
• Task 2(B) Key Artwork & Collateral
4. Feedback
5. Reflection
6. Futher Reading

1. LECTURE

Week 5 - Recorded (June 22, 2024)

1. PERCEPTION AND ORGANIZATION

Perception is the way in which something is regarded understood or interpreted so is perception what you see and therefore understand what you manipulated into seeing and understanding, even more so when it comes to advertising

Perception in typography deals with the visual navigation and interpretation of the reader by a contrast form an organization of the content content can be textual visual graphical or in the form of color. But our focus today is on typography.

1. Contrast

• There are several methods in typography to create contrast. This one is created by Rudi Ruegg.

Fig 1.1 Contrast by Rudi Ruegg, Week 5 (22/05/2024)

• Contrast is important to create a distinction or differentiation between information.
• Carl Dair posits 7 kinds of contrast (most of which have already been covered by Rudi Reugg using different terms).

• Size
• Contrast of size provides a point to which the reader's attention is drawn. 
• Bigger letters will be seen fisrt before samll letters.
• Commonly used in title or headings.

Fig 1.2 Size, Week 5 (22/05/2024)

• Weight 
• Bold type stands out in lighter styles.
• Rules, spots, squares also provide emphasis points.

Fig 1.3 Weight, Week 5 (22/05/2024)

• Contrast of form 
• Distinguishes between capital and lowercase letters.
• Condenses and expands Roman and italic variants.

Fig 1.4 Contrast of form, Week 5 (22/05/2024)

• Contrast of structure
• Different letterforms of different kinds of typefaces. 
• Example, a monoline sans serif and a traditional serif, or an italic and a blackletter.

Fig 1.5 Contrast of structure, Week 5 (22/05/2024)

• Contrast of texture 
• Combines size, weight, form, and structure on a block of text.
• Refers to type lines' appearance from close and distant perspectives.
• Depends on letterforms and arrangement.

Fig 1.6 Contrast of texture, Week 5 (22/05/2024)

• Contrast of color 
• Second color often less emphatic than plain black on white.
• Consider the element to be emphasized.
• Pay attention to tonal values of colors used.

Fig 1.7 Contrast of color, Week 5 (22/05/2024)

• Contrast of direction
• Contrast of direction is the opposition between vertical and horizontal, and the angles in between.
• Turning a word on its side can have a dramatic effect. 
• Text blocks can also be vertical or horizontal. 
• Mixing wide blocks of long lines with tall columns of short line can also create a contrast.

Fig 1.8 Contrast of direction, Week 5 (22/05/2024)

• Proper contrast is achieved when the typefaces are very different from each other.
• When using different type pieces or type families within a text body, it's important to ensure they work well.
• This requires practice and learning, often requiring analysis of existing layouts of other designers.

2. Form

• Form refers to the overall look and feel of typographic elements.
• It plays a crucial role in visual impact and first impressions.
• Good form in typography is visually intriguing, entertaining, and often memorable.
• It creates the most visual impact, similar to eye trackers in music.
• There is often a tension between form and functionality in design.
• The best design solutions often balance both, but stating one is more important than the other is a mistake.

Fig 2.1 Form Example, Week 5 (22/05/2024)

• Originates from Greek words "typos" (form) and "graphis" (writing).
• Represents concepts in visual form.
• Displays type as a form for unique characteristics and abstract presentation.

Fig 2.2 Form Example, Week 5 (22/05/2024)

• Balanced harmony between function and expression.
• Form perception transforms typeface from letters to forms.
• Manipulation through distortion, texture, enlargement, and space extrusion.

3. Organisation / Gestalt

• Gestalt Psychology aims to understand the laws behind acquiring and maintaining meaningful perceptions.
• Max Wertheimer developed laws predicting perceptual grouping under various circumstances.
• Gestalt theory emphasizes that the whole of anything is greater than its parts.
• It suggests that we experience things as a unified whole, not breaking down thoughts and behavior to their smallest elements.
• In design, the components/elements are only as good as its overall visual form.
• The sum of its parts is not greater than the whole or overall form.

• Law of Similarity 
• States similar elements perceive as unified group.
• Refers to color, orientation, size, motion.

• Law of Proximity
• States close elements perceive unified groups.
• Items closer to each other are grouped together.
• Items further apart are less likely to be grouped together.

Fig 3.1 Law of Similarity and Law of Proximity, Week 5 (22/05/2024)

• Law of Continuation
• Humans tend to perceive each of two or more objects as different, singular, and uninterrupted object even when they intersect.

• Law of Closure
• Mind's tendency to perceive complete figures or forms.
• Includes incomplete, partially hidden, or missing information.

Fig 3.1 Law of Continuation and Law of Closure, Week 5 (22/05/2024)

• Law of Symetry
• Fundamental principle stating symmetrical elements perceive unified groups.
• Objects symmetrical are more likely to be grouped together.

Fig 3.1 Law of Symetry, Week 5 (22/05/2024)

• Law of Simplicity (Praganz)
• When you're presented with a set of ambiguous or complex objects, your brain will make them appear as simple as possible.
• With the example of Olympic logo. When you look at the logo, you see overlapping circles rather than an assortment of curved, connected lines.

Fig 3.1 Law of Simplicity (Praganz), Week 5 (22/05/2024)

• You can find out more about these laws by viewing the links provided or simply Googling them. 
• You will find variation in the interpretation and you will have to weigh them all to come to a consensus of your own.
• Knowledge obtained from reading, listening and viewing must be exercised or put to use for it to be retained and of standard.

2. INSTRUCTION

Requirements 

• Laptop, Adobe Creative Suite, FontLab, Eportfolio (Blogspot), Gmail Ac, Facebook Ac, etc.

Submission 

• Eportfolio: All gathered information (failures, successes, epiphanies, sketches, visual research, printouts, websites, images, charts, etc.) must be documented logically and chronologically in the portfolio for the duration of the task in one post. Ensure all files are made public/visible/ accessible to all).

• Eportfolio: All images/sketches/diagrams/scans must be captured/photographed/scanned well with good, even, natural light, without shadows — use of tube/bulb/flashlight is not allowed. All images/sketches/diagrams/scans must be labeled (fig 1.), described, and dated. Final submission must be indicated clearly (distinguishable from process work) and uploaded as PDF and JPEG (not PNG) or as instructed in class.

• (Only if instructed) Tasks to be documented in a printed A4 enclosed in a Clear Sheet, logically and chronologically. The works must be labeled and dated – use a pencil and write neatly.

3. Task 2 - Key Artwork

1. Progress

For this task, we need to make a Key artwork/wordmark from our name or alias. During this week I was sick and missed the lecture, thus I didn't know that we needed to base the design on our personal traits. But still did sketches and digitized the ones I liked. Mr said that I need to explore the traits I want to put forth. Of course, you want good personal characteristics to reflect the wordmark. 

Fig 1.1 Sketch, Week 5 (22/05/2024)

Fig 1.2 Sketch, Week 5 (22/05/2024)

But still did sketches and digitized the ones I liked. Mr said that I need to explore the traits I want to put forth. Of course, you want good personal characteristics to reflect the wordmark. 

Fig 1.2 Digitization, Week 5 (22/05/2024)

After reflecting on my (good) prominent traits, which I think is just simplicity. If it's not my priority, I don't like to burden myself with unnecessary trouble, though sometimes taking it too far this trait can turn into apathy. the design does look professional, but it feels too easy (it took minutes) and bland compared to other classmates' designs with more stylish wordmarks.

So I made other two designs and put more time and energy into them. But, when I asked for family and friend's opinions they said that the simple wordmark is the best one and it reflects who I am most. Even Mr Vinod said the same thing. 

Fig 1.3 Digitazation, Week 6 (29/05/2024)

Too blinded by the sheer effort I put into the other design and can't see which design really worked, not wanting the effort I put in to go to waste. A recurring problem with me really, that I need to take a break when making designs and come back with a fresh mind to pick out the design. Sadly sometimes there's just not enough time to refresh my mind. 

Fig 1.4 Comparison, Week 6 (29/05/2024)

During class, we need to print out the wordmark in small and big sizes and show them to Mr Vinod to check for legibility and readability. My original wordmark has some rounded edges, but Mr suggested that I keep the V, C, and A edges sharp. Then tried out some color palettes to see how they did. 

Fig 1.5 Color Palate Comparison, Week 6 (29/05/2024)

After getting feedback from others, I chose the black and orange color palate. It seems that anything with black, white, and 1 saturated color gives a good contrast to the wordmark for it to pop out.

Fig 1.6 Chosen Color Palate, Week 6 (29/05/2024)

then I started to work on expanding the wordmark identity and settled with a V and A side-by-side pattern. I tried to make other variations with other colors. 

Fig 1.7 Identity Expansion Attempt, Week 7 (05/06/2024)

Then I made other custom designs for the collaterals specifically. 

Fig 1.8 Pattern, Week 7 (05/06/2024)

Fig 1.9 Collateral Pattern, Week 7 (05/06/2024)

The wordmark gives out a sleek and professional vibe and looks like a business or cooperate brand, so I decided on collaterals that represented that, such as books, id tags, and pens. Then made variations on the collaterals to see how they did. 

Fig 1.10 Collateral Variation, Week 7 (05/06/2024)

Fig 1.11 Collateral Variation, Week 7 (05/06/2024)

Fig 1.12 Collateral Variation, Week 7 (05/06/2024)

For the self-image in the middle, I just did a simple black-and-white image with patterns in the background.

Fig 1.13 Collateral Variation, Week 7 (05/06/2024)

Then I just position the design so the colors and patterns don't clash and ask for feedback.

Fig 1.14 IG Layout Attempt, Week 7 (05/06/2024)

I'm glad that asked for feedback that day because it was the last time Mr offered to give feedback on the collaterals. Mr said that the color palate was good and suggested adding blue to the color palate, at first I thought this was hard because I thought the color palate was already solid on the patterns and collaterals, and I don't want to ruin that. 

Mr also said that the collaterals can still be expanded and pens are not good collaterals to showcase my design due its the small surface area. Also, the self-image is not working, and told me to change it. 

After looking back at the compiled design the collaterals felt too bland and decided to change it complexly. Thus making more designs for the new collaterals again. This time I made the collaterals in Photoshop as it is more flexible in changing the color of the background and other objects. 

Fig 1.15 Collateral Pattern #2, Week 8 (12/06/2024)

Speaking of background I found a way to add the blue color without jeopardizing the pattern's already solid color palate. And as always I tried out many variations of colors on the collaterals. 

Fig 1.16 Collateral Variation, Week 8 (12/06/2024)

Fig 1.17 Collateral Variation, Week 8 (12/06/2024)

Fig 1.18 Collateral Variation, Week 8 (12/06/2024)

For the self image, Mr said that its not imaginative enough. So i tried another way to use the VA pattern and end up with circular shape and adding the color palate into it. Then adding orange and blue gradient to make it blend together.

Fig 1.19 Collateral Variation, Week 8 (12/06/2024)

For the animation, I made it frame by frame in Illustrator and compiled it in a gif maker web. It looks quite choppy and not smooth at all, so maybe if have the time ill try making it smoother.

Fig 1.20 GIF Frames in Illustrator, Week 8 (12/06/2024)

UPDATE (Week 10)

I know this is past the deadline, but I went back to see this post and realized the absolute disaster of the color palate on the IG. I thought the blue was going to add more variety of color and it did to the collateral, especially the book.

Fig 1.21 Collateral 1, Week 9 (19/06/2024)

But when I put it together in IG it just looks ugly, my eye keeps drifting over to the middle left wordmark, due to its darkest colors compared to all other posts. So I changed it to the original color palate without the blue and it does look more balanced in IG format. I've updated it in the final result.

Fig 1.22 IG Screenshot, Week 10 (26/06/2024)

Mr. if you're reading this, I'm sorry for the sudden update, but I can't let this slide, the blue is too ugly.

2. Final Result

Task 2(A) Key Artwork

Fig 2.1 Black wordmark on white background, Week 8 (12/06/2024)

Fig 2.2 White wordmark on black background, Week 8 (12/06/2024)

Fig 2.3 Colour palette, Week 8 (12/06/2024)

Fig .4 Wordmark in actual colours on lightest shade of colour palette, Week 8 (12/06/2024)

Fig 2.5 Wordmark in lightest shade of colour palette on darkest shade of colour palette, Week 8 (12/06/2024)

Task 2(B) Key Artwork & Collateral

Fig 2.6 Collateral 1, Week 9 (19/06/2024)

Fig 2.6 Collateral 2, Week 9 (19/06/2024)

Fig 2.7 Collateral 3, Week 9 (19/06/2024)

UPDATE Fig 2.8 IG Screenshot, Week 10 (26/06/2024)

IG Link: VELICIA

Fig 2.9 GIF Animation, Week 9 (19/06/2024)

4. Feedback

Week 5: 

General feedback:

• The wordmark needs to be legible, have appropriate cultural representation, and be memorable.
• The wordmark needs to be easily read, consistent, balanced, and original.
• Pay attention to the letter form, white space, and stroke width.

Specific feedback:

• Explore more on the traits that I want to put forth.
• 1# design is bold but not simple
• 2# It looks like it was inspired by a magic wand rather than the trait imaginative, some people may find it imaginative, but others may struggle to read. 
• The traits and the wordmark are not aligned.

Week 6: 

General feedback:

• When you make the wordmark smaller readability and legibility take a toll so you have to compromise. 
• The client does not always know why the design is the way it is Why is there a space in the design? or something else.
• A good client usually trusts the designer to take creative liberties with the design choices.
• The "put it on fridge method" to see how we live with it, cause sometimes we don't know our preferences. 
• It is still fogged and only by seeing it every day can we know, that's why we make collateral stuff.
• Don't make a sharp point in the design, it doesn't have an end, making it there's no closure.

Specific feedback:

• The #2 is too whisy whasy in the thickness of the stroke.
• The first one is simply good the spacing and kerning are good.
• The last one is just nope.

Week 7: 

General feedback:

• If you keep repeating the element from your wordmark it becomes stale.
• You need to be able to justify why you use that collateral.
• If you close up the background it feels like you trying to hide something.
• The background needs to be in sync with the chosen palate.

Specific feedback:

• The color palate is good, it has contrast with light and dark colors, maybe could add a blue there.
• The book has a wordmark and the gradient of the patterns is good. It has more opportunity with the cover to expand on the design.
• The 3 pens are too similar, 1 has patterns so that's good, and maybe another one with the same pattern.
• Pen does not give much space for design, generally, you want to have a big surface area to showcase the designs.
• My image in the middle is not very imaginative, it's not working so it needs more work as well.

5. Reflection

1. Experience

It was certainly a fun task, an exploration task is always fun. It's just the time limit and pressure from other module tasks that I need to prioritize made that my mind can not focus on this task 100%. I think this task is the most feedback I got from Mr Vinod, which is good. I still have areas I need to improve on, the thing with this exploration is there are so many things that can be tweaked and it will impact the whole design that I need to spend so much time on this. 

2. Observation

I initially underestimated the simplicity of my design, thinking I did not put enough effort into it. However, the feedback that was given proved that simplicity does not mean it is a bad design. Continuous feedback from Mr. Vinod and others also helps to refine the designs, improving legibility, color balance, and aesthetics. Experimenting with color palettes, such as adding blue, certainly enhanced the visual of the collateral, even though I was againts it at first.

3. Findings

Sometimes the most effective designs often stem from a genuine reflection of the designer. In my case, the simple wordmark is a true representation of my traits. If you want to showcase your design you need to give it the best chance it can have, such as collaterals with a large surface area, unlike pens. Introducing a new color to an already solid color plate is sometimes worth the time to try it out.

6. Further Reading

Fig 6.1 Typography Basics, Week 9 (19/06/2024)

1. Font Design Overview

• Serif Fonts
• Serif fonts are the most common text or body copy fonts.
• They come in three sub-categories: Oldstyle, Modern, and Square Serif.
• Oldstyle fonts are based on classical Roman inscriptions and are open, wide, and round with pointed serifs.
• Modern fonts are based on fonts designed over 200 years ago and have a greater degree of mechanical perfection.
• Square Serif fonts are contemporary styles used mainly for small amounts of text, such as advertising copy, subheads, and headlines.

• Sans Serif Fonts
• Sans Serif fonts are “without serifs,” usually have an overall even stroke weight, creating little contrast for the letters.
• They can evoke a more modern look for a report but can be harder to read than Serif fonts.

• Display Fonts
• Display and Decorative fonts are designed for attention-getting headline fonts.
• They should rarely be used as body copy fonts.

• Script Fonts
• Script fonts mimic handwriting, meaning the letters touch each other.
• They are more traditional and should not be used in all capital letters.

• Text Fonts
• Based on hand-drawn letters made by early monks for religious books, they have an “Old-World” feel.
• They are mostly used for certificates, diplomas, and invitations.

• Mono-Spaced Fonts
• • Most fonts are proportionally spaced, meaning smaller characters take up less space than larger ones.

• Dingbats
• • Dingbats are small pieces of art used to enhance the design of the text or page.

2. Font Styles and Families Overview

• Bold and italic versions are available for many fonts, but not all fonts were designed for bold and italic versions.
• New computer designers often make mistakes by making bold or italic versions of a font extra bold or making a font that has no bold or italic version extra bold.
• Some fonts only come in the "plain" version, even if they appear bold or italic after styling has been applied.
• Older programs like Microsoft Word, QuarkXPress, PageMaker, and FrameMaker allow users to make whatever style formatting they wish.
• Font weights should be used from the font menu, not from the style menu or the "B" and "I" buttons on the format ruler.
• Font families refer to fonts of the same design with a difference in weight from one font to another.
• Weights for a font are named by the font designer and follow no set rules.
• While it is acceptable to use multiple fonts from a single family, try to keep the font categories to one or two fonts.

3. Font Sizes Overview

• Fonts use a system of measurement called points.
• Computers use 72 points to one inch, traditional typography uses 72.27 points.
• The correct font size depends on usage and is somewhat arbitrary.
• Body copy should be around 9–12 points, depending on font, audience, and column width.
• Some fonts are easily read at smaller sizes, others need to be larger.
• Audience age and column width should be considered.
• A column of type should be about 50 characters across, no more than 65 characters.