Advanced Typography | Task 2 / Key Artwork and Collateral
23/09/24 - 12/11/24 | Week 4 - Week 8
Nadia Chong Wen | 0355736 | Bachelor's of Design (Honours) in Creative
Media
Task 2 / Key Artwork and Collateral
Table of Contents
1. Lecture Notes
AdTypo 5 | Typographic Systems
Perception:
- The way in which something is regarded, understood, or interpreted.
It deals with the visual navigation and interpretation of the reader via contrast, form, and organization of the content. It can be textual, visual, graphical, or in the form of colour.
Contrast
Contrast in Size:
- Provides a point to which the reader's attention is drawn.
- Most common use is in making the title or heading noticeably bigger than the body text.
Contrast in Weight:
- Describes how bold type can stand out in the middle of the lighter type of the same type.
- Using bold, rulers, spot, and squares provides a "heavy area" for a powerful point of visual attraction or emphasis.
Contrast in Form:
- Distinction in lowercase and uppercase/roman letter and italic.
Figure 1.4 | Contrast / Structure Example / Week 5 (24/10/24)
Contrast in Structure:
- Different letterforms and different types of typefaces.
Contrast in Texture:
- By putting together contrasts in size, weight, from, and structure, and applying them to a block of text on a page, there is contrast in texture..
- Texture is the way the lines look of type look as a whole up close and in the distance.
Contrast in Direction:
- The opposition between vertical and horizontal, and the angles in between.
Figure 1.7 | Contrast / Color Example / Week 5 (24/10/24)
Contrast in Color:
- The use of color is suggested that a second color is often less empathetic in values than plain black and white.
Figure 1.8 | Form Example / Week 5 (24/10/24)
Form
- Overall look and feel of the elements that make up typographic composition.
- Plays a role in visual impact and first impression.
- Leads the eye from point to point, entertains the mind and often the most memorable
Organisation
Gestalt Theory:
- Emphasizes that the whole thing is greater than its parts.
- In Design, the components/elements that make up the design is only as good as its overall visual form.
- While each component may be functional at an elemental level, the sum of its parts is not greater than the whole or overall form.
- States Elements that are close together tend to be perceived as a unified group.
- States Elements that are similar to each other tends to be perceived as a unified group.
- Holds that humans tends to perceive each of two or more objects as different, singular, and uninterrupted object even when they intersect.
- 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.
- To ensure awareness and inform your work process.
2. Instructions
3. Task 2 | Part A | Key Artwork
Mind Mapping / Inspiration
We were instructed to create a mind map about ourselves in order to determine the type of key artwork that I should make.
%20(1).png)
Figure 2.0 | Moodboard #1 / Week 4 (21/10/24)
I made another moodboard in order to see where I should go with my key artwork.
Sketches
Chosen Keywords: Formal, Flow, Simple
I decided to go for these words due to thinking it is what suited me best personality wise. I wanted to convey the formal and flow parts while making some simple sketches to see if it'll be good. My intention was to see if I could make a unique sketch that could describe my flowiness and exploration of how I can change what seemed to be normal letters. I used Clip Studio Paint
I decided to make more sketches during the tutorial after getting feedback from Mr. Vinod that I should do some research on the words I have chosen the most for the words, which was Flow.
Below are the designs that I ended choosing out of all of the sketches.
I decided to do choose the bottom text for the digitization.
Digitization
I started the digitization process by taking the sketches to Illustrator and started to make a cohesive and more structural version of my chosen design.
I decided to keep the general structure of the sketch while adding a few new points that would give the design more of a flow and structure with the lines of the letters. It was very imbalanced but it worked as a base for the idea.
I adjusted the width and size of the design to be thinner rather than the thick lines it had before. I also adjusted the letter "D" to be bigger to make it look as equal as the other letters in the design. I also tried to make it so that the letter "A" look similar.
After a suggestion from Mr. Vinod, I tested out his method to improve the design by reusing parts and morphing it in order to make a more consistent pattern for the letters. I tested it out with another way of doing flow but ended up preferring the refined version of the original design.
Color Application
For the color palette, I used the websites like Adobe Color and Color Hunt in order to find a suitable palette for my design. I have selected multiple to see if they had enough contrast and if they looked good.
This took very long due to the fact that there were many palettes I could choose from, but in the end I chose the bottom palette after testing it out.
Below is the chosen Color Palette:
Final Part A | Key Artwork
Task 2 | Part B | Collateral
Key Artwork Animation
I used Adobe After Effects in order to animate my Key Artwork. I was a bit lost on how I should animate my wordmark but I searched up some tutorials online to give me some inspiration on what I should do.
The process of it was to put the Stroke Effect into every one of the letters after having separated them into layers with Illustrator in order to give the effect of the words coming out in strokes as I intended for it to. In order for this to happen, I had to draw over the words and put it under "Reveal Original Image" before putting the timestamps of "End" to give it its movements.
I removed the middle line that connects my original design together in order to be able to animate a line circling around my wordmark before entering the wordmark and completing the design. For this, I used the "Trim Paths" Effect on the line to have a delayed line that can show "Flow."
Below was the end result of the initial animation:
I wasn't satisfied with it so I started adjusting the lines to move as smooth as I could possible make it, while letting the line in the middle of the design get a sort of "pushing in to go to other side" feeling. I also noticed that the stroke effect caused part of the design to be missing, so I did what I could to fix it.
Below is the final Animation of the Key Artwork:
Collateral & Mockups
I found product mockups on MockupTree & Mrmockup to use for this part of the assignment. I have chosen cosmetic bottles, a pouch bag and tote bag as my collateral items.
Logo Making
For this, I felt that I had to come with a logo that could encapsulate the wordmark that I have made previously. I decided to rearrange and remove some parts of my wordmark to see what could be fit as a logo.
I ended up making this logo with the "A" letter of my wordmark and keeping what I thought to be the iconic line cutting across it. I tried other ways to utilize other ways of making a logo with my wordmark and this is what was best.
However, I realised that it clashed a lot with the wordmark itself, almost indistinguishable, so I decided to explore it a little more and thought about other ways to utilize parts of the design. In the end, I decided to focus on the aspect of the line cutting through while maintaining the main part of my wordmark, which was the two letters "A"and combined them.
Mockups
I made some designs that I believe would fit for the mockups that I chose and looked at many references online to see what they did to make their products look presentable. I tried to put together the logo multiple times I have made in order to produce a design for the tote bag.
I researched how some shampoo bottles do their placements when it comes to labelling their bottles and found that this worked best for my mockup. The reason there are lines in the middle is due to the fact I felt that it was too empty in the middle, so I decided to add the iconic lines of my wordmark to maintain the flow of the design.
For the Pouch, I found that most of the time, companies would just paste their wordmark and logo alongside the item.
Identity Expansion & Instagram Tile Design
I decided to recolor the tote bag design and make it bigger in order to make it so that it could be one of the extensions to the instagram page.
For the identity expansion, I first took a selfie of myself in order to work on it. I then turned it black and white in Photoshop and proceeded to add a design of my wordmark in the background in order to make it fit my page.
Below is the finalized version of my Instagram feed layout.
Final Part B | Collateral
Figure 3.20 | Key Artwork Animation / Week 9 (26/11/24)
4. Feedback
Week 5
General Feedback:
- Look up inspiration on the Internet to go with Flow.
- Don't include Negatives of Your Personality in your Wordmark
Specific Feedback:
- Don't try to find a "yes" answer for your design
Week 6
General Feedback:
- Look at some fonts and adjust some of your letters.
- Get a striking color.
Specific Feedback:
- Structure your words more.
Week 7
General Feedback:
- Absent
5. Reflection
Experience:
This task was rather difficult for me. I have been feeling pretty exhausted and mentally tired during this time, so I couldn't keep up at this task even during Part A. Mr. Vinod did provide me with good advice when I did manage to meet the expectations of my work. I spent a lot of time trying to find the best collateral I could even though I had to start from scratch again and again. In all honesty, I'm just glad to be done and move on to my next task. I'm so tired.
Observation:
I observed that I often fall apart under lots of stress. I also learned how hard it was to choose a color palette that would be able to fit into the task at hand. It was hard to pick a color that could truly stand out.
I learned how to animate a little more using After Effects. I learned the importance of a color and how important it was to keep track of your work.
6. Further Reading
For this Further Reading, I decided to read Part 2 of The Vignelli Canon.
According to the book, Color is most often used as a Signifier or Identifier of the subject. It's not used in a pictorial manner generally so colors like the three main colors like "Red, Blue, and Yellow" are preferred. Colors are used to convey a spectrum of moods, feelings, passions, and more but for typefaces, it is important to limit and articulate the palette in order to send the message in the clearest and most understandable way.
Appropriateness is one of the things that a designer should take note of during choosing color for type on things.
Any kind of publication has different layout requirements. It usually reflects the interpretation of the designer.
Most publications are composed of text, images and captions and the task of the designer is to sift through the images to select those which best portray the essence of the content and possess the quality of becoming an icon. An icon is an image that expresses its content in the most memorable way.
The notion of identity and diversity is a recurrent theme in both two and three dimensional design. In a Corporate Identity Program enough diversity must be provided to avoid sameness and to increase attention.
Too much diversity creates fragmentation -a very common disease of badly designed communication. Too much identity generates perceptive redundancy and lack of retention. Therefore, it is necessary to achieve the proper balance between those components, or to offer enough flexibility in any given design solution to overcome those pitfalls.
Comments
Post a Comment