Typography / Task 3B: Type Design and Communication

11.05.2021 - 11.19.2021 (Week 11 - Week 13)

Devina Angeline Wiratama / 0350824
Typography / Bachelor of Design (Hons) in Creative Media
Task 3B: Type Design and Communication

Jump Link

LECTURES

💁‍♀️: Lectures 1 to 4 completed in Task 1 - Exercise 1&2
and Lecture 5 to 6 completed in Task 2

1. Week 10 / 10.29.2021
Mr Vinod give us some notes:
- Set a margin. Create columns and rows.

- Choose an appropriate typeface from the 10 given

- Format the text while considering the point size, line length, alignment, ragging and tracking.

- Save as PNG (without background and with a 7pt white outline), PDF, upload to G-Drive and embed onto e-portfolio.

- Screengrab your phone with the sticker sent.

- You may use minor graphical elements or visuals to aid in your message and design. You may use the appropriate colour schemes after getting the black and white version approved.

- Ensure that the expression occupies the space and is legible and readable for its intended use.

- Upon completion of the designed sticker, selected stickers will be used for social platforms Telegram/ WhatsApp.

- You may use Adobe Illustrator and Photoshop for the task.

- Upon completion of the static sticker, you will be required to animate the message. The animated version (512 px width, at 72 dpi) will be used on social platforms like Telegram/WhatsApp.

- Send your sticker .png file to the @stickerator bot on Telegram if you have issues uploading your sticker.

Reference
- How to make Telegram Stickers

- Download “TU Mark”

- Typographic Expressions (not directly related to the task)

2. Week 11 / 11.05.2021
This week, we only have feedback for our sketches. Besides, Mr Vinod briefed us about the task that we need to do before next week:

1. Graphical work in illustrator

2. Create your BW sticker - take a screengrab

3. Colour palette (use website samples)

3. Week 12 / 11.12.2021
This week, Mr Vinod only gave feedbacks and instructions for animation.

#week12_202108 (Wednesday & Friday) Sticker Animation instructions.

Students as it turns out, the process requires you to use Adobe After Effects to produce a .TGS file for the sticker animation (not more than 3 seconds long). Here are the instructions: https://core.telegram.org/animated_stickers

THAT SAID, if you are unable to brain the process because your After Effects is weak, then just create a Gif animation (not more than 3 seconds long) as done previously in class. Even though this can’t be converted into an actual Telegram sticker, it’s OK.

INSTRUCTION

Submission

Eportfolio: All gathered information (failures, successes, epiphanies, sketches, visual research, printouts, websites, images, charts, etc.) must be documented logically and chronologically in the e-portfolio for the duration of the task in one post.
Eportfolio: All images/sketches/diagrams/scans must be captured/photographed/scanned well with good, even, natural light, without shadows — use of tube/bulb/flashlight is not allowed. All images/sketches/diagrams/scans must be labelled (fig 1.), described and dated. Final submission must be indicated clearly (distinguishable from process work) and uploaded as PDF and PNG &/ GIF (not JPG) or as instructed in class.
(Only if instructed) Tasks to be documented in a printed A4 enclosed in a Clear Sheet, logically and chronologically. The works must be labelled and dated – use pencil and write neatly.

#week12_202108 (Wed & Fri) Task 3(B ) Ensure you submit:

BW option (2048px)
Colour option (2048px)
PDF of (BW & Colour)
Gif Sticker Animation (1024 or 800px)
Screen Grab

TASK 3B

References
Here are the references that I found on Pinterest.

Fig. 1.1 - 1.5 / References, Week 11 (11.05.2021)

Sketch
I chose the "Happy Holiday" and "Happy Weekend/ Have a good..." in the google sheet that Mr Vinod provided. My concept for a happy weekend is like there is a cup of coffee/ tea that describe as peaceful on the weekend. My next concept for a happy holiday is like a sunset on the lake, like taking a holiday in the sea. Here is my progress in the video.

Vid. 1.1 / Progress, Week 11 (11.05.2021)

Here are my sketches

Fig. 1.6 - 1.10 / Sketches, Week 11 (11.05.2021)

Until I came up with my ideas, I just realised that they must be black and white. So, I put it in Adobe Illustrator and export them into a grayscale.

Fig. 1.11 / Sketches in Black and White, Week 11 (11.05.2021)

Next, I think I'll choose the centre one.

Fig. 1.12 / Sketch that I chose in Black and White, Week 11 (11.05.2021)

After Mr Vinod saw my sketches, he said that it must be in black and white first and utilize the blank space, if not, your sticker will be too small. I colour it again with black and white. I also have another idea that suddenly came up.

Fig. 1.13 - 1.14 / Recolour into black and white & Another idea, Week 11 (11.05.2021)

After Mr Vinod saw my other idea, he said the idea still has a lot to be developed. I decided to go on with my "Happy Holiday" sticker.

I tried more sketches since Mr Vinod said that my previous sketch was too visual. Here is the sketch.

Fig. 1.15 / Sketch again, Week 12 (11.12.2021)

But, Mr Vinod reject it again :(. So, I decided to make a new one directly in digital not sketch anymore.

Digitalize BW

I digitalize the "Happy Holiday" sticker into Adobe Illustrator. Since Mr Vinod feedback is already clear, I tried to do the revise it directly when digitizing.

Fig. 2.1 / Progress in AI, Week 11 (11.05.2021)

When revising it, the sticker design is a little bit different from the sketch one and I think I like it. I remove the graphical element in the word "Holiday" because it's too much. I change the "Holiday" into "Holiyay!". I resize them into bigger ones so doesn't waste the blank space. Last, I also put the stars and boat with Taylor's Logo in there. I made it like I was in the boat seeing a sunset. It sounds holiday, right? It's Holi-yay! I made two different styles of the Holiday, 2D and 3D. Because 2D is easier to read, I decided to go for it.

Fig. 2.2 - 2.3 / Digitalize Progress, Week 11 (11.05.2021)

I tried to insert it into a sticker in the telegram. Here is the step by step that I do.
1. Save the file into PNG, so your sticker will have a transparent background (not applicable in JPG).

2. Type "@Stickers" in Telegram, then type /newpack > name pack > attach the image as a file (uncompressed), not as a photo > emoji that corresponds to the sticker > /publish > short name in the link. Walaa~ you get your first sticker!

3. When I want to attach the file, I don't know why it says that my file isn't in 512.512px. Because of that, I send it to @Stickerator (yes, it's back!). The bot resizes my file and I can forward it to @Stickers.

Fig. 2.4 - 2.5 / Bot, Week 11 (11.05.2021)

Actually, the boat isn't that big, is like in the 3D one fig.1.17). I resize the boat bigger so the reader can see Taylor's logo. Here is the screengrab.

Fig. 2.6 - 2.7 / Screegrab, Week 11 (11.05.2021)

Here is my first result for digitalizing BW.

Fig. 2.8 / BW Digitalize#1, Week 11 (11.05.2021)

Mr Vinod said that my first result is too visual. So tried to make it again (I hope this is last). Here is the progress.

Fig. 2.9 / Progress again#2, Week 12 (11.12.2021)

Here is my second result for BW.

Fig. 2.10 / BW Digitalize#2, Week 12 (11.12.2021)

Mr Charles told me to do more upgrades to my sticker. He said that his one (fig. 2.21) looks nice and optimistic but the line for the sun is not necessary, the word holiday consider sans serif, the boat is not that clear, and use vibrant colours. Here is the progress.

Fig. 2.11 / Progress again#3, Week 12 (11.12.2021)

Here is my third result for BW.

Fig. 2.12 / BW Digitalize#3, Week 12 (11.12.2021)

Digitalize Colour #1
Colour Pallete

(Source: Adobe Colour)

Fig. 2.13 / Adobe Colour, Week 11 (11.05.2021)

I tried to choose a complementary colour (orange-blue). I chose this colour because it was inspired by the sunset (fig.1.5). Here is the progress.

Fig. 2.14 / Colour Progression, Week 11 (11.05.2021)

Next, I tried to insert it again in Telegram as a sticker.

Fig. 2.15 - 2.16 / Sticker in Telegram#1, Week 11 (11.05.2021)

Here is my first result in colour.

Fig. 2.17 / Colour Digitalize#1, Week 11 (11.05.2021)

Digitalize Colour #2
Colour Pallete

(Source: Adobe Colour)

Fig. 2.18 / Colour Digitalize#2, Week 12 (11.12.2021)

And I put them on Telegram again.

Fig. 2.19 / Sticker in Telegram#2, Week 12 (11.12.2021)

Here are my second results in colour.

Fig. 2.20 - 2.21 / Colour Digitalize#2, Week 12 (11.12.2021)

Digitalize Colour #3
Colour Pallete
(Source: Adobe Colour)

Since that Mr Charles suggest I use a more vibrant colour, I change the colour again.

Fig. 2.22 / Colour Digitalize#3, Week 12 (11.12.2021)

And I put them on Telegram again.

Fig. 2.23 / Sticker in Telegram#3, Week 12 (11.12.2021)

Here are my third results in colour.

Fig. 2.24 / Colour Digitalize#3, Week 12 (11.12.2021)

Animated
First, I make a new file in Adobe Illustrator first to export it to Adobe After Effects later. I made it in 512.512px first so that can insert it to Telegram. (File > New > Film&Video)

Fig. 3.1 / Film and Video Settings, Week 12 (11.12.2021)

Second, I separated several layers to animate later.

Fig. 3.2 / Separated Layers, Week 12 (11.12.2021)

Third, I import it to After Effects. Since the animation requires a low file, then I just make the animation simple so that the file is not too heavy. Here is the progress of Animation.

Fig. 3.3 - 3.6 / Progress, Week 12 (11.12.2021)

Problem
Export the animated sticker to Telegram
Here are the instructions.

Fig. 3.7 / Instructions from Telegram, Week 11 (11.12.2021)

When I want to do the step by step of instructions, I cannot upload the bodymovin-tg.zxp to ZXPInstaller.Setup. It says that the file is not compatible. However, I have already downloaded the latest one.

Fig. 3.8 - 3.9 / Latest version and Evidence that not compatible, Week 12 (11.12.2021)

Since Mr Vinod said that it's ok if can’t be converted into an actual Telegram sticker, I decided to export it into GIF Animation and Video, and maybe Animated Sticker on WhatsApp.

For the GIF, I export it to media encore.

Fig. 3.10 / Media Encore, Week 12 (11.12.2021)

How to Export GIF (here) but not transparent background :')
How to Export Transparent Background Video (here) but it's a big file :")

I also tried different ways for the Gif results (recommended). Export from AE with transparent background > RGB + Alpha > Quick Time. After that, I export it into Adobe Photoshop and save it as a web for GIF.

Fig. 3.11 / Export to Photoshop, Week 12 (11.12.2021)

Finally, I decided to insert the animated sticker on WhatsApp. It is really simple. Download the Sticker.ly on phone (Playstore/ Appstore) > Click the (+) button > Choose Animated and insert the file.

Fig. 3.12 / Sticker.ly, Week 12 (11.12.2021)

GIF - Photoshop

Gif. 3.1 / Animated Sticker, Week 12 (11.12.2021)

GIF - Media Encoder

Gif. 3.2 / Animated Sticker, Week 12 (11.12.2021)

Video

Vid. 3.1 / Animated Sticker, Week 12 (11.12.2021)

Final Outcome
Click this link or you can scan this barcode.
Link Add Still Sticker on Telegram

Fig. 4.1 / QR Code Telegram, Week 11 (11.05.2021)

Link Add Animated Sticker on WhatsApp.

Fig 4.2 / QR Code WhatsApp, Week 12 (11.12.2021)

Final Outcome Animated

Gif 4.1 / Final Animated PS, Week 12 (11.12.2021)

Gif. 4.2 / Final Animated ME, Week 12 (11.12.2021)

Vid. 4.1 / Final Animated AVI, Week 12 (11.12.2021)

Final Outcome in PNG (2048px)
Black and White

Fig. 4.3 / Final Outcome BW, Week 12 (11.12.2021)

Colour

Fig. 4.4 / Final Outcome Colour, Week 12 (11.12.2021)

Final Outcome in PDF/ Embed, and Screenshot on Telegram

PDF

Screenshot

Fig. 4.5 / Screenshot on Telegram, Week 12 (11.12.2021)

Screenshot - Animated in WhatsApp (Optional)

Fig. 4.6 / Animated on WhatsApp, Week 12 (11.12.2021)

FEEDBACK

Week 11 / 11.05.2021

Exercise:
General Feedback
Make sure you make the artwork in a square so you know about space, I suggest you in 512px. Minor graphical element (15%?)
Specific Feedback
Work in black and white first. Trying to use as much space as possible. The idea word "happy" part of the sun is a good idea. Use "holiday" into max space

Week 12 / 11.12.2021

Exercise:
General Feedback
Focus on the font, not the graphical element. Don't distort Taylor's logo. Too many irregular shapes sometimes are not good

Specific Feedback
#1 Bit too visually base than typographical. Change the Holiyay to Holiday. Use simplicial graphic within the O
#2 Better than the first one but still too visually. Can do just in simple. Don't put Taylor's logo as a flag, too distracted/ too much attention. You can put it on the side as long as not too small.

Fig. 5.1 / Example by Mr Vinod, Week 12 (11.12.2021)

From Mr Charles on Telegram
#3 This one (fig. 2.21) looks nice and optimistic but the line for the sun is not necessary, the word holiday consider sans serif, the boat is not that clear, and use vibrant colours.

Week 13: Submission / 11.19.2021

Exercise:
Really nice idea. Good documentation of progression. Good job overall. Room for improvement in the suitcase background and the fittings. Overall good job
E-Blog:
None

REFLECTION

Experience

Actually, it's a fun and new experience to make a sticker on Telegram or WhatsApp. But I have a lot of difficulty in applying the idea so that it doesn't visualize too much and when animating it lacks clear instructions. This makes me quite sad and stressed while working on it. With the help of feedback from Mr Vinod and Mr Charles, I got through it.

Observations

When I changed the colour palette, I realized that we can't just choose a colour arbitrarily, it takes someone who is really talented to be able to match the psychology of colour. I also see that even the slightest detail affects how the sticker looks

Findings

At first, I thought that this 3B task would be an easy and quick task to complete, but I was wrong. It is precisely this task that takes up most of my time, I also look for tutorials on youtube more because of the lack of clarity of information. Things to consider such as, graphical elements, visualisation, colour, etc. This makes me sad and frustrated when working on it

FURTHER READING

Fig. 6.1 / Typographic Design: Form and Communication 2015 Book, Week 9 (10.22.2021) - Source: Facebook

Based on one of the requirements of this typography blog, I did some further reading with the book "Typographic Design: Form and Communication (2015)" by Wiley, which Mr Vinod recommended.

Reference:

Carter, R., Day, B., Meggs, P. B., Maxa, S., & Sanders, M.

(2015). Typographic design: Form and communication.

Hoboken, New Jersey: John Wiley & Sons, Inc.

The Typography Message

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. In this sense, early twentieth-century typography became a revolutionary form of communication, bringing new expressive power to the written word.

The geometric structure of this poem is composed of a repetition of the words ping and pong. As these words are repeated, they signify the sound of a bouncing ping-pong ball, and the circular letters p, o, and g reflect the shape of the ball. The full impact of this poem is achieved when it is read aloud. By hearing the sounds while viewing the typographic forms, the typographic message is strengthened. Significant departures from the use of conventional typographic forms occurred in Europe at the beginning of the twentieth century. During this activist period, experimentation in all the visual and performing arts were affected by potent social and philosophical changes, industrial and technological developments, and new attitudes about aesthetics and modern civilization. The typographic design was pulled into this artistic revolution as poets and visual artists realized that both meaning and form could be intensified in typographic communications.

The particular syntactic qualities associated with typographic signs determine a specific meaning. A series of repeated letters, for example, may signify motion or speed, while a small letter in a large void may signify isolation. These qualities, derived from the operating principles of visual hierarchy and ABA form, function as cues, permitting the mind to form concepts. Simple syntactic manipulations, such as the repetition of letters or the weight change of certain letters, enable words to visually mimic verbal meaning (Fig. 6.2).

Fig. 6.2 / Syntactic manipulations are controlled by such factors as repetition, size change, position change, or weight change, Week 12 (11.12.2021)

In another example, the letter E has been visually altered, relating it to the meaning of specific descriptive words (Fig. 6.3).

Fig. 6.3 / These elaborations of the letter E express a variety of concepts, Week 12 (11.12.2021)

In language, signs are joined together to create messages. Words as verbal signs, grouped together in a linear fashion, attain their value vis-à-vis other words through opposition and contrast. Words can also evoke meaning through mental association. These associative relations are semantically derived. Since typography is both visual and verbal, it operates in a linear fashion, with words following each other in a specific sequence, or in a nonlinear manner, with elements existing in many syntactic combinations. For example, in the visual poem “O Christmas Tree,” the choice of the typeface, Futura Light, is very important. The capital letter O is a perfect circle, signifying ornaments; the linear strokes of other letterforms suggest the texture of evergreen needles (Fig. 6.4). This typographic message is derived from the mental associations formed by contrasting typographic signs.

Fig. 6.4 / Typographic signs combine to form a more complex sign, suggesting a decorated Christmas tree, Week 12 (11.12.2021)

Jump Link

Devina Angeline Wiratama (0350824)

Search This Blog

Typography / Task 3B: Type Design and Communication

Comments

Post a Comment