Advanced Typography - Task 1: Typographic Systems and Type & Play

30/8/2023-20/9/2023 Week 1- Week 4
Ng Jia Ern 0363033
Bachelor of Design (Honours) in Creative Media
Task 1: Typographic Systems and Type & Play

CONTENT

1. Lectures
2. Instructions
   Exercise 1: Typographic Systems
        Final Submission
   Exercise 2: Type & Play
     Final Submission
3. Feedback
4. Reflection
5. Further Reading

LECTURES

[1] Typographic Systems

1. Axial

Element organised to the left or right of a single axis.

It can be either symmetrical or asymmetrical. Asymmetrical are more dynamic.

2. Radial

All elements are extended from a point of focus.

3. Dilatational

All elements expand from a central point in a circular fashion

4. Random

No specific pattern

5. Grid

A system of vertical and horizontal divisions.

6. Transitional

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

[2] Typographic Composition

Principles of Design Composition

Design composition involves principles like emphasis, isolation, repetition, symmetry, asymmetry, alignment, and perspective, which can be challenging to apply to typographic layouts and complex informational content. These principles are often associated with visual elements like images but are crucial for the effective organization and presentation of textual information and colours on a page or screen. Some principles are more easily applicable than others in this context.

Example:

Emphasis

The Rule of Thirds

Typographic System

These 8 systems we have covered in depth in theory and practical. From the 8 systems the most pragmatic and the most used system is the Grid System (or Raster Systeme), which is derived from the grided compositional structure of Letter Press printing.

It was further enhanced by what is now come to be termed as the Swiss (Modernist) style of Typography, with its foremost proponents being Josef Muller Brockmann, Jan Tschichold, Max Bill and such.

Grid system how to

The post-modernist era in typography emerged as a reaction to the strict order of modernist design. Younger designers like David Carson, Paula Scher, and Jonathan Barnbrook challenged this order, embracing chaos, randomness, and asymmetry. While legibility took a back seat, the best examples seamlessly combined disorder with excitement, reflecting the influence of anti-establishment punk culture. Asymmetry, randomness, repetition, and radial systems became part of the designer's toolkit during this era.

Left to right: Paula Scher, Jonathan Barnbrook and David Carson

Environmental Grid (Other)

Is based on analyzing existing structures, whether single or combined. Designers extract important curved and straight lines from these structures to create a super-structure. They then organize their information and design elements around this super-structure, incorporating non-objective elements to generate a visually stimulating and unique texture. This approach adds context to the design because the system and structures were originally derived from features in the environment related to the message's communicators.

An example from lecturer Brenda McMannus, of Pratt Inst. from the book: Typographic Form and Communication, pp211.

Form and Movement (Other)

This system is designed to encourage students to explore the diverse possibilities of grid systems. Its purpose is to break away from the conventional seriousness associated with grid applications and instead, view the turning of book pages as a kind of slow animation where the placement of elements like images, text, and color creates movement. This movement is generated by the arrangement of forms on pages, regardless of whether the medium is paper or screen. The system aims to highlight the dynamic potential of grid systems in design.

Example of the form & movement system

Lectures [3], [4] and [5] refer to Task 2

INSTRUCTIONS

Exercises 1 - Typographic Systems

We were tasked to create a layout for each typographic system with the given content. The EIGHT typographic systems are as follows: Axial, Radial, Dilatational, Random, Grid, Modular and Transitional.

Content to be used:

   The Design School, Taylor’s University
   All Ripped Up: Punk Influences on Design
   or
   The ABCs of Bauhaus Design Theory
   or
   Russian Constructivism and Graphic Design
   Open Public Lectures:

   June 24, 2021
   Lew Pik Svonn, 9AM-10AM
   Ezrena Mohd., 10AM-11AM
   Suzy Sulaiman, 11AM-12PM

   June 25, 2021
   Lim Whay Yin, 9AM-10AM
   Fahmi Reza, 10AM-11AM
   Manish Acharia, 11AM-12PM

   Lecture Theatre 12

Task requirements:

- Use Adobe InDesign only

- Size: 200 x 200 mm

- Colours: black and one other colour

- Limited graphical elements (lines, dots, etc)

Week 1

Practical

In week 1 class, we were asked to give a try on creating layouts for the Axial system.

Actually, I already forgot how to use Adobe InDesign after the whole semester break. So I started my first layout while groping around with InDesign.

1st axial attempt in class, 30/9/2023

Because I am not familiar with InDesign, I only completed one layout in class.

Axial

After reading through the book provided by Mr Vinod, I decided to add a circle to emphasize lecture theatre 12 and grab viewer attendance to the centre when seeing this layout.

For the second one, I decided to play with point of view and angle. I shear x angle of the text box to create three-dimensional space. Let it look like a folding poster.

Both of them use asymmetrical to make it more dynamic.

Book content from Typographic System by Kimberly Elam (2007)

1st axial attempt (Revised) and 2nd axial attempt, 5/9/2023

Radial
I don't particularly enjoy the deliberately organized radial layout; I prefer to create a more random and spontaneous feel. I make the titles prominent, so they catch the eye immediately, and then I weave the content in between the titles.

After reading that book, I started my second try, I wanted to try emulating the fig ? design by Paul Humphery and Luke Davis (1998). During the process, I found myself in a dilemma. If I placed the content in a single line, it would become very long and could easily extend beyond the canvas. On the other hand, if I scaled it down to fit within the canvas, the text content would become quite small, which would affect readability.

Paul Humphery and Luke Davis (1998)

1st radial attempt and 2nd radial attempt, 5/9/2023

Dilatational

Use the "Type on a Path Tool" in InDesign to type on circles I draw.

process in ID, 5/9/2023

1st dilatational attempt, 5/9/2023

This layout feels like something exploded.

I did another try on this layout after feedback from week 2.

2nd dilatational attempt, 17/9/2023

Random

I think this is the hardest system because it doesn't have certain rules, so dunno where to place the content.

1st random attempt, 5/9/2023

Actually, I am not so satisfied with this result, but rushing XD, whatever

Grid

I wanna try this layout, apart from the normal equally third portion of the grid.

So it ended up like this

Process of attempting the first layout (Guideline), 5/9/2023

1st grid attempt, 5/9/2023

The first attempt looked weird to me, so I did a second attempt after week 2 feedback.

2nd grid attempt, 17/9/2023

Modular

1st modular attempt, 5/9/2023

Transitional

1st transitional attempt, 5/9/2023

Bilateral

1st bilateral attempt, 5/9/2023

Final Outcome - Exercise 1: Typographic Systems

Exercise 2A: Type and play (Finding Type)

To do:

Finding an image.

The image needs to have strong characteristics, preferably of a repetitive nature. The object or subject can be natural or manmade.

Deconstructing an image.
Identifying letterforms.
Extracting letterforms.

-At least 5 letterforms

Identify a reference.
Refining letterforms.

Introduce consistency in height, width and contrast.
Deliberate on retaining or removing characteristics.
Decide what areas require simplification.

Article:

https://kreatifbeats.com/2023/08/06/finding-type-a-novel-typographic-exercise/

1. Finding an image

I want to give this metallic-style font a try. I know the process will likely be incredibly challenging, but I've decided to give it a shot.

2. Deconstructing an image

I attempted to trace the strong contrasts and transitions created by the intense highlights and shadows in the metal reflection. However, I feel like it's not quite capturing the essence I'm aiming for. I'm actually quite torn about whether to change the image because it's genuinely challenging, and I'm feeling stuck, not sure how to proceed from here.

First try tracing the letter from image

Just as I was about to give up, I looked through some of the senior students' work and noticed that they traced the image first and then identified the letters. So, I decided to give that approach a try as well.

image trace result

As a result, this approach helped me a lot. The originally chaotic image suddenly became clearer. I decided to abandon my own tracing efforts and instead focused on identifying the shapes of the highlights in the image that had been traced.

3. Identifying letterforms

I didn't just look at the image from a straight-on perspective; I also tried rotating it 360 degrees to view it from different angles. In the end, I managed to identify five distinct letterforms.

4. Extracting letterforms

Resized and adjusted angles of original letterforms from image

5. Identify a reference

ITC Garamond Std - Ultra Condensed

6. Refining letterforms

Because my letters had a lot of irregular points and were challenging to adjust in Adobe Illustrator, I decided to refine them using Photoshop. The Skew and Wrap tools in Photoshop provided significant assistance in this refinement process.

Refinement process 1, 18/9/2023

Refinement process 2, 13/9/2023

Refinement process (final), 18/9/2023

Final Outcome - Exercise 2A: Type & Play (Finding Type)

Image (Melted Metal), 18/9/2023

Extracted Letterforms on baseline (illustrator), 18/9/2023

Reference font (ITC Garamond Std - Ultra Condensed), 18/9/2023

Final letterforms on the baseline, 18/9/2023

Final letter "b", 18/9/2023

Final letter "a", 18/9/2023

Final letter "n", 18/9/2023

Final letter "g", 18/9/2023

Final letter "u", 18/9/2023

Original extraction and final letterforms next to each other, 18/9/2023

Final Type Design - PDF, 18/9/2023

Exercise 2B: Type and play (Poster)

The background image that I choose:

Using 3D and Material tools in Adobe Illustrator:

Final Outcome - Exercise 2B: Type & Play (Poster)

Final Poster, 13/9/2023

Special Task:

We are required to participate HONOR Talents Global Design Awards Competition.

https://www.hihonor.com/my/honor-talents/global-design-awards/

This is my final submission of my artwork:

FEEDBACK

Week 3:

General Feedback :

-Make sure we maintain the consistency of letterform

Specific Feedback:

Good job, but need to smoother some edge

Week 2:

General Feedback

-Number should be downsizing 0.5pt

-For the grid system, content should be inside the column, and cannot exceed (with a 5mm gutter)

-Baseline touching the text will reduce readability and should have a gap

-Text size shouldn't be too big, around 8-12pt is recommended

Specific Feedback: -

REFLECTION

I feel like I didn't do well on this assignment. The main reason is that I couldn't figure out how to start, so I kept procrastinating and only started a couple of days before the deadline. Also, this time, the task required designing eight different layouts in one go, which really tested my patience. The first two layouts (axial and radial) I designed were quite good, but as I continued, I became more and more frustrated, especially because I was running out of time. The final result doesn't even look good to me, and I can't think of how to improve it anymore. Maybe I haven't fully transitioned out of holiday mode, which is why I'm quite disappointed in myself this time. I hope to do better next time and avoid last-minute rushes.

Mr Vinod didn't provide feedback on my work initially. However, after giving feedback to others, he asked if anyone else wanted feedback and encouraged us to raise our hands. I hesitated for a while because I felt that the result of my assignment, which I rushed to complete on time, wasn't very good, and I didn't want to disrespect him. But eventually, I mustered up the courage to ask for feedback. To my relief, he gave a positive assessment of my work. He mentioned that he liked my radial #2 layout and didn't find any issues with the other layouts. After hearing this, I breathed a sigh of relief and felt a sense of accomplishment. It turns out that my assignment wasn't done poorly at all. That was a great feeling!

Search This Blog

Ng Jia Ern (0363033)