Labels

Advanced Typography | Task 1 / Exercises 1 & 2

23/09/24 - 15/10/24 | Week 1 - Week 4
Nadia Chong Wen | 0355736 | Bachelor's of Design (Honours) in Creative Media
Task 1 / Exercises:Typographic Systems & Type & Play

Table of Contents

  1. Lecture Notes
  2. Instructions
  3. Task 1
    1. Exercise 1 | Typographic Systems
    2. Exercise 2 | Type & Play Part 1 / Finding Type
    3. Exercise 2 | Type & Play Part 2 / Type & Image
  4. Feedback
  5. Reflection
  6. Further Reading

1. Lecture Notes 

This module introduces and reinforces students to the nomenclature, conventions and practice of Type design and typographic systems for the purpose of exploration and communication through print and screen-based platforms. It seeks to explore the expressive range of typography as a primary visual, illustrative element for use in creative media, and enhance skills for shaping verbal messages through typographic design.

AdTypo 1 | Typographic Systems

8 Major Variations:

  1. Axial
  2. Radial
  3. Dilational
  4. Random
  5. Grid
  6. Modular
  7. Transitional
  8. Bilateral
Typographical organization is complex because the elements are dependent on communication in order to function. Additional criteria such as hierarchy, order of reading, legibility, and contrast come into play as well. The typographic systems are akin to what architects term shape grammars.

Axial System: All them are organized to the left or right of a single axis.

Radial System: All elements are extended from a point of focus.

Dilational 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 as a standardized unit.

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

It is important to know that typography not only plays a reading role, but also a visual role.

AdTypo 2 | Typographic Composition

Principles of Design Composition

  • Emphasis
  • Isolation
  • Repetition
  • Symmetry & Asymmetry 
  • Alignment
  • Perspective
Compositions

Emphasis:

Figure 1.0 | Emphasis, Week 2 (2/10/24)

Emphasis can be in layout and can go through colors.

Rule of Thirds:

Figure 1.1 | Rule of Thirds, Week 2 (2/10/24)

Anyone of the intersecting points becomes the focal point of the layout.

Typographic Systems

Out of all 8 systems, the grid system is mostly used which is derived from the grided compositional structure of letterpress. It is also known as the Swiss (Modernist) style typography in modern days.

Figure 1.2 | Grid System, Week 2 (2/10/24)

Figure 1.3 | Postmodernist System, Week 2 (2/10/24)

Environmental Grid:

Figure 1.3 | Environmental System, Week 2 (2/10/24)

It is based on exploration of an existing structure or numerous structures combined. An extraction of crucial lines both curved and straight formed. The designer then organizes the information around this super-structure, which includes non-objective elements to create a unique and exciting mixture of texture and visual stimuli.

Form & Movements:

Figure 1.3 | Environmental System, Week 2 (3/10/24)

Based on the exploration of an existing Grid Systems. The placement of a form on a page, over many pages creates movement. The forms could represent images, text or colour. 

AdTypo 3 | Context & Creativity

Handwriting:

First mechanically produced letterforms were designed to directly imitate handwriting. The shape and line of hand-drawn letterforms are influenced by the tools and materials used to make them. 

Figure 1.4 | Evolution of the Latin Alphabet, Week 3 (09/10/24)
Figure 1.5 | Cuneiform, Week 3 (09/10/24)

The earliest system of actual writing, written from left to right and evolved from pictograms.

Figure 1.5 | Ancient Egypt Hieroglyphics, Week 3 (09/10/24)

Ideograms, represent the things they actually depict. As determinatives to show that the signs preceding are meant as phonograms and to indicate the general idea of the word. As phonograms to represent sounds that "spell out" individual words.

Early greek (5th C. B.C.E.): Drawn freehand, not constructed with compasses and rules, and they had no serifs. In time the strokes of these letters grew thicker, the aperture lessened, and serifs appeared.

Roman Uncials: By the 4th century Roman letters were becoming more rounded, the curved form allowed for fewer strokes and could be written faster.

English Half Uncials (8th C.): In England, the uncial evolved into a more slanted and condensed form. 

Carolingian Minuscule: Capitals at the start of a sentence, spaces between words and punctuation. It was this style that became the pattern for the Humanistic writing of the fifteenth century; this latter, in turn, was the basis of our lower-case roman type.

Black Letter (12-15 C. CE): Characterised by tight spacing and condensed lettering. Evenly spaced verticals dominated the letterform. Condensing line spacing and letter spacing reduced the amount of costly materials in book production. 

The Italian Renaissance: Newly rediscovered letterforms Antica. The renaissance analysis of form that was being applied to art and architecture was directed toward letterform — resulting in a more perfect or rationalised letter.

Figure 1.6 | Indian’ subcontinent the Indus Valley Civilization (IVC) script (3500-2000 BCE), Week 3 (09/10/24)

The oldest writing found in the ‘Indian’ subcontinent the Indus Valley Civilization (IVC) script (3500-2000 BCE), is as yet undeciphered and seems to have been somewhat logo-syllabic in nature.

Figure 1.7 | Indian’ subcontinent the Indus Valley Civilization (IVC) script (3500-2000 BCE), Week 3 (09/10/24)

The earliest writing system developed in India after the Indus script. It is one of the most influential writing systems; all modern Indian scripts and several hundred scripts found in Southeast and East Asia are derived from Brahmi.

AdTypo 4 | Designing Type

The general process of Type Design:

1. Research

  • When creating type, we should understand type history, type anatomy and type conventions. We also should know terminologies, side bearing, metrics, hinting, etc.
  • Important to determine the purpose of the type and what it would be used for.
  • Also recommended to examine existing fonts that are being presently used for inspiration/reference/context/etc.
2. Sketching
  • Some designers sketch their typeface using the traditional tool set (brush/ink/paper) then scan them for the purpose of digitization.
  • Some use digital tool sets such as Wacom directly into a font design software (much quicker, persistent, and consistent) but it can impede on the natural movement of hand strokes.
3. Digitization
  • Leading font software are: FontLab and GLyphs App.
  • Attention should not only be given to the whole form at this stage but also the counter form. The readability of the text is highly dependent on it.
4. Testing
  • Results of testing is part of the process of refining and correcting aspects of this typeface.
  • Prototyping is also part of the testing process and leads to feedback.
5. Deploy
  • The task of revision doesn't end on deployment due to unforeseen errors that didn't come to fore before.
Typeface Construction
Figure 1.9 | Construction Grid for Roman Capital Letters , Week 4 (17/10/24)

Roman Capital: The grid consists of a square, and inside it is a circle that just touches the line of the square in four places. Within the square, there is also a rectangle. This rectangle is three quarters the size of the square and is positioned at the center of the square.

↑Back to the top↑

2. Instructions

↑Back to the top↑

3. Task 1

Exercise 1 | Typographic Systems

For this exercise, we are to explore 8 systems which are Axial, Radial, Dilatational, Random, Grid, Modular, Transitional and Bilateral in InDesign using the content given in the MIB. I decided to go with "The ABCs of Bauhaus Design Theory."

Important Notes:

  • Size 200 x 200 mm
  • Colours: Black and additional colour
  • Minor graphical elements

Axial System.

    Figure 2.0 | Axial Attempt #1, Week 1 (28/09/24)

    At first glance, I thought the Axial System would be simple to understand to do and understand but I severely underestimated how much time something this simple took me. It was difficult to find the right places to place the type in and also where to add detail. It was difficult to make enough of a balance for it to even look presentable.

    Figure 2.1 | Axial Attempt #2, Week 1 (28/09/24)

    For the next attempt, I tried another take on the Axial System where it's slanted and focused on the majorly on the right side the design. 

    Figure 2.2 | Axial Attempt #3, Week 2 (02/10/24)

    After receiving Mr. Vinod's feed back to move it more towards the right, I moved the most top information in accordance to it as well as removing the dot and adding a square instead to give more of a feel of symmetry. I added some lines at the side of the words at bottom to give a more professional feel to it.

    Radial System.



    Figure 2.3 | Radial Attempt #1, Week 1 (29/09/24)

    This was my first attempt at the radial system before fully understanding it. I used one circle to pivot and spread out the information to one side in order to make it seem as if it were pers of a bigger circle. However, after looking at it for awhile, I decided that I should approach other ways to make the Radial system more readable and easier to look at.

    Figure 2.4 | Radial Attempt #2, Week 1 (29/09/24)

    I decided that this time, I would use two circles to pivot and spread out the information equally so that the words had more space rather than to simply stack them on one side. I was more satisfied with this one, but I felt as though I could do better without the big circle at the right corner.

    Figure 2.5 | Radial Attempt #3, Week 2 (30/09/24)

    I put the bigger circle at the top left corner in order to draw attention to the title of and made a smaller little circle in order for viewers to still be able to locate where the other part of the information would be easier than having no circle.

    Dilatational System.

    Figure 2.6 | Dilatational System, Week 2 (01/10/24)

    For the Dilatational System, I decided to make the title of the lecture's text bigger than the rest of the of the other circles and made it seem as though it was leading downward from the "Open Public Lecture" to the the dares and times of the lectures as well as the lecturers.

    Random System.

    Figure 2.7 | Radial System, Week 2 (02/10/24)

    The Random System was very confusing for me to work on due to all the examples I have seen being nearly incomprehensible. I decided to go with another type of random that is still slightly comprehensible but uses different fonts and added black squares to make the design pop out more.

    Grid System.

    Figure 2.8 | Grid Attempt #1, Week 2 (03/10/24)

    The Grid System was slightly difficult for me to figure out but I followed the grids as best as I could and made a design where the lines can help direct the attention of the viewer to the title of the lecture as well as still presenting the dates. I used a 6x5 squares for this design.

    Figure 2.9 | Grid Attempt #2, Week 2 (03/10/24)

    For this design, I decided to rearrange the elements of the previous design as well as invert some of the colors in order to make the words pop out more than in the previous version. I used a 3x3 square design for this.

    Transitional System.

    Figure 2.10 | Transitional System, Week 2 (04/10/24)

    For this design, I wanted to make it have a sort of a rhythm of moving down the same path parallel to each other and making sure it flowed.

    Modular System.

    Figure 2.11 | Modular Attempt 1#, Week 2 (04/10/24)

    For the modular system, I tried my best to fit the columns and guides placed and make sure the words were fit in a neat order without clashing with the other parts.

    Figure 2.11 | Modular Attempt 2#, Week 2 (04/10/24)

    For this design, I decided to invert the black and white and use a colored outline for the numbers to make it more soothing to the eye.

    Bilateral System.

    Figure 2.12 | Bilateral Attempt 2#, Week 2 (04/10/24)

    The Bilateral System Designs were the easiest for me to complete out of all of the designs here. For this design, I decided to focus on the center and make the words white and background black in order to make the design pop out more. I added a circle to draw your attention the center, with the above being the title.

    Figure 2.13 | Bilateral Attempt 2#, Week 2 (04/10/24)

    I made another design where the majority of the focus is on the left while the other information is on the other side.

    ↑Back to the top↑

    Final Task 1 | Exercise 1

    Figure 2.14 | Final Axial System, Week 2 (05/10/24)
    Figure 2.15 | Final Radial System, Week 2 (05/10/24)
    Figure 2.16 | Final Dilatational System, Week 2 (05/10/24)
    Figure 2.17 | Final Random System, Week 2 (05/10/24)
    Figure 2.18 | Final Grid System, Week 2 (05/10/24)
    Figure 2.19 | Final Transitional System, Week 2 (05/10/24)
    Figure 2.20 | Final Modular System, Week 2 (05/10/24)
    Figure 2.21 | Final Bilateral System, Week 2 (05/10/24)

    Figure 2.22 | Typographic System Final (JPEG), Week 2 (05/10/24)

    Figure 2.23 | Typographic System Final (Grid/Baseline), Week 2 (05/10/24)

    ↑Back to the top↑

    Exercise 2 | Type & Play Part 1 / Finding Type

    For Exercise 2, we were instructed to analyse, dissect and identify potential letterforms within the dissected image. The forms would be explored and ultimately digitized.

    Finding an Image

    Figure 3.0 | Brain Coral, Week 2 (05/10/24)

    We were instructed to find an image where we could get letterforms out from. I decided to choose a photograph of a brain coral due to it's many nooks and crannies that look like unique shapes.

    Extraction

    Originally, I extracted these 5 letters from the smaller spaces of the brain coral.

    Figure 3.1 | Brain Coral Extraction 1#, Week 3 (06/10/24)

    After receiving feedback from Mr. Vinod that I should instead encapsulate more areas of the coral instead of the smaller parts,  I decided to follow his advice and extract another 5 letters from bigger chunks of the coral.

    Figure 3.2 | Brain Coral Extraction 2#, Week 3 (08/10/24)

    Refinement Process

    Figure 3.3 | Font Reference, Week 3 (08/10/24)

    For the Font Reference, I chose to use the Futura Std Light Condensed font since it was the most similar in length as the extractions. It was also simple and easy to read so I decided that I should refine my extraction in this.

    Figure 3.4 | Refinement Process, Week 3 (09/10/24)

    First, I decided to align the extractions to the font reference so that it'd be easier for me to adjust and work on it as seen by the top right corner of Figure 4.4. I then removed the holes in the extraction and adjusted it to fit the reference font while also keeping the uniqueness of the corals. I then added the maze like holes back into the the adjusted extraction to keep the original look of the extraction.

    After getting approval from Mr. Vinod, I decided to add the last refinements in by adjusting the size and length of the extraction and I was done.


    ↑Back to the top↑

    Final Part 1 | Finding Type

    Figure 3.5 | Refinement Process, Week 3 (09/10/24)
    Figure 3.6 | Refinement Process, Week 3 (09/10/24)

    Figure 3.7 | Original Extraction and Final Letterform, Week 3 (09/10/24)
    Figure 3.8 | Final Letterform, Week 3 (09/10/24)
    Figure 3.9 | Final Letterform (Baseline), Week 3 (09/10/24)


    Figure 3.10 | Letter X, Week 3 (09/10/24)

    Figure 3.11 | Letter N, Week 3 (09/10/24)

    Figure 3.12 | Letter B, Week 3 (09/10/24)

    Figure 3.13 | Letter A, Week 3 (09/10/24)

    Figure 3.14 | Letter U, Week 3 (09/10/24)
    Figure 3.9 | Final Finding Type, Week 3 (09/10/24)

    ↑Back to the top↑

    Exercise 2 | Part 2 / Type & Play

    For Part 2, we were instructed us to create a movie poster using the letterform made during Part 1.

    Since my letterform is of a brain coral, I looked for images concerning corals and the sea for my movie poster. I have went through multiple images of the coral reefs in the Great Barrier Reef to see which would fit more.

    Figure 4.0 | Finding Images, Week 3 (11/10/24)

    In the end, I chose a image of a pile of dead corals to go for a horror feel for the movie poster.

    Figure 4.1 | Chosen Image, Week 3 (11/10/24)

    I put the image into Photoshop in order to adjust the colors and contrast of everything inside it, as well as adjusting brightness and more.

    Figure 4.2 | Photoshoped Image, Week 3 (11/10/24)

    Afterwards, I decided to make some drafts after observing some Movie Posters that have come out in recent years.

    Figure 4.3 | Drafts, Week 3 (11/10/24)

    I decided to go with the left most draft due to it being easier to look at as well as being able to see more of the image than the right.

    Figure 4.4 | Chosen Draft, Week 3 (11/10/24)

    I adjusted XBNAU to be bigger to fit the image more and be more impactful. I also made some adjustments to the words, thinking it would make the poster look better overall.

    Figure 4.5 | Clipping Mask, Week 3 (11/10/24)

    I decided to use clipping mask and pen tool to cover up parts of the title to make it feel as though it was part of the image itself, like it was something seen in the distance.

    Figure 4.6 | Clipping Mask, Week 3 (11/10/24)

    I also decided to make the words gradient in order to make it blend more into the background a little more and give more of a sense of a horror movie, like it was part of the dark ocean in the back.

    Figure 4.7 | Poster before Feedback, Week 3 (11/10/24)

    Mr. Vinod gave me feedback on the fonts I used below being not fit for a movie poster so I decided to change the font to Futura Std. Light in order to make it both more professional but also to make it feel balanced. I also rearranged the phrase of the movie to be above the "Coming Soon" after observing some other movie posters does so.

    Figure 4.8 | Rearranging and Changing Font 1#, Week 4 (15/10/24)

    I also saw that the production team and credits of the teams were usually placed upwards in posters and so I decided to go for that as well after changing the font to Futura Std. Light while varying the shapes as to keep the name the main focus of the credits.

    Figure 4.9 | Rearranging and Changing Font 2#, Week 4 (15/10/24)

    Afterwards, I noticed that XBNAU didn't exactly align perfectly center in the poster and adjusted the spacing and words of it as to make it as centered as I could.

    Figure 4.10 | Adding Logo, Week 4 (15/10/24)

    After all that, I made a simple logo that would serve as the "company" of the fake movie that I have created and placed it at the bottom. With that, I was done.

    Final Part 2 | Type & Play

    Figure 4.11 | Final Poster, Week 4 (15/10/24)

    Figure 4.12 | Final Poster (PDF), Week 4 (15/10/24)

    4. Feedback

    Week 2
    General Feedback:

    • Axial needs to be adjusted. Radial and Dilatational is okay.

    Specific Feedback:

    • Move the Axial Design more to the right.
    Week 3
    General Feedback:
    • Make 5 letterforms for Part 2.

    Specific Feedback:

    • Instead of doing the small holes, use the bigger parts to get a maze like feel for it.
    • Looks okay after extraction
    • Remember to use the path tool
    Week 4
    General Feedback:
    • Briefing on Project 2.
    • Make sure to include Baseline version of Exercise 1.

    Specific Feedback:

    • Rearrange some parts of the poster. 
    • Switch fonts of some parts.
    • Remember to include the logo.

    ↑Back to the top↑

    5. Reflection

    Experience

    Completing Exercise 1 & 2 was incredibly challenging for me in this short span of time. Even though it was incredibly challenging, I enjoyed exploring and learning about how to do the different 8 systems as well as extracting letterforms from existing objects. I have to say that what I have made for the assignment could be improved with more time but I am quite satisfied with how they turned out in this short span of time. Exercise 2 was the most fun out of all of the parts of the assignment, being able to test my imagination and design sense in the poster. I'm nervous for future assignments but I'll continue doing my best.

    Observations

    I found that reading up on the systems and seeing examples helped really clear up what I should do in Exercise 1 and the feedback for Exercise 2 helped me greatly on making a better letterform than the one I initially made. 

    Findings

    I have been able to find how to make letterforms from images and finding type within images. My view of typography was quite limited to the previous semester, but this expanded it a little more.

    ↑Back to the top↑

    6. Further Reading

    Figure 5.0 | Typographic Systems by Kimberly Elam (2007)

    For this task's further reading, I decided to read this book. It was recommended to us by Mr. Vinod for Exercise 1 of this task. 

    Figure 5.1 | Dilatational Systems (Page 55)

    Dilatational compositions change as the arrangement of circles changes. It creates implied dynamic forces that the eye seeks out. The composition can be really complex and grouping elements is often needed to simplify the message and consolidate visual forces.
    Figure 5.2 | Grid Systems (Page 85)

    Grid compositions are usually formal and are intended to create visual order and economy in production. 

    Figure 5.2 | Grid Systems Hierarchy (Page 86)


    Labels:

    Comments

    Post a Comment