Task 3(B): Type Design and Communication
15/10/2021 - 28/10/2021 (Week 8 - Week 10)
Alicia Teng Yi Ling (0345159) BDCM
Typography
Task 3(B): Type Design and Communication
Alicia Teng Yi Ling (0345159) BDCM
Typography
Task 3(B): Type Design and Communication
LECTURES
Lectures 01 - 05 are in Typography Task 01: Exercise.
Lecture 06 is in Typography Task 02: Typographic Exploration & Communication.
Week 10 (29/10/2021)
During this week's class, Mr. Vinod briefed us on the final task (3B), which is to combine the knowledge and experience gained in the Exercises, Task 1 and Task 2, Task 3A, and create a Typographical Telegram Sticker which consists of a greeting. (Happy New Year, Happy Pride Day, etc.)
Requirements:
- Use the ten typefaces provided
- Sticker is required to be a PNG without background.
- Artboard size: 512 x 512 px
- Minor graphical elements are allowed
- Black & White has to be approved before continuing
- Text MUST be legible and must use as much space as possible
- For submission, there must be PNG, PDF & GIF
Upon completion of the designed sticker, it will be used for social platforms Telegram/WhatsApp.
Finally, for the social message/greeting, we were given a list of celebrations to pick from. The festival I ended up choosing is Christmas.
INSTRUCTIONS
Task 3(B): Type Design and Communication
Sketches
To start off, I made a few rough sketch ideas that are related to the Christmas
theme. These are (1) a Christmas tree, (2) a Christmas ornament, (3) a
decorated gift box, and a snowman. During week 11's feedback, Mr. Vinod suggested that I choose the third idea, the gift box as it looks like it has the most potential.
|
|
Fig 2.1.1 Sketches |
Following this, I tested out several fonts that I thought would fit best with my ideas. Initially, I preferred if they were Italicized and/or bold as I thought they looked very Christmas-like, such as the fonts on seasonal greeting cards or messages.
|
|
Fig 2.1.2 Font Testing - Merry Christmas |
The font I ended up picking is - Bodoni STD: Poster Light as I like the thickness of the words but also the curvature of the letterform, specifically the letters 'r', 'i', and 's'. I also decided that I preferred Bodoni as it appeared the most attention grabbing out of the four other fonts.
Graphical Elements
Wrapped Gift Box
For my first graphical element, I was inspired by large bows on wrapped gift boxes as presents and gift giving are one of the biggest aspects of Christmas and they often denote feelings of happiness, sharing and joy, so I wanted to incorporate it somehow.
|
|
Fig 2.1.3 Present Box Outline |
 |
Fig 2.1.4 Inspiration: Wrapped Gift Boxes |
I used a rough brush outline from a custom pack to draw the outline of the gift box and the ribbon bow on top. I decided to use a present box as a way to frame and outline my typographical words (Merry Christmas) as I thought it was a good way of highlighting the words but it also properly presented that this sticker is meant to be Christmas themed.
Stars
|
|
Fig 2.1.5 Stars |
 |
Fig 2.1.6 Inspiration: Christmas Star Ornaments |
For my second graphical element, I decided to put in stars that surround the gift box and are also plastered on it. This is because stars are a popular theme all throughout Christmas and they fill the negative space as well so it does not appear too empty. The Christmas star symbolizes the star of Bethlehem (Biblical) and is a heavenly sign of prophecy and denotes hope.
As in Figure 2.1.5, I used a similar 'rough' looking brush to the gift box outline, in order to give the stars a more hand-drawn look.
Graphical Element (Gift Box) Progress
|
|
Fig 2.2.1 First Version (11/11/2021) After receiving feedback in week 12, I downloaded new brushes and redid the gift box outline so it would look so scuffed and instead could achieve a more 'natural' brush-like texture and appearance. I also removed the star on top of the 'i' as I thought it was unnecessary. I also added the Taylor's logo below as I forgot to put it in the first version. |
|
|
Fig 2.2.2 Updated Version (12/11/2021) |
After my feedback in week 12 and revising my design, I wanted the graphics to be simple and slightly rough and look almost 'hand-drawn' as I like that kind of aesthetic and it feels more like it has a personal touch. Furthermore, Mr. Vinod suggested that I remove the backsplash (In figure 2.4.1) as it was too overly graphical. Additionally, I wanted the words to look extremely clear and to be large as stickers are quite small. This way, the holiday greeting will stand out and be accentuated by the surrounding graphical elements. Finally, the Taylor's logo is around the same size as the larger stars so it is not too small or overly large.
Word (Merry Christmas) Progress
For my typographical element, I decided to showcase the process of how I came to my final version for the sticker. I started off with simply writing out 'Merry Christmas' using the Bodoni STD: Poster Light and centrally aligned it.
|
|
Fig 2.3.1 Default Bodoni STD: Poster Light with central alignment (16/11/2021) |
|
|
Fig 2.3.2 Kerning Done (16/11/2021) |
I kerned the letters as some were a bit too far apart for my liking (i.e. the 'M' and 'e') and this way the words look neater.
|
|
Fig 2.3.3 Colour Changed - #014e52 (16/11/2021) |
I then coloured the words and chose a green shade to reflect the Christmas theme (I was inspired by mistletoe leaves).
|
|
Fig 2.3.4 Gradient Added (16/11/2021) |
Next, I decided to overlay an Ombre gradient on the text to make it stand out (look more 3D) in comparison to its surroundings.
|
|
Fig 2.3.5 White Outline Stroke put in (16/11/2021) |
Finally, I added a white stroke outline (3 px) to even further contrast and emphasize the words.
Layers Style Adjustments
|
|
Fig 2.3.6 Gradient Overlay Effect |
|
|
Fig 2.3.7 Customized Gradient I customized the gradient with my selected colours and arranged it so that the darker portion is on the upper parts of the words and it becomes lighter towards the bottom. I did this as I felt it created more depth and it just looked nicer overall. |
|
||
|
Fig 2.3.8 Stroke Effect
|
Colour Development
This was my initial idea and design (still has the old gift box outline), I initially wanted to add a graphical splash behind, in order to make the words stand out more but Mr. Vinod said that this had too much graphical elements so I deleted it. Eventually, I rectified this using the gradient overlay and stroke outline (such as in Fig 2.4.2) and I definitely prefer this outcome, the words look much more attention grabbing and the overall design is cleaner.
 |
Fig 2.4.1 Trial Version (11/11/2021) |
I chose to colour the gift box outline and stars with simple flat tones as I wanted a minimal, rustic aesthetic but also so the gradient words would stand out against them.
|
|
Fig 2.4.2 Coloured Sticker (17/11/2021) |
 |
Fig 2.4.3 Chosen Colour Palette (17/11/2021) |
I decided to go with a traditional Christmas colour palette for my sticker, this includes red and greens as well as yellow for the stars and Taylors logo.
After Mr. Vinod gave me feedback (week 13), I updated the words and increased the size of the word 'Merry', and decreased the size of 'Christmas', then finally decreased the leading (space between Merry and Christmas) this way words will appear bigger and more impactful
 |
Fig 2.4.4 Updated Sticker (19/11/2021) |
GIF Sticker Animation Process
 |
Fig 2.4.5 After Effects Settings (17/11/2021) |
I decided to go with a simple animation for my GIF sticker, where the stars spin gently around in the same spot. To do this, I changed each star's centre of rotation and added the time code (time*70) into the rotation time-vary stop watch.
 |
Fig 2.4.6 Sticker GIF Test (17/11/2021) |
I tested the GIF and I like it, especially with the smoothness of the stars spinning, however there is a problem with dithering with a transparent background so I think I won't make it transparent for the GIF in order to prevent this issue (the automatic background colour is black, I decided to keep it that way as it worked in my favour due to the fact that the black colour makes the sticker and its colours very vibrant and prominent).
 |
Fig 2.4.7 Second GIF Test (18/11/2021) |
Then for the final detail, I decided to 'unveil' the present and holiday greeting by using masks and masking points. I think this was a good decision so the GIF is not too plain and it adds an element of surprise (For example, "wow. it's a Christmas greeting!"). The gradient overlay in the words also moves along with the mask so it creates a sort of 'shiny' effect which I really like.
Final Task 3(B): Type Design and Communication
|
|
|
 | |
|
| Fig 2.5.3 Final Task 3(B): Type Design and Communication Sticker - PDF(18/11/2021) |
Screenshots of Sticker in Telegram
 | |
|
 | |
|
GIF Sticker Animation
 |
Fig 2.5.6 Final GIF Sticker Animation (18/11/2021) |
FEEDBACK
Week 11 (05/11/2021)
- General Feedback
- Work on a square (2048 x 2048) to see how big your work is & how much space it will actually take up
- Make sure the graphical elements are not too much (About 15%). Check this by seeing the amount of graphical elements compared to the words.
- Maximize the use of the entire square as much as possible and make sure the font is legible
- Use colour generators to get your colour palette (don't use standard Adobe palette)
- Make sure the positive (black) and negative (white) space is well balanced.
- Specific Feedback
- Use up as much space as possible
- Go with the present (idea #3) but I can try idea #1 but trying to make the words big and legible and within the square but not overwhelming with typography (imagine in sticker form).
Week 12 (12/11/2021)
- General Feedback
- Refrain from using too much graphic elements as it distracts from the type
- Loop the animation sticker for the assignment. (When submitting, remember to resize the still sticker to 2048px & the animated sticker to 1024px)
- Specific Feedback
- Shorten the Christmas to Xmas to place more emphasis on the typography
- Download more illustrator brushes so I don't have to rely on the default Illustrator ones
Week 13 (19/11/2021)
- Specific Feedback
- Increase the size of the word 'Merry', and decrease the size of 'Christmas', then decrease the leading (space between Merry and Christmas) this way words will be bigger and more impactful
REFLECTION
Experience
- This task was such an interesting and educational one. I have always adored using sticks on all sorts of social media platform as I believe they make conversations much more refreshing and funny so I am glad I received the opportunity to create one myself and to able to use it (especially for my favourite holiday, Christmas!). One of my struggles, was trying to export the GIF sticker with a transparent background with no dithering but I just couldn't for some reason so I submitted two versions.
Observation
- Placing a white border outline (stroke) on the words truly makes them stand out much more against the graphical elements and overall makes the sticker look more aesthetic.
- Adding the stars pulls the design together well so it does not look too empty but also contributes to the Christmas theme.
Findings
- It was a lengthy and tiring process, from starting to sketch the designs in illustrator, to properly finalizing the sticker and colouring it, to finally animating it. Mr. Vinod helped my design tremendously by reminding me that the graphical elements should not overwhelm the typography.
- I did not know I had to render the file in Adobe After Effects first then open it in photoshop to export it as a GIF so that was interesting to find out.
FURTHER READING
 |
Fig 3.1.1 Typographic design: Form and Communication by Rob Carter, et al. (07/11/2021) |
A Multidimensional Language
The typographic message is verbal, visual, and vocal. While typography is read and interpreted verbally, it may also be viewed and interpreted visually, heard and interpreted audibly. it is a dynamic communication medium.
As a dynamic representation of verbal language, typography must communicate. This functional role is fulfilled when the receiver of a typographic message clearly and accurately understands what is in the mind of the transmitter. This objective, however, is not always accomplished.
Effective typographic messages result from the combination of logic and intuitive judgment.
 |
Fig 3.1.2 These elaborations of the letter E express a variety of concepts - Designers: Carol Anthony, Linda Dronenburg, and Rebecca Sponga (07/11/2021) |
Expressionism
Expressionism accomplishes its purpose through formal elaboration and ornamentation, creating visual impact. When appropriate, attention can be given to experimental, expressive and ornamental possibilities. Ornament serves a variety of practical needs.
 |
Fig 3.1.3 Testing different forms of expression for 'Fluidity' (07/11/2021) |
This sequence of frames represent the dynamic identity for Fluidity, a water design firm. To communicate the qualities of water, the letterforms transform in shape and mimic reflection. The identity appears in different forms on different applications.
This was a very interesting topic for me to read about as it was useful to try and apply to my initial ideas as well as my other tasks.
REFERENCES
Fig 2.1.4: https://m.made-in-china.com/product/Custom-Paper-Magnet-Christmas-Gift-Box-804243925.html
Fig 2.1.6: https://unrealchristmastrees.com.au/product/gold-large-star-hanging/
Comments
Post a Comment