TABLE OF CONTENTS
2. Instructions
Perception - The way things are regarded, understood, or interpreted. In typography, perception is how a piece a content is visually navigated and interpreted by the reader through its contrast, form, and organization.
Contrast
Contrast is needed to create distinction or differentiation between
information. This helps reader separate different types of information in
works with lots of textual information. Different designers have proposed
their methods to create contrast in their works, and Rudi Ruegg
proposed the following:
|
| Fig 1.1 Methods to Create Contrast by Rudi Ruegg |
To add to the list, Carl Dair proposed texture and direction as a way to create contrast.
- Texture - refers to the way the lines of type look as a whole, whether viewed up close or from a distance. It is influenced based on the contrast of size, weight, form, and structure, as well as how it is arranged.
- Direction - The opposition of text arranged vertically, horizontally, and other angles. Turning individual words or blocks of text can create a dramatic effect. Mixing wide blocks of text with long lines next to tall columns of short lines can also create contrast.
|
| Fig 1.2 Methods to Create Contrast by Carl Dair |
Form - The overall look and feel of elements in a typographic composition. It plays a key role in visual impact and first impressions. A good form is visually engaging, guides the eyes across the layout, entertains the mind, and is memorable. Displaying type as a form highlights letterforms' unique characteristics and abstract presentation.
|
| Fig 1.3 Form in Typography |
Gestalt Theory - We perceive things as whole forms rather than separate parts. In design, this means the overall visual impression matters more than just the individual elements. This is grouped into: law of similarity, law of proximity, law of closure, law of continuation, law of symmetry, law of simplicity, etc.
|
| Fig 1.4 Gestalt Theory |
INSTRUCTIONS
To start off this project, we were instructed to make a mind map consisting of things that can describe us. Out of all the elements, I chose to focus on the following to inspire my design: Chinese seals, definitions of my name, fantasy, games, and bold texts. From there, I looked for references that can help me with my design direction.
|
| Fig 2.1 Mind Map & References / Week 5 (21/05/25) |
Afterwards I started sketching out some potential ideas, mainly focusing on seals and bold text as the foundation of my design. I also tried playing around with other possible designs, such as a circular font, as well as laying out my name like a pillar and a sword.
|
| Fig 2.2 Sketches / Week 5 (21/05/25) |
After receiving feedback during class, I decided to further explore other possible seal and bold designs which surprisingly took a while. I also tried mixing both these concepts together, for a bold and cultural design.
|
| Fig 2.3 Further Exploration / Week 5 (27/05/25) |
I decided to use the diagonal design for my wordmark because it doesn't look too much like your usual seals, while still keeping a hint of that look. I came up with the following designs:
|
| Fig 2.4 Initial Results / Week 5 (27/05/25) |
I decided to go with the design below as it fills up the square. Although the “O” looks awkward, I want to prioritize the square being filled. Since I haven’t found a better design yet, I will proceed with the current version.
 |
| Fig 2.5 First Digitized Key Artwork / Week 5 (27/05/25) |
Week 6 / Revision and Coloring
After the previous week’s feedbacks, I tried out several designs after refining the letters’ shape and layout. However, I found the sharp edges to not look that good, and I decided to revert back to the rounded edges.
|
| Fig 2.6 Revisions / Week 6 (03/06/25) |
For the color palette, I wanted to use green as that is my favorite color. Coincidentally, these seals are often used with red ink, which was great as they complement each other. I then build my color palette around these two colors (The color palette is changed while making the collateral).
Week 7 / Animation
Before I started with my animation, I sketched out simple storyboards to visualize the flow of the animation. The first one is a seal falling down to reveal the wordmark. The second one is to have the wordmark to continuously change between intervals. The third one is to have a close up of the strokes forming into the wordmark with a slow reveal at the end.
|
| Fig 2.8 Storyboard/ Week 7 (04/06/25) |
I decided to develop the first storyboard, but instead of adding in a seal as another element, I decided to have the wordmark itself as the seal. To speed up my workflow, I looked for a tutorial online that somewhat fit my vision. I followed the following Youtube Video. After adding in my own adjustments, this is how the video turned out.
|
| Fig 2.9 After Effects Keyframes & Expression Slider + Video / Week 7 (10/06/25) |
I didn’t really like how the wordmark just disappeared when the animation finished, so I decided to have a page-turn animation so that the animation can loop continuously. To do this, I first precomposed everything and added in the CC Page Turn effect. After some tweaks, the final animation turned out like this:
|
| Fig 2.10 CC Page Turn Effect + Video / Week 7 (10/06/25) |
Final Key Artwork
 |
| Fig 2.11 Black Wordmark on White Background - JPG / Week 8 (11/06/25) |
 |
| Fig 2.12 White Wordmark on Black Background - JPG / Week 8 (11/06/25) |
 |
| Fig 2.13 Color Palette - JPG / Week 8 (11/06/25) |
 |
| Fig 2.14 Colored Wordmark on Lightest Shade of Color Palette - JPG / Week 8 (11/06/25) |
 |
| Fig 2.15 Colored Wordmark on Darkest Shade of Color Palette - JPG / Week 8 (11/06/25) |
 |
| Fig 2.16 Key Artwork Animation - GIF/ Week 8 (11/06/25) |
| Fig 2.17 Key Artwork Compilation - PDF / Week 8 (11/06/25) |
To make the collateral, using the finalized wordmark, I decided to expand "D" and "S" as they are the initials for my wordmark. After several attempts, I thought that these patterns had the best potential.
 |
| Fig 2.18 Expansion Patterns / Week 6 (03/06/25) |
The first one is a 'pillar'-like design which is fits the Dong (support) part of my name. The second one is a more classic pattern design, focusing on the repeatability. The third one is a lot simpler, where it can act as a symbol or mini wordmark depending on the rotation. I decided to use the first and second design for my expansions.
Fig 2.19 Wordmark Expansions / Week 6 (03/06/25)
With all the elements I have, I started to work on the mockups. I decided to go with a stationery store as my theme, mainly because of the seal-inspired design. I of course made a stamp as my first mockup, and then made a store sign as well as some other stationery products as my second and third mockup.
 |
| Fig 2.20 Mockup Designs / Week 6 (03/06/25) |
As for the portrait, instead of using my own picture, I used a 3D scan of my torso from a personal project I had last year. For a more cohesive look, I applied a gradient map on the picture. However, some parts are either darker or lighter than what I preferred, so I adjusted the values by manually drawing in highlights and shadows. Lastly, I added the wordmark with half of them being in front of me, while the other half is behind.
 |
| Fig 2.21 Portrait Adjustments / Week 6 (03/06/25) |
To see how it would look on Instagram, I laid all the pictures together in a 9x9 grid.
 |
| Fig 2.22 First Collateral Design / Week 6 (03/06/25) |
Week 7 / Revision
Although my previous design was already accepted, I was still unsatisfied with how it looked. I decided to first change the color palette to the one below, as the previous one felt a bit dull. I also changed the colors of my other collateral elements accordingly.
 |
| Fig 2.23 Color Palette Change / Week 7 (10/06/25) |
I didn't really like the current expansions I have, so I made even more iterations of possible expansions. I mainly reduced the repetitions and increased the spacing. Specifically for the pillar design, I made it grow taller to also fit the Sheng (to rise) part of my name.
 |
| Fig 2.24 Expansion Revision / Week 7 (10/06/25) |
I also disliked the stationery set mockup I did, mainly because of the lack of color harmony and the cover designs on the mockups. I decided to look up other mockups and redesigned the covers to create a more palatable design.
 |
| Fig 2.25 Mockup Redesign / Week 7 (10/06/25) |
Final Collateral
 |
| Fig 2.26 Collateral 1 - JPG / Week 8 (11/06/25) |
 |
| Fig 2.27 Collateral 2 - JPG / Week 8 (11/06/25) |
 |
| Fig 2.28 Collateral 3 - JPG / Week 8 (11/06/25) |
 |
| Fig 2.29 Instagram Layout / Week 8 (11/06/25) |
Instagram Link - @chen.dong.sheng
 |
| Fig 2.30 Instagram Screenshot / Week 8 (11/06/25) |
FEEDBACK
Week 5
General
Feedback:
- Graphic elements should be avoided as it leans more towards a 'mark' over a wordmark.
- We can't create original work when we adapt works that comes from outside ourselves. Instead, think from within to create something unique.
- Balance between the positive and negative space should be maintained, same with the use of symmetry and asymmetry in mark making.
Specific Feedback: The design could be further evolved into something better. For the cultural designs, don't make it too similar with other existing works. As for the bold one, there is more room for it to become more eye-catching – the reason I wanted to create a bold design.
- Zoom in on the wordmark to better spot problems in the form.
- When choosing the color scheme, make sure that there is a dark and light color, as well as in between colors that is complementary and contrasts with the other colors.
Specific Feedback: Explore more ways to further refine the current work, but otherwise, the results are good.
Week 8
Specific Feedback: Both the collateral and animation are already
good.
REFLECTIONS
Experience
This was one of the more fun projects so far. It was a ‘semi-stressful creative retreat’ where I got to experiment with multiple designs. It was as if I were to work for a client, but that client was someone else who wanted to build a brand representing myself. I think I might come back to this project like this in the future to make something that better resonates with me.
Observation
I like to take the feedback sessions as an opportunity to learn from others' success/failures. When looking at their works during the feedback session, I realized that my color choice wasn't as eye catching as I thought it was. This prompted me to quickly revise my work. I also noticed some interesting works here and there which inspired a new approach I could use when designing.
Findings
This was my first time making mockups, and I never thought it was this simple. I previously thought that mockups are done in a 3D software first, whether it be from scratch or a template. But either way, I thought texturing had to be done which was gonna be a hassle. But it turns out that it can be done just on Photoshop and the process was overall simple.
FURTHER READING
Computer Typography Basics
I read a section about special typographic styles in this book as it looked interesting. It explains how these styles that are made more accessible with computers can be misused. It explains how underlining should be applied carefully, mainly avoiding lines that cut through descenders. We should also avoid using full-all caps for long texts, and we should use real small caps, not fake ones that is manually scaled.
 |
| Fig 3.1 Special Styles |
This section also talks about special-purpose styles like superscript, subscript, baseline shift, negative and positive skews, strike-through, and double strike through which are useful for formulas and citations. We should not distort fonts by stretching or squeezing them, and instead use condensed or extended fonts. We should also avoid fonts with outline and shadow effects as it was overused in older desktop publishing software, making it look cliche.
The Vignelli Canon
 |
| Fig 3.2 The Vignelli Canon Book Cover |
This book was interesting as it doesn't seem to directly talk about typography from the get go. I was interested with the very first part of the book about three essential aspects of design – semantics, syntax, and pragmatics.
- Semantics - The search for meaning. It involves understanding the subject deeply to ensure the design is purposeful, contextually appropriate, and communicates clearly to both sender and receiver.
Syntax - The structure and visual grammar of design. It focuses on how elements like grids, type, and images are organized consistently to create clarity and coherence.
Pragmatics - The design is received and understood by the audience. It ensures the design communicates effectively, with minimal explanation, and functions as intended in real-world use.
What is a Monospaced Font? - envato tuts
 |
| Fig 3.3 Monospaced & Proportional Characters |
I looked up information about monospace font following what Mr. Vinod talked about in class. A monospaced font is a typeface where all the characters takes up the same amount of horizontal space. This is different from proportional fonts, where characters like "i" are narrower than characters like "m". It is originally used in typewriters and early computers due to technical limitations, but are also widely used today in coding, data tables, and minimalist design. Some monospaced fonts include: Courier, Consolas, and Sourced Code Pro.