ADVANCED TYPOGRAPHY ✦ TASK 2: KEY ARTWORK & COLLATERAL ✦



ADVANCED TYPOGRAPHY ✦ TASK 2: KEY ARTWORK & COLLATERAL ✦


/5/2024 - 9/6/2024
Week 5  - Week 7

Bachelor of Design (Hons) in Creative Media


✦ INSTRUCTION ✦




✦ LECTURE ✦

Week 5:
Advanced Typography: Perception and Organization

Perception is the way something is viewed, understood or interpreted. Perception in typography deals with the reader’s visual navigation and interpretation through the contrast, form and organization of content. Content can be textual, visual, graphic or color forms.

Size, 2. Weight, 3. Form contrast, 4. Structural contrast, 5. Texture contrast, 6. Color contrast and 7. Directional contrast.


Figure 1.1 contrast Week 5


Contrast: Size
Size contrast can draw the reader's attention. For example, if you have a large letter and a small letter, you will see the large letter first, and then the small letter. The most common use of size is to make a title or headline noticeably larger than the body text.

Figure 1.2 Size Week 5


Contrast :Weight
Weight describes how a bold typeface stands out among thinner typefaces of the same style. In addition to using bold, using rules, spot.squares also provides “heavy areas” for visual interest or emphasis, so it’s more than just typefaces of varying weights.

Figure 1.3 Weight Week 5

Contrast :Form
Form contrast is the difference between a capital letter and its slow version or a Roman letter and its italic variant. Condensed and expanded versions of a typeface are also included in form contrast.

Figure 1.4 Form Week 5

Contrast :Structure
Structure refers to the different letter forms in different typefaces. For example, a monoline sans serif and a traditional serif, or an italic and a boldface.

Figure 1.5 Structure Week 5

Contrast :Texture
Textural contrast is created by combining contrasts in size, weight, shape, and structure and applying them to blocks of text on a page. Texture refers to the overall appearance of the lines of type both near and far. This is determined partly by the typeface itself and partly by how it is arranged.

Figure 1.6 Texture Week 5

Contrast:Direction
Directional contrast refers to the contrast between vertical and horizontal, and the angle between the two. Placing a word on its side can have a huge impact on the layout. Blocks of text also have a vertical or horizontal direction. Mixing wide, long lines of blocks with tall, short lines can also create contrast.

Figure 1.7 Direction Week 5

Contrast:Color
The use of color is recommended because the value of a secondary color is often not as prominent as pure black and white. Therefore, it is important to consider which element needs to be emphasized and pay attention to the tonal value of the color used.

Figure 1.8 Color Week 5



Form
Form refers to the overall look and feel of the elements that make up a typographic composition. It is the part that influences visual impact and first impression. Good form in typography tends to be visually appealing to the eye; it guides the eye from one point to another, is pleasing to the eye, and is often memorable.

Convey concepts in visual form         Convey concepts in visual form.


Figure 1.9 Form Week 5

  • The interplay of meaning and form brings about a balanced harmony in terms of function and expression.
  • When a typeface is viewed as a form, it no longer reads as a letter because it has been distorted, textured, enlarged, and squeezed into a space.
Figure 1.10 Form Week 5

Fig. 1.11 Example Of Forms and Communication Week 5

Fig. 1.12 Example Of Forms and Communication Week 5

  • Organization and Gestalt
  • Gestalt is a German word meaning the way things are "placed" or "grouped". Gestalt psychology seeks to understand the laws behind the ability to gain and maintain meaningful perceptions.
  • Organization/Gestalt: Perceptual organization/grouping
  • Law of similarity
  • Law of proximity
  • Law of closure
  • Law of continuity
  • Law of symmetry
  • Law of simplicity

Fig. 1.13 gestalt Week 5

  • The Law of Similarity
  • is a Gestalt grouping law that states that elements that are similar to each other tend to be perceived as a unified group. Similarity can refer to any number of characteristics, including color, orientation, size, or movement
  • The Law of Proximity
  • is a Gestalt grouping law that states that elements that are close to each other tend to be perceived as a unified group. This simple law states that elements that are close to each other tend to be grouped together, while elements that are far apart are less likely to be grouped together.

Fig. 1.14 Similarity and Proximity Week 5


  • The Law of Closure
  • States that the brain tends to see a complete figure or shape even if a picture is incomplete, partially obscured by other objects, or if some of the information needed to complete the picture in the mind is missing
  • The Law of (Good) Continuity
  • States that even if two or more objects intersect, humans tend to see each of them as a distinct, single, uninterrupted object. The alignment of objects or forms plays an important role in the effectiveness of this principle
Fig. 1.15 closure and continuation Week 5


✦ TASK 2A: KEY ARTWORK ✦

1.0 RESEARCH

For Task 2, start by designing the wordmark in black on a white background and then create a version with the wordmark in white on a black background. Choose a color palette that complements your design, and apply these colors to the wordmark on a light-colored background. Finally, create another version with the wordmark in a light color on a dark background to showcase its adaptability and versatility in different color schemes and backgrounds.

Figure 2.1 Example from Internet

Before I embark on sketching out my logo, I take the time to search for a variety of logos that capture my interest and serve as inspirational examples. I carefully analyze these logos, noting their design elements, color schemes, and overall aesthetics. I am particularly drawn to vibrant and colorful logos, as I aim to infuse my own logo with a dynamic and lively appearance that stands out.

2.0 SKETCHES

Figure 2.2 Sketches

Once I've thoroughly confirmed and clarified the design specifications and direction for the logo I aim to create, I delve into the creative process, starting with the initial sketches that bring my envisioned logo to life.

3.0 DIGITALIZATION

Figure 2.3 Process

After completing the sketches for the logo, I review all six designs and carefully select one that best embodies the essence and vision I have for my logo, choosing it to represent my brand moving forward.

FINAL OUTCOME
Figure 2.4 Final Outcome


✦ TASK 2B: COLLATERAL ✦

In this task, we're creating several elements: an animated key artwork, a t-shirt, a lapel pin, and an Instagram account. We must follow specific design standards closely. Our process starts with refining the animated key artwork, which is the core of the project. Then, we design the t-shirt and lapel pin to complement the key artwork and convey the brand's message effectively. Lastly, we set up an Instagram account to showcase our designs and communicate the brand's identity. Bold colors are encouraged for a standout design.

1.0 RESEARCH

Figure 3.1 Template from Internet

Prior to beginning the design work on my Instagram account, I conducted thorough research on the internet, gathering examples to help me establish a clear and focused direction for my design approach.

2.0 DIGITALIZATION

Before embarking on the creation of the template, I took the deliberate step of deciding on my color palette, ensuring that it aligns harmoniously with the overall aesthetic and theme I aim to achieve.


After finalizing and confirming my chosen color palette, I initiated the design process using Illustrator, meticulously incorporating each selected color to bring my vision to life.


I decided to place the same colored logo at the top and left of the design. In the top left corner, I planned to place a grayscale item with a logo on it. As for the rest of the areas, I planned to fill them with my portraits and models.


Figure 4.1

While working on the portrait, I found it necessary to enhance the image. To do this, I used Photoshop to convert the image to grayscale, which gave me a more refined and harmonious look. I also took the step of removing the background to isolate the subject. After completing this process in Photoshop, I transferred the modified portrait into Illustrator.


Figure 4.2


After completing these initial steps, I began searching for mockup materials on Pinterest. I then used these mockups as a platform to incorporate my logo, seamlessly integrating it into the overall design.


Figure 4.3 Template from Pinterest

Figure 4.4 Template from Pinterest


I utilize Photoshop for mockup so that I can integrate my logo and other elements seamlessly into the design.


Final Outcome










Final wordmark animation:






✦ FEEDBACK ✦

Week 5 No feedback (did not attend online feedback session)

Week6
Black alone is too common. I hope to make some color changes on this logo. You can refer to the colors of some other logos for modification and adjustment.

Week7
General Feedback: You can upload an animated GIF to an Instagram post by opening the Instagram app, creating a new post, selecting your GIF from your device's gallery, adding a caption and hashtags, and then.
Specific Feedback:The canvas background is too fancy and looks too messy. It does not highlight the main meaning and content of the surface logo.


✦ REFLECTION ✦

In this Task 2, it was a bit difficult for me because we needed to design a logo that is unique to us using our own names. Although it was a very interesting assignment, I had no inspiration for designing a logo, and I missed some classes in the middle, which made it hard for me to keep up with Mr. Vinod's progress, leaving me very confused. However, I looked at my friends' logos for reference, which gave me inspiration and I designed my current logo. In this assignment, not only did we have to design a logo, but we also needed to place the logo on items. This was also a challenge for me because my Photoshop skills are not very good, so I spent a lot of time on this part. After that, we also needed to put our brand on Instagram. I am not very familiar with Instagram, so I asked a friend who had taken Advanced Typography for help, and I am very grateful to her. Through this assignment, I learned a lot, such as designing my own logo and placing the logo on items.


✦ FURTHER READING ✦




"Thinking with Type" by Ellen Lupton is a comprehensive guide to typography, structured in a visually engaging format with numerous examples and practical exercises. The book covers the basics of typography, including the anatomy and classification of typefaces, and provides a historical context for type usage. It delves into setting text with principles of readability, alignment, and spacing, and explores the design and structure of individual letterforms. Additionally, it introduces grid systems for organizing content and creating visual hierarchy. The book concludes with practical advice and exercises for applying typographic principles to real-world projects, making it an essential resource for both beginners and advanced typographers.



评论

热门博文