Advanced Typography: Task 1

21.04.2025 - 12.05.2025 / Week 1 - Week 4

Chika Clarissa Widjaja / 0378636

Advanced Typography / Bachelors of Design (Hons) in Creative Media / Taylor's University

Task 1 - Exercises: Typographic Systems & Type and Play

TABLE OF CONTENTS

LECTURES

INSTRUCTIONS

TASK

FEEDBACK

REFLECTION

FURTHER READING

LECTURES

Week 1- Typographic Systems

Eight major variations with an infinite number of permutations:

Axial

Radial

Dilational

Random

Grid

Modular

Transitional

Bilateral

Shape Grammar: a set of shape rules that apply in a step by step way to generate a set, language, of designs

1. Axial System: All elements are organized to the left or right of a single axis.

2. Radial System: All elements are extended beyond a point of focus.

3. Dilatational System: all elerments expand from a central point in a circular fashion

contains information on either side. Can placed in a hierarchy manner.

4. Random system: elements appear to have no specific pattern or relationship.

5. Grid system: A system of vertical and horizontal divisions.

6. Transitional System: An informal system of layered banding.

7. Modular System: A series of non objective elements that are constructed in as a standardised units.

8. Bilateral System: All text is arranged symmetrically on a single axis.

Figure 1.1 Typographic Systems Examples

Week 2- Typographic Composition

Principles of design composition :

Emphasis

Rule of thirds

Isolation

Repetition

Balance

Alignment

Perspective

Rhythm

Contrast

Other models/ systems

Environmental grid: based on the exploration of an existing structure or numerous structures combined

Form and movement: based on the exploration of an existing grid system

Figure 1.2 Typographic Composition

Week 3

NOTES

Handwriting is the base for all machine-made letterforms.

The Latin alphabet came from older scripts like Phoenician and Greek.

Cuneiform and hieroglyphics are some of the first writing systems.

Writing changed over time because of cultural exchanges between regions.

Looking at the context and history is key to understanding how typography developed.

Digitizing indigenous scripts is important to keep cultural heritage alive.

Designers should look into local histories to find new ideas and be original.

Importance of Handwriting: Early typography came from people trying to copy handwriting, which shows the close link between writing by hand and designing type. A lot of type styles today still come directly from handwritten forms.

Historical Development: When writing shifted from pictures to sounds, it was a big change. The Phoenician alphabet had a huge influence on later systems like Greek and Latin.

Cultural Exchange: Writing systems grew through contact with other cultures. For example, Egyptian hieroglyphics influenced others, proving that writing systems didn’t grow on their own.

Digitization Challenges: As we go more digital, it’s really important to digitize native scripts. This helps protect cultural identity from being lost in a globalized world.

Technological Impact: Technology makes it easier to access different writing systems. Tools and software let people use many scripts, which helps speakers of native languages write in their own ways.

Encouragement to Innovate: Designers are being encouraged to learn from their own cultures to make fresh and creative designs. Using cultural roots can make work more meaningful and connected to today’s world.

Moving Beyond Westernity: The lecture pointed out that non-Western designers should focus on their own cultural stories instead of copying Western styles. Going back to native roots can lead to more genuine and creative design.

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/10IYjiV21vr6mj0LKnMQUih4rdVIOi-Ks/preview" width="640" height="480" allow="autoplay"></iframe>

TASK

EXERCISE 1 : TYPOGRAPHIC SYSTEMS

For this first exercise, we were tasked to explore 8 typographic systems which are Dilatational, Radial, Random, Transitional, Grid, Modular, Bilateral, and Axial. This was to be done in InDesign.

In addition to black, can use one other color (deep and strong colors)
Size: 200 x 200 mm
Graphic Elements (line , dot, etc) can be used but in a very limited manner.

For the additional color, I used Yellow and Black as they contrast really well with each other.

Week 1 Practical

Axial

Fig 3.1 Axial First Attempt, Week 1 (21/04/25)

The axial system was the first one I attempted because I thought it would be the simplest. At first, I used a yellow background, but it was too distracting, so I scrapped that idea. For the rest of the attempts, I experimented with different placements of the title and added a yellow circle on the axis as a stopping point, guiding the viewer's eye from the title to the circle and then to the event information.

Fig 3.2 Axial Second Attempt, Week 1 (21/04/25)

This is the second axial layout I created with a different design. I made the title take up most of the page to show hierarchy and placed the remaining information beside it. I bolded and enlarged important text like "Open Public Lectures" and the lecture dates. At first, I tried to emphasize the "Design Theory" text next to "Bauhaus" using yellow, but it affected readability, so I changed it back to black.

2. Modular

Fig 3.3 Modular Attempts, Week 1 (21/04/25)

When creating the modular layout, I aimed for something simple that clearly presents the information while leaving enough white space. In the second attempt, I added a yellow box to highlight the dates and add a decorative element. In the third attempt, I changed the text placement, removed the small squares, and lowered the opacity to 75%.

3. Transitional

Fig 3.4 Transitional Attempts, Week 1 (21/04/25)

This was probably one of the most difficult typographic systems for me to create. I didn’t fully understand the Transitional System at first, even after watching videos and doing research, so it took several tries to get it right. I think the final attempt was the most successful. It clearly separates the title from the date information and creates a left to right flow for the viewer to follow.

4. Dilatational

Fig 3.5 Dilatational Attempts Week 1 (21/04/25)

I feel like there are so many ways to design using the dilatational system, which is why I struggled at first to create a composition. It was especially challenging to work with the Type on a Path tool in InDesign, which made things harder. Eventually, I came up with this attempt that has symmetry. Again, I wanted to use yellow as the background, but for this composition, I felt a white background worked better. The circle in the middle serves as an eye catcher, a point of balance, or a center of gravity.

5. Radial

Fig 3.6 Radial Attempts, Week 1 (21/04/25)

For these two designs, I tried out the radial system by letting the text spread out from a single point. I added a yellow circle as the main focus to help guide the viewer’s eye and make the layout feel balanced. The angled lines create a bit of movement while still keeping things clear. I went with a black background to make the text and circle pop more.

6. Grid

Fig 3.7 Grid Attempts, Week 1 (21/04/25)

In these four attempts at the Grid System, I explored different placements of the title, text, and sizes. I wanted the layout to feel balanced, with just enough white space so it wouldn’t look crowded. In the third attempt, I separated the time and the speaker's name since they were too close together, which helped make the layout look more organized and easier to read.

7. Bilateral

Fig 3.8 Bilateral Attempts, Week 1 (21/04/25)

Creating the Bilateral System was fairly simple. I placed an axis down the middle to guide the layout and arranged the text based on hierarchy. I also added a duplicate of the text on top to enhance symmetry. In the third attempt, I added space between the speaker’s name and their time to make it look neater.

8. Random

Fig 3.9 Random Attempts, Week 1 (21/04/25)

My initial concept was to have scattered words in the bottom left and top of the screen form part of the main text, but it ended up looking too messy. In the center of the layout, where all the information is, I tried to make it look random while still keeping a sense of hierarchy. I also changed some of the title’s capital letters to a mix of uppercase and lowercase to match the random style, but I’m not sure if that’s allowed, so I’ll ask for feedback next week.

Week 2- Revised Works

Fig 3.10 Revised Axial, Week 2 (28/04/25)

In Week 2, Mr. Vinod told me that the angle of the axial was too radical and that it shouldn't be 45 degrees. Instead, it should be around 20 degrees. So I adjusted the angle and now understand why it shouldn't be too radical, it improves readability.

Fig 3.11 Revised Bilateral, Week 2 (28/04/25)

Mr Vinod also mentioned that there is too much space beside the text and he suggested to move "The Design School, Taylor's University" to the left while still making it in the same row to balances it out. This is the before and after.

Fig 3.12 Revised Radial, Week 2 (28/04/25)

In my previous attempt at creating the radial system, Mr. Vinod mentioned that placing an element like a circle at the very edge of the screen creates tension and makes the viewer feel uneasy. So, I came up with a different layout where I moved the element upward, created space around it to avoid a cramped feeling, and also changed the text’s location to improve readability.

Fig 3.14 Revised Axial, Week 2 (28/04/25)

Mr. Vinod advised me not to make the composition look like a fountain, so I revised it. The layout on the left appeared awkward and unbalanced, with too much empty space. I opted for a better solution by separating the dates from the speakers, which helped bring all the text closer together and improved the overall composition.

Final Task 1 Submission

Fig 3.15 Axial Final, Week 2 (28/04/25)

Fig 3.16 Random Final, Week 2 (28/04/25)

Fig 3.17 Bilateral Final, Week 2 (28/04/25)

Fig 3.18 Dilatational Final, Week 2 (28/04/25)

Fig 3.19 Radial Final, Week 2 (28/04/25)

Fig 3.20 Grid Final, Week 2 (28/04/25)

Fig 3.21 Transitional Final, Week 2 (28/04/25)

Fig 3.22 Modular Final, Week 2 (28/04/25)

Fig 3.22 Final Task 1 - Exercise 1: Typographic Systems - PDF, Week 2 (28/04/25)

Fig 3.23 Final Task 1 - Exercise 1: Typographic Systems - PDF (GRID),

Week 2 (28/04/25)

EXERCISE 2 : TYPE & PLAY

For this exercise, we were tasked with selecting an image from the internet, identifying potential letterforms within it, and transforming those into a typeface while preserving the image’s original characteristics.

Fig 3.24 Picture Chosen and Typeface References, Week 2 (3/05/24)

The picture above is the one I chose from Pexels, and I referenced two typefaces that helped inspire my design: Cobweb: Burton's Nightmare and Recoleta: Recoleta Regular Demo. I chose a spiderweb because I already had a clear vision and ideas for how I wanted the typeface to look. Out of all the cobweb images I found, this one revealed the most visible letterforms to me.

Fig 3.25 Process, Week 2 (04/05/25)

After identifying the letters within the cobweb, I placed them side by side. At first, they looked really rough, almost like a child's handwriting, but that helped me realize what features I wanted my typeface to have: thin and rigid. I then began refining the design, making the letterforms straighter and more legible. I noticed it was too thin, so in the third progression, I used the Paintbrush Tool to roughly add some width to parts of the letters. In the fourth progression, I spent a lot of time cleaning up and erasing rough lines, making all the letters more upright and consistent. In the fifth and final progression, I changed the strokes to a vector object, refined the lines further and added small, thin cobwebs. I was careful not to overdo it, as too many details could distract from the actual letterforms, so I only included a few subtle touches.

Fig 3.26 , Final Week 2 (04/05/25)

Mock Movie Poster

After receiving feedback, Mr. Vinod told me he's happy with it and to go with this typeface. We had to create a mock movie poster using our font.

References

Fig 3.27 Poster References, Week 3 (10/05/25)

These are the posters I found at Pinterest that has helped me in creating this poster in terms of composition, color, and placement.

Digitalization (Adobe Illustrator)

Fig 3.28 Resizing the Poster, Week 3 (10/05/25)

At first, I wanted to use my original picture for the movie poster, but no matter how much I adjusted the composition or color hue, it didn’t look good. So, I found a similar picture on Pexels, this time with a better color palette and the atmosphere I wanted for my poster. Then, I cropped the image to the right size, leaving space at the bottom for the title and billing block.

Fig 3.29 Font Color Comparison, Week 3 (10/05/25)

I placed my typeface and changed the color to red. On the right picture, the red is more desaturated, while on the left it’s more saturated. At first, I went with the desaturated version because it matched the color palette and vibe of the poster better. However, when I exported the poster to review it, the title seemed to blend in and lacked emphasis. So, I increased the saturation a bit.

Fig 3.30 Resizing the Poster, Week 3 (10/05/25)

Finally, I worked on the billing block. I looked at a few movie posters for reference and analysed it because I wasn’t sure how to construct or compose it properly. After analyzing them, I noticed that the main actors' names are usually in larger typography, while the credits for roles like producer, editor, and story appear at the bottom in smaller sizes. Still, I made the producer names slightly larger than what their contribution might typically warrant. I also added a thin divider line to separate the names for better organization. Lastly, I searched for real billing block company logos, like Blumhouse (a horror production company), and added a "Coming Soon" text at the very bottom to make the poster feel more realistic.

Fig 3.31 Further Development, Week 3 (10/05/25)

After a few hours, I came back with fresh eyes and felt like something was missing. So, I started exploring more in Adobe Illustrator and its tools. I decided to try the 3D & Bevel Material effect since I had used it in a previous assignment. I also added grain to the image to give it some texture, which ended up making it darker. Honestly, I wasn’t sure what I was going to do. I just experimented with different materials and settings like hue, saturation, contrast, etc. In the end, I used the "Inflate" 3D type and chose "Comet Pit Saturn" for the material because its well suited.

Fig 3.32 Further Development, Week 3 (10/05/25)

After deciding what material and 3D type I was going to use, I played with the colors using the Hue Shift and Saturation settings. At first, I was confused about how to change it to red. But when I adjusted the Hue Shift and brought it all the way down to 0, it turned red. Then I played with the Saturation to control how intense I wanted the red to be. It was too red at first, so I kept decreasing it until it was just the right mix of red and white.

Final Outcome

Fig 3.32 Final Outcome, Week 3 (10/05/25)

Exercise 2 Final Submission

Fig 3.33 Image and Extraction, Week 4 (14/05/2025)

Fig 3.34 Overall Process, Week 4 (14/05/2025)

Fig 3.35 Extracted Letterforms, Week 4 (14/05/2025)

Fig 3.36 Reference Font, Week 4 (14/05/2025)

Fig 3.37 Final Letteform, Week 4 (14/05/2025)

Fig 3.38 Original extraction (top) and final letterform (bottom) comparison, Week 4 (14/05/2025)

Fig 3.39 Exercise 2 Part 1 PDF Compilation, Week 4 (14/05/2025)

Fig 3.40 Finalized Poster, Week 4 (14/05/2025)

Fig 3.41 Finalized Poster PDF, Week 4 (14/05/2025)

FEEDBACK

Week 2 (30/04/25)

General Feedback:

Avoid extreme angle like 45 degree because it divides the page in half, instead go for 20 degree
You must have a margin area, then set grids include column and row
Axial can be bent but not many axis
Random requires chaos, when someone sees it they cant take off their eyes off of it, but there’s still composition, dll.
Objective is to convey information to the reader, so dont make the color too contrasting
Need to have margin

Specific Feedback:

Radial: When you put an element in the corner of the screen you’re creating a lot of tension so it makes the reader feel uneasy. There’s more space on top so work with that
Axial: Axial’s angle is too radical
Transitional: Transitional is transitional In the bottom but not at the top part
Random: Random is not random
Bilateral is good
Modular is good
Grid: adviced to move the design theory to the side because it has too much space on the left
Dilatational: What is this? A fountain? It is not related to bauhaus

WEEK 3 (07/05/ 2025)

General Feedback: If the feedback is harsh just learn how to accept it

Specific Feedback: Im happy with this one, lets go with it

WEEK 4 (07/05/ 2025)

General Feedback: Information placed for the billing block needs to be readable, Before begin a layout, have a margin and grids. Make sure file is visible when submitting.

Specific Feedback: Good job excellent work.

REFLECTION

Experience

I had a lot of fun, but there were some struggles here and there—especially with the typographic systems task. Maybe it was because we only had one week to complete eight typographic systems, and my ideas weren’t that solid. My favorite was the task where we had to extract from an image and create a movie poster. The experience was new since I had never done it before. Through this, I learned to manage my time better since each task only had a week and there was always a deadline. This forced me to manage my time more effectively in order to complete the tasks and also keep up with other modules. Overall, so far I enjoyed these tasks more than semester 1.

Observation

From what I observed through this assignment, I don’t know why, but when I try really hard to meet Mr. Vinod's expectations—like in the typographic systems task—I end up making a lot of mistakes. Six of my systems had problems. But after I read Mr. Vinod's announcement on Teams, where he said, “When you look for more direction from me, you are looking for reassurance and validation that you are on the right path because you don’t want to make a mistake. This does not cultivate a good learning habit and this will not make you a creative person,” I took it to heart. So I tried my best to break this habit in the second task, and surprisingly, I got good feedback, which was definitely a lesson for me. I also observed the anatomy of a cobweb to apply it to my extraction. Observing this helped me keep some of the cobweb's characteristics in my letterform. I also observed how a movie poster layout works—like where the billing block is, how big it is, how the actors' names are larger, how the production logo is small—and applied it to my mock movie poster.

Findings

I found out what bilateral systems are—even though I had never heard of them before—and got to make one myself. It turns out this is one of the things that makes a design good, it's that moment when you look at a poster and wonder why it looks so good or aesthetically pleasing, and then you realize there's a theory behind it—kind of like the typographic systems. I learned how to make them and what can make them look bad, like not making the axial angle too radical, or that an axial system can be bent but shouldn't have too many axes. Random systems require chaos, where someone sees it and can’t take their eyes off of it, but there’s still composition involved. When making the letterform and poster, I found out that the thing at the bottom of a movie poster with all the names is called a billing block. I also discovered you can mess with the 3D and material in Illustrator settings way more than I thought, which I’ll definitely use again in the future. I also found out I had the ability to make a letterform from a cobweb while still maintaining its characteristics, which was pretty cool. Overall, I learned quite a lot in this task.

Chika Clarissa Widjaja (0378636)

Search This Blog