Advanced Typography / Task 2A & 2B: Key Artwork & Collateral

28.09.22 - 04.11.22 (Week 5 - Week 10)

Janaan Ahmed (0353333)

Advanced Typography / BDCM

Task 2A & 2B: Key Artwork and Collateral

JUMP TO:

Lectures

LECTURE #3: CONTEXT & CREATIVITY

Context here means historical context.

Handwriting

Why is handwriting important in the study of type/typography?

The first mechanically produced letterforms were designed to imitate handwriting. It forms the conventions that mechanical type would try to mimic.

The tools and materials that were used contributed to the unique characteristics of the letterforms created.

Tools: sharpened bones, charcoal, plant stems, etc
Materials: clay, papyrus, animal skins, etc

Evolution of the Latin Alphabet

The documentation of written language during the Proto-Sinaitic Era (c. 1750 B.C.E.) were pictorial representations of things.

This changed with the Phoenician letterforms (c. 1000 B.C.E.), when documentation of language was based around sounds. Phoenician letters then influenced the Greek, Latin, and the Roman alphabet.

Cuneiform (c. 3000 B.C.E.)

Earliest system of writing, used in a number of languages (34 c. B.C.E. to the 1st century C.E.).
Distinctive wedge form: a result of pressing blunt ends of reed stylus into wet clay tablets.
Characters evolved from pictograms
Written from left to right.

Hieroglyphics (2613–2160 B.C.E.)

The Egyptian writing system is fused with the art of relief carving and a mix of rebus and phonetic characters.

Hieroglyphic images can potentially be used as:

Ideograms: to represent the things they actually depict.
Determinatives: to show that preceding signs are meant as phonograms to indicate general idea of a word.
Phonograms: to represent sounds that 'spell out' individual words.

Early Greek / 5th C. B.C.E.

Phoenician letters were built on Egyptian logo-consonantal systems. They create a phonetic alphabet (22 letters).
Greeks adopted the Phoenician system and added necessary vowels. The words were in rows, however the reading rhythm followed the boustrophedon format.
Early forms were drawn freehand and had no serifs.
Over time, strokes grew thicker and serifs appeared. New forms were used for inscriptions throughout Greek empire (model for formal lettering in imperial Rome).
Roman inscriptional letters: written with a flat brush held at an angle, then carved into stone with mallet and chisel. Calligraphers and type designers mimic these model forms.

Roman Uncials (4th c. C.E.)

Roman letters became more rounded (humanistic forms); curved form= less strokes= faster to write.

English Half Uncials (8th c. C.E.)

Uncials evolved into a more slanted and condensed form.
Carolingian Handwriting Reform was introduced to address devolving writing (from evolution of English and Irish uncials).

Carolingian Minuscule

Language was standardised during Emperor Charlamagne's reign.
Used for all legal and literary works, hence unified communication across European empire.
Became the pattern for Humanistic writing – is the basis for lower-case roman type.

Black Letter (12-15 c. C.E.)

Gothic: artistic expression of the middle ages.
The vertical was the dominant line in Gothic architecture (supplanted the horizontal).
Blackletter characterised by tight spacing and condensed lettering.

Italian Renaissance

At the peak of Gothic spirit in medieval Europe, Humanist scholars revived round forms.

Movable Type (11th c. – 14 c. )

China attempted to use moveable type for printing but failed due to number of characters. The Koreans established a foundry to cast moveable type in bronze.

lecture yet to be completed

Instructions

TASK 2(A) - KEY ARTWORK

For this task we are required to create key artwork (wordmark/lettering) that reflects our identity using our initials (JA), first name (Janaan), or petname . This key artwork will be used on collateral as part of task 2B.

Ideation + Brainstorming

I have decided to use a nickname that is associated with my 'artsona'(?): Jeiny. Our wordmark could reflect anything about ourselves, however we were advised to narrow things down. I thought of 3 categories to choose from and further narrowed things down into what I could possibly work with:

personality: generally carefree, curious, fun-loving
cultural: maldivian - sea, thaana script, handicraft (such as wood carving?)
interests & aesthetics: animated movies/series, dessert, pixel art, cottagecore

I then searched Pinterest for some inspiration and to look at how wordmarks are crafted.

Fig 2.1: Visual reference gathered from Pinterest - (05.10.22)

Admittedly, I was still undecided about which direction I wanted to head towards, so I thought to make some sketches first and then deliberate:

Fig 2.2: Wordmark sketches - (19.10.22)

I found myself really wanting to emulate maldivian typography into my wordmark. Sketch 3A and 3B are loosely based off of some very very basic features of 'thaana' script, namely its slanted and rounded characters with long descenders. However I believe my execution is extremely lacking.

Fig 2.3: (top) Newspaper headline clippings; (bottom) modern thaana - (19.10.22)

Fig 2.4: 'Thaana' structure - (19.10.22)

I then came across another older version of the script, called 'Athireege Thaana', which I found incredibly beautiful (despite finding its lack of diacritics and overall structure too obscure to comfortably read):

Fig 2.5: 'Athireege Thaana' - (19.10.22)

A(n extremely) summarised bit of history for the interested:

From a bit of reading, I learned that this typeface was developed from the 4 letters ( alif, tha, ra, gaaf), which I have circled in red in the figure above. Essentially, these letters were used to carve out 'Athireege' on a 'dhoani' (traditional boat), which was then gifted to the president of the time (Ameen Didi). Athireege was the name of the president's household. Unfortunately there is no record of the name of the person who originally carved these letterforms. However, the typeface was completed by a renowned Maldivian scholar of the time, who was commonly named 'Thuthu Saahibu'. 'Athireege thaana' is alternately also called 'Vadaankashi Thaana', named after the tool 'vadaankashi' that was used to carve the letterforms.

End

The most striking feature to me is how they almost emulate numbers on a calculator, and as they were also reminiscent of pixel fonts, I thought it might be exciting to attempt implementing features of 'Athireege Thaana' into my wordmark:

Fig 2.6: (Left) my attempts; (right) Athireege thaana - (19.10.22)

I then shortlisted the wordmarks I liked best to digitise:

Fig 2.7 : Shortlisted wordmarks (20.10.22)

I was insistent on using the circle in the J. I felt it was a fun way to depict my eyebrows (lol) which I consider to be one of my defining physical features.

Digitization

I used a pixel font called W95FA for two wordmarks, and the pen tool (and other tools) to trace the other two.

Fig 2.8: Development of design 1 & 2 - (21.10.22)

Fig 2.9: Development of design 3 & 4 - (21.10.22)

Fig 2.10: Shortlisted digitisations - (21.10.22)

At this stage I found the shorter wordmark to be more memorable and also more legible from further away. I also like the flower motif since:

it represents how my daydreaming nature influences the way I observe my surroundings.
I use the 🌸 emoji quite often to refer to myself

Before moving on, let's add some colour.

I spent an ungodly amount of time trying to pick a palette. Indecisiveness is definitely my weakness oop.

Fig 2.11: Chaos is my middle name D: (23.10.22)

Final Outcome:

Fig 2.12: Final Wordmark in b&w [JPEG] - (23.10.22)

Fig 2.13: Final Wordmark; colourised [JPEG] - (23.10.22)

Fig 2.14: Final Wordmark [PDF] - (23.10.22)

TASK 2(B) - COLLATERALS

For this next part, we are to:

Animate our key artwork design ( 800 x 1024 px / w x h)
Expand our key artwork design and apply it onto relevant collateral
Create an Instagram account to showcase our brand

1. Animation

At first I was quite lost on how to animate my wordmark, and so watched several tutorials on YouTube. The basic idea I have is to make the best of the key feature of my wordmark, the eye. I had to do something for the eye to at first be recognised as one. The basic run-down:

The 'J' appears in the middle of the screen
The eye looks around
The J (along with the eye) moves to reveal the other letters (the full wordmark).

Making layers for each 'object' on Illustrator

All the parts that will be animated as singular objects are ungrouped converted into layers, and labelled accordingly.

Fig 2.14: Preparations on Illustrator (25.10.22)

Using the 'null-object' feature to move and scale all parts

After converting into the file into shape layers, I applied the null-object feature to allcenter my mark.

Fig 2.15: Attaching layers to null-object (25.10.22)

3. Colour and speed graphs

These were 2 other new features that I learned about (yes only now T_T). I wanted the 'N' and 'Y' to change colour as they make their appearance for a sheen-like effect. The colour keyframes are under the 'content' of the object. Also I adjusted the speed graphs for almost of the objects (after applying easy ease in), and wow is there a huge difference in the movement.

Fig 2.16: For future reference, colour keyframes and speedgraphs - (25.10.22)

I also wanted to experiment with a change in background colour to really emphasise the 'impact' of the 'N' and 'Y' as they move across the screen:

Fig 2.17: Without background colour change - (25.10.22)

Fig 2.18: With background colour change -(25.10.22)

While I definitely like the effect, I think it takes away from the softness of the brand image I'm going for. I'll just shelf that idea for another project.

Final Outcome:

Fig 2.19: Final Animated Key Artwork [GIF] - (26.10.22)

2. Collateral and Mockups

This was the hardest part of this task that I kept getting stuck on. I struggled a lot to expand on my wordmark design in a way that didn't look so busy.

Fig 2.20: Failed Attempts - (29.10.22)

It was at this point that I realised that it could help to first look for the mockups so I knew what dimensions to make the designs fit into. Apart from a stamp and flatlay, the mockup items I selected are:

Phone covers
A tote bag
Stickers
Sketchbooks

Fig 2.21 : Mockup Designs (03.10.11)

Additionally, we also have to include a photo of ourselves, so I edited in the flower element that's been utilised in most of the mockups into my picture.

3. Deploying on Instagram

At this stage we just have to make a feed plan/arrangement:

Fig 2.22: Arranging feed layout - (03.10.22)

Final Outcome:

Instagram Link: https://www.instagram.com/jny.design_/

Fig 2.23: IG profile screenshot

Fig 2.24: IG Post 1: Logomark [JPEG] - (04.11.22)

Fig 2.25: IG Post 2: Animated Logomark [GIF] - (04.11.22)

Fig 2.26: IG post 3: Rubber stamp [JPEG] - (04.11.22)

Fig 2.27: IG post 4: Totebag [JPEG] - (04.11.22)

Fig 2.28: IG post 5: Self-Portrait [JPEG] - (04.11.22)

Fig 2.29: IG post 6: Phone Covers [JPEG] - (04.11.22)

Fig 2.30: IG post 7: Sticker [JPEG] - (04.11.22)

Fig 2.31: IG post 8: Sketchbooks [JPEG]- (04.11.22)

Fig 2.32: IG post 9: Stationary flatlay [JPEG ]- (04.11.22)

Fig 2.33: Task 2B: Final Outcome [PDF] - (04.11.22)

Feedback

WEEK 6 (05.10.22)

General Feedback

Be vary of form legibility at small sizes
Draw a border around your mark to evaluate the impact of white space in the overall form
A stable form fits within a square/circle i.e. they should optimise space, i.e. the proportionality of the form is important
Your mark should be a codification of what you want to present to the world
You should rationalise the form/ shapes that you create

Specific Feedback

WEEK 7 (11.10.22)

General Feedback

When dealing with curved strokes sitting on a baseline, it needs to have an overshoot to achieve optical balance
The expansion of your design lies on what's relatable to your mark.

Specific Feedback

A simple way to expand your mark is to make a part of it larger in scale. Another way is to take portions of the form and repeat. Be wary of pattern becoming too overwhelming.

WEEK 8 (19.10.11) - Independent Learning Week

Reflection

Experience

I found this task to be overall very enjoyable because there were so many different aspects to it. Utilising the mockups and seeing a simulation of everyone's design certainly was very fun and interesting! Though very explorative and enjoyable, I often found myself struggling to keep up with everything, and especially felt lost during the design expansions. Even though I was constantly behind on my work I tried my best to listen in on Mr. Vinod's feedback to everyone, so that I can be analytical towards my work.

Observation

It certainly was not an easy thing to choose what to portray to the world through your logomark. I think a lot of us (including myself) tried to incorporate too much into our wordmark, so much so that there was no clear meaning that came out of it. I also observed that I sometimes worked very mindlessly, often hoping that something good comes out of what I'm doing. Perhaps this is why I struggle to produce polished work. I really admire how methodical and organised a lot of my peers are in their work, and it's definitely something I need to develop myself.

Findings

I'm constantly learning about the importance of being intentional with what you put into a design work. This task in particular has taught me that we must able to rationalise what we put into our work, and evaluate what role and purpose they play. I believe I still have a LOT to improve on, especially in terms of decision-making within the context of design.

Janaan Ahmed (0353333)

Search This Blog

Advanced Typography / Task 2A & 2B: Key Artwork & Collateral

Comments

Post a Comment