#459: UX Motion and Motion Design Systems

Motion design systems, UX motion choreography, motion audits and how to document motion. Issue #459 June 4, 2024 View in the browser

Smashing Newsletter

Kalí méra Smashing Friends,

How do we design consistent UX motion in our digital products? How do we audit, embed and document transitions and animations in our design systems? And what makes for compelling animation while also respecting accessibility needs?

SmashingConf Antwerp 2024
Meet SmashingConf Antwerp 2024, a friendly conference for people who love waffles, chocolate, fries and UX.

In this newsletter, we look into UX motion — guidelines, practices and tooling to design, refine and document animation. And if you’d like to dive deeper into motion, design and UX, we have a friendly SmashingConf Design & UX coming up in the magical city of Antwerp 🇧🇪 this year.

Along with our upcoming Smashing Meets Web Design next week, we’ll swoosh you away with practical insights into design!

Meets Web Design
Join us for free with Jay Demetillo and Rachel Gogel on June 18.

In the upcoming weeks and months, we have a few friendly workshops and conferences coming up, and perhaps you’d like to join in as well:

Happy reading and animating, everyone — while respecting accessibility needs, of course!


1. Guide To Animation In UX

How can we create UI animations that feel natural and don’t distract users from the task they want to perform? In his practical guide to animation in UX, Taras Skytskyi explains all the rules and principles you need to be aware of to create delightful animation effects that feel just right.

The ultimate guide to proper use of animation in UX

The guide covers everything from animation duration and speed to easing and choreography. You’ll learn to adapt your animations to different screen sizes and platforms, how to read animation curves, and how to guide your users’ attention when transitioning from one state to another. The guide isn’t about specific use cases but rather universal principles that you can apply to all kinds of interface animations. A must-read. (cm)

2. Motion In Design Systems

At first glance, motion might seem too complex to integrate into a design system, so it is often left out of the discussion. However, with the right strategy, the workflow isn’t much different than the one you use to define color palettes or typographic scales. To help you overcome motion paralysis, Caleb Barclay shares a step-by-step guide to including motion in a design system.

5 steps for including motion design in your system

Caleb’s approach involves five steps, from deciding what to add to the design system and establishing motion principles to defining a library of motion building blocks and preparing translation specs with everything developers need to build a prototype. A comprehensive roadmap that comes in handy for any design system that includes some motion. (cm)

From our sponsor

Upcoming Workshop: Frontend Issues With Backend Solutions

Frontend issues are often triggered by backend problems. Join us as we discuss common sources for poor web vitals and how to use Tracing to connect issues through your stack at the code-level.

3. IBM Motion Design

The IBM design system is a wonderful example of enhancing a brand’s voice through motion design. It defines the foundational principles of IBM’s animation vocabulary and the feeling animation should evoke.

IBM Design Language

The IBM Design Language differentiates between productive motion, which appears professional, confident, smart, and efficient, and expressive motion, which evokes more personality and emotion. Combined, they provide a compelling contrast.

The design system also dives deeper into how to apply classic animation principles to graphic forms and tips and techniques that are universally applicable to animation. With examples, dos and don’ts, it is a great overview of what makes good animation. (cm)

4. Upcoming Workshops and Conferences

We run online workshops on frontend and UX, 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.

Smashing Online Events
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:

5. Motion Audits And Designing Core Actions

Lacking resources on how to set up a motion system, Dushyant Dubey researched different design systems to create a detailed plan on how to tackle the challenge. In his case study “Building a motion design system for a product company,” he grants insights into the strategy and how he and his team applied it when building the Blade motion design system.

Building a motion design system for a product company

The case study covers the entire process from planning and running a motion audit to defining motion parameters and implementing motion tokens that encapsulate specific motion behavior for component interactions. It also features plenty of examples of micro and macro interactions. A great reference to keep close. (cm)

From our sponsor

Build And Store Your Surveys And Forms In-House With SurveyJS

Simplify data collection in your JavaScript application with SurveyJS UI components. Create and style dynamic JSON-based forms using a fully integrated form builder that features a CSS theme editor and GUI for conditional rules and form branching. Maintain full control over your respondents' data. Try our free full-featured demo to experience the power of SurveyJS firsthand!

6. Atomic Motion Design

Another practical guide on how to set up a motion design system comes from Aviad Shahar. He shares step-by-step tips for breaking complex animations down into organisms, molecules, and atoms to create a consistent and reusable animation system.

Motion Design System — A Practical Guide

Aviad’s approach consists of four steps that build on top of one another. First, you define standard duration tokens, then standard easing and basic animations. The basic animations can then be used to define more complex animations, and finally, by combining a couple of basic animations, you get animation patterns. If you want to see what the system looks like in action, the guide includes some practical examples. (cm)

7. Motion Design Almanac

How does the static become dynamic? How does something dead become alive? The Readymag Design Almanac explores exactly these questions through the expertise of six designers and artists.

Readymag Design Almanac

To get to the ground of web animation, the experts, among them interaction developers, animators, illustrators, and product designers, dive deep into how to attract the viewer’s eye, reduce cognitive overload, and build visual hierarchies by applying motion. They explore animation influences from tech, art, and film and look at the work of pioneers from the history of animation. A slightly different look at animation and the animation craft. Inspiration is guaranteed. (cm)

From our sponsor

“Frontend Nation: The Biggest Free Online Frontend Event Ever”

Frontend Nation
Join the largest online frontend dev community gathering. Our 4-day conference features 3 days of talks from 65+ experts, plus 1 day of live coding challenges across Vue.js, React, and Angular. Register for FREE today — you won't want to miss this.

8. UX Motion Choreography

Another design system to dive into for all things animation comes from the folks at Brainly. With an effective duration scale, choreography guidelines, micro and macro animations, slowed-down previews, accessibility considerations, and a duration calculator, their Pencil Design System is a fantastic example of what a design system with a focus on UX motion and animation can look like.

UX Motion

While motion plays a crucial role in enhancing interactions and engaging users, implementing it can be a costly undertaking. To help you lower the cost of implementing motion, Brainly’s Lead UX Motion Designer, Giga Khurtislava, shares insights into how to improve the handoff process and improve collaboration between designers and engineers. (cm)

9. Recently Published Books 📚

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?

Success At Scale
It’s here, and it’s shipping! Success At Scale, a new book by Addy Osmani. Get the book or browse the complete library.

10. Recent Smashing Articles

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

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#458: Design Systems

Monday, June 3, 2024

Design systems for healthcare, car interfaces, insurance companies, digital publications and universities. Issue #458 • May 28, 2024 • View in the browser Smashing Newsletter Dobré odpoledne Smashing

#457: Figma Organization

Tuesday, May 21, 2024

Cleaner Figma files, Figma workspace template, organization template, multi-brand Figma kit. Issue #457 • May 21, 2024 • View in the browser Smashing Newsletter Shikamoo Smashing Friends, How do you

#456: How to Name Things

Tuesday, May 14, 2024

How to name design tokens, colors, UI components, HTML classes and variables. Issue #456 • May 14, 2024 • View in the browser Smashing Newsletter Konbanwa Smashing Friends, Naming is hard. As designers

#455: CSS

Tuesday, May 7, 2024

CSS Masonry Layout, Self-Modifying CSS Variables and Hanging Punctuation Issue #455 • May 7, 2024 • View in the browser Smashing Newsletter Dobryi vechir Smashing Friends, When I first encountered CSS

#454: JavaScript

Tuesday, April 30, 2024

Front-End Engineer Handbook, JavaScript Cheatsheet, File System APIs and Invokers. Issue #454 • Apr 30, 2024 • View in the browser Smashing Newsletter Labas vakaras Smashing Friends, Let's talk

You Might Also Like

168 / Feeling stuck? Open this email to get your creative juices flowing

Friday, July 19, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Jul 2024 • Part 1 View in browser Welcome to Issue 168! I took a short break from publishing as I was in the US last month for Figma's Config,

100 Interior Photographers to Hire Now

Thursday, July 18, 2024

View in your browser | Update your preferences ADPro Ready, Set, Shoot! You've spent months—years, even!—perfecting your client's space. Now it's time to capture it for your portfolio, or (

Do this in your next PR pitch subject line...

Tuesday, July 16, 2024

Exciting announcement before we jump into subject line tips! Along with Nora, Kirsten is now also available for 1-1 consulting. Since we founded Wolf Craft, Nora has worked 1-1 with creatives to help

#465: CSS

Tuesday, July 16, 2024

CSS container queries, style queries, custom functions, native CSS mixins, inline conditionals, transition to auto. Issue #465 • July 16, 2024 • View in the browser Smashing Newsletter Grüezi Smashing

Accessibility Weekly #405: New Class Action Lawsuit against AccessiBe

Monday, July 15, 2024

July 15, 2024 • Issue #405 View this issue online or browse the full issue archive. Featured: New class action lawsuit against AccessiBe "On June 24, 2024 Tribeca Skin Care, a small skin care

Crafting a talk

Sunday, July 14, 2024

Issue 203: Developing an idea worth sharing ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The Color Secrets Pros Swear By

Thursday, July 11, 2024

View in your browser | Update your preferences ADPro Keeping Up With Color It seems there's a new hot topic in color every week. This year alone, we've seen the “unexpected red” theory take

What’s Behind a Microtrend?

Tuesday, July 9, 2024

View in your browser | Update your preferences ADPro If you've ever wondered about the next big decor moment or debated dipping a toe into TikTok, AD's Senior Digital Design Editor Sydney Gore

#464: Friendly Little Helpers

Tuesday, July 9, 2024

Radio time machine, reverse dictionary, micropedia and templates on how to say No and Goodbye with grace. Issue #464 • July 9, 2024 • View in the browser Smashing Newsletter Gamarjoba Smashing Friends,

Accessibility Weekly #404: Overlays Misunderstand Accessibility

Monday, July 8, 2024

July 8, 2024 • Issue #404 View this issue online or browse the full issue archive. Featured: Overlays misunderstand accessibility "Accessibility overlays are a peculiar approach to accessibility