Advanced Typography - Task1: Typographic Systems & Type & Play

24/4/2024 - 8/5/2024 (Week 1 - Week 3)

Qian Guoyi / 0369462

Advanced Typography / Bachelor of Design (Hons) in Creative Media

Task 1:Typographic Systems &  Type & Play

 LECTURES

Week1 - Lecture1:Advanced Typography - Typographic Systems

“All design is based on a structural system.(Elam, 2007)”

Typographic organization is complex because its elements need to work together for effective communication. In addition, criteria such as hierarchy, reading order, readability, and contrast are also important.

Typographic systems are like what architects call a grammar of shapes. Typographic systems are similar to shape grammars in that they have a unique set of rules that provide design direction and guide decision-making.

Here are the eight major typeset printing systems:

·Axial

·Radial

·swollen

·random

·grid 

·Modular

·transitional

·bilateral

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

Fig1.1 Axial System
2.Radial System: All elements are extended from a point of focus.
Fig1.2 Radial System
3.Dilatational System: All elements expand from a central point in a circular fashion.
Fig1.3 Dilatational System

4.Random System: Elements appear to have no specific pattern or relationship.
Fig1.4 Random System
5.Grid System: A system of vertical and horizontal divisions.
Fig1.5 Grid System

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

7.Modular System: A series of non-objective elements that are constructed in as a standardised units.
Fig1.7 Modular System
8.Bilateral System: All text is arranged symmetrically on a single axis.
Fig1.8 Bilateral System


Week2 - Lecture2:Typographic Composition
Symmetrical elements are easier to place in a given space, while repetition is more difficult. Compared to other elements, emphasis is easier to do.
Fig2.1 Examples of using emphasis in typography
The rule of thirds is a commonly used composition technique in photography. It divides a frame into 3 columns and 3 rows, with the intersection points serving as a guide for placing points of interest within the given space. The rule of thirds is rarely used in layout composition, but it does play a role in emphasizing important information within a specific space.
Fig2.2 The rule of thirds applies to textual information
Although grid design may appear old-fashioned and rigid, it indeed plays a multifunctional role due to its modular nature.
Fig2.3 Use a combination of grid systems


                                       Fig2.4 Examples of Postmodern Typographic Art Works
Postmodern print systems incorporate randomness, chaos, and asymmetry to create visual excitement, often at the expense of readability and legibility. The best designs achieve a good balance between visual stimulation and readability.

Environmental Grid
Fig2.5 Environmental Grid


Week3 - Lecture3:
Context&Creativity
Fig3.1 The evolution of Chinese fonts
In this lecture, the speaker provided a detailed account of the history of printing, tracing its development from the dawn of human civilization through various technological changes and cultural impacts from ancient times to the modern era.

The most important takeaway from this episode was the valuable advice from Mr. Vinod to young designers. He emphasized that we should not blindly follow Western design trends but rather look inward to deeply understand and examine our own identity, and to give voice to our culture. He pointed out that people in the East do not have sufficient time to delve into complex fields that do not directly generate income, which are often the areas Western designers excel in. Now that we have become a developed nation, we should learn to maintain the vitality and uniqueness of our culture, creating designs that reflect our local characteristics. He also mentioned that incorporating our cultural background and historical traditions will make our work more profound and meaningful, helping us establish a unique cultural identity on the international stage. This advice reminds us to focus not only on technology and commercial benefits but also on cultural heritage and innovation.












INSTRUCTIONS


Task 1: Exercise 1 - Typographic Systems
In this session, we need to use the content provided in the MIB to create 8 systems in InDesign (axial, radial, dilatational, random, grid, transitional, modular, and bilateral), representing 8 different design approaches. Additionally, we need to watch the tutorial videos on InDesign formatting to enhance our learning.

Requirements:
Software:  Adobe InDesign
200 x 200 mm
Black + 1 colour (same colour must be used throughout all systems)
Minor graphical elements allowed (lines, dots, circles...etc)
First week of practice:
Fig2.1 Axial system attempts

In the first week of practical trials, the first thing I tried was the Axial system. I think this system is relatively simple among the 8 systems, but as the first system I tried, it took me a long time to do it. It was also because I hadn’t used In Design for a long time. After reading Mr. Vinod’s Instructional videos and took some time to get familiar with the software.

Fig2.2 Bilateral system attempts

The second one I chose to try was the bilateral system, which I think is somewhat similar to the axial system. I want to use the axis to reflect the importance of the text content and the primary and secondary relationship of the content.
Fig2.3 Grid system attempts
I chose a similar system to try out first. This grid system is similar to the previous two systems I tried. I felt like my grid system was boring, so I added some little highlights to make the design more interesting. Like, I added some red elements to enhance the overall interest.
Fig2.4 Radial system attempts

I found the radial system to be challenging, as it requires firing from a single point, and I spent a lot of time thinking about how to design the system. I didn't want it to look weird. The first thing I thought of was the sun that had just risen, so I introduced semicircular elements, like the sun emitting light, which also reminded me of the universe and planets. I wanted to make it more technological.
Fig2.5 Dilatational system attempts
The expansion system and the radial system are two more difficult systems, but based on the completion of the radial system attempt, the expansion system appears to be slightly simpler. I think adding circle elements will give it a modern feel, or a sense of mystery like the unknown universe. I added circles of different sizes to show the feeling of expansion.
Fig2.6 Random system attempts
The random system is more free. I designed each letter of the main title of the text in a different way, but I don’t want to make the text too messy so that readers can’t grasp the key points. I just think that in In such a design, it is very important for readers to grasp the key points immediately.Want a sense of order in chaos.
Fig2.7 Transitional system attempts
The transition system is slightly more restrictive than the random system, giving it a floating and moving feel.
Fig2.8 Modular system attempts
I also found the module system a bit boring, so I introduced some graphic and color changes to make the whole thing more interesting.


Final design:
Fig3.1 Final Axial System-jpeg


Fig3.2 Final Bilateral System-jpeg

Fig3.3 Final Radial System-jpeg

Fig3.4 Final Dilatational System-jpeg
Fig3.5 Final Random System

Fig3.6 Final Transitional System-jpeg

Fig3.7 Final Grid System-jpeg
Fig3.8 Final Modular System



                                                         Fig3.9 Final Outcome [PDF]

                                                          Fig3.10 Final Outcome [PDF]



TASK 1 -Exercise 2: TYPE & PLAY
Informational task requirement: 
We need to find fonts from an image of our choice. The image can be man-made, from nature, or a building.

Image selection:
I initially looked for pictures of flowers to extract fonts from, but I found that this font was relatively limited, and after I tried making several fonts, I was not satisfied with the fonts I designed, so I looked for pictures of corals. to extract fonts.
Fig4.1 Image from Pinterest

Extract letter shapes and select reference fonts:
I used a pen in InDesign to trace the shapes of the letters in the picture, and I found the shape of the coral very interesting.
Fig4.2 Letter shapes extracted from coral

Fig4.3 Extraction letterfomms process


I chose the font Futura Std as a reference for my subsequent font design.
Fig4.4 I chose Futura Std

I referred to FuturaStd to improve my own design, and I still chose to compare fonts on In Design to perfect my fonts. I started by determining the length and width of the letters to make my font more consistent and neater looking.
Fig4.5

I combined elements of coral to finalize the final font design.
Fig4.6 Final font design.









Feedback

Week2:
After Mr. Vinod looked at my system design, he suggested that I pay attention to the coherence of the overall design. Each part needs appropriate spacing, understand the interrelated parts of the information, and pay attention to the primary and secondary relationships between them to make the design more It is easy for people to understand and read, and capture the main information.


Week3:
In the third week, we need to look for fonts in nature and create a font. What I am looking for is the shape of coral as a font. Mr. Vinod gave me the advice not to look for too small details, but to pay more attention to the whole. The object features an overall shape, and each letter needs to have similar elements.The character and thickness of the strokes need to be consistent.

Week4:
During this week, we need to perfect our fonts and find a suitable picture to make a poster with the fonts we designed.
Specific feedback: Need to ensure that the strokes are consistent, but the shape looks consistent. You also need to keep the bottom shape consistent.


















评论

此博客中的热门博文

Brand Corporate Identity - Final Compilation & Reflection

Advanced Interactive Design - Task1:Thematic Interactive Website Proposa