July 11, 2023 Smashing Newsletter: Issue #413
This newsletter issue was sent out to 211,486 subscribers on Tuesday, July 11, 2023.
Editorial
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)
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.
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)
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 →
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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.