Conference Notes on Animation in Design Systems

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

Sasha Cherian
Nov 26, 2018 · 3 min read

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.

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

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

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

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

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

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

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

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

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.

Cuddle.ai

Building the future of Business Intelligence

Thanks to Amit Das

Sasha Cherian

Written by

Master’s Student at NID Bangalore, Previously designed @cuddle.ai | Fractal Analytics & Practo.com, Lettering + Stationery Enthusiast

Cuddle.ai

Cuddle.ai

Building the future of Business Intelligence

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade