Advanced Typography | Task 2 : Key Artwork & Collateral
22.05.2024 - 21.06.2024 Week 5 - Week 9
Tracy Angeline Tio / 0362222 / Bachelor of Design ( Honors ) in Creative Media
Advanced Typography / Taylor's University
TASK 2 : KEY ARTWORK (A) & COLLATERAL (B)
It is not a good things to work in a rush because I did not get a good feedback on my idea. Mr. Vinod suggest me to re-think the keyword used (keyword should be positive and impactful) and do more refinement process.
Choosen word from mindmap : Whatever, Star, motivation that said design had limitless possibilities.
The lectures then approved with the keyword and the meaning of it. However, The letter a and c is still not looking like an infinity (∞) symbol. He gave me some example to make it. I also had to remove star elements and separate the letters T and R.
I tried to rotate the infinite symbol to make sure if it is symmetrical or not. It is still looks imbalanced and I tried to copy the line on the left for the letter c.
I tried on a new refinement for the symbol and also explore serif fonts. The serif is not matched with my design so instead, I goes with the sans serif.
I asked my relatives their opinion about my refinement. Some said the sans serif on top is good while some said the bottom also better. As a result, I choose the first sans serif on top because it looks balanced.
I had exploring too much colors because I'm not satisfied on the previous top colors. After looking for people feedback, I do a little change by finding more vibrant color and this is the palette.
Now I finished two post out of nine, and I started to began the pattern. I got a bit confused to create out the pattern, so I searched some references.
Images Source :
I somewhat still not feel satisfied with the patterns because it has no purpose/ no sense to repeating again the patterns and just changed the color. I tried again for the expansion of my key artwork.
Since my name has 5 letters, it is difficult to make it balanced like 4 letters. Therefore, I chose the bottom one as my new expansion.
I chose the left one for the pose since the middle is too common and the third one is difficult to my finger... . Then I took the photo and edit it to Black n White using my phone.
I created two version which is with background or no background at the back. Then I tried to use my expansion to decorate the photo. As my left post was the purple pattern, I want to create the pattern integrated on the next page which is my profile.
From what I saw after I compare it, I think it is better if the portrait had the background on it. The first one on top left is not suitable because yellow and white is a bad combinations while the bottom left is no problem but It would looks boring if all my posts are just yellow and purple.
And at last, here is the finished portrait :
I specific it by choosing one of each type of collaterals items. Next, I moved to Photoshop to do recoloring the background so it would have contrast for each items. (Notes : use quick selection tools or select (menu) - choose subject to change the background color).
The background color looks dull and it has no strong shadow on it. I fixed again in my drawing apps by make it darker on the back.
I discovered that the collateral looks so boring since it had many repetitions in the patterns and key artwork. Therefore, I changed some of the collaterals of the yellow bottle and pants with my new collateral I just think about. For the background, I do some experiment if it is looks good in plain or nor.
By Adding the last step which is shadow, I finally finished the artwork animation. Using ezgif.com, I converted the MP4 Video to GIF.
I want to create the layout contrast, so I choose zigzag color on my layout ( yellow - purple - yellow ) and my profile on the center ( 5th Post ) to describe that we are the creator of the brands.
I made third outcome of the layout ideas and it is hard to explore more since the self portrait and patterns should connected together. I choose the left one as my layout because it is better if the collateral on the left side rather than on top or on the bottom.
Advanced Typography / Taylor's University
TASK 2 : KEY ARTWORK (A) & COLLATERAL (B)
TABLE OF CONTENTS
LECTURES
- Lectures Playlist : Click Here.
- All Lectures are completed on Task 1 : Exercises Blog
INSTRUCTIONS
MIB BOOKLET :
TASK 2(A)
Key Artwork
On this exercises, we were required to explore ourselves to made the key artwork. The artworks should represent the keyword we choose.
Requirements :
- Canvas size 1024 px x 1024 px
- Choose your first name, nick name, or pseudonym to made the artwork
- Explore your personal identity to gain a keyword representative of yours
- Limit the graphical elements and make sure it is readable and communicative
- The Artwork will be used for Task 2(B) Key Collateral
To made me easier when exploring myself, First I started to create a mind map about me.
 |
| Fig 3.1 About Me Mindmap Week 05 21/05/2024 |
I tend to create the artwork based on my first name which "Tracy". Then I looked pinterest for some references.
Digitalization :
 |
| Fig 3.2 Visual References Week 05 21/05/2024 |
Because I was in a rush when doing the digitized part, I choose the random idea in my mindmap and finish digitized it quickly.
 |
| Fig 3.3 Idea Sketches "Tracy" Week 05 21/05/2024 |
I choose the second sketches because it had potential but it is far from good. As I do the refinement, I had an idea to made the letter R and Y to an infinite symbol. The infinite somehow related to some of my keyword in mindmap.
 |
| Fig 3.4 Further Refinement #1 Week 06 29/05/2024 |
The relatives of these word and infinite?
- Whatever : in a good way stands for open-ended, freedom where any choice is fine or possible. Similar to infinite person could means unlimited capabilities or expression.
- Star : Star is an infinite things that could not be counted in universe how much is it.
- "Design had Limitless Possibilities" : Infinite words means limitless possibilities, where we are free to explore, experiment, create any idea to think out of the box and solving problem.
From the artwork, What I want to share is to look beyond and embrace their infinite possibilities of our own potential.
 |
| Fig 3.5 Further Example Refinement Week 07 03/06/2024 |
 |
| Fig 3.6 Refinement on the symbol (Before : Top, After : Bottom) Week 07 03/06/2024 |
 |
| Fig 3.7 Exploring Symbol and Serif, Sans Serif font Week 07 03/06/2024 |
Applying Color :
I used color hunt and some Pinterest photo to find a color palette. As I said before that my favorites color are purple, pink and blue, So on this project, I would like to use one of the color I pick.
 |
| Fig 3.8 Exploring Color Week 07 03/06/2024 |
 |
| Fig 3.9 Chosen Color Palette Week 07 03/06/2024 |
 |
| Fig 3.10 Progress Week 07 03/06/2024 |
FINAL OUTCOME T2(A) "TRACY"
Keyword : Infinity
- look beyond and embrace the infinite possibilities of our potential -
 |
| Fig 3.11 Final Wordmark on White Background (JPG) Week 07 03/06/2024 |
 |
| Fig 3.12 Final Wordmark on Black Background (JPG) Week 07 03/06/2024 |
 |
| Fig 3.13 Color Palette (JPG) Week 07 03/06/2024 |
 |
| Fig 3.14 Final Wordmark on Actual Color Lightest Shade (JPG) Week 07 03/06/2024 |
 |
| Fig 3.15 Final Wordmark on Lightest and Darkest shade of Color (JPG) Week 07 03/06/2024 FINAL PDF RECAP |
Fig 3.16 Final Task 2A Recap (PDF) Week 07 03/06/2024
TASK 2(B)
Key Collateral
On this exercises, we continued from the Task 2(A) where we are gonna used the key artwork as a collateral products (T-shirt, Pin, Animated Key, etc).
Requirement :
- Artwork size : 1024px x 1024px
- Take a photo of ourselves in black n white
- Choose 3 items for collateral and expand the key artwork
- Create some simple animation GIF/ MP4 for the key artwork
- Create 9 Post for Instagram, think about the layout
I create a plan first to know what post I would like to create.
Plan : (TOTAL 9 POST)
- 3 Collateral Items
- 1 Self Portrait Photos
- 2 Wordmark in Different Color
- 2 Patterns (Connected or nor) in Different Color
- 1 Animation/GIF
1. Creating Patterns
At first, I tried to choose two main colors to making the key artwork. My choices are purple and yellow for these task.
 |
| Fig 4.1 Wordmark in Different Color Week 08 12/06/2024 |
 |
| Fig 4.2 Pattern References Week 08 12/06/2024 |
- Pattern 1 : HERE
- Pattern 2 : HERE
- Pattern 3 : HERE
I tried to made the infinite words for a and c as my key patterns and use these patterns for combination of the mock-up and portrait.
Out of six patterns, I do like the first and second one. After that, I chose the second top as my final based on my relatives feedback also. I do some improvement to make the pattern better. To make the patterns connected, I used different color and tried to filled up the rest of my second pattern. Lastly, I added some stripped line between the logo to filled up empty part.
 |
| Fig 4.3 Pattern Progress Week 08 12/06/2024 |
I'm having a little difficult when doing the pattern because symmetric and balance are one of my weakness (That's why I'm using grid) After I keep progressing, I come up around six patterns idea.
 |
| Fig 4.4 Patterns Attempt Week 08 12/06/2024 |
 |
| Fig 4.5 Making the Second Patterns Week 09 20/06/2024 |
 |
| Fig 4.6 Second Attempt Patterns Week 09 20/06/2024 |
 |
| Fig 4.7 Expansion of the Artwork Week 09 20/06/2024 |
 |
| Fig 4.8 Final Patterns Week 09 20/06/2024 |
As I was satisfied and finished with the results, I moved on to edited the portrait photos.
2. Self Portrait Photos
On this task, I need to took one picture of myself and decorate it with my expansion or the keyword. I do think about how the pictures should look like, it is just simple portrait or creating some pose that visualize my key artwork.
As my goal is to made it interesting, I decided to tried out the infinite pose by using my hand. Below are some ideas I looked for the pose.
 |
| Fig 4.7 Pose Idea Week 09 20/06/2024 |
 |
| Fig 4.8 Original Photo (Left) and Edited to BNW (Right) Week 09 20/06/2024 |
 |
| Fig 4.9 Expansion Attempts Week 09 20/06/2024 |
I choose the bottom right portrait as a result and I would like to adding some of my logo as a decoration in the fingers. Moreover, I added a bit yellow in my portrait as a combination of previous attempts with yellow patterns.
 |
| Fig 4.10 Adding Decoration Week 09 20/06/2024 |
 |
| Fig 4.11 Final Portrait Week 09 20/06/2024 |
3. Collaterals (3 Items)
The next things which is the main task are to choosing 3 items and applied our key artwork (Mock-up) on it. I looked again at my key artwork and I think my artwork is suitable for sporty brand like the motto : "embrace the infinite possibilities.." similar means with "just do it" Nike motto.
As a result, I fixed up my decision and moving to searched on sport items. There were many items used when exercises like jersey, pants, shoes, bag, bottle, smartwatch, sling bag, etc. Mr. Vinod suggested us to choose the daily items used so I pick Shoes, Set Outfit of T-shirt and pants for exercises, and Water Bottle as my collaterals.
I searched the photograph of the items in Google, Behance, Freepik and below are my favorite pictures.
 |
| Fig 4.12 Shortlisted Items Week 09 20/06/2024 |
 |
| Fig 4.13 Recoloring Background in Photoshop Week 09 20/06/2024 |
 |
| Fig 4.14 Background Color Results Week 09 20/06/2024 |
 |
| Fig 4.15 Before and After (Background color) Week 09 20/06/2024 |
After the images is done, I applied the key artwork by using Mock-up tools in Illustrator and Distorted it in Effects - Distort & Transform - Free Distort.
 |
| Fig 4.16 Mock-up Progress Week 09 20/06/2024 |
 |
| Fig 4.17 Collateral Attempt Week 09 20/06/2024 |
 |
| Fig 4.18 Experience Collateral Background (Decorative) 09 20/06/2024 |
 |
| Fig 4.19 Experience Collateral Background (Plain) Week 09 20/06/2024 |
From what I saw after compare it, I think it is better with the plain background so the items could stand out more. I choose it as my final outcome.
 |
| Fig 4.20 Final Collateral Week 09 20/06/2024 |
4. Animation
Now comes to the hardest part TT which is animation. Even Mr. Vinod just said to made whatever GIF it is, I want the result could be better and interesting, since I would like to include it in my Instagram post.
I had an idea to made the infinite logo comes as a line from bottom left until the line is connected together in the end. After that, the rest of the letters ( T, R and Y ) coming up from bottom to the original position. I followed this tutorials to help me do the animation :
Vid 4.21 Trendy logo Animation in After Effects Tutorial Week 09 23/06/2024
The first thing I do is to separate every layer in Illustrator so I could animate every elements in different effects. Then I moved to AE and applied what the tutorials said.
 |
| Fig 4.22 Separating Layers Week 09 23/06/2024 |
I would think it is easy to create since the tutorial is so good and to the point but it is actually not for me (: . I do had a struggle and had to replay the video and repeat my progress until it works. The difficult things happen in the animation was the infinity logo and the rest are just fine.
 |
| Fig 4.23 Animation Progress Week 09 23/06/2024 |
 |
| Fig 4.24 GIF Attempt 1 Week 09 23/06/2024 |
When I looked again, I realized the animation is too fast. Therefore I fixed the time speed on the GIF and it is look Okay to me.
 |
| Fig 4.25 GIF Attempt 2 (Chosen) Week 09 23/06/2024 |
5. Instagram Layout
When all the post are finished, I combined all the photos and adjust the layout of every post. Before I applied it on digital, I sketches some ideas of the layout.
 |
| Fig 4.26 Instagram Layout Ideas Week 09 23/06/2024 |
 |
| Fig 4.27 Instagram Layout Attempts Week 09 23/06/2024 |
 |
| Fig 4.28 Instagram - Final Layout Week 09 23/06/2024 |
FINAL OUTCOME T2(B)
 |
| Fig 4.29 Final Collateral 1 - Sport Water Bottle Week 09 23/06/2024 |
 |
| Fig 4.30 Final Collateral 2 - Shoes Week 09 23/06/2024 |
 |
| Fig 4.31 Final Collateral 3 - Sport Set Outfit (Shirt and Pants) Week 09 23/06/2024 |
|
| Fig 4.32 Final Animation (GIF) Week 09 23/06/2024 |
 |
| Fig 4.33 Instagram Layout Design Week 09 23/06/2024 |
 |
| Fig 4.34 Instagram - Final Layout Week 09 23/06/2024 |
FINAL PDF RECAP TASK 2A & 2B
Fig 4.35 Final Recap Task 2A & 2B (PDF) Week 09 24/06/2024
FEEDBACK
Week 5
General Feedback : Do not use the bad keyword when representing the key artwork. Remember that the bad things should not be exposed to the client, they do not want to hear like that.
Specific Feedback : Ordinary and Dizzy is not a good keyword. Think again for your keyword and do more refinement on your chosen letter.
Week 6
General Feedback : The Artwork should represent the keyword we choose. Sometimes, we had to present our key artwork to people that saw it. Tried to choose vibrant color, not pastel color.
Specific Feedback : Remove all the graphical elements and made the letter a and c become an infinite (∞) symbol. The letters should be simplified to highlight the symbol on it.
Week 7
General Feedback : The collateral should only have three items and it must connected together. Be careful when creating the patterns and tried to avoid repetitions of the key artwork.
Specific Feedback : We should know the reason we chose the collateral and tried to make the Instagram layout more interesting.
Week 8
Independent Learning Week
General Feedback : Start to preparing your Task 3 Topics to avoid loosing a week. Made the typeface be unique from the references we chose so it had a special meaning on it.
REFLECTIONS
Experience
Working on this task was a good and fun experience yet difficult too that took a lot of time to finished it. We had to used our name/ pseudonym as the brand name and expressing our personality to presenting our brand. During Task 2A, I do a massive change for the artwork because I'm not good while executing the idea I had while in Task 2B, I struggled to find a good image for the Mock-up. At last, I'm finally able to finish the task and deal with the problems happened.
Observation
I observed that a design without meaning and progress is just useless. On this task, our artwork should represent something and learning something. Same things with the collateral where we had to choose the related object and why we choose it. Moreover, when making the blog, we also had to demonstrated all the progress to show how we are gonna make it. Every Mr. Vinod feedbacks has led me to learn and observed this case.
Findings
I found that "trend" is not good for design. Following trendy design made our brand looks meaningless. We should avoid that and tried to use different elements and color palette. More than that, I plan to establish my time management since I learned that I'm a slow worker and I need to schedule out the deadline and what I'm plan to do to finished the task.
FURTHER READING
 |
| Fig 7.1 Brand Typography : How to Find the Right Fonts for Your Brand (2023) Week 06 29/05/2024 |
The Articles written by Jelena Relic shows what is, why , how and an example about Brand Typography. Brand typography is a visual element of a brand style guide, or a brand book, that arranges your business's written copy in a legible way and aligns your messaging with your brand personality. It is important to create a good appearance of branding because Typography could defines how people experience our brand.
To choose a right fonts of your brand, there are five steps need to be completed :
1. Define your brand personality
2. Understand the personality of every typeface
3. Choose a typeface that matches your brand personality
4. Make sure your fonts meet the requirement
5. Think about budget and licensing.
There are some basic font categories and their traits :
1. Serif
- Traditional, classical, reliable. For brands that convey a sense of respectability and age-long class.
- Example : Times New Roman, Garamond, Bodoni, Palatino.
2. Sans-serif
- Minimal, clean, contemporary. For brands that evoke a sense of cleanliness and modern directness.
- Example : Droid Sans, Helvetica, Verdana, Futura.
3. Script
- Unique, elegant, distinctive. For brands that emphasize their special purpose.
- Example : Allura, Alex Brush, Pacifico, Windsong.
4. Handwritten
- Arty, informal, fun. For brands that present themselves as playful and approachable.
- Example : Porcelain Sans Serif, Salima, Herbarium, Balqis
5. Decorative
- Dramatic, stylized, diverse. For brands that aim to be instantly memorable.
- Example : Authentica, Boho, Blueshift, Boucherie
6. Slab serif
- Confident, bold, off-beat. For brands with a proven history of quality.
- Example : PT Sans Pro, Avant Garde, Dejavu Pro, Arial
Some good brand typography example :
- Alfa Romeo : Automotive brand, style, elegance
- The New Yorker : Clean, Simple, Slightly Quirky
- Uber : Recognizable
- Vogue : Elegance, Thick Thin Bodoni
- Fedex : Geometric, Bauhaus, Recognizable
 |
| Fig 7.2 Example of Good Brand Typography Week 06 29/05/2024 |
Comments
Post a Comment