Advanced Typography - Task 2

28/09/2022 - 25/10/2022 (Week 5-Week 9)

Yong Kai Yi (0352826)

Advanced Typography

Task 2 (A) & (B) / Key Artwork & Collateral

---

LECTURES

Week 5/ Perception & Organization

Lecture 5: Perception & Organization

28/09/2022

In typography, perception refers to the viewer's visual orientation and interpretation through contrast, form, and information organization. Textual, visual, graphical, or colored content are all acceptable forms of content.

fig 01: methods of creating contrast in typography

The reader's attention is directed to a point by a contrast in size. For instance, if there is a big letter and a small letter, the big letter will be seen before the small.

Weight is a term used to explain how bold text can stand out among lighter type in the same design. In addition to employing bold, rules, spots, and squares also offer a "heavy spot" for an effective focus of visual attraction or emphasis, therefore they are used in addition to different weight types.

The difference between a capital letter and its lowercase equivalent, or between a roman letter and its italic variation, is known as contrast of form. Condensed and extended variations of typeface are also covered under contrast of form.

Structure refers to the various letterforms found in various typefaces. For instance, an italic and a blackletter, or a monoline sans serif and a conventional serif.

The contrast of texture is achieved by combining the contrasts of size, weight, form, and structure and applying them to a block of text on a page. Texture describes how the typeface appears as a whole, both up close and at a distance.

The opposition between vertical and horizontal, as well as the angles in between, is known as a direction contrast. Adding high columns of short lines and large blocks of long lines together can also produce contrast.

Based to the use of color, a second color is frequently less exaggerated in values than just black on white. As a result, it's crucial to consider which component should be highlighted and to pay attention to the tonal values of the colors that are used.

 

fig 02: methods of creating contrast in typography

In terms of purpose and expression, the interaction between meaning and form creates a balanced harmony.

A typeface that is viewed as a form no longer reads as a letter since it has been altered by expansion into space, texture, displacement, and distortion.

---

INSTRUCTIONS

Task 2 (A): Key Artwork

28/09/2022 - 05/10/2022 ( week 5 - week 6)

1st attempt progressions:

fig 03: own signature inspiration (week 5/ 28/09/2022)

One of my signatures, and I used part of it to do one of my design attempts. 

fig 04: sketches (week 5/ 28/09/2022)

In the first sketch, I was thinking to use my initials which are J Y K Y, and Y is repeated, so I just keep one of them. I observed that three of these letters have long stems either on the right or left, so I decide to use one axis to introduce these letters. This concept is kind of inspired by the axial system when we did task 1. The second sketch is the one extracted from my own signature, I was thinking to create something organic and playful. 

fig 05: refined sketches (week 5/ 28/09/2022)

fig 06: digitizing (week 5/ 28/09/2022)

At first, I tried to use the pen tool then I changed to the shape tool, which I think works way easier and cleaner. 

fig 07: pathfinder (week 5/ 28/09/2022)

I was trying to explore whether this design can be modified, to make it look more like a "y" and "j" at the same time. Hence, I tried to use the pathfinder divide tool to cut out the top right part.

fig 08: tracing using the pen tool (week 5/ 28/09/2022)

For the signature, as it has more organic and curvy lines so I just use the pen tool throughout the process.

fig 09: using shape tool (rectangle) (week 5/ 28/09/2022)

For this design, I also use a shape tool and a direct selection tool to combine the letters together.

1st attempt outcome:

fig 10: outcome 1 (week 5/ 28/09/2022)

This is the 1st attempt outcome. In the top left 1st design, I was using the typeface Bauhaus and cropped it into two. For the following 2 designs, I use a shape tool and a direct selection tool, which I think the outcome is not as clean as the Bauhaus ones. For the second row design, I was using three different typefaces to attempt this design. The last row 1st one is the signature and the 2nd one is the one inspired by the axial system.

fig 11: outcome 2 (week 5/ 28/09/2022)

After the 1st outcome, I suddenly have some new ideas in mind while I'm exploring by keeping sketching in procreate. Then, I digitized them immediately in AI to see the outcome. The idea for this design is inspired by an "English name" basically it's a name not on my identity card but I usually introduce myself as Jamie. The pronunciation is like "jay" and "me", so I shortened it to "jmi". The two circles on the top of the letter "j" and "i" can represent my far-apart eyes. Why I chose a shortened version instead of the full Jamie, as I always have a mindset of keeping everything simple and clean, I often tell myself not to overthink to make my life easier and happier, hence I chose a shortened version. 

Then, I cut off the letter m using the i, which is like instead of following the path of the letter m, I wanted to cut off the road and go the other way, is like a contrarian kind of concept. I like doing things that others are not doing, and it is also one of my goals to be a complete contrarian. 

2nd attempt progressions (after feedback):

fig 12: more sketches exploration (week 6/ 05/10/2022)

After the feedback, I did more sketches to express the weirdness of the mark.

fig 13: some of the sketches chosen (week 6/ 05/10/2022)

I particularly like these two designs so I did a finer sketch for them.

 

fig 14: connecting two different sizes of "m" (week 6/ 05/10/2022)

Then I started to digitize them in AI, the total design I chose is 6 of them. 

fig 15: new design concept progression (week 6/ 05/10/2022)

 

For this weirdly curled letter m, I used the pen tool instead of direct distortion from the typeface. 

fig 16: final outcome of a few designs (week 6/ 05/10/2022)

I personally like numbers 1, 2, and 3, as there's some weirdness in there and it looks kind of decent. 

3rd attempt progression (adding weirdness for the circles): 

fig 17: progressions for the circles (week 6/ 05/10/2022)

Before this, I had a few failed attempts, as I was unable to adjust/ distort both sides of the shape, only can distort one of the outlines. Then after that, I finally found a solution. First, I create a circle without fill and create an outline for it so I can distort them manually for both the outer circle and inner ones. After I am satisfied with the distortion, I scale it around every 20 %. 

Final outcome:

fig 17a: final outcome (week 6/ 05/10/2022)

Task 2 (B): Collateral

05/10/2022 - 26/10/2022 ( week 6 - week 9) *week 8 is independent learning week

Collateral progressions:

fig 18: color theme exploration (week 6/ 05/10/2022)

The color theme I had in mind was a more compound color theme with complementary colors. For instance, blue + pink + black and white, purple + green, green + pink, blue + orange, and so on.

fig 19: color theme exploration (week 6/ 05/10/2022)

After choosing the color palettes, I started experimenting and applying the colors to the design.

fig 20: hand-drawn elements imported to AI (week 7/ 12/10/2022)

I decided to add more characteristics to my logo, and collateral theme. Hence, I imported some of my hand-drawn doodles which represent the theme I wanted to go for. The theme was inspired by Jack In the Box by j-hope, and I added some of my doodle styles to it. 

 

fig 21: experimenting with a clipping mask (week 7/ 12/10/2022)

I tried using a clipping mask from PS to see the effect if I apply the doodles in it, AI drawing inside a function is not that convenient for me hence I use PS instead in this case.

fig 22: experimenting with the sticker pack design (week 7/ 12/10/2022)

After the logo theme was set, I start my 1st collateral design, the sticker pack. I start with basic circles as the frame and brainstorm the design in it.

fig 23: the first idea of the sticker pack design (week 7/ 12/10/2022)

I placed the doodle, logo, and the "circle" of the letter "j" / "i" as the design of it. 

fig 24: progression of mock-up (sticker pack) (week 7/ 12/10/2022)

For the Jack In the Box design, I tried adding some colored shadow to make it more 3D, as I imported it as an image and it is in white, so I use PS to add color to it by adding a clipping mask for each color.

fig 25: progression of mock-up (sticker pack) (week 7/ 12/10/2022)

After finalizing the design, I placed the design on the mock-up template.

fig 26: progression of mock-up(sticker tape) (week 7/ 12/10/2022)

The next collateral is the sticker tape, this time I directly add the design in PS, so I no need to change software overtime, as the template is all PSD files.

fig 27: progression of mock up(planner/notebook) (week 7/ 12/10/2022)

For the planner mock-up, I chose black as the cover color, and add the colorful doodles on it so it has more contrast. 

Instagram post draft:

fig 28: trying out colors and design for IG post (week 8/ 19/10/2022)

For the Instagram post, we need to include 9 posts in total. Hence, I first decide the color theme and where to place it, and also the sequence of it. 

fig 29: trying out colors and design for IG post (week 8/ 19/10/2022)

After applying sequence, some posts without the collateral need to include some designs that represent my own characteristics/ brand. So I tried to experiment in PS by changing colors and adding doodles. 

fig 30: trying out colors and design for IG post (week 8/ 19/10/2022)

fig 31: 1st draft (week 8/ 19/10/2022)

The first draft I finalized is placing the 4 collaterals on top, left, bottom and right, then filling in the other posts with colors and doodles. 

fig 32: changes for the 5th post (week 8/ 19/10/2022)

For the fifth post, I changed to a checkered background as the original ones are in white which does not kind of match the vibe of the other posts, hence I changed it into black and white. 

 

fig 33: Instagram post outcome (week 8/ 19/10/2022)

Rationale:

My name is Jamie, and I was thinking if I chose to use all 5 letters will be too much, hence I chose only three letters from it which also have the same pronunciation as "jmi". As I am a person who doesn't like to follow the flow and also try to achieve that, I always wanted to show and find the real me. I added some weirdness to it as (maybe) I am a weird person (my parents and friends told me). For the "dots" I used distorted circles to replace them, it represents my far-apart eyes and it also somewhat looks like a clown's eyes / Jack's eyes (from Jack In The Box). The reason I chose Jack In The Box as one of my design elements, is it represents hope and freedom, which is always what I wanted to achieve. I think having hope is one of the motivations that drive me to move forward. 

Animation progressions:

fig 34: adding transitions (week 9/ 25/10/2022)

Adding glitching effects for the transitions to fit the whole concept. 

fig 35: adding effects (week 9/ 25/10/2022)

Adding bouncing and stretching effects for the letter "jmi" without the "dot" 

fig 36: adding null object (week 9/ 25/10/2022)

Trying out adding colors in the composition by adding a layer of a null object with color fill. Unfortunately, it does not work, hence I just change the "dots" color by adding 4 color gradient (picture shown below). 

fig 37: adding 4 color gradients (week 9/ 25/10/2022)

fig 38: adding elements (week 9/ 25/10/2022)

Adding some of the elements from the logo concept and from the collateral. 

fig 39: export gif and mp4 (week 9/ 25/10/2022)

Export the animation using Adobe Media Encoder to mp4 and animated gif. 

2nd attempt for IG posts progressions:

fig 40: masking the subject (week 9/ 25/10/2022)

After masking the subject, I changed the background color to match the theme and added the spiral pattern that represents the mark. 

2nd attempt IG posts outcome:

 

fig 41: 2nd attempt IG post outcome (week 9/ 25/10/2022)

As I think it might be too many posts hence, I tried another layout by deleting the 7th and 9th post.

fig 42: 2nd attempt IG post outcome 2 (week 9/ 25/10/2022)

This is the final outcome, I replaced the "jack" in the middle with the animation I made which is in black background, hence for my own photo application, I changed them to the black background as well to match the color. 

Key artwork colored version:

fig: final key artwork colored version (week 9/ 25/10/2022)

Collateral final outcome:

fig 42i: final laptop pouch (week 9/ 25/10/2022)

fig 42ii: final notebook set (week 9/ 25/10/2022)

fig 42iii: final sticker pack (week 9/ 25/10/2022)

fig 42iv: final sticker tape (week 9/ 25/10/2022)

Animation final outcome:

fig 43: animation final outcome in gif (week 9/ 25/10/2022)

fig 44: animation final outcome in mp4 (week 9/ 25/10/2022)

I added sound effects as well, but it only works in an MP4 file.

Final outcome (IG post):

fig 45: IG post layout screenshot (week 10/ 2/11/2022)

Instagram link

PDF:

---

FEEDBACKS

Week 10 (2/11/2022)

Specific feedback: It's better. But no need to distort your own face. The animation is ok. 

Week 9 (26/10/2022) 

Specific feedback: It obviously has a more visual impact but it's also a bit too much and heavy in terms of its graphics that overwhelm the depiction of the logo. The checkered board thingy starts to become too strong, have to be really careful while dealing with graphical elements and they are placed behind the objects that you are presenting. This kind of pattern will attract or suck the entire design as a result. If the pattern was based on what had been made (for the logo) will make sense. The checkered pattern has no relationship with the mark, but the presentation of these items is good. Shouldn't rely on the "doodle" elements on the mark too much. (For the design which includes me in it) It's very psychedelic and lots of noise happening in there. Need to have fewer distractions around the individual, based on what you have shown it's too distorted so people can't see you clearly, keep it simple two tones, triple tone, or monotone. 

Week 7 (12/10/2022)

General feedback: Try to identify keywords to apply in terms of personality or occupation.

Specific feedback: Numbers 6, 1, and 2 are interesting. The 1st one looks like a family kind of thing, weirdness doesn't really happen here, although it looks like a decent form. For the 2nd one, can make up the letter "m" a little bit, and it does look a bit weird so that really does work. The 6th one is a cool form but not particularly working, there's no weirdness in there, the contrarian part. I think what you can do is make one of the circles or both of the circles on the top there a bit weird. Need to be finalized by this class.

Week 6 (05/10/2022)

General feedback: Proximity needs to be less, number your work during feedback sessions.

Look at the counter space (negative space), needs to be almost equal to the positive space.

Need to be distinct from your rationale, it is important, need to RATIONALIZE it.

Specific feedback: (jmi) Like the thought of 'contrarian', so that thought is a good thought and that should influence your design. Having those two eyes like the way they are relates back to your far-apart eye, that's a good idea too. But creating the contrarian feel, I think you should explore more within the bounds of this. For example, you have a very well-crafted form however you need something that goes a little weird there that creates that contrarian effect. The 'J' is too long, may need to cut it off, as it makes too much negative space at the right. The form is fairly consistent, maybe introducing inconsistency within that form might create that contrarian kind of thing that you are hoping to communicate across with the letter M which is not really communicating that.  

The others are not distinct enough. monogram is not easy to do as might find something similar. 

---

REFLECTIONS

Experience

Throughout this whole semester, this task is the one I enjoyed the most, although at first, I was struggling to come out with an idea for the key artwork. I really enjoy experimenting and trying all the drafts and ideas, and although it fails sometimes I am able to learn from them. I was inspired by a lot of things, such as the band I like, my lecturer, my classmates, my family, and myself. During the digitized progressions, I struggles when I was creating the letter "m" as it was very curvy and it is also one of my weaknesses— creating curvy edges using the pen tool. Because during the previous semester in Typography class, I failed before using the pen tool, hence I learned to start from basic shapes and then distort them by adding anchor points, which will look neater and more consistent. 

Observation

Throughout this whole task, I got to know how difficult to create a logo/ mark to represent certain things, it is not easy to present the spark of the particular "subject" in a very simple way and expand it. Through this task, I observed and found out my design direction and style, I preferred an unorganized and chaotic style with bright colors. What I observed from this task is my art style changed (not sure when) from a more earth tone to a bright tone. 

Findings

Every design needs a rationale and reason for it to make it valuable and meaningful, this is what makes the design special. Every element and even the smallest thing in the design matters, so designers need to really take care of all the details and so on. Dealing with colors and graphical elements need to be very careful as they might cause distractions against the object that we are presenting. 

---

FURTHER READING

Articles from Kreatif Beats, a website recommended by our lecturer. 

Week 5 - 6 (28/09/2022 - 05/10/2022): <Form and Movement in Publishing Design - Mr. Vinod Nair>

Info: Publication design refers to the process of creating and designing layouts for things like newspapers, magazines, books, and the online equivalent to those. 

fig 46: thumbnail

Mr.Vinod shares his experience as a student and designer, his first assignment at Grandmother India Design Pvt. Ltd. was to design the Badan Warisan Annual Report 1999/2000, this was not within his area of focus in advertising. Despite that, he didn't give up, he began doing research and analyzing existing designs. As we can see, as a designer or design student, doing research is one of the most important steps during the progression, this is also been told in the class when I am studying in Taylor's since semester 1. 

fig 47: QuarkXPress screenshot from Google

I have gone through a bit of what is QuarkXPress in Google, it's a desktop publishing software ( I think somewhat similar to Adobe InDesign) for creating and editing complex page layouts. The software offers functions such as kerning, curving text along a line, and ligatures in addition to the fundamental functionality of font, alignment, spacing, and color. 

fig 48: Form & Movement exercise sketch. Unnamed student’s artwork from 2004-5.

This exercise was inspired by a self-promotional book by Chimera. I think this exercise is somewhat similar to the grid system we did in the typographic system task.

fig 49: Unnamed student’s artwork from 2004-6.

The grid structures started to develop and more complex, experimenting really is interesting to do, we can see different possibilities that we didn't even think of. 

fig 50: thumbnail spread of a book written, visualized, and designed by Martin Koch (2009).

Personally, this is one of my favorites design shown in the article, it attracts me with its random and chaotic design, although it is visually chaotic, it still readable and also looks harmonious in a way. 

After going through this article, I was inspired and fascinated with all their designs, to be honest, I'm not a person who loves to read and is into graphic design (in general), hence I have really limited knowledge regarding this area, the article itself already gave me lots of information puzzle by puzzle. For me, composition and layout design is something I should practice and explore more, as this had always been one of my weaknesses. 

Week 7 (12/10/2022): <A Cultural Twist on a Modern Campaign - Vinessa Lucia Chandra>

fig 51: thumbnail (illustration of R.A Kartini as the campaign’s mascot)

To be honest, I was attracted because of the thumbnail, the illustration poster looks so cute. 

A campaign can have a strong foundation if it has an engaging background, for example, the Mini Cooper ads from advertising’s golden days (mentioned by the author). The author was considering creating a campaign based on women's empowerment and including culture. Throughout the research, the author found out about Kartini's story. In Indonesia, Kartini was a major influence behind the development of a more inclusive society for women. She not only changed how Indonesian men and women thought, but she also developed into an outspoken critic of literature. The author began to integrate Kartini's story and values ​​into the campaign aimed at Indonesian girls aged 16-20.

The author gathers girls’ testimonies thru a non-public Instagram account. Stories began flooding in starting with individuals who faced sexual harassment by subjects approximately their personal lives and families. They have become the idea for each of the visuals that she produced at the side of their messages. I think the story, rationale, value, and purpose of this design and campaign are really meaningful, those elements are what makes the campaign shine. 

fig 52: Vinesa Lucia Chandra, 2019. The stationery line

During the progression, the author mixed some aspects of a traditional campaign with some modern tweaks. For instance, the letter paper kit was designed to be a collaboration with Pos Indonesia (picture shown above). These kits were meant to assist young ladies who might not have much, particularly, in rural areas of Indonesia. 

fig 53: Vinesa Lucia Chandra, 2019. The journal provided a platform for girls to be able to write their personal thoughts without embarrassment

The author also developed a book that served as a platform for all the stories received, and also be used as a journal where the females could keep their stories in a safe place. Through this campaign, the author found out that there isn't a need to sacrifice cultural heritage. Great ideas come from places closest to your heart even from a simple childhood memory.

Week 8 - 9 ( 19/10/2022- 26/10/2022): <A Deeper Look into Movie Posters - Kai Yi, Wong>

fig 54: thumbnail

In this fast-paced world where everyone's time is precious, grabbing attention in a short amount of time is important and challenging. Therefore, the first impression of a movie when looking at a movie poster is important to grab the viewer's attention. A poster serves as a tool to quickly communicate the key elements of a movie and is designed to be visually appealing even during short attention spans. The main elements of a movie poster are the setting, the emotions, the characters, the genre, and most of all, the story of the film. The movie characters are the most prominent on movie posters. You can tell the genre of the movie from their clothes, posture, facial expressions, etc. For haunted/ horror movies, the poster design usually looks dark, pale, and sometimes misty. Characters are isolated from their surroundings and most often emerge from dark or poorly lit backgrounds. Isolation also plays a key role in creating a sense of unease in the viewer, which adds to the tension of the film. The use of visual hierarchy helps to communicate with the viewers. 

I think there are a lot of things that need to be considered when producing/ designing a poster, not just for movie posters only. Elements included meant a lot, as even the smallest detail can attract a viewer's attention too.