materialsnmedia2

[materialsnmedia2]

design rationale

This Social Media Typographic Digital Promo is about using image and text in a cohesive way to communicate a message as well as show the characteristics of the typeface.

From this design project, I had the challenge to make 4 type animations, to make them visually appealing while showing meaning behind it. I attempted to design with a formal, yet relatable approach to my animations with the design choices I made.

Since my appointed typeface, Zilla Slab, was specially made for a well known software browser, Mozilla Foundation, I wanted to show where the typeface originated from in my design project. I made it as clean, minimal and calm as possible to try reflect a motto from Mozilla Foundation "Let's protect the Web for future generations."

Design choices I made that was visible in my work was the way I reflected the movements in the animations to relate to the known characteristics of the Internet which were the insertion point, playback bar, red wiggly line (indicating a misspelled word) and so on. I did this so the viewer could get a grasp on the history of Zilla Slab. I also tried to use black and white image and the warm red colour to highlight the special characteristics of the typeface and to give it some life.

I've made a lot of tests and design choices by making new versions, removing and swapping the order of the animations, different layouts to show information and movements, the speed of transitions which I had to consider.

Though this was my first ever gif animation to promote a typeface, it was a challenge yet a new learning experience. I have learned a lot in terms of making design decisions while considering the potential audience opinions eg. not making fast transitions, scale for easier reading and empathising from a viewer's point of view. I learned from this project that consistency in some parts are necessary and too much change won't make the design memorable, some type anatomy, rhythm in the animation and colour choice.  

[materialsnmedia2]

error with upload

I tried to put up my last Instagram and Facebook gifs, but Tumblr keeps saying "unable to upload video" :( I’ll try it on another day

[materialsnmedia2]

week fourteen - monday

Facebook type animation final part one

done on illustrator + photoshop

25.10.2021

[materialsnmedia2]

week fourteen - monday 

Instagram type animation final part one

done on illustrator + photoshop

25.10.2021

[materialsnmedia2]

week thirteen - monday - friday

#2: Facebook type animation test 3

- the transition from the “5 Weights - Bold” to the alternatives section is too fast, need to work on this

- “Let’s protect...” shows up too fast, maybe have the image appear first then the words appearing one by one?

done on illustrator + photoshop

15.10.2021 - 22.10.2021

[materialsnmedia2]

week thirteen - monday - friday

#2: Facebook type animation test 3

Facebook  “#2: Instagram type animation test 3″

done on illustrator + photoshop

15.10.2021 - 22.10.2021

[materialsnmedia2]

week thirteen - monday - friday

#2: Instagram type animation test 3

changes made:

I’ve changed the look of the “weights + italics” section. unfortunately, I had to remove the italics part to try fit in to the 15 second mark. I tried to imitate the playback bar, similar to the earlier research of Zizo Typeface as well as the layout

I took away the symbols/punctuations section as I thought it was unnecessary because of 9 sections in an 18 second animation... 

need to work on the speed delay on the alternative letters sections and the “optimistic” section for it to delay longer to process the accents on the letters

done on illustrator + photoshop

18.10.2021 - 22.10.2021

[materialsnmedia2]

week thirteen - monday - friday

#1: Facebook type animation test 3

Facebook dimensions of “#1: Instagram type animation test 3″

a lot easier to look at the animation due to scale. I do think that I should change the segment of the “5 Weights” + “5 Italics” to something easier and not too hard to read with the fast transitions

I also need to work on trying to meet the animation to 15 seconds!

done on illustrator + photoshop

18.10.2021 - 22.10.2021

[materialsnmedia2]

week thirteen - monday - friday

#1: Instagram type animation test 3

a lot of changes in this new version:

1. “Zilla Slab” > “Z://a Slab” > “Zilla Slab” in white, I’ve shortened the introduction as the previous versions was too much in terms of started the animation 

2. I kept the left side animation of “a contemporary...” but fastened the speed of the animation + right side showing the “slab serif” anatomy of a letter (m) and the “smooth curves” of a letter (G). I really liked this section because I was finally able to show some sort of the typeface’s anatomy, which I couldn’t do last time

3. “5 Weights” + “5 Italics” - it’s a good way of showing off the different weights and italics but I may change this overtime as it’s too fast to read the different names of the weights

4.  I used the “disappearing like effect” when showing the alternative letters + warm red colour on them to know the difference - could work on the timing though... too fast in transition and not enough time to process that section

5. punctuations/symbols - Angus Typeface animation of each row moving in “wave-life” pattern where each row’s wave starts from left or right

6. math symbols + red lines forming a box - I found that part really cool/creative

7. “different”, the “ff” showing off the a ligature from the typeface + wiggly red line and cursor (line that appears when typing) that kind of associates with the internet

8. soft transition to image + optimistic + optimistic with the accents

9. “Let’s protect the web for future generations” - highlight movement on the last two words + image that associated with this sentence

I really liked this animation the most, just unfortunate that it’s quite fast and 3 seconds longer than what the brief says. I need to make some changes or remove some sections that aren’t necessary...

done on illustrator + photoshop

18.10.2021 - 22.10.2021

[materialsnmedia2]

week twelve - friday

using images with Zilla Slab typeface #2

I previously used “GROUND” in my earlier tests which led me to finding more images. I’m not too sure if I’ll still use this image in my final animations. 

on the other 3 images, I tried moving the words in the images in different layouts. I do like the “open.” image - a lot of space. but again, it doesn’t quite correlate to the typeface’s purpose

I had another word saved that I thought suited was “JUSTICE” and sentence wise, I went with “ALL LIVES MATTER.”

though both images are really impactful with the typeface, again, it’s great, but for the animation, I’m not too sure it will fit with the flow of the animation. I think my tone for the animation is towards a formal feeling and not too serious. 

done on illustrator

15.10.2021

[materialsnmedia2]

week twelve - friday

using images with Zilla Slab typeface #1

I got free images to use from Pixabay + Unsplash and Pexels and wanted to test out which image/s would be appealing to my type animation 

I went for black and white images to stay consistent with my colour scheme and played around with the words associating with the image + different weights/italics depending on the words’ feeling. 

from this, I was able to see two images that stood out to me that I thought I’d use for my animation which are “collaborate” and “optimistic”

I thought both of these images with their words fit with the Zilla Slab’s “story” in a way where it focused on the “we stand for the Internet” slogan of “moz://a”/Mozilla Foundation in which this typeface was originally made for, the company. I’m planning to show the accents on each of the letters in the animation. you’ll see :)

done on illustrator

15.10.2021

[materialsnmedia2]

^ “smooth curves and true italics” - possible information I could put into my animation

Zilla Slab - Google Fonts

^ “curved slant detail in the v, w, x, and y of the italic letters” - I’ve shown this to my previous animation tests along with other letters (alternatives) 

Zilla Slab - A common language through a shared font

^ primary colours - black and white (1) + neon blue, lemon yellow, warm red (2)

colour combinations, working with a black background - two top options that really caught my eye for decision making for colour choice for my next animation test

Color - Mozilla Dot Design

week twelve - thursday

more research about Zilla Slab

from the short research, I was able to gather a bit more information about the typeface which helped with adding and showing it to my new animations that will help improve it

colour choice wise, I would like to narrow down my colour palette to at least 3 colours which are black, white and warm red. the warm red really stands out from the rest in both black and white backgrounds whereas the neon blue and lemon yellow blend with white background but is decently paired with black background.

I also didn’t want to have a wide range of colours + black and white as it will be too much colours to look at and also with the movements/animations, it may come off as flashy with the fast transitions

so, I think for my new animation test, I’ll go for a minimal colour palette consisting black + white + warm red!

14.10.2021

[materialsnmedia2]

week eleven - thursday

frame animation notes

- a reminder on the three ways of showing animation 

07.10.2021

[materialsnmedia2]

week twelve - monday - friday

#3: Facebook type animation test 2

“#3: Instagram type animation test 2″ transferred to the Facebook animation dimensions

I’ve only changed the movement of the first section with the middle “Zilla” flashing once. overall, I’m content with this but to improve this version, I’ll need to change a few things + possibly add colour :)

done on adobe illustrator + photoshop

11.10.2021 - 15.10.2021

[materialsnmedia2]

week twelve - tuesday - friday

#2: Facebook type animation test 2

I removed the arrows section at the very end and now, it looks like the Instagram animation test I did previously (#4: Instagram type animation test 2.) I just transferred the animations to the Facebook dimensions 

it looks quite nice, a lot easier to read due to scale and more “breathing space”

still need to improve further though...

done on adobe illustrator + photoshop

11.10.2021 - 15.10.2021

[materialsnmedia2]

week twelve - monday - friday 

#1: Facebook type animation test 2

I brought my plan for the Facebook type animation to this and it looks similar to the flow of the Instagram 2 tests below. 

I’ve added to the end the arrows and other symbols just to see how it would look like and if it flows with the rest. This was kind of inspired from the Tosh Typeface. I’m not too sure about this part as it looks unrelated to the rest of the animations... I could incorporate the symbols with letters somewhat but from the looks of it, I might remove it since I only do have 10-15 seconds to show what’s necessary...

done on adobe illustrator + photoshop

11.10.2021 - 15.10.2021

[materialsnmedia2]

week eleven - tuesday - friday

#4: Instagram type animation test 2

changes made:

- the letters appearing on the right on “a contemporary..” part, I changed the letters appearing from “A, E, H, P, T” > “A, E, U” instead to show the differences in the letters as the previous letters shown looked too similar to each other. I removed most and came down to 3 letters and adding “U” for the “smooth curves” of the typeface 

- I brought the order of the designers’ names and the symbols/punctuation parts back to where it was originally 

this is NOT FINAL yet, I will make more tests and research more about the typeface and also images that could help illustrate the qualities of the typeface.

so far, with colour choice, I might stick with black and white and possibly add another colour that’s suited for this typeface/theme.

done on adobe illustrator + photoshop

05.10.2021 - 08.10.2021