“The advent of the Internet, social media and digital advertising in the 2000s ushered in a new era of motion graphic design. Creative agencies began to employ talented designers to create short, animated (and often annotated) graphics to advertise their client’s products and services — often to break down complex processes into simple steps.” (Adobe, nd)
Being able to create motion graphics such as moving images, videos and animations can be a good addition to a designer’s skillset. Software such as Adobe After Effects is the industry standard as it is a very powerful tool which incorporates different aspects such as coding, keyframes and a range of effects. It also allows you to import Adobe Illustrator and Photoshop files as individual layers, so you can work across platforms easily to bring in different elements.
In the digital age, motion graphics have become integral to web design, and can create brand personality and an emotional connection with the user – whilst still appearing as striking. (Bondartsov, 2020)
In this video, I have followed along with the tutorials provided in week 6 to familiarise myself with the interface and to begin to understand its capabilities.
In this tutorial, I learnt how to animate images over video. Some things I tried out included having a still image placed over a video, sequencing elements to animate at different points, using scale to form a zoom-in effect, and background blurring. I found these tutorials straight forward and easy to follow along with, and I was able to learn some helpful shortcuts along the way. Although they are basic, the skills taught are interchangeable and can be applied in a range of different circumstances.
In week 9’s tutorial, I looked at kinetic typography techniques. These methods were a bit more advanced than the previous tutorial, and I initially struggled with understanding the interface, especially since the tutorial doesn’t assume you are a beginner – so some of the steps feel a bit fast paced. It took a few attempts and I kept having to repeat some steps, but I eventually managed to complete 3/5 tutorials. The other two used plug ins, so I was unable to follow along. The tutorials I did follow taught me how to create a tracking effect, using ease effects to create fluid movements. Other techniques included scrolling text in a shape and using multiple colour masks to for a vivid text outline effect.
Being able to utilise kinetic typography lets you create personality to otherwise lifeless and still animations. These tutorials can be used in a number of instances and add flair to plain typography and to create character.
I created this as part of my design portfolio, using techniques learnt from this module. Here, I have created an animated post for a platform like Instagram. I made all the layers in Photoshop first, and animated them in After Effects using basic controls such as position keyframes and scale. I staggered each element to create more of a sequence and to lead in each element in a process, rather than all at once, because I want to create priority for certain elements such as the date and time. I used my outlined brand identity to design this post, so that it is cohesive when placed alongside other graphic elements on a social media grid.
I have also created a short text sequence that will go at the end of my Freedom Festival About Us video. I have figured out how to stretch out typography, creating a similar effect to my kinetic logo variation and displaying that the festival is progressive and adaptive. The text then begins to flash quickly, before disappearing. I used stroke effects for the flashing text, and position and scale to make the text flatten down and disappear. I then did the reverse to reveal new text, showing the festival date, and used a shape mask and positioning to make the website slide into frame. I used the relevant fonts, colour scheme and imagery to my refreshed brand, creating a cohesive identity across channels.
This is that same video embedded into my XD prototype for Freedom Festival 2024. I have also designed a minimise / maximise button so users can make the video larger on screen if they would like. I cropped the video down to the correct length, which is six seconds long.
I added it to the mobile prototype also. When the video is maximised, the screen orientation changes to horizontal. This is something that apps like YouTube do to utilise as much of the screen as possible so the video ratio fills the whole screen. Vertical orientations work better for apps such as TiktTok or Instagram where the standard format is 9:16 ratio.
Reference:
Adobe (nd) Motion graphics explained: definition, history and examples. [Article]. Available online: https://www.adobe.com/uk/creativecloud/animation/discover/motion-graphics.html#02 [Accessed: 24.11.2023].
Bondartsov, Denys (2020) The Importance of Motion Graphics in Web Design [Article]. Available online: https://motiondesign.school/blog/the-importance-of-motion-graphics-in-web-design/ [Accessed: 24.11.2023]