Introduction to kinetic typography

Introduction to kinetic typography
Building principles and technical knowledge for creating kinetic type designs

by Rory Bradley
by Ger Fox
by Dun Laoghaire Institute Of Art Design + Technology (Dublin, Ireland)

This assignment introduces designers to kinetic typography and the wider world of motion graphics. It aims to introduce them to concepts such as keyframes, properties and a timeline. Then asks them to use these concepts to manipulate type in order to communicate. These concepts can be found across a wide range of motion graphic and animation tools, so the students should develop a transferable understanding of these environments.

They are also working on core typographic principles on screen such as contrast, rhythm, negative space, hierarchy, etc. The added complexity of using time and animation with these principals provides an exciting space for students and the lecturer.

The students are assigned a typeface and asked to explore it's purpose and unique aspects through motion. Each day builds on the previous, adding new tools and ideas. At the end of the workshop, they should have produced several short motion tests. The best of these are then cut together to form a ‘showreel’ for their font.

This assignment focus on exploring typography through the medium of motion graphics. The wider fields of motion graphics, kinetic type, animation and AR/XR applications are all considered and researched by the participants who must first build an understanding of what is possible in this space.

They are then given a brief that assigns them a specific typeface. This typeface must be researched and it’s purpose and features documented. These then form the line of questioning for the participant as they are introduced to the technical tools. In this case it could be After Effects, Blender, Cavalry or another appropriate motion graphic software.

Through this the participants will learn:
— Research skills through researching their assigned typeface
— Technical skills as they are introduced to the software
— Creative problem solving skills as they are challenged with communicating their research through the software

By the end of the workshop they students should submit a showreel of their testing. These reel should be about 15 seconds long. This limit means the students must edit and consider the pacing and tone of what they include. They should also be encouraged to use music in their reel to further communicate their idea.

This workshop could be enhanced by asking students to create an AR trigger for their showreel and link the screen type with printed or environmental applications.

The following is a suggested breakdown of this assignment over 5 days. Each day starts with an introduction or demonstration in the morning and then studio-based work in the afternoon. The studio-based work can be independent or supervised. The assignment should be flexible enough to expand or contract to more or less time. For more time, further concepts such as expressions could be introduced.

Day 01:
— 10.00 to 13.00: Motion Design introduction, style frames, workflow
— 14.00 to 17.00 – font research and content gathering

Day 02:
— 10.00 to 13.00: Introduction to working environment and creating animation using properties such as Position, Scale, Rotation and Opacity.
— 14.00 to 17.00: Motion tests

Day 03:
— 10.00 to 13.00: Introduction to animation using behaviours such as noise, oscillators and random values.
— 14.00 to 17.00: Motion tests

Day 04:
— 10.00 to 13.00: Introduction to repeaters, duplicators and masks
— 14.00 to 17.00: Motion tests

Day 05:
— 10.00 to 13.00: Cut tests together into a 15-second showreel with sound.
— 14.00 to 17.00: Refine cut and submit.

— [Demo Festival]: Demo festival is a festival of motion graphics started by Studio Dumbar.
https://demofestival.com/

— [Artivive]: Artivive is an easy to use AR app that can bring motion design into the “real” world. https://www.artivive.com/exhibitions/walkie-talkie

— [DIA] DIA coined the term Kinetic Typography, here DIA use analogue motion design for a Klim typeface. https://dia.tv/project/klim-sohne/#slide-1

— [Kiel Danger]: Kiel Danger is a creative coder and motion designer who creates interactive motion graphics. https://www.kielm.com/

A minimalist design with a white background. In the center, the text

I2_img1 by Rory Bradley & Ger Fox is licensed under CC BY 4.0.

A bright yellow background with abstract black curved lines drawn across the image. The lines intersect and form flowing, organic shapes, giving the design a dynamic and artistic appearance. The image has black borders at the top and bottom.

I2_img2 by Rory Bradley & Ger Fox is licensed under CC BY 4.0.

A black background filled with scattered white typographic characters, including letters, numbers, and symbols, seemingly floating in space. The characters vary in size and orientation, creating a swirling, chaotic visual effect. On the right side, there are four small circular color indicators in blue, pink, yellow, and gray.

I2_img3 by Rory Bradley & Ger Fox is licensed under CC BY 4.0.

This assignment was created by Ger Fox, Linda King and Rory Bradley. All are lectures in design in IADT.

 

Prior knowledge, preparation
Teachers should be able to help guide participants through the project using a design process such as the double diamond method.

Students should be familiar with the basics of visual communication and image making but cross disciplinary teams are encouraged.

 

Accessibility
This task could be simplified in the outcomes, for instance it could be a static postcard if the motion component is too complex or the tools are not available.

 

Additional Tools
This workshop is designed to use any and all tools that are to hand. Be creative and use constraints to your advantage.