Advanced Typography Task 2(A) and 2(B): Key Artwork & Collateral
26/4/2023 - 9/6/2023
Edwin Choo Quan Rong / 0348305 / Bachelor of Design
(Hons) In Creative Media
GCD 61104 / Advanced Typography
Task 2(A)
and 2(B): Key Artwork & Collateral
INSTRUCTIONS
Fig 1.1- Key Artwork Sketches (2/5/2023)
Fig 1.6 - Chosen color palette (10/5/2023)
Fig 1.7 - Testing color palette with key artwork (13/5/2023)
Fig 1.8 - Full Collateral 3x3 (4/6/2023)
Fig 1.9 - Collateral making process (4/6/2023)
Fig 2.0 - Animated GIF for Key Artwork (7/6/2023)
Fig 2.1 - After Effects Process (7/6/2023)
Fig 2.2 - Instagram Display of Key Artwork + Collateral (9/6/2023)
Instagram Link
Fig 2.3 - Final Key Artwork Collateral (JPEG and GIF) (7/6/2023)
Fig 2.4 - Final Key Artwork Collateral PDF (7/6/2023)
Observations
I noticed with brands that are popular in today's times usually includes one to two colors and these colors would contrast well with each other. The brand is simple and easy to visualize in your mind after looking at it for a few seconds. This influenced the design process of my key artwork to create something that's not too overwhelming with the visuals. Collateral wise, I saw some good designs of collateral integration with brands. The way they integrate expressively showcases the brand in multiple different products but relating of the same field, for example street punk aesthetic with skateboard, spray cans, water bottles, caps etc. This made me thought of what my brand identity could be and finding the collateral that relates to that brand identity.
Findings
There are multiple combinations of examples out there
in regards to making a cohesive collateral showcase. It
is interesting to analyze the style of collateral and
how it is done, then to try it yourself and realize its
not as easy as it looks. Each brand has a unique style
or feature that makes it memorable, and thus to make our
own brands memorable, we got to develop something unique
as well.
FURTHER READING
Fig 3.0 - Typography Referenced by Hailey et. al. (2012) (9/6/2023)
Lectures
Lecture notes can be viewed here.
Task 2(A): Key Artwork
26/4/2023 - 10/5/2023
Project Brief: Key Artwork is a lettering, a mark, a brand, a logo. The key artwork is used for collaterals such as t-shirts or label pins but also acts as an identification of a person. We are tasked to create a key artwork using our names, nicknames or pseudonyms in Task 2(A) using certain keywords that describes ourselves to give us direction.
Lecture notes can be viewed here.
Task 2(A): Key Artwork
26/4/2023 - 10/5/2023
Project Brief: Key Artwork is a lettering, a mark, a brand, a logo. The key artwork is used for collaterals such as t-shirts or label pins but also acts as an identification of a person. We are tasked to create a key artwork using our names, nicknames or pseudonyms in Task 2(A) using certain keywords that describes ourselves to give us direction.
Fig 1.1- Key Artwork Sketches (2/5/2023)
These are the sketches I made for the first week. The design decision
for these sketches were for a brand. For example, the first one was
made with an architecture brand in mind. The second one was for a
baby/children's brand, the third one was for a luxury design brand and
the fourth one was for a mouse brand.
After getting peer feedback 1 week later, here are some key points regarding the sketches, number sequence goes left to right.
Fig 1.2 - 2nd week sketches (9/5/2023)
Fig 1.3 - Key artwork development (10/5/2023)
Fig 1.4 - Final Key Artwork JPEG (10/5/2023)
Fig 1.5 - Final Key Artwork PDF (10/5/2023)
After getting peer feedback 1 week later, here are some key points regarding the sketches, number sequence goes left to right.
- First sketch needs refinement along the edges to be more structured; pseudonym needs 3 letters minimum so an E itself doesn't meet the requirements
- Second sketch's "head" using E and D is too big
- Third sketch's thickness and thinness levels are to be balanced. Use negative space to acquire good spacing.
- Fourth sketch has strokes that are too thick and too thin. Balance these strokes out and utilize negative space to give breathing room in the design.
At the same time, Mr. Vinod advised us to design our key artwork
using 1 to 2 words that describes ourselves. Thus, I gave some
thought on what keywords that describes myself which I can use.
However this process is what hindered my development for a long time
as the keywords that describe me are not something easily conveyed
visually, so I had to go through multiple keywords to find one that
I can translate into visual and being simple to understand.
Fig 1.2 - 2nd week sketches (9/5/2023)
The keyword that I found was "observant" as I tend to look at the
small details and realize things that goes unnoticed for others.
The idea is to showcase observance visually, one way to do it is
through a magnifying glass so here's where I start to figure out
how to implement a magnifying glass into my name.
The idea on the top right was to symbolize a magnifying glass with the letter D with the letter E symbolizing a key, "a key to all your answers". However, the magnifying glass doesn't symbolize the letter D well when it is a circle, and vice versa for the magnifying glass when using the letter D.
The idea on the top right is meant to be a bookcase to symbolize "knowledge", the combination of the letters felt off to me as the bookshelf was not clearly shown and I was leaning towards the magnifying glass idea anyways so I chose to develop that.
Then the thought struck me, since my name has an "i" in it, why not make that the magnifying glass?
The letters were designed in a ordered manner without curves to showcase my structured thoughts when analyzing and reasoning.
The idea on the top right was to symbolize a magnifying glass with the letter D with the letter E symbolizing a key, "a key to all your answers". However, the magnifying glass doesn't symbolize the letter D well when it is a circle, and vice versa for the magnifying glass when using the letter D.
The idea on the top right is meant to be a bookcase to symbolize "knowledge", the combination of the letters felt off to me as the bookshelf was not clearly shown and I was leaning towards the magnifying glass idea anyways so I chose to develop that.
Then the thought struck me, since my name has an "i" in it, why not make that the magnifying glass?
The letters were designed in a ordered manner without curves to showcase my structured thoughts when analyzing and reasoning.
Fig 1.3 - Key artwork development (10/5/2023)
After showing my key artwork to Mr. Vinod, he told me to make
all the letters capital except for the magnifying glass to match
with the letter E. I turned the magnifying glass into pixel
style as the rounded shape looks weird when paired with the rest
of the letters. The final iteration is the one at the bottom
right.
Fig 1.4 - Final Key Artwork JPEG (10/5/2023)
Task 2(B): Collateral
10/5/2023 - 9/6/2023
Project Brief: An Instagram account is to be created to store the collaterals we create using our key artwork. A minimum of 9 photos are needed for a 3x3 layout with one of the posts being an animated gif of the key artwork.
10/5/2023 - 9/6/2023
Project Brief: An Instagram account is to be created to store the collaterals we create using our key artwork. A minimum of 9 photos are needed for a 3x3 layout with one of the posts being an animated gif of the key artwork.
Fig 1.6 - Chosen color palette (10/5/2023)
My key artwork looked like it could fit well with tech related
collaterals, so I chose dark blue to light blue for my color palette
which got approved by Mr. Vinod, I went with it because personally I
like the color blue too.
Fig 1.7 - Testing color palette with key artwork (13/5/2023)
The experimentation with my color palette combination and other
ideas for collateral. I liked the color combination of the lightest
shade for key artwork against the darkest shade for background. I
used this color mostly when developing my collaterals.
Fig 1.8 - Full Collateral 3x3 (4/6/2023)
Fig 1.9 - Collateral making process (4/6/2023)
I used the perspective tool in Illustrator as well as some
Photoshop tools to create my collateral. Photoshop was used to
erase certain logos from the collateral as shown below.
Fig 2.0 - Animated GIF for Key Artwork (7/6/2023)
Fig 2.1 - After Effects Process (7/6/2023)
This animation was done in After Effects utilizing the skills
I picked up from previous semester subjects Digital
Photography and Imaging and Information Design. I worked with
anchor points, position and rotation to create the animation,
with timed keyframes and effects for the letters to appear.
Fig 2.2 - Instagram Display of Key Artwork + Collateral (9/6/2023)
Instagram Link
Fig 2.3 - Final Key Artwork Collateral (JPEG and GIF) (7/6/2023)
Fig 2.4 - Final Key Artwork Collateral PDF (7/6/2023)
Final Task 2 Submission
Key Artwork B&W (1080 X 1080 pixels)
Key Artwork Color Variant 1 (Dark Against Light) (1080 X 1080 pixels)
Key Artwork Color Variant 2 (Light Against Dark) (1080 X 1080 pixels)
Key Artwork Animation GIF (1080 X 1080 pixels)
Final Key Artwork
Chosen Color Palette
Collateral Showcase 1 (1024²px @150/300ppi)
Collateral Showcase 2 (1024²px @150/300ppi)
Key Artwork B&W (1080 X 1080 pixels)
Key Artwork Color Variant 1 (Dark Against Light) (1080 X 1080 pixels)
Key Artwork Color Variant 2 (Light Against Dark) (1080 X 1080 pixels)
Key Artwork Animation GIF (1080 X 1080 pixels)
Final Key Artwork
Chosen Color Palette
Collateral Showcase 1 (1024²px @150/300ppi)
Collateral Showcase 2 (1024²px @150/300ppi)
FEEDBACK
Week 5 General Feedback:
Design the key artwork based on yourself
based on one or two words. Make sure the key
artwork resembles you without much thinking.
If it's easy to write down/draw after
looking at it for a few seconds, the higher
chance for it to be a decent key artwork.
Specific Feedback:
Take note of stroke size consistency and
thickness vs thinness. Balance out negative
and positive spaces. Refine strokes to be
clean and precise.
Week 6 General Feedback:
Monograms should be 3 minimum. These should
be made well as only having 3 letters makes
it difficult to showcase character.
Minimalism as a concept is dangerous as the
concept when done to extreme levels
basically killed the uniqueness of the
design giving it character in exchange for
refined but soulless design.
Specific Feedback:
Designing to convey a message about oneself
lies the challenge in converting something
explained verbally to a visual form. Sizing
of words to be consistent with each other.
Week 7 General Feedback:
Key artwork first to be tested in black and
white before choosing a color palette with
strong colors that makes the design stand
out. Collateral for the key artwork should
fit suitably with the aesthetic and purpose
of the brand. For example, a computer brand
for a blocky, tech styled key artwork.
Contrast helps in designing the artwork for
the Instagram posts.
Specific Feedback:
Capitalize the rest of the letters except
"i" in key artwork to match the height of
the "E". Color palette use strongest color
for the main design, with light colors in
smaller areas like the reflection of the
magnifying glass for contrast.
Week 8:
Independent Learning Week.
General Feedback: Experiment with
tech related collateral for key artwork.
Week 9 General Feedback:
Ensure collateral used is related to your
brand identity/style. Eg using a tech-styled
logo for street collateral like skateboards
wouldn't fit well.
REFLECTION
Experience
Creating a key artwork that is simple and
conveys across a message about yourself is a
work process that requires constant iterations
and focus. The mark itself won't be developed
within a day, maybe a week, but with feedback
it helps to refine the key artwork. The
process work for finding collateral took a
long time as it needs to check three things:
desired collateral, desired background and
desired space to input key artwork. This goes
with color palette theme of the Instagram
account as well since it would be weird to
have a 3x3 collateral of multiple different
colors that aren't cohesive with one another.
Thus comes the challenge in finding, or
creating the collateral theme needed for the
task.
Observations
I noticed with brands that are popular in today's times usually includes one to two colors and these colors would contrast well with each other. The brand is simple and easy to visualize in your mind after looking at it for a few seconds. This influenced the design process of my key artwork to create something that's not too overwhelming with the visuals. Collateral wise, I saw some good designs of collateral integration with brands. The way they integrate expressively showcases the brand in multiple different products but relating of the same field, for example street punk aesthetic with skateboard, spray cans, water bottles, caps etc. This made me thought of what my brand identity could be and finding the collateral that relates to that brand identity.
Findings
FURTHER READING
Fig 3.0 - Typography Referenced by Hailey et. al. (2012) (9/6/2023)
In the section Typographic Pairing under Typeface Principles, the
information elaborates on how different typefaces are paired with
each other. Contrast should be emphasized more over similarity.
The pairing of the typeface has 3 focus points: the type relates
to the content, the type's readability is clear and the type
conveys any conceptual undertones clearly.
A combination of typefaces can be used strategically to emphasize certain information to the reader. According to the example from the book, the business card Linneas Lights in Burgues Script looks fancy, delicate and classy but it falls short on instant readability, as some people may take awhile to read it. This is contrasted with the sans-serif font: Engravers' Gothic which is used for the business holder's name. The contrast between the elegant but low readability font with the simple but high readability font enhances the information needed to convey to the viewer, a brand design identity and the key information being the name.
I thought this correlates with the process of creating our key artwork as contrasting and utilizing different type styles to convey concepts of our brand is what we needed to do, just like the concept explained in the book regarding the pairing of typefaces.
A combination of typefaces can be used strategically to emphasize certain information to the reader. According to the example from the book, the business card Linneas Lights in Burgues Script looks fancy, delicate and classy but it falls short on instant readability, as some people may take awhile to read it. This is contrasted with the sans-serif font: Engravers' Gothic which is used for the business holder's name. The contrast between the elegant but low readability font with the simple but high readability font enhances the information needed to convey to the viewer, a brand design identity and the key information being the name.
I thought this correlates with the process of creating our key artwork as contrasting and utilizing different type styles to convey concepts of our brand is what we needed to do, just like the concept explained in the book regarding the pairing of typefaces.
Comments
Post a Comment