Seventeenth International Conference on Design Principles & Practices

Abstract

This paper explains the design and development of an interactive ReactJS web application system (called AnimFonts) for user-defined and customizable animated typefaces. kinetic and animated typography have proven invaluable in contemporary visual communication and human-computer interaction settings. Designers and developers routinely use animated text in their products and creations - whether it is a website, an interactive application, a digital advertisement, or a video. Designing and animating high-quality dynamic typography, however, is a time-consuming process that requires specialized animation skills. Therefore, an interactive system that provides high-quality user-defined, and customizable animated typefaces would significantly improve the workflow of artists, designers, and developers who need to include dynamic text in their products. Previous research on this topic has led to the creation of plugins and platforms that help motion designers easily and quickly create animated typography videos inside programs such as Adobe After Effects (AE). Current systems allow designers to browse animated typefaces, download them as AE files, and apply them to their projects by using specific plugins. The developed system in this study goes beyond and automatically produces animated typography of the user’s input text right inside the web application. Moreover, on the proposed web application, users can choose and customize animated typefaces, change their properties; then download their final animated typeface as a JSON file with the Lottie format. Using the proposed web application, designers and developers can easily include their exported animated typography on a website, mobile application, or computer program without the overburden of using an animation software.