Typography Task 1

 Typography-Task1: Exercises

26/9/2025-31/10/2025(Week1-Week6)

LAN XIN YA  0368256

Typography

Task1: Type Expression& Text Formatting

Table of Content:

1.Lecture

2.Instructions

3.Process Work

4.Feedback

5.Reflection

6.Further Reading

Lecture: 

Typo_0_ Introduction:

 I learned that YouTube's web page is very complex and customizable. It records information like language, location, and device to give users a personalized experience. I also noticed that YouTube includes many features such as autoplay, offline downloads, and Shorts. This shows me how much technology is behind a simple video website.

Typo_0_ Eportfolio Briefing:

 I learned that YouTube watch pages contain not only the video itself but also a lot of technical data. The page shows details about the user’s device, region, and language, which are used to personalize the experience. I also found many experimental features such as autoplay, miniplayer, and Shorts support. This taught me that a simple video page is actually supported by very complex technology.

 

Instructions:

Task 1 - Type Expression:

For the first week's practice, the task given was to select 4 words from the 6 provided and design a layout that conveys the meaning of those words.

1.PULL

2.Drip

3.Scratch

4.Kick

5.Step

6.Float

The following is the sketch of the design

KICK  The word "kick" incorporates elements from human movement, such as kicking a ball in football, and develops a trend of upward movement. This effectively explains the meaning of the word "kick".

FLOAT  The word float adopts the concept of bubble floating. The background is designed in black to better reflect the effect of bubble floating.

Scratch  Lightning and Sharp Elements:

 The letter "S" is transformed into a lightning-like shape, symbolizing energy, speed, and intensity.

 The "T" also features a pointed lightning design on top, creating a consistent visual rhythm throughout the word.

 

DRIP  Each letter features liquid drops extending from the bottom, giving the impression that the letters are melting or oozing with fluid.       

   The rounded, flowing shapes of the drips emphasize a sense of motion and viscosity, similar to paint, ink, or water slowly dripping down.

Finally, create a finished image consisting of 4 words.

1.KICK

2.FLOAT

3.SCRATCH

4.DRIP

We need to choose one word from the four options for the animation design. I chose the relatively challenging word "KICK" as the basis for my animation design.

For the animation creation of the word "KICK", I initially created 6 frames to make the image appear more smooth.

                             My creative concept is to showcase the act of playing football.

Reflect the more extensive movement trajectory of the player's kicking action. Design "I" as the spark produced by friction after the ball is kicked upwards.

Use the following actions and pictures to generate inspiration.

Increase the range of kicking and show the meaning of the word "KICK" more vigorously.

                   Final product image:

Final type expression"KICK, FLOAT, SCRATCH,DRIP"(JPG), Week 4 

Final animated type expression "KICK"(GIF),WEEK4

WEEK 5

The first attempt at text layout

Mainly learned eight types of layout structures and the application of ten fonts.

 

 The second revision of the layout and formatting.

 

 Week06-08(Task 2) Designing artistic typography layout

Set the title as artistic text

Select one article from the three as the design subject

I chose this title-“Punk’s Design Revolution: Breaking the Rules”

1.In the first piece, I focused on the design of "breaking the rules" as the main element.

The first time I made it, the style where the fragments scattered outward was missing.

Design principle: I transformed the word "breaking" into a fragmented style, while the word "rules" was torn apart by hand to reveal the deeper meaning of the font. The background utilized the scattered debris that resulted from the "rules" being torn apart, which better conveys the idea of breaking free from constraints.

2.The second piece of work is mainly designed based on "Puck's ".

Creation principle: "Punk's" is designed in the style of a pistol. While Design Revolution uses a pistol to break through, it can better highlight the meaning of the text, making the specific meaning of this article obvious. The gun-shaped typography “PUNK’S” symbolizes power and defiance, while the slanted layout of “BREAKING THE RULES” reinforces the theme of breaking conventions. The overall concept conveys a fearless attitude that challenges norms and celebrates freedom in design.

3. The third layout design mainly focuses on " Revolution".

Creation principle: Bold and tilted letters break traditional alignment, symbolizing power and change. The raised fist and megaphone represent resistance and the voice of revolution, while the black-and-white contrast highlights strength and clarity. The overall layout embodies a punk attitude—breaking the rules and challenging the norm.

Artistic typography layout design finished product image

1.the first one

My design concept is: 

 Place the artistic title in the middle position and put the article content on both sides. Abandoning the symmetrical balance of traditional typesetting, radial black graphics are used to create visual tension, simulating a dynamic sense of “impact and explosion” and echoing the rebellion and restlessness of punk culture.

2.the second one

 

My design concept is: 

Cross-page spatial division is made through large-area black-and-white blocks (such as the black triangular area on the right) to create strong visual tension; the black-and-white contrast between text and graphics enhances the rough texture, which is in line with the "raw and unpolished" aesthetics of punk design.

3.the third one 

The design of the layout is somewhat messy and it's difficult to distinguish the main and secondary paragraphs.

After modification, the final layout was obtained.

My design concept is:

By using the word "Revolution" as a dividing line, the article content is segmented, which can better highlight the defiant and rebellious attitude of punk. this typesetting transforms the rebelliousness and sense of power of punk culture into a visual language, allowing the design revolution of "breaking the rules" to be vividly presented in the layout.

FINAL OUTCOME: