Typography: Task 2

31/10/2023

ALTAIFI, LEEN MAAN A (0367698)

Bachelor of Design (Hons) in Creative Media, Taylor's University

Typography


Table of Content

1. Lectures

2. Instructions

3. Feedback

4. Reflections

5. Further Readings


1. Lectures

Week 6 (3/11/2023): Lecture Typo_6

Typography in Different Medium:

Historically, typography was described as living only when it was viewed on paper. Today, however, typography exists in a multitude of media; it is found in operating systems, viewport, device, and the screen itself.

Print Type: The intention of designing type was for reading from print long before screens. The designers job is to ensure that the readability is smooth and pleasant to read. Print typefaces are versatile, classic, and easy to digest. Baskerville types are the most common typefaces for print because they are highly readable when set at small font size. 

Screen Type: Typefaces intended to be used in screens are optimized and modified to enhance readability; this includes increasing or decreasing x-height, widening letterforms, more open spacing, heavier thin-strokes, reduced stroke contrast, and modified curves. Georgia is an example of typeface design specifically for screen use.

Hyperlink: it is a word, phrase, or image you click on to jump to a new document or new section in the current document.

The screens used in our TVs, laptops, or phones are not only different sizes, but in proportion too. There will be pixel variation between every device. 

Fig. 1.1: Pixel Variation in different devices (31/11/2023)


Static Typography: design with minimal characteristic in expressing words, and traditional characteristics such as bold and italic. Static typography is found in places such as billboards, magazines, and fliers, and they can be informational, educational, or aspirational. 

Motion typography: dramatic design with "fluid" and "kinetic" letterforms. It is often brought to life using animation, like motion graphics.


Week 7 (10/11/2023):

Attended physical class as usual, and we received feedback on our work as well as a briefing to the next task.


2. Instructions & Tasks

Module Brief: 


<iframe src="https://drive.google.com/file/d/1SlvOIyBNdFCtQWfsAzUg4LKQv8YhrBUq/preview" width="640" height="480" allow="autoplay"></iframe>

Task 2 Week 6: Editorial Layout/Typographic Exploration & Communication (Text Formatting and Expression).

This task requires the combination of all the things we've learned so far by typographically composing and expressing the given content in a creative and impactful way.

I started off by sketching out some ideas on Procreate for the headline design and the overall composition. I eventually chose the text Unite to Visualize a Better World after researching the topics because I felt I could brainstorm the most for this topic specifically. The main idea of the headline is to emphasize, the U. In Idea 1, The U is encapsulating the rest of the headline as if being united or joined as a whole and come together. In idea 2, same concept of emphasizing the U, however the rest of the headline is right beside it in order for them not be confined inside the U for more space and weight, yet are still joined together nonetheless. 


Fig.2.1 Initial Idea Sketch (1/11/2023)
Fig. 2.2: Composition Idea 1 (1/11/2023)
Fig. 2.2: Composition Idea 2 (1/11/2023)


After having some ideas sketched down, I took it to adobe illustrator and started digitizing the designs. I included my attempts at The Role of Bauhaus Thought on Modern Culture, inspired by the Bauhaus font and art style, but I wasn't quite feeling them so I stuck with the former topic. And I decided to go with the bottom 3 designs.

Fig. 2.3: Compilation of  Digitized Ideas (1/11/2023)

Below, are screenshots of my process as I format the text, align everything, and work on the overall layout. I chose the font Univers for its simplistic and modern look, text size is 10 pt and the leading is 13 pt and, naturally, so is the paragraph spacing.  At first, I divided the text in to 2 columns, however, it didn't look right to me-- it didn't balance out with the negative space as I would like it to, so I divided it into 3 columns instead.

Fig. 2.5: Idea 2 Process (1/11/2023)
Fig. 2.4: Idea 1 Process (1/11/2023)



Now here are my first drafts of 3 ideas, all of which are mainly similar. In idea 1, I made everything aligned in the same level, further applying the idea of unity and conformity. It feels almost utopian/dystopian, however those are the circumstances in which unity can be fully achieved. 


Fig. 2.6: Idea 1 Silhouette (1/11/2023)
Fig. 2.7: Idea 1 Draft 1 (1/11/2023)



In idea 2, I added an infinity symbol for both design and meaning purposes. Composition wise, I feel like it adds a nice contrast with the headline and the 3-column-text. As for the meaning (not to get too metaphysical) it represents the connection between infinity and unity; wholeness and interconnectedness, to become one. 

Fig. 2.9: Idea 2 Silhouette (1/11/2023)
Fig. 2.9: Idea 2 Draft 1 (1/11/2023)


Last but not least, idea 3. There is a lot more variety and unevenness, compared to the prior 2, strictly for design reasons. The text remains in 3 columns but is formatted like a staircase, almost mimicking the design of the headline. 


Fig. 2.10: Idea 3 Silhouette (1/11/2023)
Fig. 2.11: Idea 3 Draft 1 (1/11/2023)



After receiving feedback from the lecturer, I adjusted the text formatting and made changes to the headline. Instead of 3 columns, I changed it into 2 columns because the line length was too small previously, which lead to ragging on the right side. As for the headline, the message was not portrayed very well in my previous attempt, so I took the lecturer's advice and fixed it. The 'n' is 'U' upside down, and I clarified the overlapping of those 2 layers to signify unity. As well as curving 'world' to represent our spherical world. 


Final Editorial Layout Submission:

Fig. 2.11: Final Editorial Layout without Grid  (10/11/2023)

Fig. 2.12: Final Editorial Layout with Grid (10/11/2023)




Fig. 2.13: Final Editorial Layout with Grid PDF (10/11/2023)


Fig. 2.13: Final Editorial Layout without Grid PDF (10/11/2023)



3. Feedback

Week 7 (10/11/2023):

General Feedback: Graphical elements should remain minimal, and make sure the headline's message is understood by not just the designer but also the reader. Do not have long line length (max of 60 characters in a line) because the reader will be lost reading. The body of text should be even in color to indicate good text formatting (never use full justify alignment). Leading and paragraph spacing should be the same.

Specific Feedback: The columns of text are too small, but I've managed to kern it in an acceptable manner. The message of my headline, however, was not properly understood. The attempt of uniting the U and N should be emphasized.


4. Reflections

Experience

After practicing and having multiple tasks on kerning and letter spacing, I have gotten a hang of it. It was a bit tedious at first on top of having to memorize the do's and don'ts and the terminology, but with time and practice, I got familiarized with it.

Observations

From looking at my peers and my seniors' works, I have observed that the creativity in designing text is limitless, despite its strictness. You can get away with crossing the 'boundaries' and I find that really interesting. 

Findings

I still need to further practice on portraying my message through designs, instead of focusing solely on the aesthetic. I do put some thought behind it, but the intentions should be clear to both myself and the viewer, otherwise the intention has failed. 

5. Further  Readings


Vignelli Canon on Design:


The aim of this book is to educate beginner designers about the basics typography principles; creativity is not only from the imagination but also knowledge. Learning and discovering new things allows us to apply what we learned in design and enriches it. 

There are 3 aspects of Design that are most important according to Vignelli: Semantic, Syntactic, and Pragmatic.

Semantic: the search of the meaning of whatever we have to design.
Syntactic: the overall structure, grids, typefaces, headlines, text, illustrations, and how they work and blend in together.
Pragmatic: the full comprehension, clarity, efficiency, and delivery of the message of the design.

Other aspects of design include discipline, appropriateness, and ambiguity. Discipline is the set of self imposed rules we operate under. The attention to detail requires discipline; every detail is important because the sum of all details is the end result, therefore there is no room for sloppiness or recklessness. 

Appropriateness is the search for the specific of any given problem; it directs us to the right solutions, the right materials, the right metrics, the right expressions, and the right colors. Without this prior research, the design could be out of topic, misleading, or misinformed. 

Just as art can be subjective and interpreted in many ways, so can design. Ambiguity in design according to Vignelli is the plurality of meaning, rather than the negative connotation "vagueness". If done correctly, it enriches the design as well as give it depth.


Comments

Popular Posts