Hallole Smashing Friends,
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.
Second day of SmashingConf Freiburg. 🎉 Image credit: Naoto Sai
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:
Register your ticket here — this community event is free for all.
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!
— Iris Lješnjanin
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)
From our sponsor
See What Your Users See, With Clarity
Microsoft Clarity is a free visual analytics tool that makes it easy to understand the behaviors and experiences of your users. Discover the exact ways that they explore your website. Where they are focusing their time, what is grabbing their attention, and where they are hitting roadblocks. Get started today.
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, 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 function, 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.
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. 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)
From our sponsor
Deliver Great UI With Easily Customizable Page Templates And Building Blocks
Deliver a great user experience with professionally designed and easily customizable Page Templates and Building Blocks! Utilize a collection of over 50 building blocks and 10 page templates designed to help you build modern UI in no time — all you need to do is copy and paste. Try Progress KendoUI today.
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)
From our sponsor
The 2024 State of Marketing And Web Development Collaborative Workflows
Developers and marketers have longstanding business relationships, but lately, the tools and processes meant to drive success and collaboration have fallen short. Access the report for data that uncovers these teams’ most common challenges and practical solutions for overcoming them.
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?
It’s here, and it’s shipping! Success At Scale, a new book by Addy Osmani. Get the book or browse the complete library.
9. 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 rock.
Follow us on Twitter • Join us on Facebook
