Abstract and 1 Introduction

2 Related Work

2.1 Program Synthesis

2.2 Creativity Support Tools for Animation

2.3 Generative Tools for Design

3 Formative Steps

4 Logomotion System and 4.1 Input

4.2 Preprocess Visual Information

4.3 Visually-Grounded Code Synthesis

5 Evaluations

5.1 Evaluation: Program Repair

5.2 Methodology

5.3 Findings

6 Evaluation with Novices

7 Discussion and 7.1 Breaking Away from Templates

7.2 Generating Code Around Visuals

7.3 Limitations

8 Conclusion and References

6 EVALUATION WITH NOVICES

Lastly, we show the potential of LogoMotion for user interaction by showing LogoMotion to novices. We wanted to understand (RQ5) can user interaction and iteration improve the quality of automatically generated logos? More concretely, how usable did novices find the results, and how many rounds of iteration did novices take to reach a good design outcome?

6.0.1 Methodology. We recruited five animation novices from within a university. We had novices pick two templates to start with from a gallery of options. Of the LogoMotion-generated results, we asked how many they would consider publishable results and take as is and how many they would consider working with to edit and fix. If they chose an option to iterate upon, they provided prompts into a textbox, which would trigger edits to the underlying animation code.

6.0.2 Results. We found that many novices liked the system generations as is. In total, of the 16 animations that the novices saw, 10 were said to be usable as is. However, they also liked the ability to rapidly customize them and test smaller iterations around the design concepts they captured. For example, if the logo was of a skier skiing in from the left, they tried to ski them in at a lower angle or from a different entrance. They appreciated the ability to make these edits and get quick previews without having to do any direct manipulation with regards to timing, easing, or the rearrangement of other elements (all of which was preserved in the underlying code timeline). Novices liked to be able to use natural language to make edits that would target many different dimensions at once (visual changes, grouping changes, ordering changes). For example, novices put in prompts like, “have a slower delay at the beginning and don’t move the bird at the end", “make the text show quicker and don’t have a pulse animation at the end", or “the elements in the yellow banner should come in at the same time".

Novices appreciated the multiple of four options they got for each logo. One novice said that they did not realize there were so many options to pull a layout apart in terms of layers and directions until they saw four different animations making it happen. Novices also found inspiration in the galleries and would merge concepts from different options into new ones.

There were two cases where novices faced difficulties getting what they wanted from the system. The first was when they wanted to get complex interactions between two objects (e.g. having a shape interact with a nearby letter). The second was when edits novices made created new visual bugs that their exploration process would be derailed by. Nonetheless, all novices were satisfied with at least one animated logo after making just one to two rounds of iteration.

Authors:

(1) Vivian Liu, Columbia University ([email protected]);

(2) Rubaiat Habib Kazi, Adobe Research ([email protected]);

(3) Li-Yi Wei, Adobe Research ([email protected]);

(4) Matthew Fisher, Adobe Research ([email protected]);

(5) Timothy Langlois, Adobe Research ([email protected]);

(6) Seth Walker, Adobe Research ([email protected]);

(7) Lydia Chilton, Columbia University ([email protected]).


This paper is available on arxiv under CC BY-NC-ND 4.0 DEED license.