Advanced Typography - Task 2: Key Artwork and Collateral

on

22/05/2024-21/06/2024 (Week 5-Week 9)
Lizzie Tanaka (0362065)
Advanced Typography | BDCM | Taylor's University
Task 2: Key Artwork and Collateral

LECTURE


Perception: The way something is regarded, understood or interpreted
In typography, perception refers to visual navigation and interpretation of reader through contrast, form, organisation. 

Contrast according to Rudi Reigg: To create differentiation between information, distinction. 

Contrast according to Carl Dair; added texture and direction. 7 contrasts
- Size > provides a point to which the readers' attention is drawn to firstly. Big letters are read first. Title and heading are made noticeably bigger
- Weight > How bold the type can stand out in the middle of lighter type. Rules, spots, squares can also create heavy areas of powerful emphasis.
- Form > Distinction of capital and lowercase or roman and italic forms
- Structure > Different letterforms of different kinds of typefaces. E.g. monoline sans and a traditional serif
- Texture > Combining the first four into a composition creates an interesting texture. The way the lines look as a whole closeup and from a distance
- Color > Second color makes it less empathetic in values rather than a BnW composition. It's important to give thoughts to which elements need emphasis and to pay attention to the tonal values of the color used.
- Direction > Opposition between vertical and horizontal direction of text. Turning words on its side can create a dramatic layout. 

FORM
> overall look and feel of elements making up the composition.
Good typographic forms: intriguing, leads the the eye from point to point, entertain the minds and is memorable. Typography is used to represent a concept and to do so in a visual form. 
The interplay of meaning and form brings a balanced harmony of function and expression. When a typeface has been distorted, extruded, it's no longer seen as a letter but as an object. 


ORGANIZATION / GESTALT
> by Max Wertheimer. It refers to the way a certain item is placed or put together. Gestalt psychology attempts to understand the laws behind the ability to acquire and maintain meaningful perceptions. Wertheimer developed laws predicting how perceptual grouping occurs under different circumstance. A designer should always understand visual perception. 

It applied to every aspect in design because it emphasizes that whole is better than parts. We experience things as unified hole and we're not going to break them down in smallest elements. Components making up the design is only as good as its overall visual design. 

a. Law of Similarity: Elements similar to each other tends to be perceived as a group
b. Law of Proximity; Elements close to each other tends to be perceived as a group
c. Law of Closure: mind's tendency to finish off figures even when it's not
d. Law of Continuation: tendency to perceive each of 2 or more objects as different, singular and an uninterrupted object. 
e. Law of Symmetry: Simplicity. 
F. Law of Simplicity (Pragranz)

INSTRUCTIONS


Task 2 is divided into 2 parts. The first part is where we are tasked to create a key artwork from our name or nicknames where it has to be readable and clear (minimum 4 letters). We brainstormed from words that would best describe us. Our key artwork should be reflective of the description we came up with about ourselves. 

In the second part, we are to do an expansion on our key artwork, applying it to 3 chosen collaterals and combine a 9-grid Instagram post. A GIF animation of our key artwork is also required. 
Process Work

a. Key Artwork
I started by brainstorming a little on how I want to portray my key artwork, in a way that aligns with how I describe myself. 

I ended up with several words: easygoing, fun, chill, organized, bold.
With this, I came up with 2 concepts: 

1) Organized, bold, impactful
> I wanted to make an artwork that was compact in shape, bold letters, and tried to incorporate connecting letters. I sketched for this one and digitalized it. I attempted to create 'lizz' instead of my full name but I thought it looked empty on the end. 

Fig 1.1 Sketch #1



Fig 1.2 First draft digitization


After this digitization, I explored on more alternatives. Below is my messy attempt on exploring this artwork. I tried to separating the Z and E, and make the ends sharp, tried shortening the artwork, etc. 

Fig 1.3 Exploration

Eventually, I chose these three for the feedback. 

Fig 1.4 Final picks for feedback

I didn't really end up liking this concept as I had expected, so I tried another concept.


2) Easygoing, laidback, fun
> I plan to do a flowy typography on the double 'z' since I feel like it's the letter that represents my name a lot. By this point, I'm still contemplating if I should do 'lizz' or my full name. 

For my first attempt, I quickly made the letters in Illustrator, which I ended up with this one. It looked weird, especially on the counterforms. I didn't continue with the next Z because I hated the way I made the 'z.' But I thought that this could probably work with more effort and I was willing to try. 

Fig 1.5 Rough attempt

Eventually I just thought of doing my full name and I sketched it first for this attempt.


Fig 1.6 Sketch #2

After the sketching process, I digitalized it. Here's my first attempt (with a little improv). For the 'L' 'i' and 'z,' I mostly just improved it based on my first attempt. The sketch was a guide for the overall shape and the connecting 'z.' 

Fig 1.7 First digitization

I then continued to explore the possibilities and found two other alternatives (top and bottom). 
Fig 1.8 Explorations

At the end, I was left with these two alternatives that I liked. I asked friends and family which one reads more like a 'z' and if it clearly says my name to them. 

Fig 1.9 Main choices for feedback


On week 6, before class, I decided to refine more. I also refined a bit on the double 'z' since it looked more like an 's' to me. I also added a roughen effect on Adobe Illustrator because I thought that it would look more 'fun' compared to when it's smooth. I also rounded off the edges a bit to make it look more relaxed. For final adjustments, on the 'i' letter, I extended the height because I think it looked a bit empty on the top part.

Fig 1.10 Refinements on week 6


After finalizing my artwork, I worked on the color palette. I wanted the palette to feel 'fun' and 'friendly' so I aimed for vibrant, more intense and contrasting colors. I decided on the 4 main colors and 2 neutrals; a broken white/cream and a dark gray. In the final submission for feedback, I proposed several ideas including random ideas I managed to explore.  

Fig 1.11 Final submission for feedback (W6)


Week 6 Class Revisions
During class on week 6, Mr Vinod gave me more feedbacks. He told me that the key artwork is good to go but questioned my roughen decision. He thinks it's too minimal and if I wanted to purposely make it 'imperfect,' I should exaggerate it so that people won't think it's because I'm incompetent to create smoother lines. He also suggested to try another variation of a separated double z. The color palette was also approved so I continued to refine my key artwork. 

I also showed my first concept and Mr Vinod commented that both are good and I have to make my choice. 

Here's the cut off version of the double 'z' which I have mixed feelings for. I particularly didn't like how both 'z' felt incomplete on the bottom and on the top part. 

Fig 1.12 Cut off version of the double 'z' 
(Week 6)


I did more minor refinements and printed it out on an A4 paper in black and white ink. The logo was put inside a 175x175mm box and a 15x15mm box to see if it's readable even in tiny size. When I asked for feedback, Mr Vinod still seems unsure that it might not be too clear it's a 'z' for other people. He suggested to ask people if they can read this as my name and see it as a 'z.' I've asked my friends and family on their opinions but since they already know my name, it's clear that they'd spell it as my name. I asked more people and they said it spells my name. 

I accidentally showed the previous version of the artwork on the feedback (the one without the extended 'i' height) so on final adjustments, I extended the height and removed the roughen effect as well. 

Final Result:
Fig 1.13 Final Key Artwork on White (W6 29/05/2024)

Fig 1.14 Final Key Artwork on Black (W6 29/05/2024)

Fig 1.15 Final Color Palette (W6 29/05/2024)


Fig 1.16 Final Key Artwork on lightest color of palette
(W6 29/05/2024)


Fig 1.17 Final Key Artwork on darkest color of palette
(W6 29/05/2024)



b. Collateral
For the next part of task 2, we are to expand our key artwork and incorporate them into three collaterals. We'll be making it into a 9-grid Instagram posts. A photo of us taken in front of typography studio will also be used and have to include an interplay with our elements. 

I've decided these three for the collaterals:
1. T-shirt
2. Notebook
3. Totebag

After deciding the collateral items, I searched the internet for free to use mockups and started designing in Photoshop. I had my key artwork and the double 'z' saved as SVG to ensure good quality when enlarged. 

Week 6: First Attempt
Fig 2.1 First grid attempt (W6 03/05/2024)

On my first attempt, I was out of ideas on how to expand my key artwork aside from using the double 'z'. However, I do think that looking back, my actual key artwork loses its focus here and the double 'z' looks more like my actual artwork. 

For my image, it was taken in front of typography studio in campus. I used a blue square and change the layer mode to 'screen' in Illustrator. I utilized my double 'z' in different colors and lowered the opacity to 69%. 

For the designs, I added a tagline (?) that said 'roll with it.' This tagline is incorporated throughout the designs. The totebags is the first I couldn't decide on the color so I saved several color combinations I liked. Same goes for the notebook except each has a slightly different design. 

I ended up choosing the blue totebag and the third (most right) notebook design. I was out of ideas by the time I had to design my t-shirt so I created a rather simple design. I also thought about if I'd buy my own things, so I tried to go with what I thought was decent. All the collateral mockups are found and downloaded from Behance. 

Fig 2.2 Totebag attempts #1 (W6 03/05/2024)

 
Fig 2.3 Notebook attempts #1 (W6 03/05/2024)

Fig 2.4 T-Shirt attempts #1 (W6 03/05/2024)

Week 7: Feedback and Revisions
On week 7, Mr Vinod gave a few feedbacks on my design. He thought that my color scheme and the interplay of my image and element is already good. However, all in all, he felt like there needs more work done on my collateral designs since it doesn't contain the original key artwork of mine so they need to have more brand presence. He mentioned that the book collateral is not convincing enough, the shirt collateral has a lot of white space that can be utilized for the key artwork and that the totebag is fine but maybe the design can be developed into a pattern. 

From this feedback, I also felt like the entire grid doesn't have that 'fun' feel (?), it felt too simple and empty and lacks effort. I also thought about the brand presence and agreed that it didn't feel like my 'brand.' With this, I reworked my collaterals, based on the suggestions of making a pattern of the double 'z' on overlapping a rectangle. Thankfully, when I tried it, I liked the way it looked so I worked on refining my collaterals. 

Fig 2.5 Collaterals 2nd attempt (W7 05/06/2024)


I used a different mockup for the t-shirt because I feel like the previous ones didn't give me enough creative freedom since I wanted to develop the back side too. With the pattern I made based on the totebag design, I utilized and adjusted as needed throughout the designs. 

With the new mockups, I worked on the overall collateral grid again. 

Fig 2.6 Progress on collateral (W7 05/06/2024)

At this point, I'm focused on working on the top center square (with the sideways key artwork) and presenting the t-shirt mockup. I feel like the color distribution should also be equal throughout the grid so it looks cohesive. The collateral doesn't feel like one united brand to me. I do feel like the shirt collateral is a little out of place since the other 2 mockups are like 'real' pictures on an actual background but the shirt is placed on top of a plain color block. 

I decided to rework my shirt collateral and trying out different mockups. My issue is that with shirts that are worn by a model, I can only edit the front part. I also thought that the overall shirt image was quite dark. I wanted to use the fig 0.0 collateral again but I felt like it lacks the 'real' looking texture. 

Left shirt has a more washed, vintage feel and gives me the space to design for the back too. I went with the 2nd one, with the stone background since I felt like it would go better with the notebook and totebag collaterals. Although, this means I have to redesign the shirt. 

Fig 2.7 Shirt collaterals (W7 05/06/2024)


On my third attempt, I was determined to make a more equal spread and use of the colors. In the 2nd attempt, I felt like there was too much blue and I wanted to incorporate more of the other colors. The struggle was making it look equal and none being out of place. I changed the arrangements and used a new pattern. I also attempted to redesign an interesting post for the shirt collateral. All in all, I didn't like this so I moved on. 

Fig 2.8 3rd attempt on collateral (W7 05/06/2024)


On the 4th attempt, I mostly tried different color combinations on artworks. However, I still didn't really like the way the shirt mockup sits amongst the other posts. It seemed very 'colorless' since it's white compared to the other vibrant posts. 

Fig 2.9 4th attempt on collateral
(W8 08/06/2024)

I decided to do the shirt with the green instead of the white so it blends more with the other posts. 

Fig 2.10 Attempt on shirt collateral
(W8 08/06/2024)


Animation
For the animation, I wanted to utilize the patterns and the different colors. I decided to make the pattern and change its colors for a few frames. After that, the other objects are gone frame by frame and it leaves only 1 double 'z' element.

It zooms until the it covers all the artboard and then another double 'z' appears from the top and it falls and bounces a little before it settles to its place. The other letters then appear frame by frame. 

Fig 2.11 1st attempt: frames in Illustrator
(W9 19/06/2024)


However, I felt like the end would lack in the whole 'utilizing colors' part. So I decided that as the rest of the letters appear, they also keep changing colors. Since the green wouldn't be readable against the blue, I opted to use pink, yellow, and white instead. 

I made each frame in Adobe Illustrator on 1024x1024px artboard. In total, this had 38 frames. To minimize the space used, I used the pencil tool to cut off the part of the double 'z' that won't be visible on the zoom in frames. 

Fig 2.12 2nd attempt: frames in Illustrator 
(W9 19/06/2024)

After that, I exported every artboard to PNG and loaded it as stacks in Adobe Photoshop. I used the same method as the first animation we did in semester 1. I used the timeline feature and chose the 'frame animation' option. The file is saved as GIF. 


Fig 2.13 Photoshop process
(W9 19/06/2024)

Final Result:

Fig 2.14 T-Shirt Collateral (W8 08/06/2024)

Fig 2.15 Totebag Collateral (W8 08/06/2024)

Fig 2.16 Notebook Collateral (W8 08/06/2024)

Fig 2.17 Final IG Grid (W8 08/06/2024)

Fig 2.18 Key Artwork GIF (W9 19/06/2024)


Fig 2.19 IG Profile Screenshot (W9 19/06/2024)

Access the Instagram profile:

Task 2B: Collaterals Submission

FEEDBACKS

Week 5 - Public Holiday
(Did not attend feedback session)

Week 6
General:
- Key artwork should have individuality, difference from others
Specific
- Make the mistakes more exaggerated to avoid it looking like you cannot do it
- Try another variation where the z is separated
- Make letters smoother (no roughen)
- Both concepts are good

Week 7
General:
- Overuse of the artwork on the grid can make it look boring?
Specific:
- Color scheme is good
- More work needs to be done for the collateral
- Need to have more brand presence in the collaterals
- Interplay of image and element is good
- Book collateral is not convincing enough, shirt collateral has a lot of white space that can be used for the actual artwork, tote bag is fine but maybe a pattern can be made out of the initial design. 
- Collaterals lack key artwork, more on the expansion. 
REFLECTIONS:
Experience:
During this project, we were asked to develop a key artwork based on ourselves and expand it into collaterals. Surprisingly, I found this task quite enjoyable. I felt like we were given more creative freedom to design our artwork and come up with a 'brand.' It isn't an easy task since I find it tedious and that my artwork needs to have a balance of creativity and function. 

Observations:
I observed that the one thing most of our artworks lack is readability (based on the feedbacks). Creativity is one thing but our artwork has to be easily read and understood, it needs to communicate with the audience. I learned here that our design needs to be balanced. 

I've also observed that our expansion in our collaterals needs to be in the middle of enough brand presence and overuse of our artwork. I first started with lack of brand presence and I struggled in refining my collaterals so that my artwork doesn't end up looking 'cheap' and overused, which will bore the audience. 

Findings:
Through this task, I find that successfully expanding my artwork is not as easy as it seems. I tend to overlook how a brand is easily presented in their products without losing brand presence and overusing the artwork. 

FURTHER READING

Week 5
Fig 3.1 Typography Referenced


Jason Tselentis, Allan Haley, Richard Poulin, Tony Seddon, Gerry Leonidas, Ina Saltz, Kathryn Henderson, Tyler Alterman. Typography Referenced: A Comprehensive Visual Guide to the Language, History and Practice of Typography. (2012). 

For task 2, I read a few pages from the book, "Typography Referenced."

Week 5
Typographic Principles: Focal Points
- Dynamic compositions that are meant to attract attention usually has a focal point that doesn't let the reader scan the content from the usual top-left corner. The designer has more control with the direction of reading, telling how the viewers should be reading first. This usually is useful in poster designs, advertisements, packaging and signage designs. Contrasts in elements such as shape, color, size, and more, makes these focal points.

Week 6
Typographic Principles: Hierarchy
- Typographic hierarchy; Level of importance of a text in its environment. 
- Factors: Font size, weight, design characteristics, color, contrast with the background, position or orientation in the environment and general mass. 
These factors are all related to each other and to images, margin, line-spacing. 
- Viewers take clue as they scan the information, deciding what to read first. Designers have to keep note of the amount of attention their design might receive so it's crucial to have a clear typographic consistency. 

Week 7
Typographic Principles: Unity and Variety
- When different objects in a design look like they belong together, it is a design in unity. This togetherness should appear across every platform which tells the viewers that they are interacting with something whole. 
- Designers usually use the 'gestalt' term, meaning something perceived as a whole rather than separately. Repetition, for example, is one way to achieve this, through the usage of color, shape, size, placement, and more. 
- Typographic variety: Primary tools to create hierarchy by differentiating the type's size, color, texture, placement, width. Too repetitive isn't necessary too, just enough variation between texts can create different levels of information. 

Week 8 and Week 9 further reading in Task 3 blog. 

Comments

Post a Comment