Conference Notes on Animation in Design Systems

A workshop by Val Head at DesignUp 2018, Bangalore | 25 -28 Oct

The Cuddle design team attended the Design Up Conference at Bengaluru. As a part of the conference, I attended the masterclass by Val Head on animations for design systems. Here are my notes from her talk.

Defining your Brand in Motion

Use the product’s brand pillars, voice and tone, experience pillars as a starting point for building animation guidelines. A simple question that would help decide the personality of your product would be,

If your brand was a real person serving a customer, it would be a ________ to the human. And customers would describe it as the most __________

After this, rate your product’s personality on the scale of 1 to 5 where 1 stands for very serious and 5 stands for very playful.

Based the score, match the adjectives to an animation style.

• Confident Stable and Strong — Use direct movements, straight lines, symmetric ease in and ease outs. Avoid blurs bounces and overshoots.
• Calm & Soft, Reassuring — Use opacity and soft blurs. Animate the small details. Ease the curves with gradual speed. Use combinations of scaling and fade/blur.
• Friendly, Lively & energetic— Use Follow through and anticipation. Use snappy easing curves. Examples: Stripe and Slack
• Playful, Fun and Light Hearted — Use bounces, Squash and stretch and shape morphs. Example, Google app

As a starting point, create your own custom ease -in and ease-out and ease - in -out for your product. Resource - easings.net and cubic-bezier.com

Properties for animation

Opacity, scale, position, colour, depth, rotation and position.

Usage of animations

Use animations based on the occurence and the positivity of the task.

1 — Error Message • 2 — First Sale • 3 — New Subscriber • 4 — Transaction Entries • 5 — Article Content • 6 — Setting your account

Tips before starting out a motion exercise

Talk to People

Find out the paint points, where do people get stuck in the product and what kind of information would be helpful for the user.

Reference, Not Copy!

Balance education, best selling practises and a unique point of view. Examples for references - Adele styleguides.io

Do a Motion Audit

Develop a design approach that focuses on purpose, look and feel and a technical approach that evaluates the code behind animations.

Conducting Motion Audit

Collect animations by assembling clips in a document. Group them by content type and purpose. Review and evaluate. Motion Auditing Tools — ScreenFlow and Quicktime.

Motion Principles & Implementation

Define properties that can be animated, their durations and easing values. Examples : Carbon Design System, Audi

Documentation of animations

Document your animations decisions in your style guide. Design guidelines like carbon design system , material design, plural sight design system and salesforce give a gist of how to carry forward animation styles.

Thanks to Val Head for an interesting session during the conference.