Advanced Typography - Task 2: Key Artwork & Collateral
13.10.2025 - 17.11.2025 / Week 4 - Week 9
Muhammad Baihaqi Desya / 0377271
Advanced Typography / Bachelors of Design (Hons) in Creative Media / Taylor's University
Advanced Typography - Task 2: Key Artwork & Collateral
Jumplink
Lecture
Two reasons to design a typeface:
- To improve type legibility
- Type design is a form of artistic expression
Adrian Frutiger
- considered responsible for the development of typography to digital typography
- designed Univers and Frutiger typeface, etc
Frutiger Typeface
- originally made for the signage in Charles de Gaulle International Airport in France
- sans serif typeface
- designed in 1968
- purpose= to create a clean, distinctive, functional, and legible typeface that can be seen from up-close and afar
- limitations= the letterforms has to be recognizable in poor lighting conditions or when the reader is moving, so Adrian Frutiger experimented with unfocused letterforms to identify the most legible one
Matthew Carter
- created fonts that has to cover technical challenges (example: the font has to be legible when the size is small on a device's screen)
- created Verdana (for Microsoft), and Georgia typeface, etc
- limitations= Verdana was made of pixels, making the letters "i, j, l" hard to identify
- Bell Centennial typeface was created when Matthew Carter was assigned by a company to create a typeface that will be used in the company's telephone directories because it would look blur after printing (example: the strange shape on capital "B" is called an ink trap because the extra ink that flows due to the paper and fast printing covers the ink traps making it look normal)
Edward Johnston
- created London "Underground" typeface, known ad Johnston Sans (1916)
- Johnston Sans was created because Edward Johnston was asked to create a typeface with "bold simplicity" that is modern but comes from tradition. It is a combination of classical Roman proportions with humanist warmth
- purpose= London's Underground railway wanted a new typeface for all posters and signage
- limitations= Johnston had to unite all the different typefaces used in London Underground group
- Johnston typeface has elegance and simplicity that fits the modern era
Eric Gill
- created Gill Sans
- Gill Sans success made Eric Gill feel guilty because it is heavily based on the "Underground" typeface by Edward Johnston
.jpg) |
Figure 1.1 typefaces created week 4 |
General Process in Type Design
1. Research
- understand type history, type anatomy, and type conventions
- determine the purpose and the different applications it can be used in
- examine existing fonts for reference
2. Sketching
- some sketch with digital tools and some with hands, both methods have pros and cons
- sketching with hands= is slow but has time to actually consider and think about the design
- sketching digitally= is fast but it is slow when detecting hand movements of hand strokes
3. Digitization
- pay attention to the entire form and the counter form of the typeface because it affects the readability of the typeface
4. Testing
- a process of refining parts within a typeface to see whether it is legible or readable
- if its a display type, the expression of the typeface is more important
5. Deploy
- when a typeface is deployed, it may contain a few small mistakes that were not identified during testing
- the process of improving does not stop during this step, so the testing phase is important to avoid any big mistakes
Typeface Construction
- use grids with circular forms to construct the letterforms
- Roman Capital uses a grid that includes a square and inside it is a circle that fits the square. Within the square is a rectangle that is 3/4 the size of the square and positioned in the center of the square
 |
Figure 1.2 typeface construction week 4 |
Construction Considerations
- there are a few elements of a form that can be used on other forms due to the similar design, so the work process is faster
 |
| Figure 1.3 typeface construction considerations (week 4) |
Visual Correction
- overshoots and curved forms are important visual corrections that must be taken into account, it also applies to vertical alignment for both curved and straight forms
- it is needed to determine the space between letters, because the letters must be distanced properly to create a uniformed visual white space
.jpg) |
| Figure 1.4 typeface visual correction (week 4) |
Perception in Typography
- deals with visual navigation and interpretation of the reader from the contrast, form, and organization of the content
Contrast
- to create distinction between information
Creating contrast in typography by Rudi Ruegg=
 |
Figure 2.5 contrast in typography by Rudi Ruegg (week 5) |
Carl Dair
- adds texture and direction to make the design and meaning more clear, ambiguous, and adds flair
7 Contrast by Carl Dair (mostly covered by Rudi Ruegg but uses different terms)=
1. Size
- to catch the reader's attention
2. Weight
- how bold type stand out from lighter type of the same style
3. Contrast of Form
- distinction between capital and lowercase, roman letter and its italic, condensed and expanded
4. Contrast of Structure
- uses different kinds of typefaces
5. Contrast of Texture
- uses different sizes, weights, forms, and structures by applying them to a block of text
6. Contrast of Color
- it is suggested that the second color is not as high-contrast as black on white
7. Contrast of Direction
- contrast between vertical horizontal and angles in between
 |
Figure 2.6 contrast by Carl Dair (week 5) |
Form
- creates most visual impact in a design
- overall look and feel of the elements in a typographic composition
- a good form will lead the eye from point to point, entertains the mind, memorable, intriguing
- typography came from the Greek words "typos" (form) and "graphis" (writing)
- typography is writing according to the right format
- two functions in typography=
1. to represent a concept
2. to represent it in a visual form
2. to represent it in a visual form
- displaying type as a form shows the letterforms unique characteristics and abstract presentation
.jpg) |
Figure 2.7 form(week 5) |
- if a typeface is perceived as a form, it is no longer legible because of the manipulation created by distortion, texture, enlargement, and extruded into a space
.jpg) |
Figure 2.8 form poster examples(week 5) |
Organization
Gestalt= a German word that means "the way a thing has been placed or put together"
Gestalt Psychology is an attempt to understand the ability to maintain meaningful perceptions
Gestalt psychologist, Max Eertheimer developed "laws" (principles) that predicts how our brain organizes visual elements and groups them (Gestalt principles)
Gestalt Theory
= the entirety of something is greater than its parts, it is based on hoe we experience things as a whole.
Gestalt: Perceptual Groupings
1. Law of Similarity
= elements that are similar tend to be perceived as a group
2. Law of Proximity
= elements that are close together tend to be perceived as a group
3. Law of Closure
= how the mind see complete forms or figures even when it is incomplete
4. Law of Continuation
= humans tend to perceive two or more objects as a different and singular even if they intersect
5. Law of Symmetry
6. Law of Simplicity
 |
Figure 2.9 organization(week 5) |
Instruction
Task 2 A
We were assigned to make a mind map about
ourselves, a mood board, and some sketches first.
Which we will then turn into a wordmark that is also
an artwork.
Mind Map
 |
| 3.1.1 Mind map about myself (14/10/2025 week 4) |
 |
| 3.1.2 keyword that i selected for my task (14/10/2025 week 4) |
MoodBoard
 |
| 3.1.3 Wordmark Moodboard (14/10/2025 week 4) |
Sketch
 |
| 3.1.4 Initial sketches (14/10/2025 week 4) |
This is my Sketch, i am not very good with sketching so
i just take directly to Adobe Ilustrator.
 |
| 3.1.5 digitization development Progress (20/10/2025 week 5) |
After creating the initial sketches, I developed them
further in Adobe Illustrator. I came up with four
variations as shown, but after reviewing them, I
realized that the version with the disconnected letter
stems was harder to read. I also asked my classmates for
feedback, and they mentioned the same issue the
readability decreased. Because of that, I decided it’s
better to keep the letter stems connected so the logo
remains clear and easy to recognize.
After deciding which design direction to continue with,
the next step was choosing the color palette. I explored
several options, and these are the two colors I found
that could potentially work as the main brand colors.
 |
| 3.1.6 digitization development finding color (27/10/2025 week 6) |
After asking for feedback from my friends and classmates, most of them felt that the colors in the bottom row looked more elegant and premium compared to the ones on top. The top colors were seen as too basic and commonly used by many existing brands. After considering their feedback and reflecting on it myself, I also found that the bottom colors have a stronger and more distinctive character, so I decided to go with those.
WORDMARK RESULT
 |
| 3.1.7 Final digitization wordmark (27/10/2025 week 7) |
Task 2 B
After done choosing my own color next i need to put my
design into some mockup.
 |
| 4.1.1 mockup progress (07/11/2025, week 7) |
 |
| 4.1.2 final mockup t-shirt (07/11/2025, week 7) |
This is the Instagram Page Layout:
 |
| 4.1.3 instagram layout page result (11/11/2025 week 8) |
After done making the layout now i just need to put it
into real Instagram Account. i will make a new
Instagram Account with the name haqi.collective after
that i will start doing the animation for my wordmark.
This is the final mockup result:
 |
| 4.1.4 all final mockup layout for instagram (12/11/2025 week 8) |
 |
| 4.1.5 Final instagram layout result (12/11/2025 week 8) |
 |
| 4.1.6 animation progress (17/11/2025 week 9) |
| 4.1.7 final animation on GIF (17/11/2025 week 9) |
 |
| 5.1.1 black wordmark on white background (27/10/2025 week 7) |
 | |
|
 | |
|
 | |
|
 | |
|
 | |
|
| 5.1.7 wordmark animation (17/11/2025 week 9) |
| 5.1.8 Final 2A submission PDF (27/10/2025 week 7) |
Task 2 B Final Result
 | |
|
 | |
|
 | |
|
 | |
|
 | |
|
5.2.6 final artworks PDF (12/11/2025 week 8)
Feedback:
Week 8: General Feedback: Giving
feedback for Task 2 A and B and the deadline
for task 2. giving a brief for task 3 that
will start next week.
Week 7: Specific Feedback: my design
overall was good, but need to fix the spacing
Week 6: General Feedback: got feedback
for task 2 and a little brief for the upcoming
week continues
Specific Feedback: Mr vinod say my
design was acceptable but need to make it more
consisten.
Week 5: i was absent due to clash class
Reflection:
Working on this branding exercise allowed me to explore not just logo design, but also how a visual identity comes together as a whole. Starting from sketches, moving into Illustrator, refining the letterforms, and finally selecting the color palette, I became more aware of how every small decision affects the final outcome.
Experimenting with multiple logo variations helped me understand the importance of readability and balance. Initially, I tried designs with disconnected letter stems, but after reviewing them and getting feedback from my classmates, I realized that they reduced clarity. This pushed me to choose the version that felt more cohesive and easier to recognize.
Color selection was another key moment. I explored several palettes, but the feedback from friends and classmates showed me that the darker navy and vibrant orange combination felt more premium and distinctive compared to the more basic colors in the first set. After reflecting on their responses, I agreed the bottom palette expressed the identity I wanted much better.
Seeing the visual identity applied to mockups like bags, shirts, posters, and color swatches made the brand feel more real. It helped me imagine how the logo could live in everyday items and environments. This stage also gave me a better understanding of consistency, scalability, and how color and typography work together in real world applications.
Overall, this process taught me how important feedback, iteration, and experimentation are in design. Every step from sketch to mockup shaped the final concept and helped me develop a clearer sense of direction and style in my design choices.
Further
Reading:
Week 4
The website explains that a personal brand reflects who we are as a person and expresses the values we have. It also stated that our personal brand should be able to show our strength and show our attributes, etc. The website informs us about how our personal branding can help us if we plan to change our career path since the employers would want to know why we decided to change our career path. The content of the website also included some tips on how we should create our brand identity. The website encourages us to know what we want to be known as and know our audience, etc. It also provided some platforms that we can use to promote our personal brand.
Week 5
1. Define our core values first and make use of online exercises on the internet that can help define them
2. Finding our strength and what makes us outstand the others
3. Knowing what goal we want to achieve
4. Determine our audience
5. Set and plan a communication strategy to reach the audience
6. Get professional portraits/pictures
7. Create a website
8. Double check the content
9. Continue developing your personal brand.
Week 6
The website talks about brand identity and describes the word as something that is filled with your values, how you communicate your brands through clients, and how you want people to perceive your brand, etc. In short terms, it is the brand's personality and the trust that holds the relationship between the brand and the customer. Then the website provided some brand examples that has a strong identity, one of them is Coca-Cola. The website also stated a few reasons why brand identity is important. The first one is how it is representing your company and what the company does. The second one is how it can improve the trust between customers and the brand. Following that, the website also gave some explanation on what makes a developed brand identity:
1. How well it is representing the company
2. The ability to maintain trust with the customers
3. How well the brand promotes its product
4. Serves a purpose for the company
5. The ability to attract new customers.
Week 7
The website helps readers to choose the correct color palette to represent their own brand. Based on the website, brand colors are a palette that has 5-10 colors that will be used to represent a company. The color palette is usually used for the company's logo, website, social media, etc. Then the website gave us a few steps on how we should pick our brand colors:
1. Choose a color that represents your values and goals
2. Do some research about colors different meanings
3. Explore other sources for inspiration
4. Select a primary color
5. Select the secondary colors that matches the chosen primary color
6. Select the neutral colors
7. Experiment with the chosen colors to see how they complement each other.
Week 8
The website gave us some pointers on how we can make a good animation from our brand:
1. Watch and explore others animation to see what works
2. Make the animation reflect the company's values
3. Make the viewers curious about the animation
4. Include some entertainment features to grab the viewers attention
5. Prevent making the video too long
The website also gave a tip to make our animation stand out, which is by ending the animation with a dark background.
.png)
Comments
Post a Comment