Labels

Typography Task 3B

03.11.2021 - 17.11.2021 (Week 11 - Week 13)
Ng Ee Chyn / 0344762
Typography / Creative Media Design(minor)
Task 3B: Type Design & Communication
LECTURES
All lecturer note has been completed in Task 1: Link to Task 1


INSTRUCTIONS

Task 3B:

Week 11:
Task 3(B ) e-portfolio submission:
1. Visual research
2. Test selected greeting using all 10 typefaces (which works) 
3. Sketching
4. Digitisation
5. Determining color 
6. Eye candy / Bling 
1. Research




Fig B 1.0:  Reference and inspiration(Week11, 03.11.2021)

2. Sketch


Fig B 2.0: Sketches (Week 11, 11.11.2021)
Week 12:
3. Digitization
Typeface 1: Univers LT Std - 55 Roman
Typeface 2: Janson Text LT Std - 75 Bold



Fig B 3.0: Digitization in black and white(Week 12, 08.11.2021)


Fig B 3.1: Colour progress (Week 12, 08.11.2021)



Fig 3.3: Outline (Week 12, 08.11.2021)

4. Stickers

Fig 4.4: Created Telegram sticker(Week 12, 09.11.2021)


Fig 4.5: Things need to admire(Week 12, 10.11.2021)

Things to admire:
  • A lot of O's, which took away the emphasis from the words which look a little prominent
  • Words make it bigger, use perspective distorts tool.
  • Any other cavity spaces that I have to introduce the O's.
  • Change the tree background to green.
  • The logo keeps in one colour, and the logo is too big.
Week 13:
Task 3(B ) Ensure you submit:
1. BW option (2048px)
2. Colour option (2048px)
3. PDF of (BW & Colour)
4. Gif Sticker Animation (1024/ 800px)
5. Screen Grab

5. Admired
I added a colored tree background for the old design. I used a rounded ellipse tool to make the tree shape. I also added a stamp for Taylor's logo.
Fig 5.1:Progress admired 1(Week 13, 15.11.2021)


Fig 5.2:Progress admired 2(Week 13, 15.11.2021)

Left: First design without any distort
Mid: Distort with the free transform tool
Right: Option > envelope distort > make with warp

I decide to use the right word option as my final design. The thing I change is the word to the upper arc by using warp and making it bigger to look more outstanding. Besides, I will still remain the "O's" and the sparkling effect surrounding the tree because I plan to make the GIF for that parts.

Fig 5.3: Progress admired 3(Week 13, 15.11.2021)


This is my final outcome in PNG:
Fig 5.4: Coloured Merry Christmas PNG(Week 13, 15.11.2021)

I did 2 types of black and white Christmas stickers, I found out the right Merry Christmas words are more prominent compared with left Merry Christmas. Hence I decide to choose the second sticker as my final.

Fig 5.5:Black and white Merry Christmas in PNG(Week 13, 15.11.2021)

6. Final
Link to download sticker in Telegram: Merry Christmas Stickers


Fig 6.1: BW option sticker (2048px)(Week 13, 16.11.2021)


Fig 6.2: Colour option sticker (2048px)(Week 13, 16.11.2021)

Fig 6.3: PDF of (BW & Colour)(Week 13, 16.11.2021)


Fig 6.4: Gif Sticker Animation (800px)(Week 13, 16.11.2021)


Fig 6.5: Screen Grab(Week 13, 16.11.2021)

FEEDBACK

Week 11
General feedback: Digitalized the sketch. Export with 512 x 512px, with transparent(png).
Specific feedback: Mr. Vinod said I can go with the caret(^) sketch. He recommends adding a stump for Taylor's logo.

Week 12
General feedback: Add a white border
Specific feedback: Nice and lively but a lot of O's, which took away the emphasis from the words which look a little prominent. Words bigger, use perspective distort tool. Any other cavity spaces that I have to introduce the O's. Change the tree background to green. The logo keeps in one colour, and the logo is too big.
 
Week 13
Specific feedback: The sticker is relatively good. Does capture the spirit. Appropriate but progress noted but progress posts are lacking
REFLECTIONS
Experience: 
In this 3B Task, I have experienced creating my own stickers for Telegram. I have made use of the skills I learned from previous tasks in this Task 3B. Creating the sticker is not that hard but I have to make sure the sticker word is prominent, therefore I have to keep uploading a new sticker to make sure it looks better and visible. The thing that took a lot of time and effort is creating the GIF because I have used 30 artboards to make the Christmas Tree light effect which cause my Illustrator Adobe "not responding".  After completing the GIF, I was satisfied with my final outcome, I think I had done better than my privious tasks.

Observations:
The right typeface will make the whole thing look great, especially the sizes and shapes. After using the upper arc, the word is more outstanding compare with my first Christmas design. Overall, it is good to create different colours and designs, this will give us some options to choose the best for your final outcome. 

Findings:
During completing the 3B task, I found out I have improved a lot. I'm able to be more familiar with Illustrator especially creating GIFs in Photoshop. The effort and amount of time have shown great results. I believed it was worth it.
 
FURTHER READING

Typographic Design: Form and Communication

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.

Fig 1.0: Typographic Design: Form and Communication cover(week 13, 16.11.21)

Chapter 8: Typography on Screen

Selecting typefaces(pg 138)

Following these guidelines will help in selection:

1. On-screen type sizing
  • Pixels, ems, rems, xx-small, and relative percentages
  • best allow adaptive scaling
  • The tag in HTML font size and line height are declared in pixels
2. Simplicity
  • A typeface with (basic) shapes are more effectively into pixel domains than fonts with adorned(decorative) shapes or fonts with extreme stroke contrast
3. Sans serif and serif typefaces
  • Because generally simpler in form than serif typefaces and scripts, they achieve a clearer visual presence on the web
4. Scale
  • At medium resolution, type scaled to larger sizes benefits from increased density
  • Larger types of elements related to smaller elements not only create drama but also provide information units that establish a focus on the page
5. Combining typefaces
  • With very few exceptions, effective web pages use no more than two or three different fonts.
  • The most important consideration when choosing a variety of fonts is contrast
  • serif/sans serif, roman/script, bold/light, thick/thin, simple/complex, and functional/decorative
6. Contrast
  • Anti-aliasing, lower resolution, and backlit presentations can make typographic details boring, thereby reducing contrast.
  • All shifts in typesetting and typeface selection must be further emphasized to promote proper clarity, texture, and hierarchy
  • At least two typographic shifts for contrasting text items on the screen



Labels:

Comments

Post a Comment

Popular Posts