Labels

Advanced Typography - Task 2 / Key Artwork & Collateral

14/05/25 - 11/6/25 (Week 4 - Week 8)
Anggia Tsani Rachmadiyanti, (0368487)
Advanced Typography GCD61004 / Bachelor in Design (Hons) in Creative Media / Taylor's University
Task 2 / Key Artwork & Collateral (30%)


 LECTURE NOTES 

All Lecture Notes Refer to Task 1 Blog

 INSTRUCTIONS 


Task 2: Key Artwork & Collateral (30%)

The exercises are as follows: 

(Task 2A) 10% - Key Artwork

In the context of this task, the key artwork is a wordmark/lettering of your name, but is also an artwork. As a wordmark/lettering it is used to identify a person but it is also used as an artwork that might adorn a lapel pin/T-shirt/poster (collateral). The key artwork can be disassembled into constituent shapes to form vibrant patterns that continue to maintain and expand its visual identity.

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.

-----------

(Task 2B) 20% - Collateral

You are tasked to design a t-shirt, lapel pin, an animated key artwork and an Instagram account (or as instructed in class) transforming the key artwork into a brand. Students will work on the animated key artwork first and fine-tune the outcomes before going on to the and other collateral material: t-shirt, lapel pin and finally an Instagram account. 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.

- Collateral: Animated Key Artwork (1080 px x 1350 px, height and width; Gif format), use mock-ups to simulate the printing of the collateral. If instructed, you will be required to print the collateral.


(Week 4-6)

Task 2A / Key Artwork

- Before I started this task, I went to pinterest to find inspirations which I like and then I explored myself by doing a mind map about myself, my personalities and hobbies to brainstorm concepts that I could use to create a wordmark of my name which reflects myself as a person.

Inspirations & references:

(Fig. 1.1) References & Inspo for wordmark, week 4 (14/5/2025)

Mindmap:

(Fig. 1.2) About Me Mindmap, week 4 (16/5/2025)

- I planned to do my first name = Anggia
- I wanted to stress on the double G in my name as that's what I think is the important, and eyecatching part and standout element of my name. Moreover, I feel like 'G' is the letter that represents my name a lot. I go by many nicknames with the G like: gigi, gii, gia.

- I explored and experimented so many different styles, design and positions of the letterforms for my first rough drafts, using digital drawing in Procreate on my ipad:

(Fig. 1.3) All sketches of draft ideas on procreate, week 4 (16/5/2025)


(Fig. 1.4) more sketches of draft ideas on procreate, week 4 (16/5/2025)

- For my plan I chose the 4 words: curious, adventurous/explorative, funny, easygoing as I think these 4 personalities is the closest to myself as a person.
- After sketching alot of these I picked 2 sketches drafts of my favourite ones...

(Fig. 1.5) Chose my 2 favourite one, week 4 (17/5/2025)


(Fig. 1.6) Process of refining and tracing wordmark on illustrator, week 4 (17/5/2025)

I decided to choose this one as it looks really flexible, fun and simple, as I don't really like things complicated and i'm easygoing. The curvy lines and popping up letters such as the 'n' and 'i' conveys my personality as a curious person too. I emphasised on the double 'G' by stacking them up on top of each other and colouring the holes black. I also wanted to show that i'm an adventurous type of person so the wavy zigzag lines on the double G acts as if it is a path/route going up.  

(Fig. 1.7) Process of wordmark on illustrator, week 5 (20/5/2025)

I edited the second A on the right to make it looked mirrored and symmetrical to the other side. Doing this I think made the overall word mark seem more balanced. The bouncing 'N' and 'i' on the feet of the letter A gives a funny and bouncy feeling which is close to my funny and smiley personality.

(Fig. 1.8) 1st wordmark BnW try, week 5 (20/5/2025)


(Fig. 1.9) Chosen Colour Scheme, week 5 (21/5/2025)


(Fig. 1.10) Applying colour to the wordmark, week 5 (21/5/2025)


(Fig. 2.1) 2nd new version of wordmark, Key Artwork, week 5 (21/5/2025)

(Fig. 2.2) Applying Warping effect, week 5 (21/5/2025)

^I tried to work and experiment with my other 2nd plan of my wordmark and applying warping effect for it to try different formats. I felt like this one reflects on my personality more compared to the previous one (fig 1.8). This one has more a sense of movement & playfulness which reflects on my personality of 'adventurous' 'explorative' and 'funny'. The extended tail of the last A and N gives a sense of exploration and curiosity, as well as the upside down 'g'. The N and G was made to look like staircase too.

(Fig. 2.3) More Sketches & Ideas, week 5 (23/5/2025)

(Fig. 2.4) Visual Image References, week 5 (23/5/2025)


(Fig. 2.5) Edited Wordmark process, week 5 (25/5/2025)

(Fig. 2.6) Wordmark process with colours, week 5 (25/5/2025)



WEEK 6 (After feedback):

(Fig. 2.7) After Feedback Corrected Final Enhanced Wordmark, week 6 (28/5/2025)

(Fig. 2.8) After Feedback Corrected Enhanced Wordmark, Coloured, week 6 (28/5/2025)


For final wordmark check, I changed several stuffs. In class, Mr.Vinod told me to make my wordmark less complicated especially on my double G's. the upside down G makes it abit confusing to read & readability is important. He also suggested i should cut out the extra curved tail at the bottom and make it abit more simplified. So I did all those adjustments in Fig 2.6 above.


Making GIF animated wordmark:

(Fig. 2.9) Process screenshot of making wordmark GIF each frames, week 6 (30/5/2025)


(Fig. 2.10) Process screenshot of making GIF on Photoshop, week 6 (30/5/2025)

Creating the GIF animated version of my wordmark was by far the most time consuming and hardest part. I did each frame one by one on a different artboard everytime on Illustrator. I had around 40 artboards. For the GIF i wanted it to start with the double Gs popping out and bouncing upwards, and followed by the path strokes revealing for the other letters. I wanted to make the G on the right to look like it's elevating and going up, like it is going on an adventure. The hole on each G represent my eyes, in which it opens once it pops out upwards in the GIF. Other than that, I tried making the 'N' look like it's going up the stairs too.

After creating each of the frames in Illustrator, I imported all of the frames to Photoshop, where I started a new timeline and compiling each frames one after another and finally making the moving animated gif.

(Fig. 2.11) GIF attempt #1, week 6 (30/5/2025)





 FINAL TASK 2A - KEY ARTWORK: 

** All JPEG Sizes: 1080px x 1350 px, 300ppi, Portrait (New IG post size)**

(Fig. 3.1) Final Key Artwork, Black on White Background, Week 6 (28/5/2025)



(Fig. 3.2) Final Key Artwork, White on Black Background, Week 6 (28/5/2025)


(Fig. 3.3) Final Colour Palette, Week 6 (28/5/2025)


(Fig. 3.4) Final Wordmark in actual colours on lightest shade of colour palette, Week 6 (28/5/2025)


(Fig. 3.5) Final Wordmark in lightest shade of colour palette on darkest shade of colour palette, Week 6 (28/5/2025)


(Fig. 3.6) Final Wordmark animated GIF, square, Week 6 (28/5/2025)


(Fig. 3.7) Final Wordmark animated GIF, portrait IG format, Week 6 (28/5/2025)


(Fig. 3.8) Final Task 2A Compilation, PDF, Week 6 (28/5/2025)



(Week 7)

Task 2B / Collateral

- We have to then design 3 collaterals of any 3 objects with out wordmark and design on it, and a GIF an animated key artwork and an Instagram account, 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.

- Collateral: Animated Key Artwork (1080px x 1359 px, 300ppi , height and width; Gif format).

(Fig. 4.1) My Portrait in BnW, Week 6 (28/5/2025)

I chose this picture to be in the center of the 9 grids. Later on I proceeded on placing the double 'gg' letters on top of my BnW face portrait and tried positioning it to make it look simple and artistic at the same time. 

(Fig. 4.2) Collateral Progress screenshot, Week 6 (28/5/2025)


Expansion & Exploring Variations:

(Fig. 4.3) Collateral Expansions process, Week 6 (28/5/2025)

Before that, I started creating and extracting several possible patterns taken from my actual 'anggia' wordmark. The emphasised letters here are the 2 connecting g's. I came out with the curvy path patterns and repeated it using the grid repeat tool. The curvy lines were taken from the curved lines of the 'g' letters'. I also tried rotating it into different angles for more variations and so it doesn't look more fun and not too solid and still. 

(Fig. 4.4) Collateral items design progress screenshot, Week 6 (28/5/2025)

I first tried experimenting different objects to design such as pins and bucket hats.

(Fig. 4.5) creating the flower logo from letter 'A', Week 6 (29/5/2025)

I came up with a symbol design of a flower which is made by using the Radial pattern repeat tool in Illustrator and by repeating the letter 'A' around the round dot of the 'i'.

I applied the extracted patterns and further expansion of the wordmark into the 3 products: cap, keychain and sticker pack with different colours from the palette extracted from my key artwork.

Making the 3 Items:

Below are the websites I used for mockups: 

1) Unblast
2) Mockups Design
I chose to work on hats, keychain and stickers as I think it's something you can bring everywhere and something simple you can bring along with you. All of the mockups were done using Adobe Photoshop, and the patterns design and layouts were prepared using Illustrator.

Collateral #1 Sticker Pack


(Fig. 4.6) Collateral #1 Sticker progress, Week 6 (29/5/2025)

(Fig. 4.7) Collateral #1 Sticker progress, Week 6 (29/5/2025)


Collateral #2 Cap

(Fig. 4.8) Collateral #2 Cap progress, Week 6 (29/5/2025)


Collateral #3 Keychain


(Fig. 4.9) Collateral #3 Keychain progress, Week 6 (29/5/2025)

(Fig. 4.10) Collateral #3 Keychain progress, Week 6 (29/5/2025)



(Fig. 4.11) Collateral 9 grid tiles layouts, JPG, Week 6 (29/5/2025)




 FINAL TASK 2B - KEY COLLATERAL: 

Instagram Link: 

** All JPEG Sizes: 1080px x 1350 px, 300ppi


(Fig. 5.1) Final Collateral #1, Sticker Pack, Week 7 (4/6/2025)


(Fig. 5.2) Final Collateral #2, Cap, Week 7 (4/6/2025)


(Fig. 5.3) Final Collateral #3, Keychains, Week 7 (4/6/2025)


(Fig. 5.4) Final Collateral BnW Portrait Photo JPG, Week 7 (4/6/2025)


(Fig. 5.5) Final Collateral Curvy Patterns JPG, Week 7 (4/6/2025)


(Fig. 5.6) Final Collateral Flower 'A' Icon JPG, Week 7 (4/6/2025)


(Fig. 5.7) Final Collateral White on Blue wordmark JPG, Week 7 (4/6/2025)


(Fig. 5.8) Final Collateral Colour palette JPG, Week 7 (4/6/2025)


(Fig. 5.9) Final Collateral Blue on White wordmark JPG, Week 7 (4/6/2025)


(Fig. 5.10) Final Collateral 9 Grids layout, JPG, Week 7 (4/6/2025)


(Fig. 5.11) Final Collateral IG Posts Screenshot, Week 7 (4/6/2025)


(Fig. 5.12) Final 2B, Collaterals Compiled, PDF, Week 7 (4/6/2025)




 Task 2 Final Outcome Compilation: 


(Fig. 6.1) Final Key Artwork, Black on White Background, Week 6 (28/5/2025)


(Fig. 6.2) Final Key Artwork, White on Black Background, Week 6 (28/5/2025)


(Fig. 6.3) Final Colour Palette, Week 6 (28/5/2025)


(Fig. 6.4) Final Wordmark in actual colours on lightest shade of colour palette, Week 6 (28/5/2025)


(Fig. 6.5) Final Wordmark in lightest shade of colour palette on darkest shade of colour palette, Week 6 (28/5/2025)


(Fig. 6.6) Final Wordmark animated GIF, portrait IG format, Week 6 (28/5/2025)


(Fig. 6.7) Final Task 2A Compilation, PDF, Week 6 (28/5/2025)




(Fig. 6.8) Final Collateral #1, Sticker Pack, Week 7 (4/6/2025)


(Fig. 6.9) Final Collateral #2, Cap, Week 7 (4/6/2025)


(Fig. 6.10) Final Collateral #3, Keychains, Week 7 (4/6/2025)


(Fig. 6.11) Final Collateral 9 Grids layout, JPG, Week 7 (4/6/2025)


(Fig. 6.12) Final Collateral IG Posts Screenshot, Week 7 (4/6/2025)


(Fig. 6.13) Final 2B, Collaterals Compiled, PDF, Week 7 (4/6/2025)




FEEDBACKS


Week 5:
- General Feedback: Wordmark can be viewed from 2 ways: commercially viable or a personal mark which you like. When you think about keywords, you have to consider what your potential client would be and what would they feel, because they might not be able to decipher the keyword, but they can get the feeling of that wordmark. The best wordmarks always looks new and always looks appealing. "A good design is timeless". Sir said, when you are designing for a client, makesure that you know how to explain your wordmark's meaning properly to them. If you enjoy the work that you do, the outcome will be good. Good design = good business. Alot of the times, a symmetrical wordmark looks better and stable, but balancing movement with balance makes the design look good overall. Don't make the mark too complicated that it becomes unreadable, because it doesn't make it memorable and is not easy for people to remember. 1) It must be easy to remember and 2) people remember it so it becomes easy to draw from memory.
- Specific Feedback: Mr vinod said my process board are complete and references were good and related to what I plan to deliver. I showed him my 2 favourite wordmarks and however, he told me to think of which of the design elements and principles can help relate the design of my wordmark and my main chosen personality word which is "adventurous". Makesure to "sell your words" so have a lot of backup words to explain to the client, to explain what you wordmark conveys. Sketch out around 100 more ideas on maybe the forms, how it would look like if it is in a circle/square/grid shape. Do more explorations.

Week 6:
- General Feedback: Sir told us that readability is the most important thing in the wordmark, so make it readable and easy to read. Always use grids when making wordmark. Dont make the wordmarks too complicated.
- Specific Feedback: 
Mr.Vinod told me to make my wordmark less complicated especially on my double G's. the upside down G makes it abit confusing to read. He also suggested i should cut out the extra curved tail at the bottom and make it abit more simplified.

Week 7:
- General Feedback: He said the format is changed to 4:5 instagram portrait ratio for all collaterals. Mr vinod said we should try expanding the design of wordmark more to create varieties.
- Specific Feedback: Mr. Vinod said my collaterals was all good and my gif was ok and nice as well.

Week 8:
- General Feedback: Finalising our task 2 and start researching for next task 3 for next week.
- Specific Feedback: Mr. Vinod liked my final IG tiles work overall it's good already. He said "good expansion of the wordmark and patterns" and "overall looks fresh".




OVERALL TASK 2 REFLECTION :

1) Experience 
  • To conclude, this task has become one of my favourite and enjoyable one this semester. Doing the key artwork and collateral has been an intriguing and pleasurable experience. It enabled me to investigate typography further and deeper, convey my identity, and grasp the creative journey of branding even more. Completing this task was an exhilarating experience that enabled me to explore the intriguing realm of visual communication and my personal artistic voice. By honing in on my pesrsonality, I was able to produce artwork that truly reflects who I am, and even creating collateral feels like crafting merchandise about myself, which is both amusing and enjoyable. Initially, I encountered some challenges in creating the key artwork sketches because I was unsure how to convey my personality through a design that would represent me. However, after receiving feedbacks from Mr.Vinod and some of my friends, their recommendations and support provided me with a clearer direction. I found this whole task 2 really enjoyable personally. I felt that we all had greater creative freedom and creative flexibility to create our artwork and establish a "brand." However, the whole process takes time and alot of thinking as well.
2) Observations - 
  • In creating the collateral, I observed the significance of design expansion for the main artwork. It shouldn't be overly boring, tedious or excessively repetitive; for instance, extracting new elements from the current wordmark we possess while creatively deriving new aspects to form a fresh one, thereby producing more variations of the products. I browsed various designer websites for research and exploration before creating the collateral, and their projects have greatly inspired me. The interplay and harmony between the typeface and illustration are captivating, and the variety of collateral from these sites teaches me a lot.
  • I also noticed that the primary issue with many of our artworks is their readability (according to the feedback). Creativity is essential, but our art must be clear and easily grasped; it should engage with the viewers. I discovered here that our design requires balance.

3) Findings - 
  • From this task, I found that a wordmark for a brand is not as easy as it seems as you really need to carefully create it while being able to convey the right message to the customers. I discovered that thoughtfully choosing the appropriate wordmark and selecting an appropriate color palette are vital for creating impactful key artwork. I discovered that making patterns by drawing from the current wordmarks is enjoyable and results in truly unique and intriguing designs, leading to new variations. This assignment has taught me that establishing purpose in design is essential; there should always be meaning and reasoning behind the work to ensure clarity in the design direction. In the absence of such elements, further developing the design can be challenging since there is no context to inform the design, leaving us unsure of any potential for expansion or completely lacking ideas. In doing this task, I realize that effectively growing my artwork is not as simple as it appears. I often ignore how a brand is effectively showcased in its products without diminishing brand identity and excessively using the design elements. To conlude, there really alot of things to keep in mind and be careful of when coming out with branding identity and design such as logo, icons, wordmarks, fonts and colour palettes.


FURTHER READING...


(Fig. 7.1) 'San Antonio Book Festival Pentagram' screenshot (week 5)

- I explored Pentagram’s rebranding of the San Antonio Book Festival (SABF). Having read this, it deepened my understanding of brand identity design. The project showcases how a brand can authentically reflect its cultural and architectural context. Pentagram’s team, led by DJ Stout, drew inspiration from the vibrant hues and geometric forms of the San Antonio Central Library, which is very creative too. I like how it has inspired me on how I can position my wordmark into so many different ways, angles and positions, making new varieties. The identity system extends beyond the logo, incorporating colorful patterns and framing devices that allow for dynamic applications across various media . This comprehensive design strategy illustrates the power of thoughtful, culturally resonant branding.

- It gave me some ideas as well on how I can extract the letters from my wordmark into interesting designs when placed into different items, to make more variations and patterns.


2) Paula Scher

(Fig. 7.2) 'Paula Scher designs for New York’s Atlantic Theater Company' (week 6)

- Looking through Paula Scher’s rebrand of the Atlantic Theater Company really opened my eyes to how brand identity can grow and evolve while still staying true to its roots. What stood out to me most was how she created a bold and flexible visual system that feels super dynamic but still instantly recognizable. The big "A" symbol, kind of like a spotlight, feels so simple but powerful, and the use of bright colors and bold layouts gives it such a strong personality.

- I loved how the identity stretches across posters, programs, and ads without losing its core vibe. It’s not just about having one perfect logo, but building a whole system that can adapt and still feel cohesive. That’s something I want to bring into my own design work, learning how to create identities that feel alive and can evolve with the brand.


3) Atlantic Theatre

(Fig. 7.3) 'Atlantic Theatre '21-22 Season', Pentagram (week 6)

From here I learnt that a striking contrast is produced by using complementary colours.  Greater colour contrasts draw more attention and create a stronger initial impression.  In order to distinguish the text content from the photographic parts and to avoid a flat or boring appearance, texture treatment is also crucial.


SEM:

Comments

Post a Comment