Advanced Typography/ Task 2: Key Artwork & Collateral

15/05/2024 - 21/06/2024 / Week 4 - Week 9

Lim En Yu / 0354452

Advanced Typography / Bachelor of Design (Hons) in Creative Media / Taylor’s University 

Task 2: Key Artwork & Collateral



TABLE OF CONTENTS











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 specialised 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 rigour 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 Organisation

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 organisation 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 noticably 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 colour: Be mindful of where you introduce colour to, as too much can counterproductive to organisation. 
Fig 1.9 Contrast of colour, 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

Fig 2.1 Module Information


Task 2A: Key Artwork

For task 2A, we are required to create key artwork (wordmark/lettering) that reflects our identity using our first name or pseudonym. 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.

Mindmapping
First, we are instructed to do a mindmap about ourselves to explore about our identities and understand our own personalities. I have used Canva to create this mindmap.
Fig 3.1 Mind map about myself, Week 4 (19/5/24)

Ideation and sketches
- I wanted to go with a cute and simple style that represent my positive thinking which involve the smiling face.
- To showcase my playful personality, I have also refered to the wordmark that has linking feature.
- Another completely different style that is bold and thick, I would like to showcase my firm personality.
- Pacman style also one of my choice as it represents my "like to eat" and "like to play game" personality.
Fig 3.2 Inspirations from Pinterest, Week 5 (20/5/24)

I have done 4 sketches in total which all represent different personalities.
Fig 3.3 Sketches, Week 5 (20/5/24)

After that, I have roughly illustrated out my ideas.

1. While I trying to explore on my name with different style of font, I found out that my "e" is actually look like a pacman. The eye (term refers to encolosed space in lowercase "e") of  "e" actually look like the eye of pacman and the open mouth shape also same as the shape of "e". The "n","y" and "u" is actually representing the ghost that gling to be eaten by the large "e".

2. In this idea, the design of "n" and "u" has been illustrated into a smiling face. Initially, the "n" supposed to be a sad face but because of my positive thinking! I think it can be changed to an inverted smiling face which really represent my positive thinking and happiness at all time.

3.  As I wanted to showcase my playful personality, I connected "e" and "y" which create a sense of motion, while "n" and "u" remain as normal typeface which emphasise on the playfulness of "e" and "y".

4. For the forth idea, I decided to make it bold and thick which looks strong that also representing my "firm" personality. However, I decided to use roun edge as although I am strong but at the same time I would not use my sharp edge to hurt others.
Fig 3.4 Initial outcomes based on sketches, Week 5 (22/5/24)

After receving Mr Vinod's feedback, first I have tried out the point that he has mentioned which is reduce the depth of the curve line of third idea. However, I think it still looked a bit weird and has nothing much to explore on. Thus, I proceed with the first and second ideas.
Fig 3.5 Adjustment on idea 3, Week 5 (24/5/24)

I have modified on the first idea, I have changed the shape of "nyu" which make it more similar to the image of ghosts in pacman. I have also tried to add the three circles in between the pacman and ghost which is the power pallets, bonus points in the pacman game. Also, I have balanced the size between the pacman and ghosts according to Mr Vinod.
Fig 3.6 Adjustment on idea 1, Week 5 (24/5/24)

The second idea is the idea that I confirmed to proceed as my final wordmark after showing Mr Vinod the all ideas I have during physical class.

Based on the first version, I have a lot of things that I haven't notice before receiving feedback from Mr Vinod. Thus, after the feedback session, I realised that my "e" is too small in general, and the "y" is too long, it might cause imbalance of the weight of the wordmark.
Fig 3.7 Improvement on the first version, Week 5 (25/5/24)

The "e" has been enlarged and the descender of  "y" has been shorten and the depth of the curve also has been reduced.
Fig 3.8 Changes on "e" and "y", Week 5 (25/5/24)

As what Mr Vinod has mentioned, we should be aware of the white space of our wordmark. White space is the negative space within the frame in a design composition. For example, if my "y" is too long compare to other letters, the area of the frame will increase and the white space will increase at the same time. What I need to do is that I need to confirm that in the frame, the amount of positive space should be more than the negative space.
Fig 3.9 White space in first version, Week 5 (25/5/24)

Fig 3.10 White space in second version, Week 5 (25/5/24)

As both "e" and "y" have a curve that close to the dots, which are the eyes, I am thinking why I not just connecting them together? This can create a balance dynamic also as when the "n" smiling face move up while "y" move down as the same time.
Fig 3.11 Connecting "n" with "e" and "y", Week 5 (25/5/24)
While adjusting on this idea, I also struggling with the choices on the mouth. I think both are good but after considering on the positive space and negative space, I decided to choose the open mouth version, it is more cute also! :D
Fig 3.12 Changes on desgin, Week 5 (25/5/24)

During the physical class, I have not chose between these two ideas yet, therefore, Mr Vinod asked me to print these out and look on the printed put version to decide. 

Mr Vinod has also given suggestions and feedbacks, where he suggests that the gap between the first idea should be reduced to half, the angle of descender of "y" can be increase until it match the angle above.

For the second idea, which is the idea I chosen afterwards, he has given advice that on the edge of  "e" and "y", it should not be so round, it should be more narrowed like a natural letterform.
Fig 3.13 Feedback from Mr Vinod on printed out version, Week 6 (29/5/24)

After I have confirmed to proceed with this idea, I proceeded with further adjustment and improvement on it. I noticed that the "e" looked a bit not smooth at the connected part. I have made refinement on that part so that it looked aligned with the overall design that give a round edge and smooth feeling.

Other than that, I have also changed on what Mr Vinod has mentioned which are the "e" and "y" part.
Fig 3.14 Refinement on details, Week 6 (29/5/24)

As menioned, I have narrowed down on the edge of the letters so that it followed the nature of typography.
Fig 3.15 Changes made on the edge, Week 6 (29/5/24)

Here is the development process of my wordmark:
Fig 3.16 Development of key artwork, Week 6 (29/5/24)

Here is the initial colour palette that I have chosen.Both of the colour are neon colour as I like sharp and bright colour ❤. However, Mr Vinod adviced us better not to choose monochrome colour palette. What we should choose should be colour that are contrast like complementary colour that can let the watermark stand out.
Fig 3.17 Colour palette chosen at first, Week 6 (29/5/24)

I have explored on many types of colour combination to try out which colour match each other. After consulting with Mr Vinod, he suggest I chose a dark colour as the main colour and a off-white colour as the background.
Fig 3.18 Colour palette explored, Week 6 (29/5/24)

Here is the colour palette that I have chosen which it include different tones of colours.
Fig 3.19 Colour palette chosen, Week 6 (29/5/24)

Dark blue will be the main colour of my workmark while the light yellow will be as my background colour.
Fig 3.20 Key Artwork with colour palette chosen, Week 6 (29/5/24)


Animation of key artwork

Firstly, I have imported the Photoshop file of my wordmark into Adobe After Effects which are in separated layers. After that, I animate each layer one by one.
Fig 3.21 Progression in After Effects #1, Week 8 (11/6/24)

As I wanted to let the wordmark appear gradually, I have to create a shape layer on top on it and make it appear by moving the shape layer frame by frame.
Fig 3.22 Progression in After Effects #2, Week 8 (11/6/24)

While for the ending of the animation, I created multiple layers of one row of smiling face that move quickly and the wordmark also disappear at the same time while the row of smiling face moving outside the frame.
Fig 3.23 Progression in After Effects #3, Week 8 (11/6/24)

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

Final Submission of Task 2A:



Fig 3.25 Final Outcome for Task 2A Key Artwork - B&W (JPEG), Week 6 (31/5/24)

Fig 3.26 Final Outcome for Task 2A Key Artwork - B&W Inverted (JPEG), Week 6 (31/5/24)

Fig 3.27 Colour Paletted Chosen, Week 6 (31/5/24)

Fig 3.28 Final Outcome for Task 2A Key Artwork - Coloured (JPEG), Week 6 (31/5/24)

Fig 3.29 Final Outcome for Task 2A Key Artwork - Coloured Invertede (JPEG), Week 6 (31/5/24)

Fig 3.30 Final outcome for animation of key artwork (GIF), Week 8 (11/6/24)
Fig 3.31 Final Outcome for Task 2A Key Artwork (PDF), Week 6 (31/5/24)



Task 2B: Key Artwork

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

For the collateral design, we have been provided a mock up website which is Mockey to create a mock up for our 3 collaterals.

First, I just wanted to try out how is the effect of my wordmark appear on the t-shirt and know about what changes I can make on the design. As what I thought, it looked too plain and simple.
Fig 3.32 First attempt on Collateral #1 T-shirt, Week 7 (4/6/24)

Therefore, I explored on the expansion of my key artwork. I took out both of the smiling face and put them together, then I duplicate one set of them and put it under the original one. I realised that there is a sequence in the design. Then, I duplicate more and more of them which create a pattern in the end. After that, I think if I adjust on the angle of rotation it might look more interesting.
Fig 3.33 Explorations on expansion of key artwork, Week 7 (4/6/24)

However, this is not enough, in order for my key artwork to stand out, I decided to put a bigger key artwork on the middle. Also, I leave an exmpty face around the key artwork to emphasize on the design.
Fig 3.34 Design on patterns, Week 7 (4/6/24)

This is the outcome after I have applied the design. However, during the feedback session Mr Vinod said that this looked too noisy. At the same time, people will know this is from your wordmark at the first sight, we should make some design that is not so direct from our key artwork.
Fig 3.35 Second attempt on Collateral #1 T-shirt, Week 7 (4/6/24)

After the feedback session, I keep exploring on more design expanded from my key artwork. I have tried out different form of arrangement and variation of the pattern. Also, I have also looked for inspirations on Pentagram to study how identities are expanded. I tried to brainstorm for ideas and created some design.
Fig 3.36 Attempts on Collateral #1 T-shirt, Week 7 (7/6/24)

Fig 3.37 Attempts on Collateral #1 T-shirt, Week 7 (7/6/24)

After exploration, I found this design interesting, which is the big open mouth with gradient, and the eyes looked like they blinking but actually there are another smiling face inside the eye also.
Fig 3.38 Attempting on new design of T-shirt, Week 7 (7/6/24)

It is a bit too long which cause a bit imbalance, therefore I have shortened it but added two curved shapes below it and with different transparency that create a fade out effect. This can also create a dynamic using the shapes and graphics.
Fig 3.39 Improvement on final design, Week 7 (7/6/24)

I have then applied this design using the mock up website and I think it's great! Just that I need to change the background colour of the image to match it with my instagram story layout.
Fig 3.40 Beefore adjusting the background colour, Week 7 (7/6/24)

I have imported it into Adobe Photoshop to change the colour of the background and also adjust the brightness of the photo.
Fig 3.41 Adjusting background colour in Adobe Photoshop, Week 7 (7/6/24)

Fig 3.42 Final outcome for Collateral #1 T-shirt, Week 7 (7/6/24)

Collateral 2: Tote bag design

For tote bag design, I intended to create a simple design only, I have first tried out with my wordmark and branding. I prefer the design of the second tote bag.
Fig 3.43 First attempt on Collateral #2 Tote bag, Week 7 (4/6/24)

If only have the wordmark on the middle of tote bag, I think it is a bit plain and boring, so I decided to add the repetitive pattern at the top part which is the handle. Mr Vinod said that this is a good choice as the repetitive pattern might looked noisy, but if it only occupied a small amount of space, it will looked nice.
Fig 3.44 Second attempt on Collateral #2 Tote bag, Week 7 (4/6/24)

I have also imported it into Adobe Photoshop to change the background colour to suit the colour theme.
Fig 3.45 Changing the background colour, Week 7 (4/6/24)

Fig 3.46 Final outcome for Collateral #2 Tote bag, Week 7 (4/6/24)

Collateral 3: Phone case design

This is the mock up design that I have chosen in Mockey. The reason thayt I chose this mock up is that it has 4 phone case that enable me to put 4 different designs.

Fig 3.47 Mock up for Collateral #3 Phone case, Week 7 (4/6/24)

Initially for the phone case design, I also applied the repetitive pattern of the smiling face but not too packed, and also my wordmark in the middle. The yellow colour pattern will be matched with the dark blue and teal colour background.
Fig 3.48 Attempts on the design of phone case, Week 7 (4/6/24)

Hers is the outcome on the first attempt of phone case collateral. I have also removed the side decorations to emphasize on the phone case design and change the background colour to match with the colour theme.
Fig 3.49 First attempt on Collateral #3 Phone case, Week 7 (4/6/24)

Mr Vinod has given me feedback that the design is too normal and obviously I just extracted the design out of the wordmark directly. Therefore, I work again on the design and I have create two set of designs but different colour theme.
Fig 3.50 Second attempt on Collateral #3 Phone case, Week 7 (9/6/24)

After I uploaded the design to the mock up, I imported it into Adobe Photoshop to change the background colour and also remove the decorations beside. 
Fig 3.51 Changing of background colour in Adobe Photoshop, Week 7 (9/6/24)


Fig 3.52 Final outcome for Collateral #3 Phone case, Week 7 (9/6/24)

Here is the workpace and progression inside Adobe Illustrator:
Fig 3.53 Workspace in Adobe Illlustrator, Week 7 (9/6/24)

Instagram Layout

For Instagram layout, we will need one black and white self portrait photo together with the wordmark in one post. At first, I have chosen this picture as I think it looks so cool!!! I like my make up and costume on that day! :D
Fig 3.54 Initial self portait chosen, Week 7 (4/6/24)

Then, I have imported my photo in Adobe Photoshop and mask out myself. I have placed my key artwork above and behind my portrait to create a depth.
Fig 3.55 Progression in Adobe Photoshop on self portrait, Week 7 (4/6/24)

Considering the problem that the background is a bit empty, I added dark blue colour of my wordmark evenly.
Fig 3.56 First attempt on self portrait, Week 7 (4/6/24)

Here is the first version of layout that I have designed initially with the collaterals that I have not changed yet as this is the layout that I have shown to Mr Vinod.
Fig 3.57 First version of Instagram layout, Week 7 (4/6/24)

After Mr Vinod said that my self portrait is not suitable as it is not with a white background and the hair was not cropped properly, I decided to change to another photo that has been captured with a white background. However, it is a bit too darkk so I have imported to Adobe Photoshop to edit the photo and the background to make it brighter.
Fig 3.58 Second photo chosen, Week 7 (9/6/24)

The similar concept in first version of self portrait, I put the wordmark around myself and some of them hide behind me while some of them are above me. 
Fig 3.59 Progression of second portrait with key artwork, Week 7 (9/6/24)

Fig 3.60 Final outcome for self portait (B&W), Week 7 (9/6/24)

Here is the post that I going to create which has the same element with my t-shirt and I have applied the colour in my colour palette so in result, it showcase the my colour and identity at the same time.
Fig 3.61 Progression on Instagram post, Week 8 (11/6/24)

Fig 3.62 Progression on Instagram post (colour palette), Week 8 (11/6/24)

Fig 3.63 Second version for instagram layout, Week 8 (11/6/24)

Instagram link: https://www.instagram.com/_e.n.y.u._  
Fig 3.64 Final outcome for Instagram layour, Week 9 (21/6/24)


Final Submission of Task 2B:

Fig 3.65 Final Outcome for Task 2A Key Artwork - B&W (JPEG), Week 6 (31/5/24)

Fig 3.66 Final Outcome for Task 2A Key Artwork - B&W Inverted (JPEG), Week 6 (31/5/24)

Fig 3.67 Colour Paletted Chosen, Week 6 (31/5/24)

Fig 3.68 Final Outcome for Task 2A Key Artwork - Coloured (JPEG), Week 6 (31/5/24)

Fig 3.69 Final Outcome for Task 2A Key Artwork - Coloured Invertede (JPEG), Week 6 (31/5/24)

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

Fig 3.71 Final outcome for Collateral #1 T-shirt (JPEG), Week 7 (7/6/24)

Fig 3.72 Final outcome for Collateral #2 Tote bag (JPEG), Week 7 (4/6/24)

Fig 3.73 Final outcome for Collateral #3 Phone case (JPEG), Week 7 (9/6/24)

Instagram link: https://www.instagram.com/_e.n.y.u._  
Fig 3.74 Final outcome for Instagram layout (JPEG), Week 9 (21/6/24)

Fig 3.75 Final outcome for Task 2B (PDF), Week 9 (21/6/24)


Feedback

Week 5

General Feedback:The amount of white space in between the frame of wordmark should be lesser in general. Every wordmark should represent a positive meaning as a customer won't  buy a product with negative energy.

Specific Feedback: 
  • First wordmark keyword should be changed.
  • Second wordmark white space is too much. 
  • Third wordmark need to control the depth of the curve, need to work on it more.
  • Fourth wordmark does not looked firm as it's all rounded edge, instead the "n" looked like it's trapped.
  • Specific Feedback:

Week 6

General Feedback: Make the wordmark is readable and not common which have the special element characteristic that can be included in our design later on. The colour palette should not be monochrome. Two colours are more impactful.

Specific Feedback: 
  • First choice- Pacman size can try to be equal to the ghost. The gap in between the letters should be reduced to half.
  • Second choice- Balanced dynamic. The edge of e and y can be narrowed a bit, not too round.
The colours can be more contrast. Include a primary colour and a off-white colour.


Week 7

General Feedback: Mr Vinod adviced 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 colour, pattern and word on our wordmark. Also, our profile should be captured with a white background.

Specific Feedback: The profile need to be taken in front of the white wall. Minor mistake on wordmark should be avoided. The patterns on the tshirt and phone case are too obvious which are same with the wordmark. The tote bag design is good as I put the noisy elements that occupied small area. The colour palette not necessary to add the wordmark on it.


Reflection

Experiences
To be honest, I never think about I will create a wordmark for myself and can be apply on collateral that represents myself. So before this assignment, I have not really explore on my identities or personalities, so this assignment really give me a chance on exploring myself and creating a wordmark for myself as well! During the process, I did experienced a lot of setbacks and failures while brainstorming the ideas, sometimes I really lack of ideas but I never give up on attempting new designs. This assignment really trained my imagination :D
Observations
In this task, I actually observed that I am not detailed enough on every single things. A lot of details that I ignored was actually very important which can affect the overall performance on the key artwork. For example, the curve on the connecting part of "e" make the whole key artwork looked smoother. Moreover, I also observed that while I keep exploring on the design, it will become more smooth during the process.

Findings
Through out this task, I found out that there are quite a lot of areas I need to improve on, but this task has also help me to develop on my sense of design and visual composition skills. I realised that I lack of understanding about myself, which it is quite hard for me while at th estarting point.

Further Reading

Typographic design: Form and communication 
by Carter, R., Day, B., Meggs, P. B., Maxa, S., & Sanders, M.
Fig 6.1 Typographic design: Form and communication, Week 7 (3/6/24)

While a letter usually serves as a component of a word, it is also commonly paired with other letters to form novel combinations.A typographic sign's interaction with the surrounding white space on the paper gives it a visually dynamic appearance. The entirety of typographic expressiveness is based on this form-tovoid connection.
Fig 6.2 Typographic syntax - the letter, Week 7 (3/6/24)

A word can, by definition, convey a concept, an item, or an event. Word signs can be designed to convey and expose their meaning even though they are independent of the objects they represent. The designer finds nuanced typographic rhythms and relationships by adhering to this idea and fusing form and counterform into word units. The word unit is made up of a constellation of distinct letterforms that together imply a union and create a logical whole. This union is overall clear because of optically corrected spaces and consistent counterform interactions.
Fig 6.3 Typographic syntax - the word, Week 7 (3/6/24)

Comments

Post a Comment