Advanced Typography | Key Artwork & Collateral

August 29, 2023

Advanced Typography | Key Artwork & Collateral

Week 4 (20/09/2023) - Week 10 (7/11/2023)

Nurul Asilah Binti Mohamad Asif | 0353346 | Bachelor's of Design in Creative Media | Advanced Typography

Week 5

Lecture 5: Perceptions and Organisations

Perception in typography deals with the visual navigation and interpretation of the reader via contrast, form, and organization of the content. Content can be textual, visual, graphical or in the form of colour.

Contrast

Carl Dair posits 7 kinds of contrast

- Size

- Weight

- Contrast of form

- Contrast of structure

- Contrast of texture

- Contrast of colour

- Contrast of direction

Contrast of size

Provides a point to which the reader's attention is drawn. For example, if you have a big letter and a small letter you will obviously see the big letter first before the small. The most common use of the size is making the title of the heading noticeably bigger than the body text.

Fig 1.0 Contrast (4/10/23)

Contrast of weight

Weight describes how bold type can stand out in the middle of the lighter type of the same style. Other than using bold, rules, spots, and squares also provide a "heavy area" for a powerful point of visual attraction or emphasis, therefore not only a type of varying weight.

Fig 1.1 Contrast of weight (4/10/23)

Contrast of form

Is the distraction between a capital letter and its lowercase equivalent, or a Roman letter and its italic variant, condensed and expanded versions of the typeface are also included under the contrast of form.

Fig 1.2 Contrast of form (4/10/23)

Contrast of structure

The different letterforms of different kinds of typefaces. For example, a monoline sans serif and a traditional serif, or an italic and a blackletter.

Fig 1.3 Contrast of structure (4/10/23)

Contrast of texture

By putting the contrast together, the contrasts of size, weight, form, and structure, and applying them to a block of text on a page, you come to the contrast and texture. Texture refers to the way the lines of type look as a whole up close and from a distance. This depends partly on the letterforms themselves and partly on how they are arranged.

Fig 1.4 Contrast of texture (4/10/23)

Contrast of direction

Contrast of direction is the opposition between vertical and horizontal, and the angles in between, Turning one word on its side can have a dramatic effect on a layout. text blocks also have their vertical or horizontal aspects of direction. Mixing wide blocks of long lines with tall columns of short line can also create a contrast.

Fig 1.5 Contrast of direction (4/10/23)

Contrast of colours

The use of color is suggested that a second colour is often less emphatic in values than plain black on white. Therefore it is important to give thought to which element needs to be emphasized and to pay attention to the tonal values of the colours that are used.

Fig 1.6 Contrast of colours (4/10/23)

Form

Form refers to the overall look and feel of the elements that make up the typographic composition. It is the part that plays a role in visual impact and first impressions. A good form of typography tends to be visually intriguing to the eye, it leads the eye from point to point, entertains the mind, and is most often memorable.

Fig 1.7 Example of form 1 (4/10/23)

Originating from the Greek words "typos" (form) and "graphics" (writing), typography means to write under form. Typography can be seen as having two functions which are to represent a concept and to do so in a visual form. Displaying type as a form provides a sense of letterforms' unique characteristics and abstract presentation.

Fig 1.8 Example of form 2 (4/10/23)

Form brings a balanced harmony both in terms of function and expression. When a typeface perceives a form, it no longer reads as a letter because it has been manipulated by distortion, texture, and enlargement, and has been extruded into a space.

Fig 1.9 Example of form 3 (4/10/23)

Organisation/Gestalt

Gestalt is a German word meaning the way a thing has been "placed" or "put together".

Perceptual Organisation/Groupings

-Law of Similarity

-Law of Proximity

-Law of continuation

-Law of symmetry

-Law of simplicity (Praganz)

Fig 2.0 Gestalt principles of grouping (4/10/23)

Law of similarity

Similarity can refer to any number of features, including color, orientation, size, or indeed motion.

Law of proximity

This straightforward law states that items close to each other tend to be grouped together, whereas items further apart are less likely to be grouped together.

Law of closure

Refers to the mind's tendency to see complete figures or forms even if a picture is incomplete, partially hidden by other objects, or if part of the information needed to make a complete picture in our minds is missing.

Law of (good) continuation

It holds that humans tend to perceive each of two or more objects as different, singular, and uninterrupted objects even when they intersect, The alignment of the objects or forms plays a major role for this principle to take effect.

Law of symmetry

Elements that are symmetrical to each other tend to be perceived as a unified group.

Law of simplicity (Praganz)

When you're presented with a set of ambiguous or complex objects, your brain will make them appear as simple as possible.

Instructions

Task 2(A): key Artwork

For this task, we were required to use the initial letters of our name or our full name. Explore and compose as many permutations and combinations of these initials. The final key artwork must be an elegant solution, not complicated or confusing that leads to a functional and communicable key artwork.

I started off by creating my initials with simple designs, I was actually quite confused with what I wanted to go for, but then I do like curved letters.

Fig 2.1 Initial draft (20/9/23)

Then it took me a while to like them, but there's only one that caught my attention. which is this initial.

Fig 2.2 Initial draft #2 (20/9/23)

Although it is nice to my eyes, I'm afraid that it might not look nice to other people's eyes. While my name is Asilah, it still does not look quite right, and what if people find it confusing as if it weren't my name to begin with?

So I decided to extract them and turn them into individual letters instead.

Fig 2.3 Chosen Artwork (21/9/23)

After some feedback from Mr.Vinod, I made some changes to the letters to connect the waveform from A-S.

Fig 2.4 Final artwork (24/9/23)

I changed the letters a little bit because I felt like it wasn't "bold" enough, so I made the letters a bit pointy and had a little bit of edge.

Next, we have to add the artwork onto the black t-shirt mockup, to make it look like our own brand.

Fig 2.5 Artwork on a t-shirt (30/9/23)

Later, we went ahead and choose a colour palette for our designs, Mr. Vinod recommended colourhunt to search our colours. I've been leaning towards warm colours lately. So I went for these colours.

Fig 2.6 Chosen Colour (1/10/23)

I used these colors for my initials, with different colors on them. So, I can decide which one looks best on my initial.

I compared the colors with the old initial with the new, just to see which one looks better.

Fig 2.7 Colours on old initials draft (2/10/23)

Fig 2.8 Colours on new initials fixed (2/10/23)

I really like the green and yellow color on my initials.

Fig 2.9 Chosen main color palette (2/10/23)

Fig 3.0 Chosen color palette (2/10/23)

In JPEG

Fig 3.1 Main chosen palette in JPEG (3/10/23)

Fig 3.2 The main chosen palette in JPEG (3/10/23)

Key Artwork GIF

As for the GIF, I used Illustrator to create my initial, and i separated the file into 1 artboard so I could immediately export it in After Effects.

Fig 3.3 Illustrator layers exported in After Effects (21/10/23)

Previously, Mr.Vinod gave me feedback about finding your own initials to bring out the contrasts in your name. I decided to make the dot on the letter "i" a little bit more meaningful.

Fig 3.4 Initials in After Effects (21/10/23)

I separated the dot on the letter "i" so that I could animate it as it bounced on the actual letter itself.

Fig 3.5 Dot bouncing on the letter 'i' (21/10/23)

Final GIF

Fig 3.6 Final Key Artwork GIF (21/10/23)

Final PDFs

Fig 3.7 Final Tshirt Mockup PDF format

Fig 3.8 Final Initial PDF format

Task 2(B): Collateral

For this task, we need to use our key artwork and create collaterals. This means putting our initials on certain objects, such as clothes, mugs, and tote bags to make them look like our own branded items.

I decided to use mine and turn it into a sweater shirt, a school bag, and probably a package design.

Collateral

I used the mockup that was available online and imported it into Photoshop as I applied my initials on it.

Sweater shirt

Fig 3.9 Sweater shirt with initials on (10/10/23)

Fig 4.0 Sweater shirt with initials on#1 (10/10/23)

Fig 4.1 Sweater shirt with initials on#2 (10/10/23)

Mugs

Fig 4.2 Mugs with initials on#2 (10/10/23)

School Bag

Fig 4.3 School Bag with initials on (10/10/23)

Fig 4.4 School Bag with initials on#1 (10/10/23)

Fig 4.5 School Bag with initials on#2 (10/10/23)

Final PDFs

Instagram

As for my Instagram account, I went for a different username since my original account is "AsilahAsif" so I couldn't use that name for this new account, instead, I used a5ilxh3.0. That sounds cool I guess haha.

Next, we got to design our 9 posts that look like those business accounts on Instagram that promote their businesses.

In the beginning, I was really confused as to how some people make their Instagram so aesthetically pleasing (business-wise) and how they would connect one picture to another.

After a few feedbacks and some help from my classmates, I managed to get the idea and fix my designs.

Fig 4.6 Instagram draft (13/10/23)

I knew I didn't like that design, but again it was a draft, so I did some research for references.

References

Fig 4.7 Reference Board#1

Fig 4.8 Reference Board#2

Draft

Fig 4.9 Insta feed draft #1 (14/10/23)

Fig 5.0 Insta feed draft #2 (14/10/23)

I realized that there were a lot of plain areas, so I decided to add more shaped elements into the feed.

Fig 5.1 Final Insta feed draft (14/10/23)

Full Process of Task 2

Fig 5.2 Full work process for Task 2 (22/10/23)

Final Instagram Posts

Fig 5.3 Final IG Posts (17/10/23)

Fig 5.4 Full screenshot of IG page (17/10/23)

Instagram Link :

@a5ilxh3.0 - https://www.instagram.com/a5ilxh3.0/

Feedback

Week 5

- Try to connect the waves from the fonts -Enhance the letter "A"

Week 6

-If you want to find the signature for your name, you have to have a specific signage. It does not have to be a letter, it can be a dot and you can design your way through it. -color picking is wise, but ensure it runs smoothly with the rest of the letters.

Week 7

- The transparency looks better in the middle of the canvas than the darker picture since it has a repetitive look. Go for that instead. -Use your initials wisely and align them properly. -If the parts of your canvas are empty, use the right amount of elements to match the other posts. -BE DIFFERENT (school bags)

Reflection

Experience

In my experience with key artwork and collateral tasks, I have had the privilege to do various creative projects that require a keen eye for visual aesthetics and attention to detail. I've played a crucial role in crafting visually compelling key artwork for marketing campaigns, product launches, and events. This has involved concept development, graphic design, and image selection to create designs that effectively convey the desired message and capture the essence of the project. Additionally, I have successfully managed collateral tasks such as designing posters, social media graphics, and promotional materials that enhance brand visibility and resonate with the target audience. It's been a rewarding journey that has allowed me to merge my creative passion with a strategic approach.

Observations

Through my observations in key artwork and collateral tasks, I have gained valuable insights into the power of visual communication and design in shaping the success of various projects and brands. I've witnessed how a well-crafted key artwork can serve as a captivating gateway to an entire campaign, drawing the audience in with its aesthetics and storytelling. Additionally, I've noticed the significance of collateral materials in reinforcing a brand's message and identity. These materials, such as posters, and social media graphics, provide a cohesive and memorable brand experience. My observations have highlighted the importance of consistency in design, the need to adapt to evolving trends, and the profound impact that a well-executed visual strategy can have on influencing consumer perception and engagement. It's clear that attention to detail and a deep understanding of the target audience are essential in creating impactful and successful key artwork and collateral materials.

Findings

In my exploration of key artwork and collateral tasks, I've uncovered several critical findings that have enriched my understanding of these creative endeavors. Firstly, I've discovered that key artwork is not merely about aesthetics but serves as a vital storytelling tool, encapsulating the essence of a project or campaign. It acts as a magnet, drawing viewers into the narrative. Furthermore, my research has underscored the importance of adaptability, as design trends are ever-evolving, and staying relevant is key. In the realm of collateral tasks, I've come to appreciate the pivotal role they play in reinforcing a brand's identity and fostering brand recognition. My findings have emphasized the necessity of consistency and a deep understanding of the target audience to ensure that collateral materials effectively resonate and leave a lasting impact. Overall, my journey has revealed the dynamic and influential nature of key artwork and collateral tasks in the world of visual communication and marketing.

Further Reading

This comprehensive piece delves into the importance of typography in design and how the right typeface selection can significantly impact visual communication. The article also provides valuable insights into the nuances of typography, offering guidance on font pairings, layout design, and the psychology behind different typefaces. It's an excellent resource for designers, marketers, and anyone interested in harnessing the power of typography to enhance their visual content.

This comprehensive work provides a detailed and insightful examination of the core principles that underpin effective typography in design. From type anatomy and hierarchy to kerning, leading, and grid systems, the book covers a wide array of topics crucial to mastering the art of typography. With practical examples and exercises, it's an invaluable resource for designers, typographers, and anyone looking to create visually compelling and readable text-based content.

Search This Blog

Asilah Asif | 0353346

Advanced Typography | Key Artwork & Collateral

Comments

Post a Comment