Advanced Typography / Task 2 (A) & (B)
October 14, 2025 - November 16, 20205
14.10.2025 - 16.11.2025 / Week4 – Week8
Ryoma Kato / 0365874
Advanced Typography / Bachelor of design (Honours) in Creative Media
MIB
LECTURE
Week 5 - AdTypo_5_Perception And Organisation
Perception in Design and Typography:
・Definition of Perception: How something is regarded, understood, or interpreted.
・Manipulation in Design: Designers often manipulate what people see and understand, particularly in advertising, which can sometimes border on dishonesty.
・Typography's Role: In typography, perception deals with the visual navigation and interpretation of the reader through contrast, form, and organization of content.
・Content Types: Information can be textual, visual, graphical, or color-based. Typography is rarely in a vacuum, often interacting with other elements.
・Typography's Role: In typography, perception deals with the visual navigation and interpretation of the reader through contrast, form, and organization of content.
・Content Types: Information can be textual, visual, graphical, or color-based. Typography is rarely in a vacuum, often interacting with other elements.
Contrast in Typography
・Purpose: To create distinction and differentiation between information, aiding reader comprehension.
・Rudy Rheig's Methods: Examples include light/bold, condensed/extended, organic/machined, Roman/italic, small/large, negative/positive, serif/sans-serif, and red/blue.
・Karl Gerstner's Seven Kinds of Contrast:
・Size: Draws attention, commonly used for titles and headings (e.g., making headlines slightly larger than body text, not excessively huge unless for specific impact like newspaper headlines).
・Weight: Bold type stands out from lighter type of the same style; can also involve rules or spot squares for visual emphasis.
・Form: Distinction between capital/lowercase, roman/italic, or condensed/expanded versions of a typeface.
・Structure: Uses different letterforms from distinct typefaces (e.g., monoline sans-serif vs. traditional serif) to create contrast.
・Texture: The overall appearance of text blocks, both up close and from a distance, influenced by letterforms and arrangement; layers of texture create visual impact.
・Direction: Opposition between vertical, horizontal, and angled elements; turning words or mixing block shapes (wide lines vs. tall columns).
・Color: Can create contrast and visual impact, but must be used thoughtfully to emphasize elements and avoid confusion; tonal values are important.
・Effective Contrast: Choosing typefaces that are distinctly different yet complementary creates proper contrast, avoiding conflict from overly similar choices.
・Rudy Rheig's Methods: Examples include light/bold, condensed/extended, organic/machined, Roman/italic, small/large, negative/positive, serif/sans-serif, and red/blue.
・Karl Gerstner's Seven Kinds of Contrast:
・Size: Draws attention, commonly used for titles and headings (e.g., making headlines slightly larger than body text, not excessively huge unless for specific impact like newspaper headlines).
・Weight: Bold type stands out from lighter type of the same style; can also involve rules or spot squares for visual emphasis.
・Form: Distinction between capital/lowercase, roman/italic, or condensed/expanded versions of a typeface.
・Structure: Uses different letterforms from distinct typefaces (e.g., monoline sans-serif vs. traditional serif) to create contrast.
・Texture: The overall appearance of text blocks, both up close and from a distance, influenced by letterforms and arrangement; layers of texture create visual impact.
・Direction: Opposition between vertical, horizontal, and angled elements; turning words or mixing block shapes (wide lines vs. tall columns).
・Color: Can create contrast and visual impact, but must be used thoughtfully to emphasize elements and avoid confusion; tonal values are important.
・Effective Contrast: Choosing typefaces that are distinctly different yet complementary creates proper contrast, avoiding conflict from overly similar choices.
Form in Typography
・Definition: The overall look and feel of typographic elements, contributing to visual impact and first impressions.
・Role in Memorability: Good form is visually intriguing, guides the eye, entertains the mind, and makes content memorable.
・Typography's Dual Function: To represent a concept and to do so in a compelling visual form.
・Interplay of Meaning and Form: When type is perceived as form, it can be manipulated (distortion, texture, enlargement, extrusion) to create artistic expression, sometimes pushing readability limits.
・Harmonious Placement: Strategic placement of letters and elements creates beautiful and harmonious alignments.
・Role in Memorability: Good form is visually intriguing, guides the eye, entertains the mind, and makes content memorable.
・Typography's Dual Function: To represent a concept and to do so in a compelling visual form.
・Interplay of Meaning and Form: When type is perceived as form, it can be manipulated (distortion, texture, enlargement, extrusion) to create artistic expression, sometimes pushing readability limits.
・Harmonious Placement: Strategic placement of letters and elements creates beautiful and harmonious alignments.
Organization and Gestalt Psychology
・Gestalt Definition: A German word meaning "how things have been placed or put together"; psychology attempts to understand laws of meaningful perception.
・Core Principle: "The whole is greater than its part"; designers must view a design as a unified whole, not just individual components.
・Importance for Designers: Understanding Gestalt principles helps create cohesive and effective layouts where elements interact meaningfully.
・Key Gestalt Principles (Laws):
Similarity: Elements that are similar (color, orientation, size, motion) are perceived as a unified group.
Proximity: Elements close together are perceived as a unified group; neglecting this can lead to misinterpretation (e.g., newspaper headline blunder).
Closure: The mind's tendency to complete incomplete figures or forms (e.g., WWF panda logo).
Continuation: Humans perceive intersecting objects as continuous, uninterrupted entities, influenced by alignment (e.g., reading rhythm in publications).
・Application: These principles are crucial for organizing complex content hierarchically and creating visually impactful layouts.
・Core Principle: "The whole is greater than its part"; designers must view a design as a unified whole, not just individual components.
・Importance for Designers: Understanding Gestalt principles helps create cohesive and effective layouts where elements interact meaningfully.
・Key Gestalt Principles (Laws):
Similarity: Elements that are similar (color, orientation, size, motion) are perceived as a unified group.
Proximity: Elements close together are perceived as a unified group; neglecting this can lead to misinterpretation (e.g., newspaper headline blunder).
Closure: The mind's tendency to complete incomplete figures or forms (e.g., WWF panda logo).
Continuation: Humans perceive intersecting objects as continuous, uninterrupted entities, influenced by alignment (e.g., reading rhythm in publications).
・Application: These principles are crucial for organizing complex content hierarchically and creating visually impactful layouts.
Design as Social Responsibility
・Effective Communication: Designers have a social responsibility to ensure effective communication and knowledge transfer.
・Impact of Design: Poorly organized information, lack of contrast, or bad typeface choices negatively impact readability, knowledge transfer, and reading rhythm.
・Responsibility: Designing information properly with good hierarchy and contrast is a responsibility towards both the writer and the reader.
・Continuous Practice: Like any skill, design requires continuous practice and learning from various sources to achieve and retain high standards.
・Impact of Design: Poorly organized information, lack of contrast, or bad typeface choices negatively impact readability, knowledge transfer, and reading rhythm.
・Responsibility: Designing information properly with good hierarchy and contrast is a responsibility towards both the writer and the reader.
・Continuous Practice: Like any skill, design requires continuous practice and learning from various sources to achieve and retain high standards.
WORK
Task 2 Exercise A - Key Artwork
In this exercise, I will make original key artwork by using my name.
Week 5
First, I wrote "about me" and I analyzed my own elements.
( Analyzing about me, week 5 )
After analyzing, I decided keywords for this task.
I chose, Piano, Book, Mystery and Game for keywords. And I started to draw my original key artwork sketches.
( Sketches of key artwork, week 5)
Those are pictures of sketches.
After this, I stared to make key artwork by Illustrator.
( Key Artwork Design, Week 5 )
These are designs that I make.
( Key Artwork Piano×Name, Week 5 )
( Key Artwork Mystery×Name, Week 5 )
( Key Artwork Book×Name, Week 5 )
( Key Artwork Game×Name, Week 5 )
Week 6
After I showed to the lecture, he said my key words Piano, Mystery, Book and Game are not key words on this Task. He give me some examples of key words so I changed my key words and remake my work.
( New Keywords and Key Artwork, week 6 )
I changed my key words to "Playful" and "Fun". I feel fun, when I playing game or playing instruments so I try to image those elements and make a key artwork.
I chose three key artwork that I made from week 5 and week 6.
( Key Artwork Optimized for Submission, week 6 )
After I chose three key artwork, Following the lecture instructions, I created two square boxes, one large and one small, and displayed the Key Artwork inside them. I also set up my own artwork to appear on the image of the man in black clothing and configured how it would look.
I like it left one so I showed it Left one to the lecture.
( Key Artwork , Week 6 )
He gives me advices that, "Readability is fine. Try to make the spacing between letters more consistent. The “Y” slightly looks like a “4,” so please adjust that. Also, move the crossbar of the “A” a bit higher." so I try to change it a bit and completed my key artwork.
( Complete Digitised key artwork, week6 )
This is the completed work for my key artwork.
After this, I select the color pallet.
( Color pallet 1, week 6 )
( Color pallet 2, week 6 )
( Color pallet 3, week 6 )
I like the first one, Purple one so I chose first color pallet.
Complete work,
- Black wordmark on white background
- White wordmark on black background
- Colour palette
- Wordmark in actual colours on lightest shade of colour palette
- Wordmark in lightest shade of colour palette on darkest shade of colour palette
- wordmark animation (Gif format)
( Final key artwork with white background, week 6 )
( Final key artwork with Black background, week 6 )
( Chosen color pallet, week 6 )
( Final key artwork with lightest shade of color pallet, week 6 )
( Final key artwork with darkest shade of color pallet, week 6 )
( Short animation of final key artwork, week 6 )
( Task 2 Exercise A Final works, pdf, week 6 )
Task 2 Exercise B - Key Artwork & Collateral
Week 7
This week, Im going to start to design Task 2 Exercise B. For this task, I need to make 3 collateral and design Instagram page.
( Editing screen in photoshop, week 7 )
This is a idea of Instagram page.
( Collateral 1, week7 )
( Collateral 2, week7 )
( Collateral 3, week7 )
These are collateral that I think. This key artwork referenced from Game and event so I make collateral design kinds of game or event.
( , week7 )
And those are design that I used to instagram home page design.
Finally, my Instagram home page design be like this.
( Progress, week 8 )
In week 8 the lecture give me feed back. He said ”The design isn’t a true expansion because it adds unrelated elements instead of using the original pixel squares to create consistent patterns.” So, I try to edit a bit.
I make 2 kinds of new one and I replace it.
Complete work,
- Collateral 1, 2, 3
- Instagram handle & link
- IG screen grab with good resolution. IG featuring 9 tiles (profile must feature a bio).
( Final Collateral 1, week 8 )
( Final Collateral 2, week 8 )
( Final Collateral 3, week 8 )
( Instagram handle&link, week 8 )
( IG screen, week 8 )
( PDF file of Task 2 B, week 8 )
FEED BACKS
Week5
General
Ensure readability – all letters must be clear and easy to distinguish.
Maintain balance and symmetry; avoid uneven spacing or slanted designs.
Create compact and impactful letterforms by reducing unnecessary gaps.
Check design in black and white to test visual strength without color.
Use clear, positive, and specific keywords that reflect concept meaning.
Avoid literal depictions of interests (e.g., cats, needles); focus on abstract ideas.
Build a mood board with sufficient, relevant, and diverse references.
Avoid overused or trendy motifs; aim for originality.
Produce many quick sketches to explore variations and improve ideas.
Iterate and refine designs for readability, stability, and impact.
Common issues: weak balance, poor readability, limited sketches, vague keywords.
Specific
Current words are just interests, not real keywords.
Define 1–2 clear, positive core keywords (e.g., playful, mysterious).
Avoid mixing opposite moods.
Needs deeper mood board and more idea sketches.
Design should reflect the audience you want to attract
Week6
General
Keep design consistent and balanced using grids. Avoid 45° angles, check readability at small size, and show process. Choose color palette after approval.
Specific
Readability is fine. Try to make the spacing between letters more consistent. The “Y” slightly looks like a “4,” so please adjust that. Also, move the crossbar of the “A” a bit higher.
Week7
I posted at the facebook for taking feedback but thers no feedback.
Week8
General
Use a diagonal layout and present the process (Mind Map → Color exploration → JPEG logo), collaterals, and Instagram materials in order. Add captions to all pages. Submit a full-process PDF to both A and B.
Specific
The current design is not an expansion; it only adds unrelated elements. If your wordmark uses pixel-like squares, use those squares to create patterns and apply them consistently. Do not add elements that are not derived from the original design.
REFLCETION
Experience
In this project, I particularly enjoyed Task 2A. The process of analyzing my personal elements, defining keywords, and developing sketches for the Key Artwork felt fresh and engaging. Although I was initially disappointed when my first version was said to be difficult to read, revising it helped me produce a Key Artwork I was truly satisfied with. I also felt that the progression from creating a typeface in Task 1 to developing a Key Artwork in Task 2 helped me build skills step by step toward Task 3.
On the other hand, Task 2B during Week 7–8 was more challenging. With other modules piling up, I often felt tired and couldn’t fully enjoy the design process. Still, refining the design and completing the final version became a valuable opportunity to reassess my workflow and creative approach.
Observations
Throughout this task, I became more aware of visual communication elements such as letterform details and color interactions. I realized how small differences—like the placement of anchor points or subtle shape changes—can significantly affect readability.
I also learned that “expansion” means developing design elements based on the original concept, not adding unrelated components. Feedback on my Instagram collateral helped me better understand the importance of maintaining a consistent visual identity.
Findings
This project reaffirmed that design is not only about appearance but also about communication. Because I naturally lean toward abstract and expressive styles, I often prioritize what I personally like. However, working with typography reminded me that clarity and functionality must come first.
Balancing expressive design with readability was a meaningful challenge, and I realized the importance of creating visuals that “communicate” effectively. I want to carry this mindset forward into future projects as well.
FURTHER READING
( Typographic Systems by Kimberly Elam )
This material (Typographic Systems by Kimberly Elam) presents the idea that all design is based on structural systems, and that there are eight main variations for typographic composition. By understanding these visual compositional systems, designers can fluidly organize words and images within a structure, in a combination of structures, or in a variation of a structure.
Typographic composition is complex because it is reliant on communicative function, which involves additional criteria such as hierarchy, reading order, legibility, and contrast. The eight typographic systems are likened to what architects call "shape grammars," each with its own set of rules, providing a sense of purpose that focuses and directs decision-making. The constraints of these systems, in fact, promote creativity for designers in exploring composition. This book aims to give designers insight into a broader approach to organization beyond the conventional grid system.
1. Eight Typographic Systems
The eight systems explored in this book each possess a distinct aesthetic and visual language:
Axial System: All elements are composed to either the left or right of a single axis.
Radial System: All elements radiate outward from a central focal point.
Dilatational System: All elements expand in concentric bands from a central point.
Random System: Elements appear to have no specific pattern or relationship between them.
Grid System: The system is comprised of vertical and horizontal divisions.
Transitional System: An informal system with layered banding.
Modular System: A continuous sequence of nonobjective elements constructed as standardized units.
Bilateral System: Text is arranged symmetrically about a single axis.
2. Project Elements and Process
In all systems, the same eight-line message is used to enable comparison. These systems are explored visually primarily in two ways:
Constrained Compositions: A series of compositions constrained to one typeface in one size and one weight to deeply experiment with the system.
Compositions with Nonobjective Elements: A series of compositions with the option to use nonobjective elements and variations in tone to enhance the conveyance of the message.
3. Typographic Constraints and Options
Within the projects, there are several typographic options that allow for rich variations:
Line Breaks: The full eight lines of the message must be used, but line breaks can be inserted at any point to create multiple lines, altering the grouping and reading. Logical grouping enhances legibility.
Leading: Leading is variable, creating changes in placement and texture. Designers should be sensitive to the texture of the text and experiment with dense or airy textures.
Word and Letter Spacing: Varying these intervals creates distinct changes in texture and tone. If letter spacing is widened, word spacing should also be widened to avoid confusion.
The Circle: As a "wild card element," it can be used to direct the eye, create a pivot point, tension, emphasis, structure, or balance. Its placement can dramatically change the entire composition.
Comments
Post a Comment