Typography - Task 3B: Type Design and Communication

4/6/2021 - 25/6/2021 / Week 11 - Week 13

Lui Hsiao Hui (Tressa) / 0342003
Typography / Bachelor of Design (Hons) in Creative Media
Task 3B: Type Design and Communication

LECTURES

All lectures 1 to 6 completed in Task 1 - Exercise 1 & 2

WEEK 10

In week 10, we were briefed about our Task 3B.

Notes:

- Sticker size: 512 × 512 px, RGB (creating for screen)

- Must include Taylor's logo

- Choose an appropriate typeface

- Minor graphical elements

- Can't use different language

- May use 1 colour besides black and white - 1st part black and white; 2 part introduce 1 colour of the festival

- Challenge is to ensure the type expression is readable and legible within that given space (zoom out to view sticker)

- Actionable part is the idea part (expression)

- If the expression is not there it's also fine but it's best to have

WEEK 11

Fig. 1.1 & 1.2 Sticker design demonstration by Mr. Shamsul, Week 11 (11/6/2021)

In week 11, after reviewing our work, Mr. Shamsul showed his sticker design as an example to give us an idea of how we can develop and improve our designs. He did a demonstration of how to colour the text and also create the background by converting all letters into a shape object, merge and then create stroke.

INSTRUCTIONS

*No MIB because the instructions there are for the previous semester.

With the knowledge and experience gained in the Exercises, Task 1 and Task 2, Task 3A, synthesise and apply the learning in the following tasks:

Your first task is to express typographically a social message/greeting relevant to the campus community at Taylor’s University or society at large.

1. Set your artboard size to 512 x 512 px (Adobe Illustrator)

2. Choose an appropriate typeface from the 10 given

3. Use Black & White only until the design is confirmed/approved

4. Save artwork as PDF & PNG, upload/embed onto e-portfolio.

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.

Design an attractive, functional, and visually impactful sticker. You may use Adobe Illustrator and Photoshop for the task.

As for the social message/greeting, we were given a list of celebrations. Each student may only pick one and no repeats. The festival I ended up choosing is Thaipusam.

Task 3B: Type Design and Communication

Variations

Fig. 2.1 Sticker design variations, Week 11 (8/6/2021)

The festival I chose is Thaipusam. The festival commemorates the occasion when Goddess Parvati gave her son Murugan (Hindu God of War) a Vel "spear" so he could vanquish the evil demon Soorapadman and his brothers.

I decided to use serifs and italics because it suits the organic and intricate decorations of the festival. Bembo Std (Italic) really suits this because I think the look of it matches the body piercings (self-mortifications) during the ceremonial sacrifice. The problem I encountered when designing the sticker was a lot of empty space. Hence, I tried using the graphical elements to lessen that, but it may look a little too much such as variation #3.

Based on feedback (week 11), there are too many graphical elements making it look illustrative, losing the focal point to the graphical elements. I realised my mistake - I made these like a poster/greeting post, thinking that we had to use up the 512 x 512 px square.

Graphical elements

Fig. 2.2 Graphical elements progress using glyphs, Week 11 (8/6/2021)

Firstly, I typed out the glyphs and tried 3 typefaces which are Bembo, Baskerville and Garamond to see how different the glyphs look with different type families. I ended up choosing Bembo Std (Regular) for the question mark and curly bracket, and ITC New Baskerville Std (Regular) for the comma and the exclamation mark (refer to Fig. 2.3 below).

After choosing the fonts for the glyphs, I proceeded to create the graphical elements by scaling, flipping, mirroring and rotating the glyphs, messing around with the shapes. I also tried out various ways of how I can incorporate Taylor's logo.

Fig. 2.3 Graphical elements using glyphs, Week 11 (8/6/2021)

Kavadi

During Thaipusam, devotees would practice a ceremonial sacrifice called Kavadi Aattam ("Burden Dance") and it emphasises debt bondage. The kavadi ("burden") itself is a physical burden, the bearing of which is used by the devotee to implore Murugan for assistance, usually on behalf of a loved one who is in need of healing, or as a means of balancing a spiritual debt. Devotees process and dance along a pilgrimage route while bearing these burdens.

Vel spear

Vel is a divine javelin (spear) associated with Lord Murugan. Spears used by ancient Tamils in warfare were also commonly referred to by this name. According to Hindu religion, Goddess Parvati presented the Vel to her son Murugan as an embodiment of her shakti or power in order to vanquish the evil asura Soorapadman - which is the occasion the festival commemorates.

Revising progress

Fig. 3.1 Revised sticker design during practical, Week 11 (11/6/2021)

After the review session (week 11), we used our practical session to revise our designs. I simplified the vel spear and made it more obvious that I used glyphs to create the graphic element. I also incorporated Taylor's logo into the design. Once again, I struggled with maximising space although I was already using a condensed font.

Mr. Vinod noted that it looks better after removing the graphical elements, however, the word "happy" seems very top-heavy (3rd design) and it doesn't really reflect the festival well. He also mentioned only use the words stated in the Google Sheet, I double-checked and found that only the word "Thaipusam" was given and not "Happy Thaipusam", so I removed the word "happy" in my next progression.

Fig. 3.2 Re-designed stickers, Week 12 (15/6/2021)

Re-designed stickers based on all feedbacks and Mr. Shamsul's demonstration in week 11. The word "happy" is removed and I tried creating a serpentine/calligraphy look with the 1st design to mimic the elaborate decorations of Thaipusam. I also got this idea from Mr. Shamsul's sticker. It was really tough to try out different compositions because I can't separate the word, it will affect readability. Furthermore, I stuck the words together to maximise space and to ensure that the word isn't too small when rendered as a sticker.

Final refinements

Fig. 3.3 Final refinements, Week 12 (18/6/2021)

In week 12's class, Mr. Vinod suggested using em dashes and a full stop for the symbol on the vel spear instead of using Taylor's logo. In Fig. 3.3, the left is before, right is after. I decided to slant the Taylor's logo because it looks really awkward and out of place due to the top line being a different degree compared to the letters. It looks neater this way and makes the composition look complete.

Colour development

Fig. 4.1 Creation of sticker background, Week 12 (15/6/2021)

Fig. 4.2 Adjustments to the sticker background shape, Week 12 (15/6/2021)

Smoothing out the background shape with the pen tool because there were awkward curves. The awkwardness can be seen in Fig. 4.1 above.

Fig. 4.3 Colour gradient, Week 12 (19/6/2021)

The gradient is edited separately for the word "Thaipusam", vel spear symbol and Taylor's logo. This is to ensure proper colour values and cohesive lighting/highlight direction.

Fig. 4.4 Sticker Version #1, Week 12 (18/6/2021)

First, the sticker was created in Adobe Illustrator, I then exported the text layer and background layer separately into Adobe Photoshop. To make the 3D effect I used the layer styles "Bevel & Emboss" and "Inner Shadow" on the text layer. I made sure to make the effect subtle because it's a sticker and it's going to be quite small on screen. Lastly, I edited the colours using curves because the colours looked dull and it didn't seem festive enough.

The colour scheme I went for is violet, yellow and red (more of an orange-red). Yellow is the festival's main colour (as seen with all the clothing), while violet is a complementary colour to create contrast against the yellow. The colours red and violet are also present in the decorations of the festival, hence why I chose them.

Fig. 4.5 Sticker Version #2, Week 12 (19/6/2021)

Similarly to Sticker Version #1, I used the layer styles "Bevel & Emboss" and "Inner Shadow" on the text layer for the 3D effect, but with different settings. I didn't use curves this time but the "Hue/Saturation" to tweak the yellow text as it was also looking dull.

I decided to make both versions into a sticker because I really like the colour combination of version #2. But for legibility, the first version is more readable from far because the contrast between the text and background is stronger.

Final Task 3B: Type Design and Communication

Fig. 5.1 Final Task 3B: Type Design and Communication B&W - PNG, Week 12 (18/6/2021)

Fig. 5.2 Final Task 3B: Type Design and Communication Sticker Version #1 - PNG, Week 12 (18/6/2021)

Fig. 5.3 Final Task 3B: Type Design and Communication Sticker Version #2 - PNG, Week 12 (19/6/2021)

Fig. 5.4 Final Task 3B: Type Design and Communication - PDF, Week 12 (19/6/2021)

Fig. 5.5 Screenshot of the stickers in Telegram, Week 12 (19/6/2021)

Link for sticker pack: https://t.me/addstickers/ThaipusamTU

Stickers were made using Telegram's Sticker Bot.

FEEDBACK

Week 11

General feedback: Too many graphical elements and reliance on them.

Specific feedback: Show that the graphical element is made from glyphs, make it more obvious. Maximise space for the word "happy". Use a condensed font.

Week 12

General feedback: White outline around the background (7 pt).

Specific feedback: Perhaps use em dashes and a full stop for the symbol on the vel spear instead of using Taylor's logo.

REFLECTION

Experience

Learning to create a design for smaller screens/sizes is a good and essential learning process. Out of all the typography tasks for this semester, I struggled with this one the most because it was hard to utilise the space with only the word "Thaipusam". I also struggled with type expression and relied on graphical elements, causing a shift in focal point and purpose of the task. It was really challenging but with the feedbacks given, I was able to improve my design. Though it wasn't as fun as Task 3A, it is still an experience I must go through because all the while we've been designing in larger canvas sizes, so we didn't have to worry much about legibility.

Observation

While creating the colour version and doing some final tonal adjustments, I realised that subtle edits make a noticeable change when the sticker is at its actual size (as viewed on the phone). This task also allowed me to observe how type looks when it is on a smaller screen/canvas size. Adequate space between letters and weight thickness must be done well in order for it to look legible on a smaller scale.

Findings

At first, I thought it wouldn't be too complicated to design a sticker and that'll it'll be just like any other design process. I've found that there was also a lot to take into consideration, such as legibility of the type expression, and does the expression convey the festival or greeting well. It was a bit frustrating at times trying to come up with ways to make the expression more legible and fill up more space.

This page gave me the idea of a way of designing typefaces. By taking existing typefaces, we could lower the resolution to change its shape and look. Another idea is to warp it slightly as well to create interesting shapes and expressions. I thought this is an interesting, creative and fun way of designing a typeface or simply to just create a fun design. After the last task (Task 3A), I really enjoyed designing my own font so I tried doing this in Fig. 6.3-6.4 below. Although it's not really related to the topic 'type on screen', I just thought I'd include my spontaneous ideas and explorations here.

Fig. 6.3 Warped and pixelated "a", Week 13 (24/6/2021)

Messing with type, making it pixelated and warping the letter. Makes for an interesting and flamboyant "a". Perhaps one day, I'll try making a font using this method.

Fig. 6.4 Sketch of the letter "a" inspired by pixel fonts, Week 13 (24/6/2021)

I used a grid notebook so I'd have guides to better create the pixel font look. I sketched this as a test to see how can I create an "a" with inspiration from the pixelated letters in Fig. 6.2.

Fig. 6.5 Contrast - Selecting Typefaces

Chapter 8: Typography on Screen, page 152

Combining typefaces

- Web pages use 2 to 3 typefaces. Using more compromises hierarchical clarity and looks incohesive.

- Contrast is the most important when choosing typefaces, and variations in contrast are abundant: serif/sans serif, roman/script, bold/light, thick/thin, simple/complex, and functional/decorative.

- Effective contrasts can also be achieved when using different typefaces within the same family or using all capital letters in relationship to capitals and lowercase.

Contrast

- The subtlety of typographic variation that can be achieved in print goes unnoticed when viewed on screen.

- Antialiasing, lower resolution, and a backlit presentation dull typographic detail, which in turn lowers contrast.

- Shifts in typesetting and typeface selection must be further emphasized to promote proper clarity, texture, and hierarchy.

- Make at least two typographic shifts for contrasting text items on screen: typeface, size, weight, posture, orientation, margin, and color.

- Example: Bold or strong text in a paragraph is emphasized by being set two weights heavier (regular to black instead of bold) or by changing to a heavier weight of a contrasting typeface.

Lui Hsiao Hui (Tressa) 0342003

Search This Blog