Conference Notes on Animation in Design Systems

Rupa Hadaye of Cuddle.ai on Val Head's Masterclass at #DUp18, Bangalore

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 occurrence 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 SystemAudi

Documentation of animations

Document your animations decisions in your style guide. Design guidelines like carbon design system , material designplural 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.

This was originally published on Medium.

About the Author

Designer @Cuddle.ai | Fractal Analytics, Lettering + Stationary Enthusiast

About Us

DesignUp started with the idea of raising the design agenda within tech companies and tech-led businesses. To make tech, businesses, products and services thoughtful, human and humane, by Design.

DesignUp is volunteer-driven and community led. There are no full time salaried employees—we all have our day jobs. For us, DesignUp is a passion and unifying force.

Core Team

DesignUp’s core team includes Abhishu, Anindita, Baisam, Dharmesh, Jay, Lucky, Manu, Nitesh, Narayan, Prabin, Saloni, Sima, Supriya & Tuhina.

Advisory Board

DesignUp Advisory board, constituted in 2018, has Katja Forbes, Vandana Abraham and V Shivakumar on the team.

 

Follow us on…

We use cookies
We use cookies and other tracking technologies to improve your browsing experience on our website, to show you personalized content and targeted ads, to analyze our website traffic, and to understand where our visitors are coming from. By browsing our website, you consent to our use of cookies and other tracking technologies.