Advanced Typography Task 2

Posted by JIE XUAN

Advanced Typography Task 2

22/5/2024-12/6/2024 Week 5-Week 8

Jie Xuan/ 0356515

Advanced Typography/ Bachelor of Creative Media/Taylor's University

TASK 2

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Task 2a-Key Artwork

4. Task 2b-Collateral

5. Feedbacks

6. Reflections

7. Further Reading

LECTURES

Week 4/ Designing Type

Why Design Another Typeface?

Xavier Dupré (2007) in the introduction of his typeface Malaga suggested two reasons for designing a typeface:

type design carries a social responsibility so one must continue to improve its legibility.

type design is a form of artistic expression.

Type Design Process

1. Research:

to understand the type history, type anatomy, type conventions, terminologies, side-bearing, metrics, hinting, etc.

to determine the type’s purpose

examine existing fonts that are presently being used for inspiration /ideas /reference /context /usage pattern /etc.

2. Sketching:

traditional tool set (brushes/pens, ink, and paper)

digital tool set- much quicker, persistent, and consistent - but sometimes impede the natural movement of hand strokes.

3. Digitization:

software: FontLab, Glyphs App and Adobe Illustrator only the specialized font apps

it is important to examine both the form and counter form of the letters to ensure the readability of the typeface

4. Testing:

process of refining and correcting aspects of the typeface

part of the testing process and leads to important feedback

the readability and legibility of the typeface becomes an important consideration.

however, it is not as crucial if the typeface is a display type, where expression of the form takes a little more precedence.

5. Deploy:

the task of revision doesn’t end upon deployment

the rigout of the testing is important so that the teething issues remain minor

Typeface Construction

Roman Capital - The grid consists of a square, and inside it a circle that just touches the lines 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 in the centre of the square. More here and here.

Thus, using grids (with circular forms) can facilitate the construction of a letterforms and is a possible method to build/create/design your letterform.

Fig 1.1 Construction Grid for Roman Capitals, 8 x 8 cells, Week 4 (19/05/2023)

Construction and Considerations

Depending on their form and construction, the 26 characters of the alphabet can be arranged into groups, whereby a distinction is made between a group for the capitals and a group for lowercase letters.

Fig 1.2 Classification According to Form & Construction, Week 4 (19/05/2023)

Week 5/ Perception and Organization

Perception is “the way in which something is regarded, understood, or interpreted”. Perception in typography deals with the visual navigation and interpretation of the reader via contrast, form and organization of the content.

1. Contrast

Carl Dair's Seven Typographical Contrast:

1. Contrast of size: Size contrast draws reader's attention. Often used to make title or heading noticeably bigger than body text.

Fig 1.3 Contrast of size, Week 5 (25/05/2023)

2. Contrast of weight: Weight is how bold type can stand out in the middle of lighter type of same style. Can be used to highlight pieces of text.

Fig 1.4 Contrast of weight, Week 5 (25/05/2023)

3. Contrast of form: Distinction between capital/lowercase equivalent or roman/italic or condensed/expanded versions.

Fig 1.5 Contrast of form, Week 5 (25/05/2023)

4. Contrast of structure: Different letterforms of different kinds of typefaces, e.g. monoline sans serif, traditional serif/ italic, blackletter.

Fig 1.6 Contrast of structure, Week 5 (25/05/2023)

5. Contrast of texture: Applying contrasts of size, weight, form , structure to a block of text on a page can create contrast of texture. Texture refers to the way the lines of type look as a whole up close and from a distance.

Fig 1.7 Contrast of texture, Week 5 (25/05/2023)

6. Contrast of direction: Opposition between vertical and horizontal and angles in between. Change in direction to a block of text, to a word changes impact.

Fig 1.8 Contrast of direction, Week 5 (25/05/2023)

7. Contrast of color: Be mindful of where you introduce color to, as too much can counterproductive to organization.

Fig 1.9 Contrast of color, Week 5 (25/05/2023)

2. Form

Form refers to the overall look and feel of the elements that make up the typographic composition. It is the part that plays a role in visual impact and first impressions. Displaying type as a form provides a sense of letterforms’ unique characteristics and abstract presentation.

Fig 1.10 Example of harmonious form with alignment, Week 5 (25/05/2023)

Interplay of meaning + form brings balanced harmony to function + expression. When a typeface is perceived as a form it no longer reads as a letter ( manipulated by distortion, texture, enlargement, extruded in space.

3. Organisation/ Gestalt

Gestalt is a German word meaning the way a thing has been “placed” or “put together”. Gestalt theory emphasizes that the whole of anything is greater than its parts.

Fig 1.11 Gestalt Principles, Week 5 (25/05/2023)

Gestalt Laws (Principles) by Max Wertheimer:

1. Law of Similarity: states that elements that are similar to each other tend to be perceived as a unified group (eg. grouping of colour, orientation, size, or indeed motion).

2. Law of Proximity: that states elements that are close together tend to be perceived as a unified group.

3. Law of Closure: refers to the mind’s tendency to see complete figures or forms even if a picture is incomplete, partially hidden by other objects, or if part of the information needed to make a complete picture in our minds is missing.

4. Law of Continuation: we see two or more objects as singular/ uninterrupted even when they intersect (reading rhythm).

INSTRUCTIONS

Task 2 Exercise ( 30% ) - Individual Assignment

Exercise :

Task 2 (A) Key Artwork 10%

Task 2 (B) Collateral 20%

Learning Goals :

To demonstrate an enhanced use of grids, layouts and page flow for effective typographic communication.
To develop ability to recognize and create a symbiotic relationship between image and type and to devise methods to enhance interplay between the two.
To interpret and adapt the designs in various media formats whilst trying to maintain the overall identity.

Timeframe :

Week 4 - Week 5 (Deadline on Week 6)
Week 6 - Week 7 (Deadline on Week 8)

TASK2A-KEY ARTWORK

For task 2A, we are required to create key artwork (wordmark/lettering) that reflects our identity using our name. The final key artwork must be an elegant solution, well balanced and composed, not complicated or confusing that leads to a functional and communicable key artwork. This key artwork will subsequently be used in Task 2(B) collateral.

Before starting any ideas, I created a mind map about myself. This Mind map is to explore about our identities and understand our own personalities. I have used Canva to create this mind map.

Mind map about me myself, Week 4 (19/5/24)

Inspirations:

Inspiration from Pinterest Week Week 5 (20/5/24)

Sketches:

I started sketching some ideas which present different personalities By using My name JXUAN.

Sketches, Week 5 (20/5/24)

After first version sketches, I think the readability is difficult so I decide to change from JXUAN to XUAN. And than, I sketch and digitalize the new idea.

Sketches, Week 6 (29/5/24)

After feedback session Mr. Vinod said he want me to use the "X" from the playful personality and continue explore more.

Idea1, Week 6 (29/5/24)

So I take out the X and refine it.

I come out a new version. I printed it out and let Mr. Vinod give me some feedback.

Printed out version, Week 6 (29/5/24)

After seeing my wordmark, Mr. Vinod said is wrong and let me redo it again. He said this need to expand more and this version is too boring. So I redo it and start from X letterform.

Here is the development process of my wordmark. I make the letterform design consistent and balance.

Development of key artwork, Week 6 (29/5/24)

Color Scheme:

Color scheme exploration, Week 6 (29/5/24)

Final Color Scheme:

Color scheme chosen, Week 7 (5/6/2024)

Dark blue will be the main color of my work mark while the light blue will be as my background color.

Key Artwork with color scheme chosen, Week 7 (5/6/2024)

Final Submission of Task 2A:

Final Outcome for Task 2A Key Artwork - B&W (JPEG), Week 8 (10/6/2024)

Final Outcome for Task 2A Key Artwork - B&W Inverted (JPEG), Week 8 (10/6/2024)

Color Scheme Chosen, Week 8 (10/6/2024)

Final Outcome for Task 2A Key Artwork with color scheme (JPEG), Week 8 (10/6/2024)

Final Outcome for Task 2A Key Artwork (PDF), Week 8 (10/6/2024)

TASK2B-COLLATERAL

For the second part of this task, we are required to:

Apply our key artwork on 3 collateral
Expand the key artwork with relevant designs
Create an animation that showcase our key artwork
Create an Instagram account layout that showcase the collaterals and key artwork

Collateral 1: T-shirt design

I download t-shirt mock up from this link: https://mockey.ai/mockups/apparel/t-shirt

T-shirt design I decided to use the U&N pattern element to draw a pattern out and I add my word mark on the center of the T-shirt.

The result of the T-shirt design:

Collateral 2: Tote bag design

I download tote bag mock up from this link: https://mockey.ai/mockups/accessories/tote-bag

I decided to use U&N to make a logo and I make it repetition.

The result of the tote bag design:

Collateral 3: Mug

I download mug mock up from this link: https://mockey.ai/mockups/home-and-living/mug. One of the mug design I reuse tote bag design because I feel that is suitable for mug too. So I have two design for mug.

The result of the mug design:

Process:

Firstly, I have imported the Photoshop file of my wordmark into Adobe After Effects which are in separated layers. After that, I start animate it.

I adjust the opacity of the every single word and make the effect looks like appear and disappear

Animation:

Final outcome for animation of key artwork (GIF), Week 8 (10/6/24)

Instagram Page: https://www.instagram.com/jie_x.u.a.n._?igsh=MXdocnRrbXhndWYycQ==

Instagram Layout (JPEG)

Final Submission of Task 2B:

Final Outcome for Task 2B Collateral - B&W (JPEG), Week 8 (10/6/24)

Final Outcome for Task 2B Collateral - Color Scheme (JPEG), Week 8 (10/6/24)

Final Outcome for Task 2B Collateral - Color (JPEG), Week 8 (10/6/24)

Final Outcome for Task 2B Collateral - Collateral 1 (JPEG), Week 8 (10/6/24)

Final Outcome for Task 2B Collateral - Collateral 2 (JPEG), Week 8 (10/6/24)

Final Outcome for Task 2B Collateral - Collateral 3 (JPEG), Week 8 (10/6/24)

Instagram Page: https://www.instagram.com/jie_x.u.a.n._?igsh=MXdocnRrbXhndWYycQ==

Final Outcome for Task 2B Collateral-Instagram Layout (JPEG), Week 9 (21/6/24)

Final Outcome for Task 2B Collateral (PDF), Week 9 (21/6/24)

FEEDBACK

Week 5

General feedback: After watching Mr. Vinod's recording, I understand that the keywords we use to create our wordmark should be positive. We should avoid negative concepts because people generally do not respond well to them. Therefore, we should focus on using keywords that highlight our strengths rather than our weaknesses. We want people to see the positive side, not the negative. Do more research on our design. Specific feedback: After watching Mr. Vinod's recording I think I need to do improvement on my words readability. The design cannot be to difficult to read our words

Week 6

General Feedback : It's important to make sure your text is easy to read because people often try to pronounce words when they first see them. Keep your message clear and straightforward. Create word logo unique that reflects ourself, rather than design the logo following trends. Because it is boring. Be aware choosing color for the wordmark suggest use bright color. Specific Feedback : After uploading my design, Mr. Vinod said he is ok with the idea 1 present "playful". He said the X letterform can elaborate more so I use the X design elaborate more design. Mr. Vinod said my design should be more symmetrical balance need to be consistence.

Week 7

General Feedback: Mr. Vinod advice us to do more research on the case study on Pentagram Site so that we could explore more ways of utilizing our elements which are color, pattern and word on our wordmark. Also, our profile should be captured with a white background.

Specific Feedback: T-shirt pattern normal, the picture need to have white background, change the font because too ridiculous.

REFLECTION

Experience:

Before this assignment, I never creating a wordmark for myself. This task gave me an opportunity to explore my own personality and let me create a personal wordmark.

In the process, I faced many challenges with this task, particularly in finding the right way to express my personality through typography. It took so much time to refine my key artwork. I continuously experimenting with new designs. This assignment significantly enhanced my imagination and creativity. However, I enjoyed exploring ways to animate my design and try different collaterals to showcase it. Ensuring a good Instagram layout also quite difficult I need to keep on change the color and design.

Observation:

During this project, I observed the importance of consistency and symmetrical balance in design. These elements make the key artwork stand out and leave a lasting impression.

I realized that I will easily overlook the small details. For example, the balance of my wordmark and the pattern consistency of my wordmark. I have do many improvement to let the wordmark overall smooth and balance. I also noticed that as I delved deeper into the design process, my designs became progressively more refined and cohesive.

Findings:

This task also helped me develop a better sense of design and visual composition. Initially, my lack of self-understanding posed a challenge, but as I progressed, I gained valuable insights into my own identity and a big improvement on my design skill. This experience has been instrumental in my growth as a designer.

Search This Blog

Jie Xuan 0356515