How Designers Approach Logo Animation

Table of Links

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

3 FORMATIVE STEPS

In this section we introduce the design challenges and principles that surround our problem statement of logo animation. We took a mixed methods approach to our formative work: collecting and affinity mapping exemplars of the class, reading design literature about logos, interviewing motion designers, and analyzing existing end-user tools [10, 12, 13]. This step also guides the design and technical choices of our method.

We interviewed 4 professional motion designers (E1-E4) with at least 10 years of experience with motion design tools to understand these different methods (eg, templates, manual authoring) and conducted need finding around logo animations. Three motion designers interviewees (E1, E2, E4) authored logo and brand animations professionally.

3.0.1 Motion Presets. Consumer design tools [10, 12, 13] usually give users control over animation using motion presets. For example, design tools from iMovie to PowerPoint universally suport simple animation presets like fades, slides, and wipes. These presets allow users to customize animation by changing motion properties such as speed, direction, and duration. A common design pattern is to also parameterize an animation with intro, looping, and outro animations, to help users structure different states within their animation [16]. Examples of animation presets and how presets can be parameterized and customized is pictured in Figure 2.

3.0.2 Heuristics and Grouping. Design tools often also analyze the layout of the canvas and apply heuristics or rules to page-level animations [12]. For example, all non-background elements can animate in from the edges, fall in from one direction, or fade in sequentially. These sorts of motion styles depend upon an understanding of the canvas in terms of layout hierarchy (background vs. foreground), element groupings (symmetrical elements, element copies), object salience (primary vs. secondary) and element type (text vs. image). These kinds of automatic approaches make it easier for users to reach complex animations while abstracting away technical complexities such as layered timelines and easing curves for the user. Thus, an analysis of the visual hierarchy of elements within a canvas is necessary to guide their timing and synchronization within the animation. In our analysis of professionally created animated logos and animated logo templates, we found that image elements tend to enter first and settle into place. Text animation tends to be last so that the viewer can take in the full effect of the visual messaging.

3.0.3 Limitation of Templates. Consumer design tools offer a wide range of animated template galleries designed by professionals. While templates can help users get to a polished and editable starting point fast (E1, E2), they do not always easily adapt to the user’s content or use case (E2). For example, Figure 2 shows a scenario where a user has picked an animated template with a preset “drift in from right" animation to start from. They can swap out the placeholder content with their own image assets and content and start customizing the template to their use case. However, even though the image assets are of the same class (a car), the built-in animation does not apply (their car slides in backwards). They have to discard the default animation and work backwards within the controls that they have to make believable and natural-looking animation, which can nullify the point of using an animated template. To mitigate this, template galleries and the template designers behind them often populate and update template galleries with hundreds of templates to cover all possible use cases. This combined with the fact that logo animation has so many dimensions (image animation, text animation, layout possibilities) makes templates an exhaustive design solution to maintain. Templates can be usable yet brittle when users make too many edits away from the defaults.

E4 expressed the limitations of templates and their desire for motion designers to create characteristic and semantically meaningful motion in their work.

For logos, it is the brand identity. If it’s a tree it needs to grow. If it’s a wave, it needs to be waving. It has to be something specific to the logo. It’s hard to generalize it. [Refers to a logo animation template] You can just swap the logo in and out, but it has nothing specific to it. -E4

3.0.4 Manual authoring with design tools. In contrast to consumer tools, the professional designers we spoke to spent significant effort focusing on the visual flow and sequencing of their animations. They took motion design briefs from clients and made sure that the keyframing, transforming, and easing of elements looked natural and professional (E1, E2). While a hand-crafted approach enables animations to be bespoke and tailored to specific content and narrative goals, it requires significant manual effort, time, and expertise.

From this formative understanding of the design landscape for animated logos, we synthesized the following design principles that guide our approach.

• Design Principle 1. Animation should be content-aware. Animations should be customized to the subject matter of the logo: be it by applying characteristic motion to the hero elements, creating a pacing and visual flow that matches the overall messaging, or showing layout awareness.

• Design Principle 2. Animation should respect layout hierarchy. The animation should reflect the visual hierarchy of the layout. Primary elements should have the most animation (a hero moment), and secondary elements should have less or more subtle animation to not detract from the primary element. Elements that conceptually group together should be coordinated in motion.

• Design Principle 3. Animations should have logical sequencing. Create a sense of visual flow and sequencing fitting for a logo reveal. The approach should help users automatically create well-eased and well-paced animations.