maria pilar! @mariapilarmedianmaterials - Tumblr Blog

Design Rationale

For this project of ‘Type in Motion,’ my animations focus on Roboto Slab and its unique qualities. Earlier on, during Project 1, I gathered research and established three key words about Roboto Slab: Friendly, Universal, and Modern. In order to showcase this in Project 2, I divided the four animations into two concepts:

Concept 1 promotes and highlights the different ways Roboto Slab can be used, while Concept 2 demonstrates the key characteristics of the family. By showing Roboto Slab across different mediums - big screens, small screens, and moving screens - the first two animations display Roboto Slab’s modern nature; its universal ability to translate across different sized screens; and the accessibility and legibility that comes with this, thereby making it friendly to viewers.

Concept 2 expands on this by demonstrating the elements that make this universality, modernity, and friendliness possible: the three different alphabets show diversity across accent marks and glyphs; different weights make legibility feasible across modern devices; mono-width numerals display consistency- all of which contribute to a sense of friendliness to the viewer, and the idea that Roboto Slab is designed for you. In essence, Roboto Slab is not a race horse; it is a work horse.

Creating a design system that effectively conveyed this required thought about two major things: color palette and visual effects. For the previous brief, I established orange as a color that emanates friendless and warmth. Though we were able to widen our color palettes for this project, I decided to stick with orange with just the addition of a light, off-white cream in order to stay true to Roboto Slab’s humble, work-horse nature - it is not a showy font, and therefore does not require a showy color scheme.

In the same vein, grandiose, complex transitions and visual effects were also unnecessary - if anything, they would’ve acted detrimental to the project, as they would’ve strayed from what Roboto Slab means and is best known for as a font: consistency and reliability. Therefore, I made the decision to stick with simple, straightforward transitions that utilised the transform and opacity keyframes: things fading in and out as they moved across screen. In the early stages, I experimented with many different transitions: falling letters, fade-ins, and more, but transitions based on the opacity and transform functions proved to be the most appropriate.

In future, I think it would be exciting to explore even more elements of Roboto Slab that I did not have the chance to within this project, such as ligatures, diphthongs, and symbols. It would also be interesting to see Roboto Slab in its prime, in situ in a phone or tablet, so that viewers could see the theory of it and the actual practicality of the font. In general terms of animation, I look forward to going into more complex transitions, but acknowledge that simplicity was key in this project and I maintain my stance that this decision highlighted the best parts of the font and allowed focus to remain on characteristics. After all, type is the hero of this project.

Facebook_2: Characteristics and Qualities

Instagram_2: Characteristics and Qualities

Facebook_1: Promo and Uses

A smoother transition from moving screens to cream background, and the same improvements with race/work horse timing as Instagram_1

Instagram_1: Promo and Uses

The final version of Instagram_1. I adjusted the time that race stays on screen before being crossed out as well as the speed at which work appears and stays on screen. I think this final iteration has balanced that effectively.

Final Refinements - FB_1

Still not quite there with the timing of race being crossed out - also, I’m still unhappy with the transition of the final cream background coming in. Getting closer, but not quite there yet.

Final refinements - Insta_2

I slowed down the languages section and was happy with this iteration until I realised that the final Available On Google section wasn’t aligned to the centre. Whoops.

Adapting Concept 2 to Facebook

It was actually really difficult to adapt concept 2 to Facebook, as some of the elements that worked so well - eg listing the available languages and weights were only effective because of that taller instagram frame, which wasn’t feasible with the landscape formats of Facebook. Thus, I had to think about how I could adapt it in a manner that was still visually appealing, made sense, and stuck to the design system that I had established in the previous three gifs.

Instead of having Slab come in from the side, I had it come up from the bottom, but still using the same opacity and transform keyframe effects to that it is still cohesive to the style used in Insta_2. I also increased the size of Roboto Slab to better fit the frame, as using the same size as Insta_2 would have been too small; this way, the viewer’s attention is captured from the very beginning.

The issue of listing vs longer formats came up in Concept 1, and so I took the solution from Concept 1: using the layer mask effect that I learned, I re-introduced the idea of scrolling through the available languages instead of listing them - easier to read for the viewer, and creates interest between social media formats.

The alphabets changed from left aligned to centre aligned because it ties in more with everything else that’s centre aligned. I reduced the size from 130pt and 180 leading from Instagram_2 into 100pt and 170 leading so that it would fit into the screen - I learned from the flashing D of Concept 1 that having smaller characters can actually be more effective, as it gives room to the viewer to actually see and notice the differences which they wouldn’t if their attention was solely on the size of the characters.

Figuring out the weight/numbers section was perhaps the most challenging aspect of adjusting Concept 2 to the Facebook constraints. This is because in the Instagram version, it relied on having the weights and numbers listed - I could’ve done the exact same for Facebook, but it would’ve been too small and therefore ineffective - I wanted to push myself to make the most effective version of this possible.

Thus, I started with the numbers first - it was an easy starting point for me to be able to just lay out all the numbers. From there, I could experiment with that typing effect that I began to explore in Insta_2 - this time, backwards; in insta_2, the typing had a delete-like effect, so I wanted to reverse that and have it as though it were typing something out onto the screen.

Then, to be able to link it to weights I had each number in consistent weights which is something I noticed even back in Insta 2: since I structured it as

123456 234567 345678

the numbers would always be the same weight: 1 was always thin, two was always light, three was regular, and four was always bold. I realised this was the perfect way to transition from numbers into weight: bold is almost always the most noticeable stand out weight, and there are four different weights of Roboto Slab; having all the fours bolded would draw attention to that number 4.

To emphasise this, I wanted all the other numbers to fall away. I tried reversing the typing method but a) it took too long (fifteen seconds really isn’t that long of an animation) and b) it didn’t ‘fit’ with the design system. As a method of transition one way, it worked, but having it go both ways felt like to me as if I had to incorporate it more into the other gifs, when it didn’t really fit and felt more like squeezing/forcing it in, rather than having it natural.

To solve this, I decided: since I was having weights/numbers in reverse, I would stick to that entirely: the numbers got introduced by opacity and transitioned with the deleting/typing effect in Insta_2, so for FB_2, I would have them introduced via typing effect and transition them away with Opacity keyframes. As soon as I did this, and the other numbers ‘faded away’, I knew that this was more consistent with the style that I had established previously and it just worked.

Since it was already tied to Insta_2, I thought it fitting to tie it back to FB_1. With the four 4s arranged diagonally, I had them come back to left align and merge into one 4, the same way that I had the four Ds of weight and had them merge into one. Then, to tie it all together, have the four weights scroll down with their associated numbers with it.

Instagram_2 Developed

Changes made to Existing Sections

I decided to make some changes based on feedback, as well as continue with the next section of the animation. As you can see, I dropped Available down a line, and I agree that this is much smoother and less of a strain on the viewer to go from two different lines. It did mean that I had to drop Latin, Greek, and Cyrillic, but I don’t think this is necessarily in detriment to the animation. To ensure cohesion and tie everything together nicely, I also ended the animation with Available on: in the same line as the beginning. I still think that the transitions of Latin, Greek, and Cyrillic are too fast - however, I set the time for each alphabet to remain on screen at ten seconds, and I concur with the feedback that this is more effective, as it allows the viewer to actually take it all in. As well as that, I changed the leading of the alphabet paragraph: previously, I recall the leading was around 150ish, and I increased it to 180, which improved the breathing space massively and prevents clashing from above/below accent marks.

Starting the second half of the animation

I decided to jump off that idea of the numerals coming down alongside the four weights. Again, to maintain cohesion of style across all four animations, I mostly used the transform and opacity key frames - for the sake of rhythm and to avoid monotony, I did switch the order that it came on screen: the weights started at the bottom of the screen with bold, while the numbers started at the top with thin and made their way down. I think this creates a balanced effect, which is important for a font that prides itself on consistency and being a ‘work horse.’ The transition in which the numbers go from smaller to bigger is also taken from, and developed further, from Concept 1 with the flashing D - then, using opacity keyframes, which has become a stylistic association with this project, having the other numbers appear in consistent weights. As the first set of numbers began to drop off, this was initially accidental: it was just the way that photoshop naturally set the timing when I first introduced the numbers. However, it seemed like deleting/typing and that was a cool effect I hadn’t previously explored but was curious about, therefore I decided to keep it and continue to experiment with in Facebook_2. It then fades to cream and the text appears orange, as Concept 1 had a few frames that switched between cream and orange and lasted longer, while Concept 2 didn’t, but I thought it would be nice to tie it together in the end that way.

Feedback

These are the notes that I took while receiving feedback from Karol. In regards to Concept 1, I only received one note, which I am quite pleased about, as I worked really hard to get that up to scratch: the timing of race in ‘Roboto Slab is a race horse’ is too fast and the viewer has barely any time to comprehend what it’s saying before it gets crossed out. Thus, I can fix this by: a), extending the time that race is present on screen OR slow down the horizontal line that crosses it out - maybe a combination of both?

As for Concept 2, Karol noted it might be more effective to drop Available onto the same line that Roboto Slab was in the previous frame - currently, it’s quite th jump for the viewer’s eyes to suddenly go from the upper middle half of the frame to dead-set in the middle, and this transition could be eased by lowering the baseline of Available.

After that, Latin could be moved a line up to close the gap between that and ‘Available in’. Thus, Greek and Cyrillic can also be moved up and could be slower - and, upon reflection, I actually believe that the whole section of Available in X Languages could be slower - currently, it’s moving quite fast.

Though I originally thought that having a quick transition between the alphabets would make for a smoother section (I thought that having it stay on screen too long would be clunky), it’s come to my attention that it’s far too quick and, like race horse in the first concept, the viewer has barely any time to comprehend what’s being shown. Since this concept revolves around the characteristics, this is quite important; I will try slow it down.

Because some of the accent marks are on the top of the letter and others are on the bottom of the letter, there is some clashing between leading - try pull the lines apart for more breathing space. Could you explore ligatures/dipthongs/microelements, etc?

One idea that Karol had that I really liked was the idea of introducing numbers in the weights section. I had reached the weights section (Thin, Light, Regular, Bold) and was struggling to come up with a way of how to transition to the numbers section, which seemed so distant and completely different. However, Karol noticed that I had mentioned there were four weights, instead of just displaying the weights, so why not introduce numbers alongside them; as they descend in order, once the final weight gets to its place on screen, start dropping numbers in, 1 2 3 4: Thin can be 1; Light can be 2; Regular can be 3; and 4 can be bold. I am excited to play around with this idea.

Instagram_2 Experiment

Since I got into a flow while making the Facebook_1 GIF, I wanted to keep up that momentum, and I did so by trying out the Instagram_2 Concept. Because Concept 1 is based around the idea of ‘advertising’ the font and showing the different uses of Roboto Slab, I wanted Concept 2 to focus heavily on showing off the characteristics of the family. Key elements and assets I knew I wanted to display were:

Different Alphabets

Different Weights

Numbers

Roboto Slab is such a versatile font and there are a lot of other assets such as symbols, but I feel that these are the most important ones to display, as: alphabets show universality (different languages and accent marks); different weights demonstrate legibility/modernity across different mediums (which is what Concept 1 focuses on); and numbers show the monowidth feature that Roboto Slab added in, thereby showing accessibility + friendliness (easy to read) as well as consistency. Due to research from Project 1 and a revisit to said research, I believe that modernity, universality, and friendliness/accessibility are Roboto Slab’s best features, therefore the elements and assets used in this concept should reflect that. In essence, Concept 1 asserted that Roboto Slab was friendly, universal, and modern, allowing Concept 2 to explore this in depth and how the font achieves these qualities.

Facebook_1 Continued Development

I changed the scrolling motion so that it appears like the viewer is scrolling downwards instead of upwards, and as I predicted, it feels more natural. One thing I think I need to work on is the transition of moving screens and that cream square - right now, it feels rushed and clunky, so I will experiment with that further.

Facebook_1 Development

This is an initial experiment with the Facebook Layout and adapting my Instagram content to that horizontal format. As you can see, I explored the layer mask ‘scrolling’ effect, and I am pleased that I managed to figure it out. That being said, I think I did it in reverse and it would be more effective for the words to go downwards instead of upwards - this would feel more natural because in the Western world, we read left -> right downwards. This is something to keep in mind for next time.

I made the decision to keep the D instead of R, simply for the sake of consistency across promo videos. Since this is 1/2 concepts, I wanted to keep them similar. However, I knew that I needed to modify the transitions - thus, instead of having the singular D changing weights, I decided to make the most of the medium that I am using and lay out the different weights from bold -> thin horizontally. I didn’t think that a flashing transition would be effective, and I wanted to explore more than just relying on opacity keyframes, so I have the D’s spaced out across the screen and appearing one by one. Once they all merged together, I kept that same transition from Bold D -> Orange. The tweaks I made to Big, Small, and Moving screens are minimal - again, just trying to make It appropriate for the format.

I did not touch the final Roboto is a work horse animation, because I felt it unnecessary - I think that in the landscape Facebook format, it is actually more effective than the Instagram square version - the font appears bigger, even though it’s the same size, and therefore has more impact.

Facebook_1 Storyboard

I wanted to step back and redraw some storyboards to ensure that while I was adapting my instagram videos to the Facebook format, I wasn’t just resizing things - I wanted things to be purposeful and intentional. Since Instagram is a square video, it was appropriate for the first frames to have the words transitioning downwards and sitting on top of each other - however, I believe that in the wider, horizontal Facebook format, this would be a tight squeeze. Thus, I think that a ‘scrolling’ motion, which I looked at in my research with the the ‘where did the weekend go?’ gif, would fit perfectly. I have never actually done this kind of effect before, but I have revisited the Panopto content and I think the transition would go something like this:

Layer mask -> transform keyframe behind the layer mask -> transform keyframe into the middle of the screen -> transform keyframe behind another layer mask. I look forward to experimenting with this.

I thought it could be nice to maybe play around with the R instead of the D this time, and instead of changing weights, I could show the transition of the changes made to the R (straight end to curved end), since the horizontal format really allows for that.

I could type out big screens? Unsure of what to do for the small screens, but I think it is powerful to have that negative space, even though initially, it feels empty.

I could try a side to side movement for the moving screens, like in the ‘Horror/Sorrow’ gif that I researched, which had it swinging in a pendulum like effect.

I could try having ‘work’ horse bump ‘race’ horse out, as I think that’s a nice way of linking transition to words.

FINAL INSTAGRAM_1 GIF

These are the final refinements I made to the Instagram_1 GIF after receiving the following feedback from Karol:

make the D smaller so that it’s easier to see the weight change - previously, it was taking up too much of the frame and the changes weren’t noticeable.

close the gap between the ‘moving screens’

change the transition direction of ‘moving’ - have it come in from the right instead of the left, but maintain the ‘screens’ transitioning from the right

Bring up ‘little screens’ so that it isn’t so isolated from ‘Designed For’

Increase the weight of ‘race’ so that the gap between ‘work/race’ and ‘horse’ is less gaping.

Ensure ‘work’ and ‘race’ have the same base line, as ‘work’ was looking a little smaller and inconsistent.

One other piece of really interesting feedback that I received was to really consider the words I am using. This ties into the research that I have conducted and how words can tie into the transitions - in previous iterations, I had ‘friendly’ as the final word - however, Karol pointed out that it wasn’t exactly very ‘friendly’ to have the word bump the other two words, ‘accessible’ and ‘modern’ away, as if they’re being shoved aside. After thinking about it, I decided that ‘modern’ would be a more appropriate word to end on. I think I was attached to the word friendly because Roboto Slab really prides itself on friendliness serving a function. Upon reflection, I believe that not only is modern a more fitting word for the transition, I believe it is the word that sums up this set of Promo Gifs - I emphasise how Roboto Slab is available across lots of different sized screens, which is an incredibly modern concept. As well as that, Modern and Friendly both have D’s in them. If anything, Modern works better because it states the modernity of the font while also still ‘heroing’ the D character, which I used in my type specimen to show off the duality of Roboto Slab’s mechanical, geometric skeletons and fun, friendly, open curves.

I am happy with this being a final development. Moving forward, I will work on adapting this to the Facebook format.

I tried to get that slower, less flashing transition for the D - I’m not sure if I’ve quite reached it yet, and I’m not sure which is more effective at this stage, this iteration or my previous iteration.

Continued Research

An interesting way of having letters come onto screen - I think I’ve been working a lot with opacity keyframes and transitions, but it would be interesting to play around with letters/characters that are already on screen but shift positions like in this gif.

A good example of how not everything has to move in a gif - the type remains static and the movement is in the line - also a good example of realistic movement in gifs - it’s shorter and slower in the beginning, longer and faster in the middle, then shorter and slower as it fades outa gain.

Nice, clean appearance of type on page - almost like typing effect.

Another good example of movement/static juxtaposition. I really appreciate the way that the days roll together and speeds up on Saturday and Sunday to really emphasise the point - shows that the designer is thinking about it and has reasons and justifications for the speed/time on screen, and it’s not just careless. It would be cool to have a rolling effect - I think I could achieve this with a layer mask as demonstrated in a previous class video, which I would have to go back and rewatch.

Everything really comes together in this gif and works together - the flashing colors changes and fast transition of font makes it feel ‘frantic’ - another good example of how the words on screen can, and should, affect the visual treatment of it in a gif.

Trending Blogs

Recently Viewed Blogs

maria pilar!