Piet: Facilitating Color Authoring for Motion Graphics Video

TL;DR

Piet, the first tool tailored for MG video color authoring, features an interactive palette to visually represent color distributions, support controllable focus levels, and enable quick theme probing via grouped color shifts.

Abstract

Motion graphic (MG) videos are effective and compelling for presenting complex concepts through animated visuals; and colors are important to convey desired emotions, maintain visual continuity, and signal narrative transitions. However, current video color authoring workflows are fragmented, lacking contextual previews, hindering rapid theme adjustments, and not aligning with progressive authoring flows of designers. To bridge this gap, we introduce Piet, the first tool tailored for MG video color authoring. Piet features an interactive palette to visually represent color distributions, support controllable focus levels, and enable quick theme probing via grouped color shifts. We interviewed 6 domain experts to identify the frustrations in current tools and inform the design of Piet. An in-lab user study with 13 expert designers showed that Piet effectively simplified the MG video color authoring and reduced the friction in creative color theme exploration.

Figures (8)

• Figure 1: An example provided by E4 explaining Bitcoin, showing the typical workflow to create an explainer motion graphics video. The original narration is missing, thus we replaced it with a representational figure for S1. We have received consent from E4 to include this in the paper.
• Figure 2: User Interface of Piet, consisting of (a) Video Playback, (b1) Video Theme summarizing the dominant colors throughout the video, (b2) Scene Palette illustrating detailed color distribution on the timeline, (b3) Element List detailing colors for every element, and (c) Color Picker. These views are both interactive and synchronized.
• Figure 3: Piet features group-wise color adjustments. Users can follow these steps: (a) choose a theme color in the Video Theme view, (b) the Scene Palette will automatically select colors similar to the chosen theme, (c) manipulate the HSL (Hue, Saturation, Lightness) slider, (d) the selected group of colors will be changed together.
• Figure 4: Piet provides users with the flexibility to adjust the level of details in the Scene Palette to handle minor color blocks and encourage the progressive workflow.
• Figure 5: The three color representation views, i.e., Video Theme, Scene Palette, and Element List are synchronized to help designers inspect how theme colors are distributed throughout the timeline and interconnected scenes, highlighting with the black outline.