This paper by Jan Kubasiewicz and Brian Lucid was presented at Motion Design Education Summit conference in Dublin, Ireland.
Type on Wheels
The phrase Type on Wheels has a somehow sarcastic, and perhaps even derogatory, connotation. The term is often applied to the work of programs that teach motion typography as a means to an end — animated type that lacks a broader context of the language of motion and communication design.
The phrase was coined more or less a decade ago during a period of explosive demand for motion graphics programs at colleges and universities across the United States. The trend continues to this day. Unfortunately, such curriculum does not reflect the current situation in the professional motion graphics industry. While the industry is fracturing, which has led to a chilling impact on motion graphics studios, why does there remain so much demand for higher education programs to teach motion graphics and motion typography?
In the past few decades the communication design profession and its supporting educational programs have been required to shift their focus — and vocabulary — to remain relevant and appropriate in the context of new technologies. Fixed became fluid, passive became responsive, and what was once composed must now be choreographed. In the same spirit of these Platonic dichotomies we should recognize the necessary shift from Motion Design to Dynamic Media Communication.
Most design educators agree that the subject of motion should be taught. The real question is how to integrate the language of motion into the wider eco-system of design education. For those of us who have labored to make communication design programs broad and multidisciplinary, the rise in importance and popularity of motion design and motion typography can be seen as a rejection of the very real need for curriculum covering multiple aspects of dynamic media communication, including interaction and experience design.
Defining Dynamism
How do we define dynamic media? Or an even broader question: How do we define dynamism?
1. Dynamism is related to or is caused by motion
We all experience motion almost every moment of every day. In fact, it would be difficult to point to a human experience that does not involve physical motion directly or indirectly. The verb “to experience” itself implies the context of motion. In terms of communicating in the language of motion, the term involves issues of what is moving and how that something is moving. The how question refers to the kinetic form and its grammar defined by space and time dimensions. Kinetic “behavior” contributes an additional layer of meaning to the objects that already convey messages expressed in their own native langua¬ges of pictures, words or numbers.
2. Dynamism is characterized by continuous change or progress
In a broader social sense, motion can also be understood as a process beyond physics: a process, which changes one situation into another with reference to the system of human values. The motion of transferring information in a learning experience takes a person from one point to another on a difficult path to knowledge. In a social context, motion can be seen as transformation.
3. Dynamism is related to interactive systems or processes
Lastly, the term dynamism in the context of communication is related to interactive systems and processes. The term “interaction design” (or broader term “dynamic media design”) describes an interdisciplinary field encompassing those aspects of design, science and engineering that are involved in bringing meaningful experiences to people. Dynamic media systems mediate the process of communication and therefore augment the participant’s experience as well as the environment where communication occurs.
What We Teach
Motion is not taught independently at the Massachusetts College of Art and Design, as we do not consider motion an “end product.” We aim, instead, to deeply embed the concepts of motion across the entire design curriculum. Motion is inherent in the media through which we communicate every day. Motion defines modern communications. This makes motion a property integral to all design and an element to which all other elements must relate. Therefore, we have rejected the idea that motion typography be taught separately, and have placed it within a wider curricular context.
Following the model of our MFA program, the Dynamic Media Institute, in which the language of motion is omnipresent in the graduate curriculum, our BFA Graphic Design Department introduces motion language and motion typography within several required courses as well as multiple electives on all levels of undergraduate program. There are a few aspects of motion continually explored in our curriculum.
1. The Articulation of Motion in Static Media
Static renderings compress our living three-dimensional physical experience onto a fixed two-dimensional surface. One of the most notable effects of this compression is the removal of “verbs.” With the loss of the passage of time we lose the ability to show action. Instead, we must visually allude to the concepts of time and motion so the work connects to our experience and understanding of the natural world.
A variety of techniques have been developed to convey motion and time through graphic form: multiplication, sequencing and the manipulation of images to list a few. A system of symbols — arrows, lines, and icons — is also often relied upon to convey motion, force, and action with clarity and brevity. The meaning of these symbols varies based upon culture and context, however. If not used carefully, they can cause more confusion than clarity.
2. Motion as It Relates to Information Design
Integration of motion with information graphics, in many cases, seems to be the only practical solution for managing and understanding complexity of large-scale information structures. Understanding is a result of a communication process that can only be completed within an individual’s mind through the process of comparison, explanation of structure, and/or causality.
There are many case studies that demonstrate a great potential of the brain in processing complex sequential information in motion. Sophisticated computational imaging tools require new conventions and strategies for dynamic visualization, since very often the solutions adopted from traditional information design do not work successfully in dynamic and interactive environments.
3. Motion as It Relates to Interface
Interacting with complex data is a special kind of motion. The visual logic of interfaces creates for the user a unique way of interacting with information. By viewing, reading, and scanning visual patterns — static and dynamic — and by selecting subjective paths through the content, users learn in their own unique way. This unique path to knowledge is a result of action and reaction, a stimulus-response loop repeated ad infinitum.
The history of dynamic visualization seems to accelerate. It is difficult to realize that widely accepted concepts and metaphors of dynamic visualization and interaction with data — such as manipulability, transparent intersecting planes, infinite zoom, zero-gravity 3-D space — were only developed in the last two decades.
4. Cinematic Language
Cinematic language refers to content on screens. Originally in movie theaters, today screens are of all sizes and locations, both private and public, from smartphones to Time Square’s large-scale displays. The flatness of a screen can be defined by its dimensions: X, Y, and T for Time. Perception of time on screen results in kinetic, live, multi-sensory experiences of narrative. Humankind’s ability to create narratives has always been a powerful communication model. The sequence of events in time — moving images and sounds — is perceived by human brain as somehow organized.
It is our cerebral cortex — with its neural networks of complex pattern recognition — trying to make sense out of sequencing of images in motion, changing colors, shapes, sizes, and sound. The result of that process is narrative. As defined by Aristotle, narrative must have a beginning, middle, and end. Though, as Godard proclaimed, narrative need not necessarily be told in that order. Godard refers here to storytelling — which may bend time and distort chronology in order to deliver the story in a memorable way. A designer’s awareness of these two distinct timelines — one for the story, another for the storytelling — is essential.
In its more than hundred-year history, the language of cinema has evolved into a complex, near universally understood system of communication, capable of translating a multi-sensory human experience into a sequence of audio-visual events where motion serves to integrate all other channels of communication.
Pedagogy: How We Teach
The assignments documented below were crafted with the intent to integrate the four aspects of motion, as defined above, into our undergraduate communication design program with the goal of broadening the scope of the program to cover dynamic media communication.
1. “Instructional Diagram” Project
The Articulation of Motion in Static Media
One way to challenge students to think about motion is to make them aware of the absence of it. In the first project of their second year curriculum, students are asked to contemplate the limitations of a static medium by using it to represent an action or procedure over time.
This assignment begins with students observing and documenting a complex physical action. Using photography, they break down the movement into important moments in time and capture those moments from many different points of view. This parallax matrix of photographs provides a visual reference that assists them in “flattening” the three-dimensional experience onto the printed page.
All of the content in the final diagram must be conveyed through visual form. Use of words or numbers is forbidden. Composition must guide our eye through the diagram in the correct sequence. Students may choose to use symbols to clarify action or represent force, but each use of these graphic shortcuts is challenged and must be justified during critique. [Fig. 1]
2. “Onomatopoeia” Project
The Articulation of Motion in Static Media, Cinematic Language
Onomatopoeia is a MassArt design student’s first experience working with time. It is assigned in the first year of the major in a required typography course. Onomatopoeia asks students to consider how the formal characteristics of typography can be systematically applied to interpret the structure and experience of a musical composition.
Students choose a short sample of instrumental music to work with and visualize their listening experience using traditional media. [Fig. 2] They are then pushed towards more rigorous forms of diagramming, mapping the instruments they hear to one or more measurable properties of sound such as frequency, duration, or amplitude. [Fig. 3]
Once the structure has been identified, the students visualize it by composing a typographic score using onomatopoeic syllables as substitutes for the sounds they hear. Onomatopoeia are words that imitate the sound they describe. Students are required to work with onomatopoeia because it forces them to focus upon the meaning generated from the formal and compositional treatment of their letterforms — not meaning embedded in words and phrases. The only textual content is time and sound, keeping the work closer to the structure of music. Sonic properties are systematically mapped to the formal characteristics of typographic elements. Letterform size, for example, could be mapped to amplitude while weight is mapped to timbre. Students determine the rules for their system, and are required to explain those rules in detail. [Fig. 4]
Once their static score is complete, the students are challenged to take their typographic systems and re-combine them with the original musical selection to create a short motion sequence. [Video Sample: 1 – 4]
While kinetic typography is an element of this project, its focus is on understanding, defining and applying typographic systems in the context of time-based structures. The language of motion serves as an organizing principle of all the components within a sequential continuum.
3. “One Hundred Items” Project
Motion as It Relates to Information Design
One Hundred Items is a second-year required project undertaken by all students in the program. The first phase entails gathering a simple data set and defining methods to bring structure and order to that data. The second phase involves extracting findings from the data and conveying that information clearly — through numeric representation — and engagingly — through design and metaphor — via time-based media.
Students begin the project by identifying and cataloging a collection of one hundred items that share similar properties or attributes. A detailed record of the collection is made by creating a custom database that contains unique values for those attributes that are shared by every item in the collection.
Once cataloged, this database is then visualized in the form of a poster. The poster must represent each object in the database while revealing that item’s unique attributes to the viewer using some type of visual system.
Like in the “Instructional Diagram” project, this assignment was written specifically to challenge the student’s perception of a medium. The poster format, lacking both a temporal axis and the ability to interact with users, is not the optimal medium for this content. Students are forced to make difficult editorial decisions to reach an understandable and coherent hierarchy for the collection. Additionally, the poster format challenges students to consider ways to keep each attribute visual, separate and glance-able. With each element needing to display five or six properties, this quickly becomes a challenge.
Student Phil Pham surveyed two hundred participants across the United States and India about how they personally define happiness. Every response is included in his poster. [Fig. 5] The interviewee’s primary response is grouped by color. Lighter shades are female respondents, darker are males, and the position of that mark defines the respondents’ age.
Many patterns or findings are revealed through the process of organizing, structuring and visualizing the database. Once identified, students are asked to reveal those findings via an animated sequence. The animation that grew from the happiness data is titled Happiness and the Meaning of Life. [Video Sample 5]
Student Matt Kaiser worked with a collection of clothing he owned. He was interested in how much he paid for it, where it was made, and the hourly rate of the employee who made it. His animation documents his findings. [Video Sample 6]
4. “Data as Narrative” Project
Motion as It Relates to Information Design, Motion as It Relates to Interface
Data as Narrative is a required collaborative project undertaken by students at the end of their second year. It asks teams to identify and shape stories from large pools of abstract data. Students begin the assignment using data analysis tools to interrogate public data sources available on the Internet. They clean, transform and visualize the data to find patterns, and then edit those patterns into stories. Students labor to tell the stories they have revealed with clarity and accuracy while making the underlying information visual, relatable and comparable.
One team chose to work with the data within the U.S. Congressional Record. In looking at the data, the team discovered a pattern of declining productivity in the United States Congress from 1947 to today. After introducing viewers to the U.S. congress, and explaining a few important terms and concepts so that the data in the congressional record can be understood, their video explains Congress’ inaction by creating visual comparisons between situations in American history to recent events. [Video Sample 7]
As is common in data journalism, the narrative storytelling is coupled with an interactive experience that allows viewers to inspect the original data and come to their own personal understanding of it. Students are challenged to map their data to appropriate interface tools to best facilitate exploration and ease of use.
When users drag the slider across the time axis within the interactive diagram of the U.S. Congressional Record browser, they are presented information about the number of measures proposed vs. passed at that point in time, events that were happening at that point in U.S. history and the party makeup of the congress in that given session. [Video Sample 8]
5. “Inception Interactive” Project
Motion as It Relates to Interface, Cinematic Language
This project challenged students with translating the story of Inception, a 2010 science fiction action film written and directed by Christopher Nolan, into a browsable database and to create the user interface to interact with the content. This particular solution of the Inception browser includes dynamic, vertical scrolling that allows the user to navigate through different levels of dream — from reality to limbo. The action of scrolling, which results in moving image and type, triggers short sequences of animated icons in reference to particular moments of the movie narrative. The project was designed and prototyped by Mia Fabbri and Lee House within a second-year required class. [Video Sample 9]
6. “Service-craft” Project
Motion as It Relates to Information Design, Cinematic Language
The service-craft assignment is a collaborative project that grows out of a required third-year design research course. Teams use a variety of quantitative and qualitative research methods to become better acquainted with a community of users they feel are underserved in the digital landscape, and envision a prototypical service that would be beneficial to their selected group.
Once a concept has been developed, teams design and produce a short narrative scenario to explain and defend their service. Narrative scenarios are tools for conceptualizing, prototyping and justifying systems or experiences. A scenario visualizes one way that a system is envisaged to be used by describing the predicted interactions of users. Time-based narratives are frequently used as part of the system development process because when we, as viewers, observe a prototypical character moving from point A to B within a system, we move further down the path to understanding that system.
The first example scenario describes a service that helps college students identify and prepare for possible careers in Mathematics. [Video Sample 10]
The second example envisions a service that brings together creative people from different disciplines to collaborate on projects. [Video Sample 11]
Closing
For your consideration, and perhaps for future discussion among design educators, we offer the following concluding thoughts:
— Motion is a language of communication connecting multiple domains: From text, to sound, to sequence, to narrative, to experience.
— The language of motion is inherent in today’s media, and is integral to design. It should be taught at all levels of design curriculum.
— As design products move from passive to increasingly responsive, we must insist on a transition from teaching motion as a “product,” towards seeing it incorporated in the broader context of dynamic media communication.
Figures
Fig. 1 How to Sharpen a Pencil by Kimber Couzo, 2009.
Fig. 2 Onomatopoeia Sound Analysis by Marianne Schoucair, 2008.
Fig. 3 Onomatopoeia Sound Analysis by Marianne Schoucair, 2008.
Fig. 4 Song for Dot by Laura Harrington, 2010.
Fig. 5 Happiness and the Meaning of Life by Phil Pham, 2012
Video Samples
1 Hong Kong Mambo by Isadora Williams. 2007 — http://vimeo.com/17624837
2 Gutter by Matthew Brimicombe. 2012 — https://vimeo.com/68463378
3 Genesis by Alec Sibilia. 2012 — https://vimeo.com/68463533
4 George Va Lentin by Nina Lilliebjerg-Heder. 2012 — https://vimeo.com/68585200
5 Happiness and the Meaning of Life by Phil Pham, 2012 — https://vimeo.com/34100496
6 100 Articles of Clothing by Matt Kaiser, 2012 — https://vimeo.com/34100570
7 Congressional Productivity (Fragment) by Carl Bowman and Chris Skinner. 2013 — http://vimeo.com/68438630
8 Congressional Productivity Interface by Carl Bowman and Chris Skinner. 2013 — http://vimeo.com/68438531
9 Inception Interactive (Fragment) by Mia Fabbri and Lee House, 2013 — https://vimeo.com/68441864
10 MathPlus.org by Will Millar, Pernilla Kaiser, Jeremiah Louf and Will Bruno. 2011 — http://vimeo.com/34100717
11 CoPilot by Ryan Boye, Nathan Hass, Matt Kaiser and Phil Pham. 2012 — http://vimeo.com/65614658