Labels

Advanced Typography / Task 2: Key Artwork and Collateral

26/04/2023 - 17/05/2023 / (Week 4 - Week 7)
Derin / 0354969 / Design in Creative Media
GCD 61004 / ADVANCED TYPOGRAPHY
Task 2

 

INSTRUCTIONS

Task 2A: Key Artwork (10%)

Use your first name or pseudonym. Explore and compose as many permutations and combinations of your 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.

Learning Goals:
1) To demonstrate an enhanced use of grids, layouts and page flow for effective typographic communication.
2) To develop ability to recognize and create a symbiotic relationship between image and type and to devise methods to enhance interplay between the two.
3) To conceptually communicate.

Deadline:
Week 6

Task 2B: Collateral (20%)

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 (800/1024 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.

Learning Goals:
1) To demonstrate an enhanced use of grids, layouts and page flow for effective typographic communication.
2) To develop ability to recognize and create a symbiotic relationship between image and type and to devise methods to enhance interplay between the two.
3) To interpret and adapt the designs in various media formats whilst trying to maintain the overall identity.

Deadline:
Week 8

TASK 2A: KEY ARTWORK

For Task 2A, we are assigned to create a brand identity using our first name or a pseudonym. The key artwork has to describe and portray our individuality. In light of this, Mr. Vinod advised us to begin by creating a sitemap to guide our design process, and I followed his suggestion. My sitemap consisted of three branches: 'word play,' 'zodiac,' and 'nickname.' I created these sketches in Procreate.

Fig 1.1 Rough sketches for the ideation process part 1, Week 6 (14/05/2023) 


I generated a total of five designs based on these branches. Though, I must admit that I'm not entirely satisfied with the outcome of my designs.

Fig 1.2 Key artwork designs part 1, Week 6 (14/05/2023)


Based on the feedback I received from Mr. Vinod, more exploration needs to be done (all the feedbacks are at the feedback section below). I made 3 more branches from my sitemap which are 'nationality', 'favorite emoji', and 'Chinese zodiac'. The following are some of the additional designs I created.

Fig 1.3 Rough sketches for the ideation process part 2, Week 6 (21/05/2023)


 Afterwards, I digitized the sketches, same process as before. I've also polished few of my older designs according to Mr. Vinod's feedback.

Fig 1.4 Key artwork designs part 2, Week 7 (22/05/2023)


Mr. Vinod expressed his approval of my sitemap for the 'Nationality' theme and appreciated the concept of incorporating Javanese script style into the key artwork. He suggested that I explore the possibility of creating a new design that maintains the same width but exudes a more modern aesthetic.

Before I proceed in creating the design, I conducted a research on Javanese script fonts to familiarize myself with their unique style. In order to gain inspiration and insight, I studied various examples and references. Here are a few references I examined.

Fig 1.5 References

One of the significant takeaways from studying Javanese script fonts is the importance of striking a balance between tradition and modernity while allowing room for personal expression. By combining traditional Javanese script with contemporary design elements, I can create visually captivating designs that resonate with modern audiences. Infusing the script with unique stylistic choices and personal touches enables me to express my individuality while staying true to the essence of Javanese culture. This approach ensures that my designs are not only visually appealing but also culturally relevant.

 I will adapt and modify these elements to create a universally readable alphabet that retains the essence of Javanese script. I transferred my ideas to Procreate, a digital design platform, and created a rough sketch. The following is the result.

Fig 1.6 Key artwork designs part 2, Week 7 (26/05/2023)


Afterwards, I brought my sketch of the key artwork into Adobe Illustrator to digitize it. Upon reviewing the artwork, Mr. Vinod pointed out that the letters 'd', 'er', and 'in' didn't appear to belong together seamlessly. Taking his feedback into account, I started on a development process to refine my design. To ensure consistency in style, I replaced the letter 'n' with a modified version that resembled the letter 'd'. Additionally, I made the final decision to bend the tip of the letter 'i' as a straight line seemed out of place. These adjustments aimed to enhance the overall cohesiveness and visual harmony of the key artwork. The following is the development of said process.

Fig 1.7 Key artwork development process, Week 8 (30/05/2023)
   

Final Outcome


Fig 1.8 Final Outcome for Key artwork - JPEG, Week 8 (30/05/2023)


Fig 1.9 Final Outcome for Task 2A: Key artwork - PDF, Week 8 (30/05/2023)


TASK 2B: COLLATERAL

We are tasked with designing a t-shirt, lapel pin, an animated key artwork, and an Instagram account (or as instructed in class) to transform the key artwork into a brand. Our initial focus will be on creating the animated key artwork, allowing us to refine the outcomes before moving on to other collateral materials, such as the t-shirt, lapel pin, and ultimately the Instagram account. It is crucial that the final output reflects a thorough exploration, effectively conveying the desired message and mood established by the key artwork and its intended purpose, both visually and textually.


Brand Identity

We started this task by taking self-portraits (with Mr. Vinod's guidance) and a color palette to use for our Instagram collateral.

Fig 2.1 Self-portrait, Week 7 (17/05/2023)


After reviewing my collateral's direction, I decided to change the initial color palette. The dark blue from fig 2.2 was brighter than desired, so I opted for a darker shade instead. Ultimately, I settled on fig 2.3 as my final choice for the color palette.

Fig 2.2 Initial color palette, Week 7 (17/05/2023)

Fig 2.3 Final choice of the color palette, Week 10 (08/06/2023)


After receiving feedback from Mr. Vinod about the impact of repeating the key artwork in my self-portrait, I decided to make adjustments using Photoshop instead of plainly using the blending options in Adobe Illustrator. I revised my initial edit (in Fig 2.4) to address this concern and enhance the overall design.

Fig 2.4 First attempt, Week 7 (17/05/2023)

Fig 2.5 Final attempt, Week 10 (09/06/2023)


Using After Effects 2023, I animated the key artwork to give the impression of it being written. I followed a helpful video tutorial to achieve this effect. The process involved using the pen tool (similarly to Adobe Illustrator) to trace the key artwork, followed by dragging the 'Stroke' effect into the composition files and adjusting the timing. Additionally, I made sure to customize the brush width and set the 'Paint Style' to 'Reveal Original Image.' And voila!!!!!

Fig 2.6 Effect configurations, Week 9 (29/05/2023)


Fig 2.7 Result of animated key artwork, Week 9 (29/05/2023)


Collateral

Initially, I utilized a mock-up website to create whatever mock-ups I could find to complete my collateral, as shown in Fig 3.1. However, when reviewing our progress for the collaterals with Mr. Vinod, he recommended establishing a theme based on our key artwork for our webpage. Additionally, he advised aligning the mock-up products with that theme to ensure cohesiveness. So with that, I will need to be making the necessary adjustments to follow his feedback, starting by scrapping the mock-ups I previously I did. :'(

Fig 3.1 Scrapped mock-ups, Week 9 (30/05/2023)

Fig 3.2 Scrapped collateral, Week 9 (30/05/2023)


To initiate the creative process, I conducted a search for interesting Instagram layouts. During my search, I stumbled upon a few examples (refer to Fig 3.3) that caught my attention. Here are key insights I gleaned from observing these Instagram layouts:

  • Continuous Instagram Post: Implementing a continuous post concept adds dynamism to the overall layout.
  • High Contrast on the Main Color: Emphasizing high contrast on the main color enhances the visual impact.
  • Subtle Repetition: While incorporating repetition, it is essential to maintain subtlety. Avoiding obvious repetition ensures a more refined and polished aesthetic.
  • Brand-Related Visual Elements: All visual elements within the layout should be closely tied to the brand logo, reinforcing brand identity.

Fig 3.3 References, Week 10 (08/06/2023)


I decided to plan the layout by opting for a 9x9 grid Instagram layout. I allocated the bottom section of the layout exclusively for showcasing the brand, which includes an animation of the key artwork and the brand itself or a pattern. Meanwhile, the upper parts were dedicated to promoting the products. Reflecting on my previous collateral, I realized it lacked excitement, so I decided to explore a continuous Instagram post concept. This approach involves inserting a single concept into multiple connected posts. The goal is to create a more dynamic visual experience.

I've solidified the concept for my Instagram page, which aims to promote brand identity inspired by Javanese script and features stationeries as the products. The page will feature mock-ups that showcase the fusion of simplified and modern Javanese script artistry alongside stationary elements.

Fig 3.4 Layout concept, Week 10 (08/06/2023)


I utilized free mock-up PSD files to create these product designs. As previously decided, the product theme of my mock-ups will surround stationary items. This choice is inspired by the inherent connection between Javanese script and writing.

I made these mock-ups using Photoshop.

Fig 3.5 Photoshopping process, Week 10 (09/06/2023)


To create the patterns for the lower section of the Instagram layout and some of the mock-ups, I copy-pasted arranged my key artwork like in Fig 3.7. Instead of using a solid fill, I opted for the outline of the key artwork. This approach was taken to minimize the impact of repetition, as it was previously advised to avoid excessive repetition. By utilizing the outline and incorporating it into a personalized Batik-like pattern, I aim to showcase the essence of my nationality within the overall theme. :)

Fig 3.6 Key artwork pattern, Week 10 (09/06/2023)


Referring to the previous layout concept I created, I carefully arranged all the mock-ups and vector art in accordance with the plan depicted in Fig 3.2. The bottom-middle section is deliberately left blank to accommodate the animation component.

Fig 3.7 Final look, Week 10 (09/06/2023)


Final Outcome

Instagram handle: @derin_brand


Fig 4.1 Final Instagram Layout - JPEG, Week 10 (09/06/2023)


Fig 4.2 Final Chosen Color Palette - JPEG, Week 10 (08/06/2023) 


Fig 4.3 Final Key artwork B&W - JPEG, Week 8 (30/05/2023)

Fig 4.4 Final Key Artwork Primary Color Against Lightest Color - JPEG, Week 10 (08/06/2023)


Fig 4.5 Final Key Artwork Lightest Color Against Primary Color - JPEG, Week 10 (08/06/2023)


Fig 4.6 Final Animated Key Artwork - GIF, Week 9 (29/05/2023)


Fig 4.7 Mock-up #1 - JPEG, Week 10 (09/06/2023)

Fig 4.8 Mock-up #2 - JPEG, Week 10 (09/06/2023)

Fig 4.9 Mock-up #3 - JPEG, Week 10 (09/06/2023)

Fig 4.10 Mock-up #4 - JPEG, Week 10 (09/06/2023)


Fig 4.11 Pattern - JPEG, Week 10 (09/06/2023)



Fig 4.11 Final Outcome for Task 2B: Collateral (Key Artwork) - PDF, Week 10 (09/06/2023)


Fig 4.12 Final Outcome for Task 2B: Collateral (Instagram) - PDF, Week 10 (09/06/2023)

FEEDBACK

Week 5
General feedback:
I made a total of 5 designs from 3 branches of the sitemap for this exercise.
Peers feedback:
1.1, 1.2) According to my peers, the logo still needs improvement because they read it as 'INDER' instead of 'DERIN' due to the hierarchy.
2.1) Overall, my peers liked the first design for the 'zodiac' idea as it is well-crafted, although it may not look too much like a logo. The design symbolizes my zodiac sign and the letter 'D' is still legible. Initially, some of my peers thought the stroke inside the letter 'D' was unnecessary, but I explained that it shapes the letter 'D' more clearly.
2.2) The second design for the 'zodiac' idea needs improvement. Jennifer suggests that I remove the apex of the letter 'n' and keep its shoulder.
3) The design looks plain, so I need to explore more letterforms.
Specific feedback:
1) Mr. Vinod suggests that I use only black and white tones for a greater impact and use the outline technique.
2) The zodiac symbols are more Western, so I need to consider other cultural symbols.
To summarize, I need to do more mind mapping and design exploration to improve the logo.

Week 6
General feedback:
Mr. Vinod comments that we should avoid doing monograms if your initials are not at least 3 letters. Do more than just monograms. Avoid simplicity in your designs. Create a sitemap that describes about you.
Specific feedback:
4) Mr. Vinod encourages using my full name instead of my initials. More exploration could be done for the 'Nationality: Javanese script' sitemap idea. He said that I could experiment using the same line weight for the strokes.
5) Mr. Vinod suggests using at least three letters for the design, and the current design looks more like a combination of D and B.
6) No feedback was provided for this specific design.

Week 7
General feedback:
- Mr. Vinod instructed us to avoid copying his lecture notes directly from his PowerPoint. Instead, we should create a brief summary of the lectures in our own words.
- When creating a word mark, it's crucial to use strong colors to make it stand out. Before experimenting with color, the word mark should be tested against black and white images. It's essential to choose a color palette that matches the brand's mood and aesthetic, with one or two strong colors represented in the word mark.  To craft the animation of the key artwork, it's recommended to use contrast. If the background is dark, the key artwork should be light and vice versa. The presentation of the Key Artwork animation should be concise and polished. All the artboards are sized at 1024px X 1024px.
- When planning the Instagram account's tiles or layout, the assets should be considered. Also, we need to include a minimum of three collateral items, with a T-shirt as a fundamental component of the collection. Additionally, we are required to set up an Instagram account centered around the letters featured in our key artworks. The account should have a creative and unique name that reflects the essence of our artwork.
Specific feedback:
- According to Mr. Vinod, there's room for improvement in my design poster for the Type&Play exercise. He suggested that I could add movie logos and actual content in the text box to make it look more realistic.
- Mr. Vinod gave the thumbs up to the color palette I selected, but he's not too keen on the design I went with of the key artwork. He prefers my design for the 'Nationality' sitemap over the rest of the designs I have made.

Week 8
Independent learning week

Week 9
General feedback:
Mr. Vinod advises us to effectively represent our brand in the Instagram bio. It is crucial to consider the significance of preserving the power of our monogram by avoiding excessive repetition, as repeating it doesn't mean expanding it. Furthermore, he emphasized the importance of showcasing the key artwork, with one element in the primary color and a neutral shade in the background. It is vital to achieve a harmonious balance between the inherent symbol and the key artwork, ensuring that neither one dominates the other. Lastly, when submitting the animated brand, please provide it in GIF format.
Specific feedback: 
The Instagram layout seems to have a repetitive design that could benefit from further exploration to enhance the overall visual appeal. To make your brand stand out, consider incorporating elements that grab attention within the Instagram layout. On a positive note, the Key Artwork looks fantastic and is ready for finalization. Additionally, the animation for the collateral works.


REFLECTION

Task 2A: Key Artwork

Experience:
Initially, the key art design presented a formidable challenge, leading to multiple rejections of my design proposals. These rejections understandably created a sense of doubt regarding my skills as a designer.  But looking back, this whole experience turned out to be a transformative catalyst, prompting deep self-reflection and self-discovery. It helped me understand what I wanted to express through my designs and express it better. Through this process, I gained a deeper understanding of myself and learned how to convey my message more clearly through my designs.

Observation:
While observing, I noticed that lots of people tend to make monograms for their key artwork. This means that many ideas end up looking similar and repetitive. It shows that it's important to be unique and come up with innovative designs during the creative process.

Finding:
I discovered that generating one idea per day, rather than rushing the night before, proved to be more effective. This approach allowed for better brainstorming and ideation. Additionally, I realized the significant importance of documenting and tracking progress, enabling a better understanding of the design journey and facilitating future improvements.

Task 2B: Collateral

Experience
Undertaking this task has definitely been a challenging journey for me wipes sweat. However, I must say it has also been quite enjoyable. Throughout this process, I've had the opportunity to learn and acquire new skills, especially in areas like Photoshop and layout planning. Looking back, I can confidently say that I have grown and improved significantly compared to where I started.

Observation
One crucial observation I made is the significant role of product mock-ups being closely related to the brand. When the mock-ups align with the brand identity and values, it creates a stronger and more cohesive visual representation. This connection helps in conveying a consistent message to the audience.

Finding
I came to realize the importance of conducting thorough research and studying relevant references before starting on a design project. I learned the hard way that designs can fall short if they are not properly planned out. Proper research and planning lay the foundation for creating visually appealing and effective designs. Learned that the hard way.


FURTHER READING

Fig 5.1 Design Elements, Typography Fundamentals: A Graphic Style Manual for Understanding How Typography Affects Design, by Kristen Cullen (2012)


Yet another book I selected because of the interesting cover: "Design Elements, Typography Fundamentals: A Graphic Style Manual for Understanding How Typography Affects Design" by Kristen Cullen. This book explores typography and its impact on design, and I think it's really great. It has colorful examples of real designs on every page that help explain the concepts.

Chapter 2 of the book is all about the important ideas of typography in design. It talks about things like contrast, harmony, proximity, alignment, grid systems, white space, visual hierarchy, readability, text formatting, typeface pairing, responsive typography, and experimental typography. The chapter gives us practical tips and techniques to make our typographic designs look good and grab people's attention. It's really useful for creating designs that are both effective and pleasing to the eye. Eye candy!!!

Here are some notes I took while reading Chapter 2:

  • Contrast and Harmony: This chapter talks about how using different sizes, weights, and styles in typography can create a visually interesting and balanced look.
  • Proximity and Alignment: It explains how placing and aligning typographic elements can help organize a design and show its hierarchy.
  • Grid Systems: This section introduces the use of grid systems to arrange and align typographic elements consistently and make them easy to read.
  • White Space: It emphasizes the importance of having empty space, also called white space or negative space, in typography and design. It helps make content easier to read and understand.
  • Visual Hierarchy: This part explores techniques like size, color, and typography to create a clear visual hierarchy that directs the reader's attention and highlights important information.
  • Readability and Legibility: It provides practical tips and techniques to make sure typographic elements are easy to read and understand.
  • Text Formatting: This section covers essential techniques like adjusting spacing and alignment to make sure the text looks good and is easy to read.
  • Pairing Typefaces: It talks about how to choose and combine different typefaces that go well together and create a balanced and harmonious design.
  • Responsive Typography: This part addresses the challenges of designing typography that works well on different screen sizes and devices.
  • Experimental Typography: It explores unconventional and creative ways of using typography, pushing boundaries and encouraging new ideas in design.



Labels: