Advanced Typography - Task 1 / Exercises: Typographic Systems & Type & Play

Edita Chew En Thung / 0357357 
Advanced Typography / Bachelor of Design (Honours) in Creative Media / Taylor's University
Task 1 / Exercises: Typographic Systems & Type & Play

Table of Contents

1. LECTURES
3. PROCESS WORK (Typographic Systems)
      i.  IDEATION
      ii. FINAL
4. PROCESS WORK (Type & Play)
5. FEEDBACK


LECTURES

Week 1 | Introduction & Briefing
Typographic systems are frameworks comprised of rules and guidelines that govern the arrangement and presentation of typographic elements within a design. There are 8 major variations with an infinite number of premutations:

- Axial
- Radial
- Dilatational
- Random
- Grid
- Modular
- Transitional
- Bilateral

Typography is more than just selecting fonts, it's more about crafting a visual language that communicates effectively with the reader/user. In the lecture, we delved into the concept of these typographic systems, exploring how they organise and unify various typographic elements to create cohesive and impactful designs. These systems are similar to a set of rules that are unique as it provides a sense of purpose that gives direction to the decision making.


Axial System
All elements are organised to the left or right of a single axis.

Radial System
All elements are extended from a point of focus.
Dilatational System
All elements expand from a central point in a circular fashion.
Random System:
Elements appear to have no specific pattern or relationship.
Grid System:
A system of vertical and horizontal divisions.
Transitional System:
An informal system of layered banding.
Modular System:
A series of non-objective elements that are constructed in as a standardised unit.

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

Conclusion 

At first, students might find typographic systems a bit tricky. But as they learn more, they see how these systems can be super creative, letting them mix things up in lots of cool ways. 


While many designers stick to grid systems, there are loads of other typographic systems out there. Understanding how these systems work helps designers break free from old-school rules and use more flexible ways to make their messages stand out.




Week 2 | Lectures

Typographic Composition

In the lecture, you'll learn about arranging text in visually appealing and effective ways. It covers basic principles like alignment, spacing, and hierarchy to create balanced and readable designs. Exploring different typefaces and their characteristics and understanding how to choose the right font for your project. Overall, the lecture teaches you how to arrange text creatively to communicate your message clearly and attractively.



Week 3 | Lectures

Handwriting

Understanding handwriting is crucial in the study of type and typography because historically, the earliest forms of mechanically produced letters were inspired by handwriting. Handwritten letters served as a model for the shape, spacing, and style of mechanical type. Handwriting is influenced by the tools and materials used, such as pens, brushes, and different writing surfaces like paper. These factors shape the unique characteristics of handwritten letterforms and provide valuable insights into the development of typography.
Week 4 | Lectures

Designing Type

The lecture covers the essentials of creating and arranging text to be visually appealing and readable. It begins with understanding type anatomy and classification, such as serifs and sans-serifs. Key principles like hierarchy, alignment, and spacing are crucial for good typography, balancing aesthetics with functionality. The process of designing a typeface includes sketching, refining, and maintaining consistency across characters, utilising digital tools like Adobe Illustrator and font creation software. Typography's applications span branding, web design, and print media, with trends like minimalism and bold type influencing modern designs. Mastery in typography enhances communication by making text clear and engaging across various media.


INSTRUCTIONS

fig 1.0 | Module Information Booklet
Week 1

1.  Watch 1st lecture and the the video tutorial: InDesign Formatting & Additional explanation on the Modular System.

2.  Read / Research (optional) the topic further by reading the book: Typographic Systems by Kimberly Elam.

3.  Refer to the sample student e-portfolios to analyse and evaluate their work.

4.  Update our e-portfolio with the necessary lectures. Update Task process work (research + process) followed by final outcomes. Ensure to segregate the final outcomes clearly. Update your reflection and further reading. Refer to best practices in exemplary works 

5.  Export the final outcomes as JPEG @300ppi (1024 px); PDF with guides and without guides (turn on/off guides when saving PDF). Compile all 8 systems together for PDF presentation (turn off spreads).

Week 2

1.  We were tasked to watch the 2nd lecture and document summary in our e-portfolio.

2.  View the previous student's e-portfolio examples to examine how documentation was carried out for Ex.2: Finding Type (Type & Play)

3.  Document Ex.2: "Finding Type" process work in e-portfolio.

4.  Final Submission should consist of:
  • Image
  • Extracted Letterforms on baseline (illustrator)
  • Reference font
  • Final letterforms on baseline
  • Original extraction and final letterforms next to each other
5.  For Further Reading we may read this article related to the exercise (or any other book)


Week 3

1.  Watch and document summary of 3rd lecture in our e-portfolio.

2.  Complete Exercise 1 and 2; rework, refine, review, re-look, re-do whatever we needed in the two exercise and complete it before week 4's class. 

3. Update and complete our Task 1 Exercises: lecture, (process & final), feedback, reflection &
further reading before week 4's class.

4. Update our week 3 Google Feedback Sheet.


Week 4

1.  Watch and document summary of 4th lecture in your e-portfolio.

2.  View previous student e-portfolio examples to see how documentation was carried out for Task 1 Exercises's e-portfolio post.

3.  Update and complete your Task 1 Exercises: lecture, (process & final), feedback, reflection &
further reading. 

4,  Update the Google Feedback Sheet with Week 3's feedback (general/specific)


PROCESS

Typographic Systems - Exercise 1

week 1
During the first week of class, I've been making progress on my axis typographic system. I've made some attempts and documented them to track my development. It's been a learning experience as I explore different approaches and refine my designs.



Attempt(s):
fig 1.1 | Attempt #1 with grids

fig 1.2 | Attempt #1 without grids

These attempts were made as a revision of InDesign, to reuse my skills of using the application.



IDEATION
fig 1.3 | Axial system drafts (first look) without grids


fig 1.4 | 8 typographic systems compilation 




FINAL
fig 1.5 | Axial system JPG 300ppi (1024px)

fig 1.6 | Radial system JPG 300ppi (1024px)


fig 1.7 | Dilatational system JPG 300ppi (1024px)


fig 1.8 | Random system JPG 300ppi (1024px)


fig 1.9 | Grid system JPG 300ppi (1024px)


fig 2.0 | Modular system JPG 300ppi (1024px)


fig 2.1 | Transitional system JPG 300ppi (1024px)


fig 2.2 | Bilateral system JPG 300ppi (1024px)


fig 2.3 | Typographic system PDF presentation without grids 300ppi (1024px)


fig 2.4 | Typographic system PDF presentation with grids 300ppi (1024px)



PROCESS

Type & Play - Exercise 2

Week 2 - Progress


fig 2.5 & 2.6 & 2.7 | References/options of organic/nature picture from 1, 2, 3 respectively.

Out of all the references i chose, I decided to go with the simple slices of lime as it has visible pulp lines that seem interesting to follow.

fig 2.8 & 2.9 | Chosen organic/nature picture from pinterest & extracted crude letterforms.

The words that are then extracted are "L I M E" which ironically spelt Lime which suited the picture very well. The crude letterforms were very similar to the pulp of the lime, it gives the overall meaning of the picture. 

fig 3.0 | Refining process

After Feedback from Mr Vinod regarding the refinement of my extracted letterforms, the characteristics of the lime's pulp is added even more in terms of the actual pulp.

Then after my tutor's feedback, I had to incorporate the characteristics of the Lime in order to fully extract the essence of understanding of extracting letterforms from their respective source.


fig 2.6 | final letterforms 


fig 3.1 | Photoshop process

After that, the process of photoshopping the lime to a darker toned background and adding a few more lime slices to make it look fuller, somewhat overlapping the words to integrate with the image more. I then added shadow to the type to make it stand out more. 
A person was then photoshopped into the poster to make it more integrated as a whole.

fig 3.2 & 3.3 | Photoshop process

A person was then photoshopped into the picture to fit the "Movie Poster-like" appearance, making it visually better. Then a muted green tone was added to the background to make it less noisy and visually appealing and making it in contrast to the main letterforms as per my lecturer's notes.

fig 3.4 | Illustrator process

Then I imported the image to Adobe Illustrator to add the movie credits and overall looks of the Movie Poster. Then after my lecturer's advice, I changed some things here and there to make the Movie Poster look more credible.


fig 3.5 | Illustrator process, final output








FINAL

fig 3.6 | extracted crude letterforms from IMAGE

fig 3.7 | reference font


fig 3.8 | extraction to reference to refinement




fig 3.9 | extracted letterforms & font reference side by side


fig 4.0 | final Movie Poster - LIME
FEEDBACK

Week 1
General feedback: N/A
Specific feedback: N/A

Week 2
General feedback:
- Light grey background of e-portfolio switch with the white post so that it has a white circumference.
- The content has been moved to the corner, it creates tension, gives impactful balance. Not too much or not it will be imbalanced and too much tension is created, making it awkward.
Specific feedback:
- Compile images together so that the post doesn't look too long.

Week 3

General feedback:
- refinements can be thought through more.
- can add nuances to your work, more human touch.

Specific feedback:
- focus on the main characteristics of the photo to extract the type, not the veins.
- good, you've got it, can proceed with creating the movie poster.

Week 4

General feedback:
- integrate the type with the image, that's what makes a good movie poster. The uniqueness of the way that is integrated is what makes up a movie poster.
- keep it consistent.
- choose an image that relates to the type you designed, not something that is totally different from the image you extracted and refined the type from, it does not correlate the font designed.

Specific feedback:
- The type is good, excellent, nothing to change in terms of it's characteristics all. But the image is too noisy, make it muted.



REFLECTION

Exploring grids, layouts, and page flow has helped me organise content effectively for a better typographic communication. Designing a typeface that reflects its origins and the originality of the idea has been a interesting journey, infusing subtle hints and nuances into the design to tell a story and create a deeper connection with the user and audience. 

Experimenting with the relationship between image and type has led to many techniques that ensure they complement each other, reinforcing the overall message of the design, and maintaining it's significance of the design's origins.


FURTHER READING

A Type Primer by John Kane

"A Type Primer" by John Kane is an introduction to typography, covering its history, terminology, and practical applications. Kane explores various aspects of type design, from letterforms and fonts to spacing and alignment. 

He discusses the evolution of typography from its origins to modern digital typefaces, highlighting key milestones and influential designers along the way. The book gives clear explanations of typographic concepts and techniques, making it accessible to both beginners and experienced designers. 

Overall, "A Type Primer" serves as an essential resource for anyone looking to deepen their understanding of typography and improve their design skills.



LINKS TO OTHER TASKS 

Comments

Post a Comment

Popular posts from this blog

INTERACTIVE DESIGN - Exercises

Image
Edita Chew En Thung  /  0357357  Interactive Design  /  Bachelor of Design (Honours) in Creative Media  /  Taylor's University Exercises / HTML Document Development & HTML, CSS Document Development, CSS Layout Model Table of Content 1. LECTURES 2. INSTRUCTIONS 3. PROCESS       i.  ANALYSIS 4. FEEDBACK 5. REFLECTION LECTURES fig 1.0 | Lecture Slides Week 1 Usability: Designing Products for User Satisfaction What is Usability? Usability is how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation. It is a part of User Experience (UX) Design. It's the second level of UX Design. A design’s usability depends on how well its features accommodate users’ needs and contexts . When users first encounter an interface, they should be able to find their way about easily enough to achieve objective w...
Read more

Publishing Design

Image
Edita Chew En Thung  /  0357357 Publishing Design  /  Bachelor of Design (Honours) in Creative Media  /  Taylor's University Task 1, 2, 3   Table of Content 1. INSTRUCTIONS 2. LECTURES 3. EXERCISES 4. TASK 2 5. TASK 3 6. FEEDBACK 7. REFLECTION INSTRUCTIONS fig 1.0 | Module Information Booklet (MIB) Throughout the beginning and the middle of the semester, exercises will be prescribed at various phases of the module.  These exercises will aid & benefit us in our quest to gain theoretical and practical knowledge in book design that will inform us whilst completing various phases of the module’s tasks.   All exercises prescribed are to be completed & documented (la...
Read more

Major Project 1

Image
Edita Chew En Thung  /  0357357 Major Project 1  /  Bachelor of Design (Honours) in Creative Media  /  Taylor's University Task 1 Table of Content 1. INSTRUCTIONS 2. PROCESS       i. FINAL 3. FEEDBACK 4. REFLECTION INSTRUCTIONS fig 1.0 | Module information Booklet The project presentation demonstrates the culmination of how our design solution effectively addresses a specific need in our targeted audience, utilising a newly created product or service that brings unique social, cultural and/or economic value.   The focus will be on our attention to details and the successful execution of a wide range of conventions particular to our specific area of specialisation including organisation, content, presentation formatting, aesthetics and style.  
Read more