Advanced Typography - Task 2: Key Artwork and Collateral

27.4.2023 - 9.6.2023 (Week 4 - Week 10)
Tan Yi-Tyng (0353327)
Bachelor of Design (Hons) in Creative Media
Advanced Typography 
Task 2: Key Artwork and Collateral

---

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1oRziQMJ9Me92vM0QEDEa2DzA4oYcrQQu/preview" width="640" height="480" allow="autoplay"></iframe>

TASK 2A - KEY ARTWORK

For this task, we are required to create a key artwork by reflecting our self-identity using our initials, first names or pseudonyms. We need to explore and compose as many permutations and combinations of our name in the form of a wordmark/lettering. 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.

Key Artwork (Questions when evaluating your work) 

1. Does the key artwork symbolically/creatively represent the person?

2. Is the key artwork readable and legible?

3. Does the key artwork look well crafted (lines/shapes)? (well balanced/ professional looking)

4. Does the key artwork look like a logo—is it free-standing (w/background)?

5. Is there a good balance between negative and positive space?

6. Is there unnecessary use of non-objective elements?

Personal Mind Mapping & Brainstorming

During our class, Mr Vinod suggested we create mind mapping in order to help us better understand ourselves and develop a stronger concept for the key artwork. Based on that, I list out all my thoughts including my personality, weaknesses and strengths. This process was really helpful for me to understand myself and I started to get a lot of ideas for my key artwork.

Fig1.1 - Personal Mind Mapping 

Next, I started to consider what possible letters can be extracted from my name and nickname and make some exploration. 

i) TYT (short form of my name Tan Yi Tyng)

ii) Tyng 

iii) Tan 

iv) Olivia ( my eng name)

Then, I went online searching for some inspiration and observe how they design their key artwork.  When looking at how wordmarks are crafted, they mainly look minimalist and elegant to make them stand out and easily remembered by viewers. And some letterforms are often intertwined or connected in some manner with clean, sharp edges.

Fig. 1.2 -  Inspiration Board

Ideation & Key Artwork Progression

Fig. 1.2.2 - Working progress in AI

Fig. 1.3 - Fig. 1.3 – 8 Variation design of key artwork 

Moving to the next parts, I decided directly started to develop my ideas in Illustrator using some possible letter combinations. Based on my visual research above, I created 8 different variations of the design for my key artwork. I personally like the idea #6 and idea #7 as it looks unique, and I have written up description for both ideas to show how they relate to myself. 

Description for Idea #6 

Letters: OLIVIA

Develop a letter mark that incorporates lines and geometric shapes to convey a sense of structure and precision. The letters are designed in abstract way, forming complex line interconnected design that symbolizes the layers and complexities of my identity, showcasing my multidimensional nature and the depth of my character.

Fig. 1.4 - Idea #6

Description for Idea #7

Letters: O & T 

Keyword: lock, complicated 

The idea is inspired by the concept of lock as I consider myself as extreme introvert, I always lock and keep myself in my inner world, disconnected with the world for no reason. The design looks complicated and the lines crossed is reflected how I’m an overthinker, depicting that there are so many though stuck in my head.

Fig. 1.5 - Idea #7

Improvement (From Idea #6)

During the feedback session, Mr Vinod mentioned that the minimum number of the key artwork must be 3 letters, thus I decided to choose the idea #6 for my final key artwork. I have made some refinements to the key artwork including increasing the line weight and adjusting the space between each letter to maintain consistency.  

Fig. 1.6 - Final Key Artwork ( in black & white)

TASK 2B - KEY COLLATERAL

For this task, we are tasked to design collateral material such as t-shirt, lapel pin and animated key work, transforming the key artwork into a brand. The output must result from in-depth exploration and must communicate both visually and textually the desired message and mood set by the key artwork and its function.

Things to have:

1. Key Artwork done
2. Image of self captured creatively and in a manner that expresses the mood of your brand
3. Create a colour palette; use "Colour Hunt" identify your palette (a good palette has high, middle and low tones but also has contrast, is complimentary and consist of neutral shades too) 
4. Introduce a primary colour in your key artwork
5. Present your key artwork in colour against a background colour from your colour palette
6. Create your IG handle (think of creative solutions if the selected name is not available i.e. FIVE @F1V3)
7. Create your Gif animation
8. Expand your key artwork into a visual identity
9. Identify your collateral (choose items that suits the mood of your brand). Simulate realistically the use of your key artwork and identity onto the selected collateral
10. Research IG layout styles

1. Colour Selection 

During our week 7 class, Mr Vinod guide us step by step on how to choose the suitable colour palette for our key artwork. First, we are asked to use colour hunt as a helping tool to find a good combination of colour palettes. Next, we need to choose a primary colour for our key artwork and placed it on white background. Then, try out placing our key artwork on neutral shades background and low tones background. In term of experimenting our key artwork with different colour and background help us to assure that the color palette for our key artwork suits our brand and collateral material. 

The reason for choosing the red, blue, and yellow colors in my color palette is because I was inspired by the Bauhaus color palette. When looking at my key artwork, I noticed that it is formed from geometric shapes such as circles and triangles. This reminds me of the Bauhaus style, and using these colors will make the brand look energetic and attractive.

Fig. 2.1 - Progress of choosing color in AI 

Fig. 2.2 - Color Palette 

Fig. 2.3- Primary color of key artwork on white background

Fig. 2.4 - Primary color of key artwork on neutral shades background

Fig. 2.5 - Key artwork with neutral shades on primary color background

Fig. 2.6 - key artwork with self portrait

2. Animation 

As my key artwork is in line form, so for animating the key artwork, I’m planning to play with the line, making it from a dot jump into a flow of lines and subsequently showing the key artwork. To begin, I started with adjusting the line, separating and arranging all the layers accordingly in Illustrator. I then import it into after effect and start the animation process.

Fig. 3.1 - Arranging the layers in AI

Fig.3.2 - Import to AE and start animating the key artwork

Fig.3.3 -  Animation Progress – using trim path to create the effect

Fig. 3.4 - Edit the speed graph for each keyframes to make it look smooth

Fig. 3.5 - Final Animated Key Artwork (GIF)

3. Collateral and Mockups

With all the assets including key artwork and colour palette ready, I can then start to design the collateral. At this stage,  this took me most of the time to find suitable collateral material that can represent my brand self-identity, and need to be creative in expanding on my workmark design, so it would not look too much repetitive. 

For my branding, I want to show how myself as a passionate graphic designer and advocate for self-care, and I specialize in crafting stunning and purposeful designs that promote holistic well-being.

a) Business card 

The business card is a vital networking tool that includes all my contact information and branding elements. It helps me make professional connections, establish credibility, and leave a lasting impression. I created two different designs for both sides of the name card. 

Fig. 4.1 - Business Card front design

Fig. 4.2 - Business Card back design

Fig. 4.3 - Final Key Collateral #1 - Business Card

b) Book

The book represents my expertise and knowledge in the field of self-care. It may contain insights, tips, and guidance on various aspects of self-care, providing value to the audience.

Fig. 4.4 - Book Design 

Fig. 4.5 - Final Key Collateral #2 - Book

c) Vehicle truck

The vehicle truck acts as a mobile billboard for my personal brand. It helps increase brand visibility as it travels through different locations, potentially reaching a broader audience.

Fig. 4.6 - Vehicle truck design

Fig. 4.7 - Final Key Collateral #3 - Vehicle truck

d) Signage 

Signage boards placed strategically in physical spaces attract attention and increase brand visibility. They serve as a prominent visual representation of my brand, capturing the interest of passersby and potential customers.

Fig. 4.8 - Signage Board design

Fig. 4.9 - Final Key Collateral #4 - Signage Board

e) Skincare product

Skincare products are often associated with self-care rituals and personal well-being. By incorporating them into my branding, will tap into the emotional connection individuals have with skincare, promoting a sense of self-nurturing and enhancing their overall experience with my brand.

Fig. 4.10 - Skincare products design

Fig. 4.11 - Final Key Collateral #5 - Skincare products 

f) Washi tape

The washi tape can be used as a decorative element or a packaging accessory. It adds a touch of creativity and personalization to my brand, making it memorable and visually appealing.

Fig. 4.12 - Washi Tape design

Fig. 4.13 - Final Key Collateral #6 - Washi Tape 

g) Drink can
Drink cans are a popular and convenient beverage packaging choice. By incorporating them into my branding, will tap into the familiarity and functionality of this widely used item. It provides a practical and functional way for customers to enjoy a refreshing drink while engaging with my brand.

Fig. 4.14 - Drink Can design

Fig. 4.15 - Final Key Collateral #7 - Drink Can 

h) Paper bag

The paper bag can serve as packaging for products or merchandise related to my personal brand. It provides a convenient and eco-friendly way for customers to carry their purchases, reinforcing my brand identity.

Fig. 4.16 - Paper bag design

Fig. 4.17 - Final Key Collateral #8 - Paper Bag 

i) T-shirt 

The shirt can act as a wearable item that promotes my brand and self-care message. It allows my supporters to showcase their affiliation with my brand and spread the message to others. As for the design of the t-shirt, I decided to go with a simple and minimalist design, if adding graphical elements makes it look too complicated.

Fig. 4.18 - T-shirt label design

Fig. 4.19 - Final Key Collateral #9 - T-shirt

4. Instagram Account 

Next, I uploaded my key artwork and all of my collateral on Instagram and wrote the caption for all posts. As for the profile picture, I apply a 3d bubble effect to make it look stand out, I experiment with two different color backgrounds and ended choose the neural shade. 

Fig. 4.20 - Instagram Profile Picture

Fig. 4.21 - Written captions for each post

Final Task 2 : Key Artwork And Collateral

Fig. 5.1 - Final Key Artwork in black and white (JPG)

Fig. 5.2 - Final Key Artwork with Primary Colour (JPG)

Fig. 5.3 - Final Key Artwork with Neutral Shade Colour (JPG)

Fig. 5.4 - Colour Palette (JPG)

Fig. 5.5 - Final Animated Key Artwork (GIF)

Fig. 5.6 - Final self portrait with key artwork (JPG)

Fig. 5.7 - Final Key Artwork and Collateral: Book (JPG)

Fig. 5.8 - Final Key Artwork and Collateral: Business Card (JPG)

Fig. 5.9 - Final Key Artwork and Collateral: Vehicle Truck (JPG)

Fig. 5.10 - Final Key Artwork and Collateral: Skincare Products (JPG)

Fig. 5.11 - Final Key Artwork and Collateral: Signage (JPG)

Fig. 5.12 - Final Key Artwork and Collateral: Washi Tape (JPG)

Fig. 5.13 - Final Key Artwork and Collateral: T-shirt (JPG)

Fig. 5.14 - Final Key Artwork and Collateral: Paper Bag (JPG)

Fig. 5.15 - Final Key Artwork and Collateral: Bottle Can (JPG)

Fig. 5.16 - IG profile screenshot

Instagram Link: https://www.instagram.com/o.l_i_v_i_a/

Fig. 5.17 - Final Task 2: Key Artwork and Collateral (PDF)

---

FEEDBACK

Week 5: Task 2A (Key Artwork)

Peer’s feedback:

• They commented that the 1st design gives a sense of strong and powerful, which doesn’t match with what I want to convey that I’m an introvert. 
• They also think that the design doesn’t look complicated enough as I want to convey the message. 
• My classmates suggest that I can study the chain or rope texture and apply it on my work. 

Specific Feedback:

• The overall design looks good, I can see what you want to relate to yourself. 
• I would say that it is not necessary to use too many keywords, you can just focus on one main keyword and expand it. For example, if you want to communicate something about lock, it could also be seen as a devil or a secret of the dark side of yourself. 
• Number one and two are interesting, it has still a long way to go in terms of crafting, you still have ways to explore, maybe the forms more or whether you need to add rotundity to it. 
• You have the form of it, but you can still explore more in other ways. I suggest you can study Celtic symbols, rope patterns and fret. 
• Press CTRL + J to connect all points so you can fill in the colour. 

Week 6: Task 2A (Key Artwork)

General Feedback:

• Try not to work with monogram as you will just focus on a few words that need more work and are hard to execute. 
• Minimum 3 letters 
• For your work, you need to have a strong concept to represent yourself, a strong explanation, need to be unique and stand out from everyone else.
• With interesting shape, easy to remember, so it can easily be reproduced in many places. 

Week 7: Task 2A (Key Artwork)

General Feedback:

• You can animate the key artwork in After Effects, it doesn’t need to have meaning but the form being expressed needs to be in a creative way. 
• Expand your key artwork into a visual identity. Take note that, it is not just simply putting your key artwork on your collateral, you need to think and design creativity how to incorporate them. 

Specific Feedback:

• For the movie poster, so far no problem, looking good, but you need to just add some text and logos. 
• Nice key artwork, but what you can observe is that your key artwork design somehow is in complicated form so you need to be careful that the background cannot be complicated design and need to be in the simplest way to contrast with your work.  

Week 8

Independent Learning Week

Week 9: Task 2B (Key Collateral)

General Feedback:

• Your Instagram is now an actual brand that represents you, you need to have a bio on your Instagram with an overview of your work. Make sure you translate in your bio that reflected your brand identity as well including the choice of collateral.

Specific Feedback:

• Looking good, I like that you incorporate your key artwork with a vehicle.  

---

REFLECTION

Experience

At first, I was having difficulty coming up with ideas for creating the key artwork. It's difficult for me because I have to create my own brand and even from scratch, and I have no idea where to start with it. At some point, my brains stop functioning, and it becomes difficult for me to come up with a single idea. However, after I develop my personal mind mapping and study at some good references, a bunch of ideas start to flow in my mind, and I get motivated when finally got to finalise my key artwork. I had a great time, especially when it came to designing the collateral. As for myself, I am pleased with the outcome.

Observation

When it comes to digitalizing an idea that have in my head, I've discovered that my illustrator skills and understanding are lacking. Also, I've recently found myself difficult to keep up with some of the projects, and coming up with ideas typically requires many days of research. I believe I need to improve my time management skills while also exploring a number of new interests.

Findings

I found that to find good work must be accompanied by a lot of exploration as well. How balance, negative space, and other things can be very closely related to each other. I also realize that to get a good work there must be patience and persistence in doing it. In this task, never giving up is the key.

---

FUTHER READING 

Fig. 6.1 - Typography Essentials by Ina Saltz

Reference:

Saltz, I (2019). Typography Essentials Revised and Updated :

100 Design Principles for Working with Type. Edition: Revised

and updated. Beverly, MA: Rockport Publishers.

Chapter 1: Using Letter As Form

A shape that may serve as an illustration, as an icon, as a vessel, or as a graphic focal point, apart from its meaning as an alphabet­ic unit. Especially when used at very large sizes, the extreme proportions ofletterforms can have exceptional impact-this technique has been exploited very effectively by many suc­cessful designers. 

Letters can be expressive when used alone, as a simple silhouette, as an outline, or as a container for image, texture, or pattern. The beauty and power of the individual form may also be used partially: or a shape that is sliced and diced, cropped, or reversed horizontally or vertically. Because it is a letterform, it has a built-in relationship with any typeface that accompanies it. Its inherent integration unifies the design of the whole piece. 

Fig. 6.2 - Chapter 1

Fig.6.3 - Chapter 2

Chapter 11: Considering The Background Contrast

The difference between foreground and background totality is a key factor in legibility. The highest degree of contrast exists between black and white. Studies have shown that, while black type on a white back­ground is highly legible, the same quantity of white type on a black background is harder to read. In large quanti­ties, especially at text type sizes, there is a kind of "halo" or sparkle effect that impedes legibility and is actually uncomfortable to the eye. 

As type color and background color come closer together in hue, saturation, and density, legibility is reduced. At a certain point where there is not enough contrast (and this point is a moving target, because it depends on many other factors, including letter weight, set width, stroke width, slope, and point size), legibility may be significantly im­paired. The amount of text is a factor (a few lines might be less of a problem), the length of the lines or "measure" may be a factor, and the light conditions and paper surface may also be factors.

Fig. 6.4 - Chapter 11