September 10, 2024 Smashing Newsletter: Issue #473
This newsletter issue was sent out to 195,775 subscribers on Tuesday, September 10, 2024.
Editorial
As I’m writing these words, we are running our annual SmashingConf Freiburg in our hometown, Freiburg, Germany, with plenty of sessions and workshops around accessibility, CSS/JS, design systems and good ol’ front-end.
We’ll be running more Smashing onsite events this year, and we also have a few front-end & UX online workshops which we run in the very same smashing spirit:
- SmashingConf NYC 🇺🇸 (Front-End & UX, Oct 7–10)
- SmashingConf Antwerp 🇧🇪 (Design & UX, Oct 28–31)
- A Smashing Hour with Heydon Pickering (moderated by Geoff Graham on Sept 24)
- Meets Live Design Challenge (with Pablo Stanley, Christine Vallaure, and Oliver Schöndorfer on Sept 26)
The Smashing team heads to New York 🇺🇸 for SmashingConf NYC 2024 next month with sessions on design systems, CSS, accessibility, and so many other things. There are some lovely workshops as well. We can’t wait — and we can’t wait to see you there!
1. Design Systems With Animation UX
Animation and Motion UX haven’t made an appearance in a lot of design systems yet. Still, there are some incredible examples already of what a design system focused on animation can look like. One of them is the PENCIL design system by Brainly. With duration scales, choreography guidelines, micro and macro animations, slowed-down previews, and a duration calculator, it is a treasure chest for anyone looking for ideas on how to incorporate motion in their design system.
To dive deeper into the topic, also be sure to check out Vitaly’s collection of design systems with an animation focus. Apart from design systems from brands like IBM, Audi, and GE Healthcare, it also includes useful resources on animation, motion design, motion choreography, motion accessibility, and more. Inspiring! (cm)
2. Practical Guide To Transition Animations
Transition animations are a small but effective way to make products more intuitive and attractive to use. They smoothly guide users through an interface and give them clear feedback on their actions. So, how can we fully harness their power and create the best experience for our users?
In his practical guide to transition animations, Dongkyu Lee dives deep into six principles for better transition animations that you can use in your design workflow right away. Examples show each principle in action — from fading in and out with opacity to balancing speed and establishing spatiality. A fantastic introduction to enhancing a UI with motion. (cm)
3. Easing Functions Cheat Sheet
Objects in real life don’t start moving at full speed and then stop abruptly. Physical motion is smoother. Take a bouncing ball, for example. It accelerates as it drops to the ground and then bounces back up, or when we open a drawer, we first move it quickly and slow it down as it comes out. Easing functions help us apply these motion principles to animations on the web to make them feel more natural.
To help you choose the right easing function, Andrey Sitnik and Ivan Solovev created a handy cheat sheet. It covers thirty easing functions — from the simple easeInSine to the more advanced easeInOutBounce. For each function, the cheat sheet lists the CSS, PostCSS, and math functions and, if possible, the CSS gradient. One for the bookmarks. (cm)
4. 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:
- Deep Dive On Accessibility Testing dev
with Manuel Matuzović. Sep 23 – Oct 7 - Inclusive Design Patterns For 2025 free
with Vitaly Friedman. Sep 24 - Accessible Typography for Web & UI Design Masterclass design
with Oliver Schöndorfer. Oct 10 – 18 - Cascading Style Systems: Resilient & Maintainable CSS dev
with Miriam Suzanne. Oct 14 – 18 - Interface Design Patterns UX Training (Autumn 2024) ux
with Vitaly Friedman. Nov 1 – Dec 2 - Advanced Design Systems workflow
with Brad Frost. Nov 12–20 - Figma Workflow Masterclass design
with Christine Vallaure. Nov 14–22 - Smart Interface Design Patterns UX
video course with Vitaly Friedman. - Jump to all workshops →
5. Animation Execution And Usability
Purpose and execution are the two dimensions that make animations a positive aspect of a user experience. If we don’t get both right, an animation can do more harm than good, being distracting, annoying, and even dizzying.
Page Laubheimer takes a closer look at the execution side of animations and explores how we can define a trigger, transformations, duration, and easing of the animation while being mindful of accessibility issues and annoying the user.
Aurora Harley also wrote a wonderful article on animation usability. To help us design meaningful animations that attract a user’s attention without being obtrusive, she dives deeper into the peculiarities of peripheral motion, frequency, and choosing appropriate animation mechanics. As Aurora recommends, employ animations sparingly and only when they add meaning to the interaction — otherwise, you risk wasting a precious currency: your users’ attention and time. (cm)
6. Accessible Motion
Not everyone experiences motion in the same way. What might feel smooth and slick to some can be distracting to others and, in the worst case, cause nausea or seizures. The prefers-reduced-motion media query helps us adapt motion to users’ preferences. Michelle Barker summarized how to use it to write reduced motion styles and make your sites more accessible.
However, reducing motion doesn’t necessarily mean removing all transforms from your site either. As Michelle points out, we must provide a clear alternative style to indicate when an action has occurred. She also looks into a different solution to let users control motion: an explicit motion toggle.
Stephanie Cree’s post on accessible motion is another helpful read to better understand why motion accessibility is essential and how to do it right. In it, she explains who needs accessible motion and explores steps you can take to create experiences that don’t leave anyone out. (cm)
7. Loading And Progress Indicators
Whether it’s loading a webpage, processing a transaction, or downloading content — often there’s no way around waiting. Of course, the primary focus should always be improving performance and responsiveness, but sometimes that’s not enough. To help you enhance the waiting experience, Taras Bakusevych shares valuable tips and best practices for loading and progress indicators.
In his post, Taras explores how loading and progress indicators can enhance usability, reduce user frustration, and create a positive perception of your page’s or system’s responsiveness. He dives deeper into the psychology of waiting and takes a closer look at the different types and variations of loaders. You’ll also learn how to select the right loader based on the anticipated waiting time and what else to keep in mind to make your users’ waiting experience seamless and engaging. (cm)
8. 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 by Addy Osmani
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Check out 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.