Advanced Typography Task 2 (A&B): Key Artwork and Collateral

May 22, 2022

Advanced Typography Task 2 (A&B): Key Artwork and Collateral

01/05/2022 - 22/05/2022 (Week 6 - Week 8)
Evaleez Voo Lian Yun / 0350275
Advanced Typography/ Bachelor of Design (Hons) in Creative Media
Task 2 (A&B): Key Artwork and Collateral

Lectures

Lecture 5: Perception and Organisation

Perception in Typography

Deals with the visual navigation and interpretation of the reader via contrast, form and organisation of the content.
Content can be textual, visual, graphical or in the form of colour.

Contrast

Rudi Ruegg's Theory:

Fig 1.0 Contrast by Rudi Ruegg (10/05/22)
Source: Lecture

Carl Dair's Theory:

To make design work and meaning pop out — clearly and unambiguously, and with flair. 7 kinds of contrast:

Size

Weight

Form

Structure

Texture

Colour

Direction

1. Size

Provides a point to which the reader’s attention is drawn.
You will see big letters first before smaller ones.
The most common use of size is in making a title or heading noticeably bigger than the body text.

Fig 1.1 Contrast in Size (10/05/22)
Source: Lecture

2. Weight

Weight describes how bold type can stand out in the middle of lighter type of the same style.
Using bold, using rules, spot, squares is also provide a “heavy area” for a powerful point of visual attraction or emphasis.

Fig 1.2 Contrast in Weight (10/05/22)
Source: Lecture

3. Form

The distinction between

A capital letter and its lowercase equivalent
A roman letter and its italic variant
Condensed and expanded versions of typeface

Fig 1.3 Contrast in Form (10/05/22)
Source: Lecture

4. Structure

The different letterforms of different kinds of typefaces.
Example:

A monoline sans serif and a traditional serif
An italic and a blackletter.

Fig 1.4 Contrast in Structure (10/05/22)
Source: Lecture

5. Texture

Refers to the way the lines of type look as a whole up close and from a distance.
Depends partly on the letterforms themselves and partly on how they’re arranged.

Fig 1.5 Contrast in Texture (10/05/22)
Source: Lecture

6. Direction

The opposition between vertical and horizontal, and the angles in between.
Example:

Turning one word on its side
Vertical or horizontal aspects of directio of tect boxes
Mixing wide blocks of long lines with tall columns of short line can also create a contrast.

Fig x.x Contrast in Direction (10/05/22)
Source: Lecture

7. Colour

A second color is often less emphatic in values than plain black on white.
Important to give thought to which element needs to be emphasized
Pay attention to the tonal values of the colors used.

Fig 1.6 Contrast in Colour (10/05/22)
Source: Lecture

Form

Displaying type as a form provides a sense of letterforms’ unique characteristics and abstract presentation.
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.

Fig 1.7 Forms (10/05/22)
Source: Lecture

Organisation

1. Gestalt

Emphasizes that the whole of anything is greater than its parts
Each component may be functional at an elemental level, the sum of its parts is not greater than the whole or the overall form.
Perceptual Organisation in Gestalt:

Law of Similarity
Law of Proximity
Law of Closure
Law of Continuation
Law of Symetry
Law of Simplicity (Praganz)

Fig 1.8 Gestalt Theory (10/05/22)
Source: Lecture

1. The Law of Similarity

States that elements that are similar to each other tend to be perceived as a unified group.
Feature examples:

Color
Orientation
Size
Motion

2. The Law of Proximity

States elements that are close together tend to be perceived as a unified group, whereas items further apart are less likely to be grouped together.

3. The Law of Closure

The mind’s tendency to see complete figures or forms even if a picture is incomplete.

Fig 1.9 The Law of Closure
Source: Lecture

4. Law of (Good) Continuation

Perceiving each of two or more objects as different, singular, and uninterrupted object even when they intersect.
The alignment of the objects or forms plays a major role for this principle to take effect.

Fig 2.0 The Law of (Good) Continuation
Source: Lecture

5. The Law of Symmetry (Law of Praganz)

States that elements that are symmetrical to each other tend to be perceived as a unified group.

Instructions

Task 2A: Key Artwork

Week 6

At the start of this task, I just followed my gut. I sat myself down comfrotably and let my creativity flow. Some initial sketches:

Fig 2.1 Sketch 1 (13/05/22)

This sketch was inspired by my Chinese heritage, plus I am also born in the year of the dragon. I decided to use its body to trace out my initials. However, I couldn't find a suitable way of adding the letter "v" in, so I ended up just using the letters "e" and "a" from the word "eva".

Fig 2.2 Sketch 2 - Week 6 (13/05/22)

For this sketch, I was playing around with the arrangements of the letters and noticed that the letter a looks a lot like a cherry. Hence, I made an ice cream cone!

Fig 2.3 Sketch 3 (13/05/22)

This sketch was basically visualizing an "idea". However, Mr Vinod advised to not proceed with this because light builbs are too common.

Week 7

Fig 2.4 Sketch 2 - Week 7 (16/05/22)

Before class started, I decided to digitize Sketch 2 because I liked it the most (mainly because it looks really adorable). While doing that, I attempted to shorten it and ended up creating a soda-ish looking symbol (perfect for a diner?)

Fig 2.5 Sketch 4 (16/05/22)

The sketch above was a fun attempt to see how asbtract I could go with the key artwork. The bottom line is the letter "V", while the top two points make up "A" (vertical) and "E" (horizontal). However, this was in fact too conceptual and I didn't proceed with it any further.

Week 8

Mr Vinod advised me in Week 7 to look into my culture as a Sabahan more and create a key artwork based on that. To be honest, I'm not even that sure of the design customs of my culture, as it was rarely talked about. The few things that were passed down to me was the language, the cooking techniques and the spiritual beliefs our ancestors had. Hence, this experience was pretty eye-opening.

Fig 2.6 Himpogot (19/05/22)
Source: MySabah.com

The picture above shows the Himpogot, aka the money belt. It is made up of 18 or more British silver coins chained together, and it is the most shiny accessory of traditional costume of Kadazandusun, the largest indigenous group of Sabah. Not gonna lie, what surprised me the most was why is there Chinese patterns on British Coins? After analysing the accessory, I decided to go for the symmetrical patterns on the coin. I traced them out with Procreate, similar to how we did Exercise 2 in Task 1.

Fig x.x Traditional Bead Shawl (19/05/22)
Source: one4all_shop

The bead shawl above uses tradition techniques from natives in Sabah (not sure which tribe but I'm assuming it's either Murut/ Rungus as they are quite known for these). As seen here, symmetry is well liked among the people. Just like before, I also traced out the parts that I liked (and could see potentail key artworks from).

Fig 2.7 Metal Belt (20/05/22)

Much like the Himpogot, this is also a type of belt. However, the Himpogot is usually way more expensive than this. Again, we see symmetry and a sort of mandela pettern in the design.

Fig 2.8 Copper Bracelets (20/05/22)
Source: one4all_shop

The bracelets above are meant for adults and is perceived to have health benefits when wearing them. These are made of polishable copper with a flowery design. Here, you can see the usage of curved lines in their designs (maybe inspired from nature?). This can be seen in the designs from the photos before this as well.

After tracing out the elements I found interesting, I moved them to Illustrator.

Fig 2.9 Digitization (20/05/22)

Letterforms:

Fig 3.0 Letterforms Used (20/05/22)

After some thought I ended up choosing this design to proceed:

Fig 3.1 Detailing (20/05/22)

As you can see, the letters are stacked together to create a nature-ish, mandela pattern as used in most Sabahan Native accesory designs. Although the overall shape looks nice, the small bumps on some inner parts were quite distracting.

Before:

Fig 3.2 Detailing (20/05/22)

After (Can see the difference bettween the bottom (edited) and the right (unedited):

Fig 3.3 Detailing (20/05/22)

Besides that, I also thickened the sides of the element because it looked a bit unbalanced as the top right and bottom left have extra strokes to create the letters "E" and "A".

Comparison:

Fig 3.4 Detailing (20/05/22)

I also asked opinions from my friends and they liked the thickened one more than the original.

Final Key Artwork

Fig 3.5 Final Key Artwork (20/05/22)

This artwork is inspired by the patterns used in Sabahan Native accesories, where most of their designs are based on visible things in nature, i.e flowers, leaves, etc. Besides that, it also takes inspiration from the mandela patterns present in their designs.

After some thought and suggestions from friends I decided to chose a "Batik" Showcase/ Unveiling (much like how there are trade fairs for textiles).

Final Event: Fall Batik Unveiling

Task 2B: Collateral

Week 8

Poster

For the poster, I wanted "Batik" to be the centre of attention. In order to create the Batik, I decided to embed my logo into a piece of cloth and use a displacement map to restructure it as if it was drawn on.

Fig 3.6 Creating Batik (21/05/22)

Besides the key artwork itself, I also used its counter space as a design:

Fig 3.7 Creating Batik (21/05/22)

Clothing output (I made it all black and white to suit the theme "unveiling"):

Fig 3.8 Batik Output 1 (21/05/22)

Fig 3.9 Batik Output 2 (21/05/22

Fig 4.0 Batik Output 3 (21/05/22

After creating the batik pieces and editing them bit by bit in Photoshop, I moved it Indesign to create the Poster (yes, I used InDesign because they have a margin tool that's very easy to use). The main typographic systems I used here is the modular/ axial/ grid. (Note: I was in between autumn textile unveiling vs fall batik unveiling, so the titles may differ in the drafts)

Fig 4.1 Poster Draft 1 (21/05/22)

Fig 4.2 Poster Draft 2 (21/05/22)

Fig 4.3 Poster Draft 3 (21/05/22)

Fig 4.4 Poster Draft 4 (21/05/22)

I wasn't sure which one to choose, so I decided to sleep it off. The next day, I created one last poster and chose that as my final work.

Outcome (Week 9):

Fig 4.5 Final Poster Design (22/05/22)

The curves of the cloth perfectly contrasts with the rigidness of the axia typographic system. Besides that, I usead yellow because it is a bright colour that contrasts well with the dark background.

Animation

For animations, I wanted to make it look like paint in a way, because batik has a technique known as cating that requires artists to hand draw the designs. I looked through YouTube and found a tutorial on how to create the effect. Besides that, I also added the batik I made at the end.

Fig 4.6 AE Oopsie (22/05/22)

I made a really really dumv mistake which was in the composition settings. I thought I set it to 15s but instead it was 15 minutes! My computer processor is also really slow, so it was hard for me to replay while editing and instead just chose to move the cursor as a way to check the animation (dumb dumb). The picture above is a screenshot of me moving everything together into 13 seconds.

Collateral

For the collateral, I decided to make an entrance ticket to the event. I downloaded a QR photo off Google (please don't scan it I'm not sure where it goes to/ if there's any viruses). Afterwards, I took the same batik I used in the poster to complete the ticket. This didn't take long as it's elements was mainly taken from the poster.

Fig 4.7 Ticket Design (22/05/22)

Week 9

Poster

After receiving feedback, I redid my poster and used the key artwork as the main component in the poster. I switched some ofthe information because "unveiling" doesn't really suit it anymore. I decided to move my project to indesign fo better layout arrangements

Fig 4.8 Week 9 Poster Process (27/05/22)

Here, I tried to create different posters by rearranging, zooming and roatating the key artwork. When the element layout was okay, I then proceeded with the text structure

Fig 4.9 Week 9 Poster Process (28/05/22)

Besides that, I also edited the outline of the key artwork from a solid line to "thic-thin-thick" preset in Indesign. This makes the key artwork look more like an actual batik because of how the wax is drawn onto the cloth. Besides that , I recalled Mr Vinod telling us to downsize numbers and captial letters by 0.5pt and applied it on my work.

Fig 5.0 Week 9 Poster Process (28/09/22)

As mentioned before I tested out a lot of ways to arrange the composition and ended up with more than 20 files? (Although some are just minor fixes).

Animation

For animation I didn't really change much because I quite liked the one I had before. If you've missed what I wrote, it basically looks like was/ colour droplets moving from each corner of the screen and thus, "painting" it. This represents how liquid hot wax is used in the batik creating process. The few changes that I made we transtions, and the text sequence at the end.

Fig 5.1 Week 9 Animation Process (29/05/22)

Collateral

For the collateral, it follows the same composition, with a QR code on the right side of the ticket for attendees to scan. I switched up the backgrounf of the left side following my poster and copied the text formatting as well

Fig 5.2 Week 9 Collateral Process (29/05/22)

Final Ouput

Key Artwork

Fig 5.3 Final Key Artwork, JPEG (29/05/22)

Poster

Black and White

Fig 5.4 Final Poster, Black and White, JPEG (29/05/22)

Coloured

Fig 5.5 Final Poster, Coloured, JPEG (29/05/22)

Collateral (Admission Ticket)

Black and White

Fig 5.6 Final Collateral, Black and White, JPEG (29/05/22)

Coloured

Fig 5.6 Final Collateral, Coloured, JPEG (29/05/22)

Animation

Fig 5.7 Final Animation, GIF (29/05/22)

*Note: There was an issue with exporting the GIF file with Adobe, so I used an external software. It created a sort of pixelized, but kinda cool, cloth texture onto the gif. I decided to keep it because it's Batik :).

Clear MP4 version here:

If above video doesn't work, here is a YouTube link: https://youtube.com/shorts/2zyRvn5Pqt8?feature=share

PDF Compilation

Feedback

Week 9

General Feedback

The poster is supposed to showcase your key artwork
Be careful with colours

Personal Feedback

The key artwrok is okay
Remember the poster is supposed to showcase your key artwork, the batik visual you have now has become the visual not the key artwork
Try cropping parts of the key artwork and place it on the poster.

Week 7

General Feedback

Do black and white first, then attempt to colour the artwork

Personal Feedback

Get into the Sabahan culture and study them.
Be more rigid with yourself, if its eva, keep it as eva

Week 6

General Feedback

White space need to be balanced with the content (Can create a square around to see whether there is balance)
Colour is a double edged sword

Reflection

In terms of skills, I learned more animation techniques and how to use the displacemet map in Photoshop. These skills will be useful in the future whether it be for school or work.

However, what opened my eyes the most about this project was how people from my culture create designs for their accseories. I noticed a lot of similar elements among the accesories even though some were most prominent among certain tribes instead of others (goes to show that all of us are rooted the same even though we branched out in different ways). This incentivizes me to use my culture in the final project and create something that my ancestors will hopefully, be proud of.

The only problem with this assignment is the lack of feedback we managed to receive. This was due to the Raya Holidays (which unfortantely I thought I would be free but alas I wasn't) and the independent learning week.