13/10/2025 -8 /11/2025 / Week 5 - Week 8
YANG SHUO / 0384037
Bachelor of Design (Hons) in Creative Media
Advanced Typography / Task 2: Key Artwork and Collateral
LIST
LECTURES
Week 5
AdTypo_5_PerceptionAndOrganisation
- Perception in Typography
Typography shapes how readers perceive and interpret text through
contrast, form, and organization, guiding their
understanding. Designers build on this principle by integrating
typography with other visual elements to create cohesive and meaningful
communication.
- Contrast in Typography
- Carl Dair's Principles of Contrast: size, weight, form, structure, texture, color, and direction—each essential for creating emphasis and guiding attention in typography.
- Contrast builds hierarchy and clarity in typography, guiding how readers see and understand text. Examples of contrast include variations such as bold versus light type for weight, uppercase versus lowercase letters for form, and serif versus sans-serif fonts for structure.
|
|
Fig 1.1 Methods of Contrast by Carl Dair ＆
Typographical Contrast Devised by Rudi Ruegg (10-20_W5) |
- Form in Typography
Form in typography focuses on the visual shape, rhythm, and flow of text,
shaping the viewer’s first impression and engagement. Typography as form can
be abstracted beyond legibility for artistic effect. Strategic placement and
harmonious alignment enhance attractiveness and memorability.
Examples include creative letter combinations and visually engaging posters.
|
| Fig 1.2 Examples of posters and letters(10-20_W5) |
- Gestalt Principles in Typography
- Law of Similarity: Elements that look similar are grouped together.
- Law of Proximity: Elements placed close to each other are perceived as a group.
- Law of Closure: Our mind fills in missing parts to perceive a complete figure.
- Law of Continuation: We perceive continuous lines or forms even if they are interrupted.
- Law of Symmetry and Simplicity (Prägnanz): We tend to perceive symmetrical and simple forms as unified groups.
.jpg)
|
| Fig 1.3 Gestalt Principles_ Source: chrisbrejon.com(10-20_W5) |
INSTRUCTION
My design inspiration comes from cursive fonts and intertwining
ribbons. However, I quickly realized a problem: the text was not very
readable. When printed on a piece of clothing or a cup, it is hard to
see clearly.
In the feedback during the sixth week, Mr. Vinod told me that my wordmark still needed improved readability. So I bolded the strokes of the letters. After the improvement, both the balance and readability were enhanced.
Regarding the animation, I want to use flowing ribbons as the main
element. I chose to create the animation using After Effects.
Since the final required format is GIF, I imported the video exported from AE into Photoshop to create a frame-by-frame animation. The final product is as follows.
EXERCISES
Task 2 (A) – Key Artwork
In task 2A, we were given instructions to create a wordmark of our
own name/pseudonym.
1. Mind-map ＆ mood-board
Start Task 2, create a mind map (about who you are or who you want
to be), build an mood board or inspiration board to determine the
direction, and draw a possible word trademark/letter sketch of
your name (name, nickname or pen name - at least 4-5
characters).
When I was conceiving this task, I chose to use the English name
"Hazel" to carry out the creation. I
like vintage art. Based
on this, I completed my mind map.
|
|
|
Then I began to collect materials and make the mood- board. My
sources of materials include: Rednote and Pinterest. I set
elegance, fashion and vintage as my search targets.
Fortunately, I found a design inspiration that excited me -- the
ribbon. The letter design like a ribbon attracts me very much.
|
|
Fig 2.2 The mood-board (10-20_W5) |
2. Sketches
Then I began working on drawing the sketch. In the fifth and
sixth weeks, I made a total of two draft versions.
|
|
Fig 2.3 The sketch_1 (10-20_W5) |
|
|
Fig 2.4 The sketch_2 (10-27_W6) |
3. Digitization
So I ultimately chose this design as my digital wordmark.
|
|
|
I designed it so that a ribbon runs through all the letters,
replacing the horizontal strokes in those letters. I also created an
interweaving design between the ribbon and the letters, making the
overall look not rigid.
|
|
Fig 2.6 Design details - the interlacing of ribbons and
letters(10-27_W6) |
In the feedback during the sixth week, Mr. Vinod told me that my wordmark still needed improved readability. So I bolded the strokes of the letters. After the improvement, both the balance and readability were enhanced.
The picture below shows the comparison before and after the
modification.
|
|
Fig 2.7 Comparison before and after
modification(10-27_W6) |
Then I started choosing a color palette for my word mark. I wanted it to
be both retro and stylish. At first, I selected a combination of mint,
beige, and brown, but the overall saturation was too low and not
attractive enough, so I abandoned this scheme. I then chose a
red and blue color palette, which I felt matched my theme very
well.
Based on this color palette, I created two colored word marks as
required (Wordmark in actual colors on lightest shade of color palette /
Wordmark in lightest shade of color palette on darkest shade of color
palette).
|
| Fig 2.8 Black and white/color word mark ＆ color palette(11-03_W7) |
4. Animated Key Artwork
In order to make the ribbon appear to 'float' gracefully, I learned and
used the path-building function.
|
|
|
Since the final required format is GIF, I imported the video exported from AE into Photoshop to create a frame-by-frame animation. The final product is as follows.
|
|
|
Final Task 2A : Key Artwork
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Fig 2.17 Final Task 2A ( PDF ) (11-03_W7) |
Task 2 (B) – Collateral
Task 2 (B) involves designing animated key artwork and creating three
supporting items, such as Canvas bag and badge, using the artwork
developed in Task 2A. Following this, we will set up an Instagram account
to promote and establish the key artwork as a unified brand.
1. Collateral
I found all the product models on Pinterest. I chose a silk scarf,
phone cases and a mug as my collateral.
- Silk scarf
|
|
|
I chose to combine the ribbon element with my brand keywords "VINTAGE" & "FASHION" (implemented in ai using a path editor) to achieve a hollowed-out ribbon effect.
|
|
|
- Phone cases
|
|
|
I designed two phone cases, both featuring the pattern of the hollowed-out
ribbon. I chose low-saturation light blue and slightly more saturated blue
as the base color, and achieved different visual effects through the
irregular or parallel arrangement of ribbons. I especially like the second
one. Its color is very lively and the contrast is strong.
- Mug
|
|
|
2. Self-portrait
|
|
|
I chose a photo of myself, adjusted it to black and white, and then
added red and blue ribbon elements. I randomly distributed the ribbons in
the photo to cover part of the eyes. I think this can make the
self-portrait look more artistic.
3. Instagram Layout
In addition to the above content, I also created two different creative
layout designs. I hope they can convey the design concept I want. I also
incorporated them into the layout of Instagram.
|
|
|
|
|
|
I named my "design brand" Hazel Aesthetic Studio and my Instagram account "hazel.astudio".
|
|
|
- Instagram Link : hazel.astudio
Final Task 2B : Collateral
|
|
|
|
|
|
|
|
|
Instagram Link : hazel.astudio
|
|
|
Fig 2.29 Final Task 2B( PDF ) (11-10_W8)
|
|
Final Task 2: Key Artwork and Collateral
- Final Task 2A : Key Artwork
|
|
|
|
|
Fig 3.2 White wordmark on black background (11-10_W8)
|
|
|
Fig 3.3 Color palette (11-10_W8)
|
|
|
Fig 3.4 Wordmark in actual colors on lightest s
hade of color palette (11-10_W8)
|
|
|
Fig 3.5 Wordmark in lightest shade of color palette
on darkest shade of color palette(11-10_W8)
|
|
Fig 3.6 Final Task 2A ( PDF )(11-10_W8)
|
- Final Task 2B : Collateral
|
|
Fig 3.7 Collateral 1(11-10_W8)
|
|
|
Fig 3.8 Collateral 2 (11-10_W8)
|
|
|
Fig 3.10 IG Screen Grab (11-10_W8)
|
|
Fig 3.11 Final Task 2B ( PDF )(11-10_W8)
|
FEEDBACK
Week 5
General Feedback： This class provides the following summary
based on the feedback for Task 2. First, explore enough mood board cases
and be aware that not all examples from the internet are perfect.
Second, avoid homogeneous creations (e.g., overly popular star and moon
elements), demonstrate originality, and do more drafting. Third, ensure
that the creation reflects clear creative keywords. Fourth, use a grid
structure to make your design balanced and smooth.
Special Feedback： Most of the designs in my sketches have the
problem of excessive letter spacing. I need to refer to excellent
examples from the mood board for improvement. With readability ensured,
a more compact layout will enhance the impact of the letters.
Week 6
General Feedback： This class provides feedback on Exercise 1 of
Task 2 online. The errors we need to correct and issues to pay attention
to are: First, readability. Wordmarks need to be legible at different
scales. Second, structure. A good structure is essential to make the
work appealing. We need to consider whether this design can attract
purchases when applied to a product.
Special Feedback： The readability of my design is problematic;
when placed within a 15mm × 15mm grid, it is almost unrecognizable. I
need to make the strokes thicker to emphasize the letters. At the same
time, I want to simplify the complex twisting structure of the ribbons.
Establish a grid to ensure the structure is reasonable.
Week 7
General Feedback： This week, we continued working on task 2. In
class, Mr. Vinod provided us with specific guidance on our assignments.
Special Feedback： My assignment has the following issues. First,
the color scheme needs to be optimized. Second, the typography design of
the wordmark is not exciting enough. Third, the personal photo needs to
be replaced with a more original one.
Week 8
General Feedback： This class mainly covers the
announcement of the submission deadline for Task 2 and We have seen
examples of good e- portfolios available for learning.
Special Feedback： The collections in my Task 2 (B) needs
improvement. The silk scarf is fine, but there are issues with the
billboard and the handbag.
REFLECTION
Experience
Task 2 is a very interesting job for me. To some extent, it is also
related to my vision of the future. However, it was indeed more
challenging than I had imagined, to the extent that I even had to
overturn and rebuild all the designs halfway through. In Task 2's 2A,
I was originally very satisfied with the ribbon-wrapped style word
mark I designed, but the feedback I received was that its readability
was substandard. So I explored new solutions again. I also went
through rework during the color matching process. After starting 2B
work, I encountered a crisis of running out of inspiration.
Fortunately, Mr. Vinod gave me feedback and inspiration. For me, the
key words of the entire Task 2 are reflection and repetition. I have
made progress through exploration.
Observations
Through observation, I found that bold designs are more exciting than conventional ones. At the very beginning, my designs were always conventional. To maintain the characteristics of the design elements, I was always confined to one type of layout. Later, based on the feedback, I began to try designing with random and magnified local features, and the effect was much better than before.
Findings
As the professor said, your design should be able to make people willing to spend money on it. Through practice, I have concluded that good design needs to take into account artistic sense, uniqueness and universality. For instance, in Task 2B, I was quite satisfied at the moment because I stared at a design pattern for a long time. But when I placed it on the mortgage, this feeling changed immediately. Therefore, design cannot be carried out in isolation; it requires sufficient experiments to verify its rationality. At the same time, in both of these tasks, I learned that all versions of the text tags and promotional materials need to be consistent, which highlights the importance of maintaining consistency in creating a brand identity.
FURTHER READING
Typographic Design: Form & Communication
Rob Carter, Philip B. Meggs, Ben Day,
Sandra Maxa, Mark Sanders
|
| Fig 4.1 Typographic Design: Form & Communication(11-10_W8) |
Chapter 1
- Key Points
- Letterforms originally came from writing tools. The shapes of letters were influenced by tools like chisels, brushes, and pens.
- Gutenberg's invention of movable type marked the beginning of the printing era. Typography became systematic and reproducible.
- During the Industrial Revolution, typography shifted from something mainly for reading to something also for advertising. New bold, decorative, and sans serif styles appeared.
- In the 20th century, typography reflected artistic and technological movements, including Modernism, Postmodernism, and digital publishing.
- Today typography goes beyond print. It exists on screens, in interfaces, apps, and even in motion graphics and variable font systems.
- What I learned
- Typography is shaped by technology and communication needs, not just by aesthetics.
- There is no single "best" typeface, the right typeface depends on the medium and purpose.
- Understanding the history of typography helps designers make more intentional decisions rather than choosing fonts only because they "look nice."
- Personal reflection
Before reading this chapter, I thought typography was just about
picking a font that looks good. Now I realize every typeface comes
from a specific time, technology, and purpose. It makes me want to
think more about why I choose a typeface instead of choosing it
only based on its vibe.
Chapter 2
- Key Points
- Letterforms originated from strokes made by tools like brushes, reed pens, and chisels. The tool shaped the form.
- Uppercase letters were originally based on basic geometric forms; lowercase letters evolved later from handwriting.
- Typography uses imaginary guidelines such as baseline, x-height, cap height, meanline, and descender line to keep letters visually aligned.
- Each part of a letter has a specific name (serif, stem, bowl, counter, ascender, descender, terminal, etc.).
- Type designers make optical adjustments because mathematically equal letters often don’t look equal to the human eye.
- A typeface feels unified because different letters share repeated visual features and relationships.
|
||
|
- What I learned
- Tiny structural differences (especially x-height, counters, contrast) can change readability and personality.
- Designers rely on optical judgment as much as measurement.
- Personal reflection
The reason why fonts are expressive is that they have
structure. Only by understanding the structure of letters
can one truly control readability and visual expression.
When typesetting or choosing fonts, I want to pay more
attention to the structure of the letters rather than just
looking at the appearance.
评论
发表评论