ADVANCED TYPOGRAPHY: TASK 2A / KEY ARTWORK AND COLLATERAL

25/04/2022 - 23/05/2022 (Week 05 - Week 09)

ALICIA TENG YI LING / 0345159 / BDCM

Advanced Typography

Task 2A / Key Artwork

---

LECTURE

Lectures 1-4 in exercises

Week 05: Perception and Organisation

Contrast

Rudi Ruegg

Fig 1.1 Ways Contrast can be applied in Typography

As stated by Ruegg, contrast can be applied in typo by changing weight, font, style, size, colours & typeface.

Carl Diar

On the other hand, Carl Diar points out seven ways to apply contrast in typography.

• Size
• Weight
• Contrast of Form
• Contrast of Structure
• Contrast of Texture
• Contrast of Colour
• Contrast of Direction

Size

By contrasting in size, the viewer's eyes will be more drawn to a certain point (to the bigger text)

Weight

The more heavy weighted type will contrast and is more visible compared to a lighter weight of the same type. To create a point of emphasis, non-objective elements and boldened text can be utilised

Form

Contrast in form can be created by the distinction between uppercase and lowercase letters as well as changing the style of the text from roman to italic or condensed and expanded versions of the typeface

Structure

Different types of typefaces creates a contrast in structure due to different letterforms

Texture

Texture is the way lines of a text look as a whole from close up to far away. It can be created by utilising varying sizes, weights, forms and structure

Direction

Contrast of direction is done by changing the orientation of text, whether it is horizontal or vertical

Colour

Contrasting using different colours. You must consider the number of colours being used and hierarchy is created based on where colours are utilised in a piece. 

Form

Form refers the overall look and feel of the elements that create a typographic composition. Effective form in typography should be visually impactful and leave a striking first impression. 

Organisation/Gestalt

• Law of Similarity
• Law of Proximity
• Law of Closure
• Law of Continuation
• Law of Symmetry
• Law of Pragnanz

Fig 1.2 Gestalt Principles
Source: https://chrisbrejon.com/cg-cinematography/chapter-3-gestalt-theory/

Law of Similarity

Similarity refers to any number of features, including colour, orientation, size, or motion. 

Law of Proximity

States that elements which are closer to one another tend to be seen as a group of one. On the other hand, items further apart are less likely to be group 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 Continuation

This law refers to how human minds tend to complete gaps or empty spaces that are present in a picture. 

Law of Symmetry

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

Law of Simplicity (Pragnanz)

Refers to how human minds often perceive complicated shapes in the most simple manner possible. 

---

INSTRUCTIONS

---

TASK 2A: Key Artwork

Visual Research

I like clean looking, minimalist logos with a unique element or twist that reflects the brand. I want to incorporate this into my work and I went to Pinterest to look at some brands or logos that I like and am inspired by. 

Fig 2.1 Inspo #1

Fig 2.2 Inspo #2

Fig 2.3 Inspo #3

Fig 2.4 Inspo #4

As you can see, all of them have similar aspects and look minimalist. The letterforms are often intertwined or connected in some manner with clean, sharp edges.

Ideation & Sketches

Occupation: Skincare Brand Owner

Based on my visual research above, I decided to test out some ideas. I first drew some rough sketches using some possible letter combinations. Starting with my first name and family name (A,T) then my full name initials (A, T, Y, L). I tested out some positions and orientations to get a feel of what I like. I also tried with three letters from my first name (A, L, C).

Fig 3.1.1 Sketches (08/05/2022)

Refinement

I started off by trying some letters in my name: 'A, C, L'. I  was heavily inspired by the Yves Saint Laurent Logo and tried testing out looks and connecting the letters in some manner. The font I am using is a Serif and is called 'SAONARA'. It's a font I personally like using for my own projects and I thought that it would suit the aesthetic I am going for. 

I am using Adobe Illustrator for this process.

Fig 3.2.1 Attempt #1

For my second attempt, I tried the letters 'A' and 'T' (the first letters of my given and family name) as well as the letters 'A, T, Y, L' which are the first letters of my full name. 

Fig 3.2.2 Attempt #2

Personally, I like the third image in my second attempt the most. I think the form looks interesting and I will proceed with refining this one and making it more unique to myself.

Key Artwork Progression

After listening to week 7's feedback, I selected two of my favourite forms and began to develop them further.

Fig 4.1 Version #1 Progression (21/05/2022)

After a testing, I quickly realised that this might be too complicated looking for the clean, minimalist idea I was going for. So, I decided to take the first attempt (Fig BLAH), as Mr. Vinod suggested and develop from there.

Fig 4.2 Version #2 Progression (21/05/2022)

I changed the orientation of the letters like my other attempt. In the later adjustments, I tried adding a circle background to it to better display the form of the key artwork through contrast. I added a small dot to balance it out as it looked like it was leaning heavily towards the left side due to the slant of the 'A' letter. 

Fig 4.3 Updated Key Artwork Version #1 (22/05/2022)

Fig 4.4 Updated Key Artwork Version #2 (22/05/2022)

These are the versions that I decided to refine and select for the final submission. I like the small circle on the right, it rounds out the form and overall balance. Version #2 is interesting because the black background emphasizes and clearly shows the form of the piece which is harder to see on a white background because of how thin some parts of the artwork is.

Update after Feedback (23/05/2022)

After week 9's feedback, I increased and decreased the height of the letter 'T' to match that of A as Mr. Vinod said that the difference between the two is too subtle where it looks like it could be a mistake so I tested both versions out. I ended up liking the version where the two letterforms had the same height as it looked neater and more 'whole' in a way.

Fig 4.5 Tall 'T' Version (28/05/2022)

Fig 4.5 Chosen Key Artwork Version #1 (28/05/2022)

Fig 4.6 Chosen Key Artwork Version #2 (28/05/2022)

Poster Development

Inspiration

To start off, I went on Pinterest to get some ideas for what I wanted my poster to look like. I put some of those below, but the main highlights are gentle, pastel colours, shapes, blurred areas and small text but large titles. Basically, gentle, pastel vibes is what I decided to go for.

Fig 5.1.1 Poster Inspo #1

Fig 5.1.2 Poster Inspo #2

Fig 5.1.3 Poster Inspo #3

Inspo links:

https://www.pinterest.com/pin/718605684307063505/

https://www.pinterest.com/pin/718605684307063514/

https://www.pinterest.com/pin/718605684307080409/

Layout Drafts

I used my key artwork as the focal point and based shapes and words around that centre and basically built my poster from there, adding on new lines wherever they fit and complemented the rest of the design. 

From there, I debated between sticking to my usual aesthetic and trying out something new and 'cuter'. I ended up trying the new, trendy aesthetic and I really liked it. It looks like it would be a minimalist skincare poster and it's simple and easy to read.

Poster Details:

• Key Artwork
• Background Details for aesthetics
• PEAU, New Skincare Line Launch, by Esthetician, Alicia Teng
• Date & Time: 02.05.2022, 11 AM to 3 PM
• Address: Luxembourg Gardens, Jardin Du Sénat, 75006 Paris, France
• Personal Details: 0123456789, @alicia.tengu, alicia.tengu288@gmail.com
• Motto: GIVE YOUR SKIN A LITTLE LOVE

Fig 5.2.1 Poster Layout Drafts (22/05/2022)

The layout that has a blue circle in the middle is a great focal point and I actually quite liked the contrast between the two colours and the way the poster looks but it doesn't give off the vibe a skincare company poster would, it feels more like a graphic design related poster to me.

For the first two layouts, I tried out the usual colour scheme I use for my typography assignments but it really did not fit the calming skincare aesthetic I was going for so I scrapped it. Next, I tried some nude tones and it was a lot better than the last attempt but it looked a little washed out and flat. So, I tried my favourite colour in makeup and skincare, pink. I ended up really liking the way it looked, so I stuck to the pink theme and tested out a more layouts with different pink tones.

Fig 5.2.2 Poster with Grids (22/05/2022)

Fig 5.2.3 Chosen Poster (22/05/2022)

Fig 5.2.4 Poster Colour Palette (22/05/2022)

This is the poster I decided to finalise, I liked the colours and layout the best and it fits the aesthetic I was going for. The white outline ties in the different elements and gives a sense of balance to the overall piece. I chose the word "Peau" to name my supposed new skincare launch because it means skin in French.

I changed the font for information to Futura Book as the previous one was a little too thin and hard to read from a distance. The simple sans-serif typeface also contrasted well with the logo which looks very much like a serif one.

Fig 5.2.5 Poster Mock Up (22/05/2022)

For fun:

This was just for my own entertainment, but I wanted to see how my key artwork and information would look in a graphic design setting with the background being related to skincare photography. It turned out pretty okay in my opinion.

Fig 5.3.1 For Fun Posters (22/05/2022)

Week 9 Update (23/05/2022)

I received feedback for the poster from Mr. Vinod in which he said: remove the line in the letterform 'A' outline and reduce the information text size to achieve more of the minimal look and he would advise not using white as the text colour as the readability is terrible.

Fig 5.4.1 Updated Poster with Grids (28/05/2022)

Fig 5.4.2 Updated Poster (28/05/2022)

Fig 5.4.3 Poster Simulation (28/05/2022)

Animated Invite Process

Before I started my animated invite in Adobe After Effects, I had to separate the layers for each frame, which I initially forgot to do.

Fig 6.1 Separated Layers in Illustrator (22/05/2022)

The animation is being doing using the frame by frame method. It was painful positioning each element in each layer.

Fig 6.2 After Effects Timeline (22/05/2022)

I mostly used position, opacity and scale tools for the transitions and movements of layers. I also used masks and motion blur to blend the frames better and add more movement to the piece. The invite was initially 8 seconds long but I changed it to 10 to allow for more reading time for viewers and to make the loop at the end smoother.

Fig 6.3 Test Logo Animation (22/05/2022)

This is the starting frame in which I tested the logo animation. I initially wanted to try curving the mask to make it look like the logo is being written out but it ended up looking weird so I went with a mask position to 'unveil' the piece from left to right. For the dot on the end, I used scale to make it pop out of nowhere for a bit of dynamic movement so the invite doesn't look too flat.

6.4 Animated Invite (22/05/2022)

I used a lot of swiping motions for transitions between frames and tried to speckle my logo throughout the animation as it is a typography assignment but also because it adds points and a sort of pattern so backgrounds don't look too boring.

I decided to loop the entire piece around because it looks better than abruptly cutting off and I like loops.

Week 9 Update (23/05/2022)

For my animated invite, Mr. Vinod advised me to: refine the frame where it says "YOU'RE INVITED" as it doesn't feel elegant enough to fit the rest of the theme for the my concept. Additionally, to break down the information into segments and prolong the time for ease of readability for viewers. I also had to update the key artwork in the invite after I finalised it this week.

Fig 6.5 Final Animated Invite (28/05/2022)

Collateral

For my collateral, I decided to try out placing my key artworks and sometimes motto on different types of packaging like business cards and papers bags as well as skincare packaging and skincare tools. I felt that these would be most related to my choice of occupation and the logo would look nice on them. I used a combination of Adobe Illustrator and Photoshop for creating the images below.

I utilised warp, skew, and distort to transform the logo so it would bend naturally around the curvatures of the items. Additionally, I played around with drop shadow and inner shadows to add more depth and an indented or carved look into some of the collaterals like the skincare tools (Guasha).I also tried lowering the opacity to allow more of the background texture to peek through so it would look more realistic. 

I stuck to the pink theme and edited some of the images to fit that colour scheme. All the images below are taken from pexels.com. I only later found out (25/05/2022) I could use mockups which was a very painful enlightenment. 

Fig 7.1 Brand Business Card 1 (22/05/2022)

Fig 7.2 Skincare Products and Packaging (22/05/2022)

Week 9 Update:

After I updated my key artwork, the collateral had to be adjusted as well. The first image below was made using a mockup (from: https://mockups-design.com/).

Fig 7.3 Brand Business Card 2 (28/05/2022)

Fig 7.4 Skincare Tonic (28/05/2022)

Fig 7.5 Skincare Tools - Guasha (28/05/2022)

Fig 7.6 Lotion (28/05/2022)

Fig 7.7 Flat Versions (28/05/2022)

Final Task 2A Submission

Fig 8.1 Final Key Artwork Version #1 - JPG (28/05/2022)

Fig 8.3 Final Key Artwork Version #2 - JPG (28/05/2022)

Fig 8.3 Final Poster - JPG (28/05/2022)

Fig 8.4 Final Simulated Poster - JPG (28/05/2022)

Fig 8.5 Final Animated Invite - GIF (28/05/2022)

(I am unsure why the GIF can't play, it might be too big because the size is massive, but if you cannot see it, you will only be able to view it once you download the GIF at this link: https://drive.google.com/drive/folders/1LrlvR765tDD2ku9uMPBk_OnBPP8Ml3Ua?usp=sharing

I am truly sorry for the inconvenience)

Fig 8.6 Final Business Card - JPG (28/05/2022)

Fig 8.7 Final Skincare Tonic Bottle - JPG (28/05/2022)

Fig 8.8 Final Skincare Tools - Guasha - JPG (28/05/2022)

Fig 8.9 Final Lotion Bottle - JPG (28/05/2022)

Fig 8.10 Flat Versions - JPG (28/05/2022)

Fig 8.11 Final Compilation of Key Artwork, Poster & Collateral - PDF (22/05/2022)

---

FEEDBACK

(09/05/2022) - Week 07

General Feedback

• Do not use colours during the key artwork development
• Don't forget to incorporate balance into your forms and don't make it too complicated

Specific Feedback

• The first and most simple one (A, T) is nice and works for my chosen occupation
• Try to find a way to remedy the awkward part of the T that sticks out of the A
• For the attempt I like, try turning it vertically, it might work like that. It kind of looks like a fish when it's horizontal
• Further exploration and research is required

(23/05/2022) - Week 09

General Feedback

• Do not use colours during the key artwork development
• Don't forget to incorporate balance into your forms and don't make it too complicated

Specific Feedback

• Key Artwork
• The difference in height between the 'A' and 'T' letters is too subtle and can be likely seen as a mistake rather than chosen design
• Poster
• Remove the line inside the 'A' letterform
• Would not recommend to use white as the info text colour it's too bright
• Animated Invite
• Update the "you're invited" part as it does not suit the elegant theme that the rest of the invite has
• Break down the information part and prolong the time for ease of readability for viewers

---

REFLECTION

Experience

It was super fun designing a brand identity for myself or for the Alicia that I will never be. Because this is for another job that would have a different identity to the one I am building for myself as a UI/UX designer, I decided to go off the rails a bit with my colour scheme and aesthetic. I went for a more pastel colour theme and a less 'strict' layout that I normally wouldn't put into my work. The gradient in my poster is actually one of my favourite parts, I think the darker pink contrasts the bright white key artwork in a nice way and I really like how it turned out. I ended up having a lot of fun exploring these different things and I might end up continuing these studies in the future.

Observation

My observation from this task is that changing the thickness of my shape outlines vastly changes the effect they have on the overall poster. It can change them from a background element to a largely eye-catching key piece of the work. Additionally, placing the darker pink blurry circle in the centre of the poster adds so much depth to what was once a flat plane and it looks trendy while still being mellow and not too overwhelming.

Findings

My findings are that adding a white outline to your poster can help to bring in the entire piece in a way. It gives a sense of balance so the poster looks equal in weight on every side. It makes it easier for viewers to comprehend the poster at first glance and also just looks much better with the border. I also found out from friend and family, feedback (they are all very different age demographics), pastel pink was the favourite choice for a skincare brand. 

---

FURTHER READING

For this tasks further reading, I read from two books named 'A type primer' by John Kane and 'The Vignelli Canon' by Massimo Vignelli.

Components of the Text Page (pp. 114-118)

Fig 9.1 Book Cover #1

Although this information is for determining how to place text on books, I found it useful for my poster spacing. The area must be large enough to accommodate any margins for your size of paper. It also taught me that text size has to be readable from your approximate length away from the eye. This chapter also discusses how readability, meaning, clarity and appropriateness are constantly being tested against the realities of the marketplace and the specific requirements of your piece which was pretty interesting to read about. Due to the fact that reading is a physical act, the first goal of designing text is to make the experience a positive one. Additionally, text design allows for a variety of details that can decorate the page without disturbing on readability. 

Fig 9.2 Text Pages & Margins Spaces

Identity and Diversity + White Space (pp. 90-92)

Fig 9.3 Book Cover #2

To start off, I read up on identity and diversity in design. The author states that the notion of identity and diversity is a recurrent theme in. Diversity must be enough to prevent sameness and increase the attention of the public. However, too much diversity creates fragmentation and often badly designed communication. Too much identity causes perceptive redundancy and lack of viewer retention. Therefore, it is necessary to achieve the effective balance between these two elements or to offer sufficient flexibility in any given design solution to overcome those issues. These poitns are perfectly summarised by this quote: "Identity and diversity - an essential contraposition to bring life to design."

Following this, I read about white space. In typography, white space is often more important than the black text. Space is what qualifies the context, it is important to define the hierarchy of the every component. White space not only separates different parts of messages in the context of the page, but also establishes a tension between text, image, and the edges of the page through margins. By decreasing or increasing the letter spacing or as it is called, kerning, it confers a very distinctive character and expression to the words. All this is space manipulation and is used in layouts to achieve a desired expression. I actually found it easy to follow what the author is saying and tried to incorporate these thoughts into my design for this task.

Fig 9.4 White Space in books