Advanced Typography/ Task 1: Exercises

on
30.08.2023 - 24.09.2023 (Week 01 - Week 03)
LIEW XIAO HUI / 0353121
BACHELOR OF DESIGN (HONOURS) IN CREATIVE MEDIA / ADVANCED TYPOGRAPHY
Task 1: Exercises

JUMPLINK

LECTURES
Week 01 
AdTypo_1_Typographic
Typographic systems share unique rules that give purpose and guide decision-making. Every design relies on a structural system which can be categorized into eight primary variations.
1. Axial: All elements are aligned either to the left or right of a single axis.

Figure 1.1, 1.2 Axial system.

2. Radial: All elements are extended from a central focal point.

Figure 1.3, 1.4 Radial system.

3. Dilatational: All elements extend in a circular pattern from a central point.


Figure 1.5, 1.6 Dilatational system.

4. Random: Elements appear to have no specific pattern or relationship.

Figure 1.7 Random system.

5. Grid: A system combined of both vertical and horizontal divisions.


Figure 1.8, 1.9 Grid system.

6. Modular: A series of non-objective elements that are constructed as a standardized unit.


Figure 1.10, 1.11 Modular system.

7. Transitional: An informal system of layered banding.


Figure 1.12, 1.13 Transitional system.

8. Bilateral: All text is symmetrically arranged along a single axis.


Figure 1.14, 1.15 Bilateral system.

Week 02 
AdTypo_2_Typographic Composition
Principles of design composition are emphasis, isolation, repetition, symmetry and asymmetry, alignment, perspective, and others.

Figure 2.1 Principle of design composition.

The Rule of Thirds is a principle in photography composition. It suggests dividing a frame or space into a grid of 3 columns and 3 rows. The points where these grid lines intersect serve as guides for placing points of interest within the frame effectively.

Figure 2.2 The rule of thirds.

The environment grid is about exploring existing structures or combining multiple structures to extract important lines, whether they are curved or straight.

Figure 2.3 Environment grid.

Form and movement involve exploring existing grid systems. It generates movement by placing a form on pages, regardless of whether they are paper or digital."

Figure 2.4 Form and movement.

Week 03
AdTypo_3_Context&Creativity
Handwriting holds significant importance because the earliest mechanically produced letterforms were originally designed to closely resemble handwritten script. Handwriting served as the foundational model for shaping the form, spacing, and conventions that mechanical type sought to replicate and emulate. In essence, handwriting set the standard for the design and arrangement of type in the mechanical printing process.
Cuneiform is the earliest known system of actual writing. 

Figure 3.1 Cuneiform.

Figure 3.2 Hieroglyphics.

Egyptian writing system
- Used as ideograms to directly represent the objects or concepts they visually depicted.
- Included determinatives, which were symbols used to clarify the intended meaning of the preceding signs.|
- Functioned as phonograms, representing specific sounds or syllables. These signs were used to "spell out" the individual words in a language, providing a way to represent spoken language in a written form.

Early Greek writing built upon the Egyptian logoconsonantal system, and the Phoenicians introduced a  Phoenicians alphabet consisting of 22 letters. At this stage, the direction of reading wasn't standardized texts could be read left to right in one row and then switch to right to left in the next. These early Greek letters were handwritten, lacked serifs, and weren't meticulously drawn with compasses and rulers.

Figure 3.3 Early Greek.

In the 4th century, Roman letters adopted more rounded forms. These curved shapes offered several advantages, including the ability to write with fewer strokes and increased writing speed.

Figure 3.4 Roman uncials.

In England, the uncial evolved into a more slanted and condensed form.

Figure 3.5 English half uncials.

Introduced capital letters at the start of sentences, spaces between words, and punctuation. It influenced Humanistic writing and, subsequently, our lowercase Roman type.

Figure 3.6 Carolingian minuscule.

Known for tight spacing and condensed lettering, with dominant vertical lines. Condensing line spacing and letter spacing reduced material costs in book production.

Figure 3.7 Black letter.

Rediscovered classical letterforms known as "Antica," applying Renaissance principles of form analysis to create more refined and rationalized letterforms.

Figure 3.8 Italian Renaissance.

Introduced of movable type in the 1000-1100 CE. This innovation was pioneered in China but achieved in Korea (Diamond Sutra).

Figure 3.9 Movable type.

The most ancient form of writing discovered in the Indian subcontinent, attributed to the Indus Valley Civilization (IVC) script from 3500-2000 BCE, remains undeciphered and appears to have been partially logo-syllabic in its characteristics.

Figure 3.10 Indus Valley Civilization (IVC) Script.

The earliest writing system to emerge in India after the Indus script was Brahmi. It holds tremendous significance as it served as the precursor for numerous modern Indian scripts and influenced the creation of hundreds of scripts in Southeast and East Asia.

Figure 3.11 Brahmi script.

Pallava is a South Indian script originally used for writing Sanskrit and Tamil.

Pra-Nagari is an early form of the Nagari script used in India for writing Sanskrit.

Incung from Kerinci is the original writing system for the family from Kampung Kerinci, not Jawi.

Figure 3.12 Incung.

Week 04
AdTypo_4_Designing Type
Reason for designing a typeface by Xavier Dupré:
- Designing typefaces comes with a societal obligation, necessitating an ongoing effort to enhance legibility.
- Type design serves as a mode of artistic self-expression.
General process of type design: 
1. Research
- Familiarity with type history, type anatomy, and type conventions is crucial.
- Acquiring knowledge of terminologies such as side-bearing, metrics, and hinting is essential.
- Determining the type's intended use and potential applications is of great significance.
- Analyzing existing fonts in use can provide valuable inspiration and references, etc.
2. Sketching
- Some designers choose traditional methods, using brushes, pens, ink, and paper to sketch typefaces, which are later scanned for digitization.
- Some prefer digital tools like Wacom tablets within font design software for quicker and more consistent results, though this approach can sometimes restrict the natural hand stroke movement.
3. Digitization
- FontLab and Glyphs App
- Designers sometimes utilize Adobe Illustrator for crafting letterforms before importing them into specialized font applications. 
- It is essential to pay attention not only to the entire form but also to the counter form during this stage. The readability of the typeface relies significantly on it.
4. Test
- Testing is a key part of refining the typeface, helping identify areas for improvement.
- Prototyping is also crucial in the testing process, providing valuable feedback.
5. Deploy
- Even after deploying a finished typeface, unexpected issues may arise that were not evident during prototyping and testing. Therefore, the process of revision continues beyond deployment.
- The rigour of the testing is crucial to ensure that any emerging issues remain minor and manageable.
Typeface Construction:
Employing grids (with circular forms), can simplify the construction of letterforms and represent a possible method for crafting letterform design.

Figure 4.1 Construction grid for Roman Capital.

Construction and consideration:
- One important visual correction involves extending curved forms beyond the baseline and cap line, aligning them vertically with straight forms.
- Another crucial correction pertains to letter spacing, ensuring consistent visual white space between letters, a process known as "fitting" the type.

Figure 4.2 Classification according to form and construction.

Week 05
AdTypo_5_PerceptionAndOrganisation
In typography, perception involves how readers visually navigate and interpret content through contrast, form, and organization. Content can be textual, visual, graphical, or color elements.

Figure 5.1 Contrast in typography. 

Contrast:
Contrast/size: Serves as a focal point that captures the reader's attention. Typically, this is achieved by making titles or headings significantly larger than the body text, which is a common application of size contrast.

Figure 5.2 Contrast/size.

Contrast/weight: Refers to how bold type can create a prominent contrast within a style that includes lighter type. Aside from using bold, incorporating rules, spots, or squares can also establish a "heavy area" to emphasize or attract visual attention, extending beyond just using varying type weights.

Figure 5.3 Contrast/weight.

Contrast/form: Refers to the differentiation between a capital letter and its lowercase counterpart, as well as between a roman letter and its italic counterpart. This concept also encompasses variations in typefaces, such as condensed and expanded versions, as part of form contrast.

Figure 5.4 Contrast/form.

Contrast/structure: The distinct letterforms found in various types of typefaces. This can include differences between a monoline sans serif and a traditional serif typeface, or variations between an italic and a blackletter typeface.

Figure 5.5 Contrast/structure.

Contrast/texture: Combining contrasts in size, weight, form, and structure and incorporating them into a text block on a page. Texture relates to how the lines of type appear when viewed up close and from a distance. It is influenced by both the characteristics of the letterforms and how they are arranged on the page.

Figure 5.6 Contrast/texture.

Contrast/direction: The opposition between vertical and horizontal, and the angles in between. Turning one word on its side can have a dramatic effect on a layout. Text blocks also have their vertical or horizontal aspects of direction. Mixing wide blocks of long lines with tall columns of short line can also create a contrast.

Figure 5.7 Contrast/direction.

Contrast/color: When incorporating color, it's advisable to use a second color that generally has lower contrast in values compared to plain black on white. Consequently, it's essential to carefully consider which elements require emphasis and to assess the tonal values of the chosen colors.

Figure 5.8 Contrast/color.

Form:
- The collective appearance and impression created by the elements within a typographic composition. It significantly influences visual impact and initial impressions. An effective typographic form is typically visually captivating, guiding the viewer's gaze, engaging the mind, and often leaving a lasting memory.
- The interplay between meaning and form achieves a harmonious balance in both function and expression. When a typeface is perceived as a form, it no longer reads as a letter because it has been manipulated by distortion, texture, enlargement, and has been extruded into a space.

Figure 5.9 Form.

Organization 
Gestalt theory asserts that the whole is greater than the sum of its parts. This means we perceive things as complete and unified, rather than as isolated elements.
In design, especially in typographic layouts, the effectiveness of individual components is only as good as the overall visual form they create. So, it's not just about individual elements; it's about how they work together to form a cohesive design.
Gestalt: Perceptual Organization/ Groupings.
- The Law of Similarity: Asserts that elements sharing similarities are often perceived as a coherent group. These similarities can encompass various attributes such as color, orientation, size, or even motion.
- The Law of Proximity: Posits that elements located closely to each other are more likely to be perceived as a unified group. In simple terms, this law suggests that objects in close proximity tend to be grouped together, while those farther apart are less likely to be perceived as part of the same group.
- The Law of Closure: This means our tendency to complete incomplete figures or forms mentally, even if the visual representation is partial, obscured, or missing some details.
- The Law of (Good) Continuation: States that we often see multiple objects as separate and uninterrupted, even when they overlap or intersect. The alignment and arrangement of these objects play a crucial role in this phenomenon.

Figure 5.10 Gestalt: perceptual organization/ groupings.

INSTRUCTIONS

Exercises: Typographic System
The first task of Advanced Typography requires the use of Adobe InDesign with a size of 200 mm x 200 mm. It involves applying our understanding of typographic systems and exploring them with the provided content options:
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

Week 01 Practical class
During Week 01's practical class, I followed Mr. Vinod's guidance to create a layout design. I applied my understanding of the axial system which I had just learned from the lecture playlist.

Figure 6.1 Practical attempt. (Week 01, 30.08.2023)

Research 
After the first week of classes, I realized that I didn't have much understanding of the given options. Therefore, before I continued on this task I did some research on the given options to better understand it and create related layout designs. After my research, I decided to focus on 'The Basics of Bauhaus Design Theory' as my design topic. Besides, I decided to abandon my initial attempt in class and chose to explore other layout designs.


Figure 6.2, 6.3Research. (Week 01, 01.09.2023)

The Bauhaus style uses simple shapes like rectangles, squares, and circles, and emphasizing simplicity. It mainly uses primary colors like red, blue, and yellow, along with neutral colors to make bold and contrasting designs.

Sketches
After completing my research, I began sketching out ideas based on the eight typographic systems. I attempted to implement the ideas I had sketched in Adobe InDesign, but I wasn't satisfied with the results. I used these initial sketches as a foundation for each design and then improved them by studying visual references on Pinterest.

Figure 6.4, 6.5 Sketches. (Week 01, 01.09.2023)

Sometimes, the design turns out different from the sketches. This happens when I start using Adobe InDesign because factors like the length of the text may lead to changes that were not foreseen in the initial sketches. However, I will find new and useful ideas and designs despite these setbacks.


Figure 6.6, 6.7 Version 01 vs version 02. (Week 01, 02.09.2023)

Progress
I created multiple designs for each typographic system. I experimented with different fonts, font sizes, and placements in order to find the most effective layout design.



Figure 7.1, 7.2, 7.3, 7.4, 7.5 Progress screenshots. (Week 01, 03.09.2023)

Shortlisted Design
Out of the various layout designs I created, I narrowed it down to a maximum of two designs for final consideration.
Axial
For the shortlisted Axial 01 layout, I decided to make it more visually engaging and able to apply the concept of Bauhaus by using triangle shape and angled design, departing from the standard axial typographic system layout. I began by creating a page with two columns and a 5mm gutter. I aligned the date, time, and lecture names and then rotated them to the desired angle. After that, I aligned the remaining information within the same number of columns and gutter but with a different text direction. Finally, I rotated this information to match the angle of the initial elements.
Figure 8.1 Shortlisted- Axial 01 (Week 02, 04.09.2023)

For Axial 02, I decided to further explore a design layout that combines both vertical and horizontal text directions which are aligned on the left and right sides of a single vertical axis. I explored with various composition and text directions to achieve a balanced and engaging design layout. Besides, I utilized colored lines to enhance the vibrancy of the overall design, departing from the black-and-white scheme.

Figure 8.2 Shortlisted- Axial 02 (Week 02, 04.09.2023)

Radial
For Radial 01,  I experimented with a design layout using two columns and a 0mm gutter. I chose not to rely heavily on grids and guides, given that this system is primarily based on the circular form. Instead, I employed two circles, one in the top right and another in the bottom left  to create a design layout that guides the viewer's eye in a flowing 'S' shape, creating a sense of dynamic motion within the information.

Figure 8.3 Shortlisted- Radial 01. (Week 02, 04.09.2023)

In the case of Radial 02, I utilized two circular elements to construct the design layout. I aligned the text with both the outer and inner circles to maintain a clean and organized appearance. Additionally, I incorporated the color red for the date text to enhance engagement and create clear distinctions between the various sections of information.

Figure 8.4 Shortlisted- Radial 02. (Week 02, 04.09.2023)

Dilatational
In Dilatational, I struggled to create an engaging design layout because I aimed to avoid it being a simple radial extension of information from a central point. I experimented with various compositions and fonts in order to meet my expectations. Finally, I decided to separate the information into different central points while connecting them to give the impression of a left-to-right flow.
Figure 8.5Shortlisted- Dilatational 01. (Week 02, 04.09.2023)
Random
Working with the random system posed a challenge as it lacked a specific pattern or direction and needed to effectively communicate the information to the viewer. To achieve this, I utilized elements from multiple typographic systems, including Dilatational and Transitional. I also highlighted the word 'Bauhaus' with a red text background for emphasis.

Figure 8.6 Shortlisted- Random 01. (Week 02, 04.09.2023)
Grid
For the grid system, I employed a 3x3 grid with no gutter (0mm). Instead of using red text, I emphasized 'Bauhaus' with bold formatting, as I believed that red text might disrupt the visual harmony of the grid. I carefully arranged the information within each row or column to achieve a balanced design layout.

Figure 8.7 Shortlisted- Grid 01. (Week 02, 04.09.2023)

Modular
In the modular system, I utilized a 6x6 grid with guides, totaling 36 squares. Each piece of information was neatly positioned within these squares, occupying from 1 to 6 squares as required.

Figure 8.8 Shortlisted- Modular 01. (Week 02, 04.09.2023)

Figure 8.9 Shortlisted- Modular 02. (Week 02, 04.09.2023)

Transitional
In the transitional layout, I introduced two different fonts for the topics to enhance the layered effect and sense of motion. Additionally, I positioned other information below the topics, intending to guide the viewer's gaze from the topics to the lower section.

Figure 8.10 Shortlisted- Transitional 01. (Week 02, 04.09.2023)

Bilateral

Figure 8.11 Shortlisted- Bilateral 01. (Week 02, 04.09.2023)

Figure 8.12 Shortlisted- Bilateral 02. (Week 02, 04.09.2023)

These are the final chosen design layouts that were presented to Mr. Vinod during the Week 2 class to solicit feedback.

Figure 8.13 Final chosen design layout. (Week2, 06.09.2023)

Final Typographic System
Following the receipt of detailed feedback from Mr. Vinod, I proceeded to refine my design layouts accordingly.

Figure 9.1 Final Axial system. (Week 02, 09.09.2023)

Figure 9.2 Final Radial system. (Week 02, 09.09.2023)

Figure 9.3 Final Dilatational system. (Week 02, 09.09.2023)

Figure 9.4 Final Random system. (Week 02, 09.09.2023)

Figure 9.5 Final Grid system. (Week 02, 09.09.2023)

Figure 9.6 Final Modular system. (Week 02, 09.09.2023)

Figure 9.7 Final Transitional system. (Week 02, 09.09.2023)

Figure 9.8 Final Bilateral system. (Week 02, 09.09.2023)


Figure 9.9 Final typographic systems PDF. (Week 02, 09.09.2023)


Figure 9.10 Final typographic systems - grid PDF. (Week 02, 09.09.2023)

Exercises: Type and Play
In this exercise, we were tasked with choosing an image and identifying potential letterforms within it. After that, we were required to refine these forms, transforming them from rough representations into more polished representations that would still bear some resemblance to their origins. Lastly, we were to integrate these letterforms with a visual element of our choice.

Chosen Image
The image I selected was a wooden fractal puzzle, from Pinterest. It was chosen due to its unique characteristics, and I found the movement and arrangement of the puzzle pieces within it to hold fascinating potential for creating unique letterforms.

Figure 10.1 Chosen image. (Week 02, 06.09.2023)
Letterform Extraction
I utilized the pencil tool in Adobe Illustrator to outline the potential letterforms found within my selected image. These letters included E, M, P, T, Y, and H. Following Mr. Vinod's guidance, where we were advised to work with five letterforms, I decided to proceed with the letters E, M, P, T, and Y to form the word 'EMPTY'.


Figure 10.2 Trace letterforms. (Week 02, 09.09.2023)

I observed a notable consistent characteristic among the extracted letterforms, they were primarily constructed from curved shapes resembling circles, and no diagonal lines were present in these letterforms, instead favoring horizontal and vertical lines.

Figure 10.3 Extracted letterforms. (Week 02, 09.09.2023)

Reference
I selected Gill Sans Std Bold Condensed from the provided list of 10 typefaces as my reference for refining the extracted letterforms. I made this choice because the weight and style of this font closely matched the letterforms that I extracted.

Figure 10.4 Reference. (Week 02, 09.09.2023)

Digitalization
In the beginning, I aimed to understand the letterforms' structure by organizing circles and setting up grids and guides. This simplified my process of studying and identifying the design of the letterforms. I began the process of digitizing the extracted letterforms by correcting their angles to align with a standard orientation. The initial angles were a result of the image's capture method.


Figure 11.1, 11.2, 11.3, 11.4 Progress screenshots. (Week 02, 10.09.2023)

However, I noticed that when I adjusted the letterforms to the standard orientation, they appeared distorted and unusual. I realized that my initial approach to creating grids and guides was incorrect, particularly noticeable in the varying stroke weights of the letter 'T'. Following additional practice and examination, I  successfully recreated letterforms that accurately captured the chosen image's characteristics.


Figure 11.5, 11.6 Progress screenshots. (Week 02, 11.09.2023)

Figure 11.7 Recreated letterforms. (Week 02, 11.09.2023)

Once I had the letterforms in their standard orientation, I began the process of refining them, taking inspiration from the reference font. 

Figure 11.8 First attempt. (Week 02, 11.09.2023)

I've chosen to simplify the letterforms I recreated. In my initial attempt, I constructed the letterform 'M' using three circles. Subsequently, I refined the 'M' by removing the circle at the bottom middle, allowing the letter 'M' to no longer touch the baseline and appear less complex. 

Figure 11.9 Second attempt. (Week 02, 11.09.2023)

Following that, in my third attempt, I applied the same principle to refine and simplify the letters 'E,' 'P,' and 'Y'. In the letter 'E,' I removed the three circles on the right, reducing its size. For the letter 'P,' I reduced its size by removing the right and middle circles. In the case of the letter 'Y,' I removed the circle at the top right, as I felt it could cause confusion while retaining the primary structure of the letter 'Y'.

Figure 11.10 Third attempt. (Week 02, 11.09.2023)

During our week 03 class, I showed Mr. Vinod the process of extracting letterforms from an image, recreating these letterforms, and the few attempts that led to the final outcome.
Below is the compiled process of creating these letterforms.

Figure 11.11 Process. (Week 03, 13.09.2023)

After receiving feedback from Mr. Vinod, I made the decision to choose a different image for extracting letterforms. I embarked on a search for an image of an object that has unique characteristics but with different sizes and shapes. This step proved to be challenging, as I spent several days searching for an image that met my criteria. Ultimately, I found that balloons aligned perfectly with my requirements. I dedicated time to finding a suitable balloon image that matched my desired form.

Figure 12.1 Chosen image. (Week 03, 15.09.2023)

Once I found the image I was looking for, I proceeded to repeat the same steps I had followed for the previous wooden fractal puzzle. This involved extracting potential letterforms from the image and then recreating those letterforms.

Figure 12.2 Trace letterforms. (Week 03, 15.09.2023)

The characteristic of this image object is that the letterforms are shaped by the curves of long balloons. Additionally, some of the letterforms are created by combining two long balloons together.

Figure 12.3 Extracted letterform. (Week 03, 15.09.2023)

Reference
I selected Bembo Std regular from the provided list of 10 typefaces as my reference for refining the extracted letterforms. I made this choice because it offers a wider width compared to other typefaces. Additionally, the form of this typeface is not overly condensed, which I think aligns better with the shape of the balloon.

Figure 12.4 Reference. (Week 03, 15.09.2023)

Digitalization
I began by positioning the reference typefaces in the background, reducing their transparency. Then, I placed the extracted letterform on top and initiated the process of outlining the fundamental structure using pen tools. Subsequently, I moved the extracted letterform to the side and utilized curvature tools to curve the lines into the desired form, ensuring they matched the characteristics of the extracted letterform.


Figure 12.5, 12.6 Progress screenshots. (Week 03, 15.09.2023)

In my initial attempt, I chose to recreate the letterform using an outline first. I made this choice because it allowed me to better observe and assess the curvature of the balloon lines for realism. At this stage, I focused on creating a more standard orientation of the letterform and didn't focus deeply into replicating the specific characteristics from the extracted letterform.

Figure 13.1 First attempt. (Week 03, 15.09.2023)

For my second attempt, I continued refining the letterform, bringing it closer to a standard order. I placed emphasis on ensuring that the strokes of each letterform were consistent throughout.

Figure 13.2 Second attempt. (Week 03, 15.09.2023)

In my third attempt, I began making comparisons between the letterform I had created, the original image, and the extracted letterforms. I closely observed the curves of the object in the image and worked on refining my letterform to achieve smoother contours. Additionally, I started incorporating details from the balloon, such as the lip and drip point of the long balloons.

Figure 13.3 Progress screenshot. (Week 03, 15.09.2023)

Figure 13.4 Third attempt. (Week 03, 15.09.2023)

For my fourth attempt, I filled the letterform in black and added white outlines to certain areas. This was to highlight the curves of the letterform and emphasize the way the letterforms twists and turns. This approach was to give the letterform a more three-dimensional and realistic appearance, mirroring the characteristics of the balloon.

Figure 13.5 Fourth attempt. (Week 03, 15.09.2023)

Following my fourth attempt, I realized that the white outline I added didn't work well when the letterforms were placed on a colored background. I embarked on a search for methods to make the outline appear more natural, avoiding abrupt starts and stops.
In order to address the issue with the white outline, I experimented with various approaches, including adjusting the line width at the starting and ending points. However, I wasn't entirely satisfied with the results. Ultimately, I resolved the issue by converting the white outline into a clipping mask for the letterforms, ensuring that the lines didn't extend beyond the letterform, which had been causing an awkward appearance.


Figure 13.6, 13.7 Progress screenshots. (Week 03, 15.09.2023)

My fifth attempt is the final outcome for this stage. In this version, I successfully corrected the white outline issue, refined and simplified the outline's stroke, and incorporated detailed characteristics such as the balloon's lip and drip point in a more three-dimensional form, achieving the desired visual effect.

Figure 13.8 Fifth attempt. (Week 03, 15.09.2023)

Below is the compiled process of creating these letterforms.

Figure 13.9 Process. (Week 03, 15.09.2023)

Final Finding Type Outcome 

Figure 14.1 Compiled process. (Week 03, 15.09.2023)

Figure 14.2 Original extracted letterforms compared to the final type design. (Week 03, 15.09.2023)

Figure 14.3 Final Design. (Week 03, 15.09.2023)

Figure 14.4 Letter 'M'. (Week 03, 15.09.2023)               

Figure 14.5 Letter 'B'. (Week 03, 15.09.2023)

Figure 14.6 Letter 'P'. (Week 03, 15.09.2023)

Figure 14.7 Letter 'N'. (Week 03, 15.09.2023)

Figure 14.8 Letter 'S'. (Week 03, 15.09.2023)


Figure 14.9 Final finding type PDF. (Week 03, 15.09.2023)

Movie Poster
After completing the process of finding the type, we were tasked with using the letterforms we created to design a 1024px x 1024px movie poster.

For this part, I decided to use a different image than the one I initially used for extracting the letterforms, as I found the initial image a bit cluttered. I converted the image to black and white and positioned the letterforms I created in the center of the movie poster, with a slight rotation for added visual interest. Additionally, I included logos of movie production companies and added descriptive text at the top and bottom of the poster.

Figure 15.1 First attempt. (Week 03, 16.09.2023)

After presenting my first version movie poster to Mr. Vinod, I received valuable feedback from him to enhance and refine my poster design.
Following the suggestions provided by Mr. Vinod, I proceeded to refine my poster accordingly.


Figure 15.2, 15.3, 15.4 Attempts. (Week 03, 20.09.2023)

I refined the poster during the class and later presented the updated versions to Mr. Vinod. He recommended that I seek feedback from individuals who were unfamiliar with the poster design, as their fresh perspectives could provide insights into the most impactful movie poster based on their initial impressions.
Before seeking feedback from others, I researched current movie posters created by other designers and analyzed their color palettes to understand how they achieved impactful designs. Following this research, I made additional attempts at designing my movie poster and subsequently reached out to my family and friends to gather their valuable feedback.

Figure 15.5, 15.6, 15.7 Attempts. (Week 04, 22.09.2023)

Shortlisted Movie Poster
Based on the feedback I received from my family and friends, they found that the movie poster with a red background and yellow letterforms, as well as the one with a purple background and yellow letterforms, had the most impact.


Figure 15.8, 15.9 Shortlisted movie poster. (Week 04, 23.09.2023)

Final Movie Poster
After careful consideration, I chose the poster with the purple background and yellow letterforms as my final movie poster. This decision was influenced by the fact that the red and yellow color scheme is commonly used in design and may have less visual impact, whereas the purple and yellow color scheme offers a more intriguing and unique visual combination.


Figure 16.1 Final movie poster. (Week 04, 23.09.2023)


Figure 16.2 Final movie poster PDF. (Week 04, 23.09.2023)

Honor Global Design Awards
We are required to participate in this contest and create an artwork that aligns with the specified themes. We have the freedom to choose from three themes: Cultural Prosperity · Celebration: A Totem of Renewing Festive Culture, Renewal of life · Return: Contemplate human beings' relationship with all things, and Genesis · The Future: Imagine the Innovative World of the Future.


Figure 17.1 Honor contest. (Week 03, 13.09.2023)

I decided to continue with the theme 'Renewal of Life.'


Figure 17.2, 17.3, 17.4 Progress screenshot. (Week 05, 25.09.2023)

Final Honor Global Design Awards

Figure 18.1 Final overall visual design. (Week 07, 08.10.2023)

Figure 18.2 Final wallpaper. (Week 07, 08.10.2023)

Figure 18.3 Final foldable wallpaper. (Week 07, 08.10.2023)


Figure 18.4 Design elaborations (Week 05, 25.09.2023)

FEEDBACK
Week 02
General feedback: Always reduce the font size, such as using 8.5pt for numbers if the text is set at 9pt. Maintain a balanced layout, avoiding excessive weight on one side. Use bilateral alignment for single lines, and opt for multilateral alignment when dealing with two lines or more.
Specific feedback: Move the header down slightly (Bilateral). Rethink the text placement, it doesn't connect well with the left-side heading (Grid). The dilatational is okay. Explore more (Random). Place the date in the available space on the right and add lines towards the left (Radial).

Week 03
General feedback: Maintain consistency in every letterform. Need to maintain the characteristic of the object. Look at the overall shape of the object not just extract the outline to form a letterform.
Specific feedback:  The selected image object possesses a consistent shape that makes it challenging to showcase the creativity involved in extracting and refining letterforms.

Week 04
General feedback: Ensure that the movie poster size is set to 1024px x 1024px, which creates a square format.
Specific feedback: Would suggest experimenting with multiplying the red color in the background and using grey for the letterforms to enhance the impact of the poster. Additionally, seeking feedback from individuals who are unfamiliar with the poster design can provide valuable insights into which version of the movie poster has the most impact based on their initial impressions. 

REFLECTIONS
Experience
I felt rushed completing these exercises due to tight one-week deadlines across multiple modules, which left me exhausted. The 'Finding Type' task, while somewhat similar to a previous project, had its own challenges, especially in extracting and refining letterforms while preserving the object's characteristics. Facing setbacks in the extraction and refinement process added to the overall challenge and frustration of this exercise.

Observation
In Exercise Task 1, I observed that creating a creative design layout within the confines of established rules and a typographic system can be quite challenging. The limitations on the use of graphical elements added to the complexity of the task. In Exercise Task 2, I found that extracting letterforms from an image is a relatively straightforward process, but doing so correctly requires a deeper understanding and keen observation. Following the extraction stage, I noticed that simplifying and refining the letterforms accurately is a skill that benefits from practice and experience.

Findings
The satisfaction of creating artwork within predefined rules and limitations is a mixture of pain and happiness at the end of each task. To enhance my inspiration and generate fresh ideas for each assignment, I recognize the importance of exploring and observing the work of other artists. This helps me gain exposure to different content and approaches to creative projects.

FURTHER READING

I decided to continue study on the book, Computer Typography Basics - I.d.e.a.s. 

Figure 19.1 Computer Typography Basics - I.d.e.a.s. (2003).

Chapter 13 delves into formatting styles, which are categorized into two types: paragraph styles and character styles. Paragraph styles apply to entire paragraphs, while character styles exclusively affect selected text within those paragraphs.

Type specification in Adobe programs refers to the detailed adjustment of and styling of text within these software applications. One notable advantage of using Adobe programs is their consistent interface and the similarity of their overall palettes.

Figure 19.2 Chapter 13: Formatting styles.

Comments

Post a Comment