Labas vakaras Smashing Friends,

For a very long time, I was absolutely clueless about animation. What’s the right timing? What easing functions to use? When should I use the cubic-bezier function in CSS? How do I profile our products for motion? And how do I document all these decisions on animation in a design system? Let’s figure it out!

In this newsletter, we’ve put together a few useful case studies, tools and examples that you can explore and use in your work to manage animations, transitions and motion in UX. We hope you find them useful!

On the Smashing side of things, we have recently announced a few shiny new online workshops, from accessibility and typography to design KPIs and HTML email. You probably will find a few gems in there! And if it’s not for you, perhaps you could recommend a workshop to your friends and colleagues? Thank you for your support!

We hope you’ll also find a bit of time to stay away from your machine this week and get a chance to get together with your friends and your family. Sincerely sending you all the positive energy and good vibes, everyone! 🎉🥳

— Vitaly

1. A Complete Guide To Animation

As designers, we often argue about the perfect duration and speed of animations, to use or not to use motion blur (better not), to ease or not to ease, and how transitions should be choreographed.

In his guide, Taras Skytskyi has kindly put together plenty of examples and guidelines for the proper use of animation in UX. You might disagree with some of them, but they are interesting conversation starters to keep in mind when designing transitions. Useful pointers for the bookmarks! (vf)

2. Motion Scale And Dynamic Duration

We could apply a similar workflow that we use to define color palettes and typographic scales to the way we design motion. In his article on motion design in design systems, Caleb Barclay highlights a comprehensive overview of how to integrate motion to its full extent into a design system.

We start by identifying patterns such as timing curves, types of usage, choreography patterns, effects and flows. Then we define guiding principles for motion. Then we consider duration, easing, effects and choreography. And finally, we prepare translation specs for diagrams and text — a very comprehensive guide for any design system that includes some motion. (vf)

3. How To Run A Motion Audit

You might have plenty of animations and transitions in your product, yet ultimately you want to standardize the motion language that you are using and bring them together under the umbrella of a single motion design system. Where do we start?

Dushyant Dubey has put together a thorough case study of the process when building the Blade design system: from planning and motion audit to defining motion parameters and implementing motion tokens. The article also features plenty of examples of micro and macro interactions — a great reference to keep close. (vf)

From our sponsor

Dozens Of Apps. One Subscription. Try Setapp.

Setapp makes it easy for users to access a wide range of productivity apps with just one subscription. From task management to code editing, Setapp has all the tools you need to streamline your workflow. With a single account, you can try out as many apps as you like!

4. Tools For UX Motion And Animation

How do you figure out just the right keyframes animation and cubic-bezier() parameters? Typically this would require quite a bit of experimentation with random values and using an animation debugger in DevTools to find a better animation. But there are some tools that can help you avoid the hassle.

The Keyframes easings editor lets you to define and preview custom keyframes animations and copy CSS once you are done. Lea Verou’s Cubic-Bezier allows you to define cubic-bezier parameters and change transitions on the fly. Just a few helpful tools that make it easier to manage animation in CSS! (vf)

5. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s a quick overview:

• Figma Workflow Masterclass UX
  with Christine Vallaure. July 20–28
• Advanced JavaScript Masterclass Dev
  with Christophe Porteneuve. Aug 16–30
• Interface Design Patterns UX Training UX
  with Vitaly Friedman. Sep 8 – Oct 6
• Accessible Components from Design to Development Dev
  with Carie Fisher. Sep 14–22
• Universal Principles of Typography Masterclass UX
  with Elliot Jay Stocks. Oct 16–30
• Strategizing Products and Customer Experiences (SPACE) UX
  with Debbie Levitt. Oct 18–26
• Design KPIs Masterclass UX
  with Vitaly Friedman. Oct 31 – Nov 8
• Building Modern HTML Emails Dev
  with Rémi Parmentier. November 9–17
• Smart Interface Design Patterns Video Course UX
  9h-video + Live UX Training with Vitaly Friedman
• Jump to all workshops →

6. Documenting Motion In Design Systems

How do we document motion design in our design system? Surely we need to think about principles, guidelines and examples, and surely some animations will be more prominent than others. What if we build a timing duration calculator, depending on the movements in our UI? Well, that’s exactly what the Brainly Design System includes.

The documentation covers effective duration scale, choreography guidelines, micro and macro-animations — with slowed down previews and a duration guide — a very helpful and inspiring overview with considerations for reduced motion and motion accessibility. (vf)

From our sponsor

Northwestern’s Online MS In Information Design And Strategy

Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. Learn more →

7. Creating Usability With Motion

Animation is all about tools. UX/UI designers often tend to face challenges when having to use motion as a design tool to support usability. UI Animation is typically thought of by designers as something that makes the user experience more delightful but, overall, doesn’t add much value.

Issara Willenskomer shares a Motion Manifesto in which he breaks down the topic of UI Animation, real-time versus non-real-time interactions, how motion supports usability, principles, techniques, properties, and values. A guide that is bound to help any designer find their own way and design tool to start supporting usability in their UX projects — guaranteed! (il)

8. News From The Smashing Library 📚

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?

• Understanding Privacy by Heather Burns
• Touch Design for Mobile Interfaces by Steven Hoober
• Image Optimization by Addy Osmani
• Jump to all books →

Psst! We’re working on a new book: Success At Scale, shipping in Fall 2023! Pre-order your copy or browse the book library.

9. Recent Smashing Articles

• How To Become A Better Speaker At Conferences
• Shines, Perspective, And Rotations: Fancy CSS 3D Effects For Images
• The UX Of Flight Searches: How We Challenged Industry Standards
• Sustainable Design Toolkits And Frameworks
• Read more on Smashing Magazine →

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Follow us on Twitter • Join us on Facebook