Adding Motion to the next decade of Atomic Design
A century of animation
Design has been on a journey for a very long time, but it was only in the past century that a new way of thinking about design emerged thanks to the advent of new technologies. A miracle was born when Walt Disney signed a contract to produce a series of Alice Comedies. The same year also marked the start of The Walt Disney Company, first known as the Disney Brothers Cartoon Studio. Who knew what would have transpired among two brothers? It was funny that the Wright brothers happened to be the other famous pair of their time.
It could have ended with the creation of Mickey Mouse or the release of Snow White and the Seven Dwarfs, the first full-length animated feature film. But from the creative mind of the entrepreneur, innovation after innovation was realized. Soon, the world experienced the thrills of a modern theme park known as Disneyland. Blockbuster films, such as Beauty and the Beast, The Lion King, and The Little Mermaid, set new standards while avant-garde studios like Pixar and LucasArts were acquired. If TV was not enough, Disney went into streaming and went after Netflix’s money.
And then 2023 came around the corner, and the pioneer of animation is celebrating its 100th anniversary. It has built its empire on the entertainment value of moving pictures.
For all that is worth, Walt Disney took a leap of imagination to produce a risky idea. Here’s how I imagined it: among the sea of static comic strips and real-life acting, very few would venture into developing a character that could feel alive, let alone appear to be interacting with the audience. He would have his critics, perhaps even reflecting on himself as someone with high standards. Yet despite failing repeatedly and taking 5 years to make it work and a further 5 years to make money out of the craft, Walt Disney held on to his belief that there is power in storytelling and that his best medium is animation.
We keep moving forward, opening new doors, and doing new things, because we’re curious and curiosity keeps leading us down new paths. — Walt Disney
A decade of Atomic Design
A decade ago, another phenomenon happened. A designer took the concept of atomic structures and applied it to digital design. What resulted was an explosion of ideas and contributions from the design community. The design system movement, better known as “Atomic Design,” was born.
Atomic design is a methodology that focuses on a way to structure one’s digital components, patterns, and templates. By understanding their relationship to scale, a design team can systematically apply a consistent, coherent, and modular user interface.
Since then, the revolution hasn’t stopped. Because it wasn’t just a repository or a static design manual, source codes with documentation could be made available for product teams to explore and further develop. Guides that taught new team members the proper usage and boundaries of using the assets at different levels.
Suddenly, mobile-first and responsive web design strategies became the new lexicon as native apps became part of the product suite. Likewise, accessibility principles became important criteria to consider when designing components for a wide spectrum of users. Tools, such as Storybook, cater to developers looking to build UI components and pages in an isolated environment. And as we reached closer to the 10th anniversary of Atomic Design, discussions around designing the system of systems became more acceptable, as I wrote about a year ago.
So what’s next with Atomic Design?
Should we do more with Brad Frost’s analogy? Rather than come out with an entirely new mental model, my preference is to stick with the same analogy and build upon each other. Because, unless invalid, great ideas are like trees that continue to grow and mature for many years and beyond (oldest tree is currently Methuselah at 4,584 years old). A mistake would be to stunt the growth of a great idea, and atomic design should not be one of them.
Thus, let’s take a second to become a fly on the tree, which is to observe the current model and deliberate what could be next. Beyond the obvious and visible components of atoms, let’s look at the invisible aspects of atoms, molecules, and organisms.
Was that some form of movement?
Unmistakably, atoms vibrate. In fact, you could say that there is some form of motion that exists at different scales. This can be explained on the basis of the electrostatic force of attraction between negatively charged ions of atoms, as well as the constant push and pull within a molecule responsible for creating the vibration. It is as if the atoms are connected by tiny springs in constant motion. And if there are little forces, then there are bigger forces on an organismal level and beyond.
Motion is everywhere. In the stillness of moments, even planetary and human bodies move. The notion of motion is so pervasive that it is hard to ignore. So why aren’t we expanding our universe of atomic design and designing systems with motion?
Part of the reason is that motion can be complex due to the various variables to consider. They range from inputs, such as taps, to outputs, such as fades and other effects. Then there is the matter of timing, which determines the start and end of a sequence and its associated properties. The list goes on, but motion tends to be seen as a “good to have” with basic Figma presets. Various design systems either keep motion as a small section or prioritize it at a later phase. It could be felt as a checklist item rather than a pervasive, continuous idea.
In fact, continuity and flow are important concepts. Originating from Issara Willenskomer, a pioneer in motion UX, he argued in his motion manifesto that interactions extend within a scene and across scenes (or screens), thereby creating consistency in the user experience. Expectation itself isn’t static; mental models create a level of perceived experience of what an object would do and how it would behave. Narratives are not framed in a still frame; they are interconnected with a series of events that shape the overall intent and satisfaction of the individual. And relationships are the harmonious assembly of microcopies, graphics, illustrations, and UI. Motion is, in essence, integral to the user experience. Motion is behavior over time.
Perhaps it’s time to "morph," and what could help is to set our eyes into the future. In their book “Built to Last: Successful Habits of Visionary Companies,” Jim Collins and Jerry Porras first used the phrase “Big Hairy Audacious Goals,” or BHAG for short. The premise was simple: set an inspiring, long-term goal that takes your thinking (or company) to the next level. Here lies a possible new BHAG: what if we could take an extended view on Atomic Design, by adding motion thoroughly across different levels in a design system?
Behaviors, not animation
As Micah Bowers shared before, motion design is not a form of decoration. Rather, it results from a system or human trigger, which leads to a form of feedback (Dan Saffer). These are the basic ingredients that form behavior. Animation, on the other hand, is a sequence of actions that does not require any form of user input. It is therefore important to consider a more complete set of requirements when designing motion.
Motion, not just interaction
Is it just semantics, or is there really a difference between motion and interaction? From a technical perspective, one can implement interaction in a binary or linear manner. The output, however, leaves the user with a bland feeling, almost unnatural. The reason why motion triumphs over interaction is because there is more expressive movement, creating a heightened appreciation from the user. Techniques such as easing, staging, anticipation, and appeal are just some of Disney’s twelve basic principles of animation, a must-read piece of literature for any motion designer. Mastering all of them will increase the overall experience of your designs.
Outside and within
The juxtaposition of motion within and beyond the screen helps designers make the tradeoff between displaying additional information. The beauty of having a screen as a constraint and yet having such an intuitive spatial model makes flows and transitions possible. Designers who are sensitive to such details can guide users to successful completion without the use of any instructions. Just like a binocular, the user sees their steps before them and knows how to move accordingly.
Not as one-offs but as reusable components
Weighing in on modular blocks of interactions would be a great addition to a successful design system. Identifying common sets of consistent motions is more important than identifying superfluous random motions. This differentiates the UI artist from the UX designer, where the former creates one-off artistic expression and the latter understands the feasibility and usability of reusable motion modules. Instead of rejecting any signature motions from a product, chaos will quickly set in if every motion is unique.
Although there can be a lot more to unpack, which could be covered through subsequent discussions, I would like to share the expanded analogy of Atomic Design, incorporating motion at each level:
Ions: design tokens + trigger and responses
An equivalent of the properties of a design component—trigger, rules, and responses—are the necessary ingredients for motion design in order to elicit a cause and effect. Without this in place, they are simply animations. Incidentally, motion tokens are introduced in more design systems, such as the 3rd edition of Material Design.
Example: tap, pinch, mouse hover, move, scale, jump
Atom: component + micro-interaction
Just like the minute vibrations that reside as electric forces within atoms, micro-interactions are motion that tends to create effects within the component. As defined by Ondřej Dostál, they are single interactive moments in a product that enhance the workflow and make a product more enjoyable.
Examples: scrolling on a scrollbar, pulling to refresh, reaction icons on social media
Molecules: patterns + motion
Chemical bonds combine two or more atoms together to form a molecule. These are a larger set of UI components, which are better known as patterns. In this case, the interaction becomes more advanced, as there can be a chain effect or multiple simultaneous responses from a single trigger. Patterns tend to target specific components without affecting the rest of the components in the frame. The same applies for motion too.
Examples: sliding carousel, clicking to expand search box, entering and exiting snack bars
Organisms: features + scenes
When an organism moves, they do so in relationship with other forces at play, such as applied forces resulting in kinetic energy and gravitational force. This is where the interaction goes beyond the frame, involving layers, transitions, and even adjacent screens. Attention to key actions in a flow is necessary. They fundamentally tend to have features based on a combination of patterns and stand-alone components. Such situations are known as “scenes” in film production, where the unity of action with the elements is crucial. We see platforms like Protopie capitalizing on such concepts to create a better understanding for their users.
Examples: Full-screen Card view, sliding or navigation bars, skeletal loaders
Complex Organisms: templates and pages + flows
At the level of advanced life forms, such as animals, plants, and human beings, products are similarly complex. Beyond the templates of components, patterns, and features, they have flows across different pages or screens. Thus, not only is motion important based on the relationship of its related elements across adjacent screens, but the narrative and consistency of a particular flow of an experience also need to be taken into account so that the user gets their job done.
Examples: User flow, prototyping, paths and connections
Species: products + journeys
Finally, when species coexist as a family of complex organisms, so do various products in a portfolio. And as with interaction at every level, the orchestration of user action along journeys is the final stage. This is an artifact where physical and digital touchpoints intersect to strengthen the narrative of a user who is going through a set of steps with a goal in mind.
Examples: user journey, service blueprint, value stream
Other considerations
Beyond journeys: Time can be a very loose variable. Despite motion happening in an active state, there could be lapses of passiveness. Or a period of hiatus before a new journey is reinitiated again as the user repeats the same job to get something done. At this irregular juncture, a form of interaction, more likely based on a system trigger or an action trigger made by another user, could coexist. Nevertheless, there is an entirely new set of motion that flows in place.
Motion Libraries vs Journey Maps: Once again, one can observe the stark differences in forces between the physical and molecular worlds. In the last exposition, there was a distinction between libraries and systems in two different worlds. Likewise, we could see the same phenomenon with forces, except instead of a system, maps are a better expression to capture motion. Digital tools, such as Miro and Glassbox, are slowly making modular user actions possible to scale across different journeys, and yet also contain motion as a unit in an interaction library.
The next decade of movement
Motional Atomic Design may be on the cusp of something great in the coming decade. Just like Disney’s next milestone, there is a lot more to be excited about.
For all that is worth, Motional Atomic Design would require a leap of imagination to further develop a new idea. Here’s how I imagined it: among the sea of static components and other substitutes (like AI), very few would venture into developing an experience that could feel alive, let alone bring joyful interactions with the users. It would have critics, perhaps even having to define high standards. Yet despite pivoting and possibly taking 5 years to make it work and a further 5 years to establish the craft, Motional Atomic Design could be an audacious stretch goal that builds upon the power of human narratives and experiences. Its BHAG is Atomic Design in motion.
Further Reading
- Bowers, Micah . “A Guide to Motion Design Principles — Prototypr | Prototyping.” Prototypr, 10 Dec. 2020, prototypr.io/post/a-guide-to-motion-design-principles.
- Collins, James C, and Jerry I Porras. Built to Last : Successful Habits of Visionary Companies. New York, Collinsbusiness Essentials, 2002.
- Frost, Brad. “Atomic Design.” Brad Frost, 10 June 2013, bradfrost.com/blog/post/atomic-web-design/.
- Issara Willenskomer. “Creating Usability with Motion: The UX in Motion Manifesto.” Medium, UX in Motion, 31 Mar. 2017, medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc.
- “Making Your First Prototype with ProtoPie | Intro | ProtoPie Guide.” ProtoPie, www.protopie.io/learn/docs/introducing-protopie/making-your-first-prototype. Accessed 24 Apr. 2023.
- Motion — Material Design 3. (n.d.). Material Design. Retrieved April 24, 2023, from https://m3.material.io/styles/motion/overview
- Patton, Jeff, et al. User Story Mapping : Discover the Whole Story, Build the Right Product. Beijing ; Sebastopol, Ca, O’reilly, 2014.
- Pfitzer, Kurt . “The Vibrating Essence of the Universe.” Lehigh University, 9 Feb. 2017, www2.lehigh.edu/news/the-vibrating-essence-of-the-universe.
- Saffer, Dan. “What Is a Microinteraction? | Microinteractions.” Microinteractions.com, 2020, microinteractions.com/what-is-a-microinteraction/.
- Thomas, Frank, and Ollie Johnston. The Illusion of Life : Disney Animation. New York, Hyperion, 1995.
- “Why You Need to Add Motion to Your Design Systems — LottieFiles.” Lottiefiles.com, 12 July 2022, lottiefiles.com/blog/guides/why-add-motion-design-systems#:~:text=Motion%20tells%20a%20story%20%E2%80%93%20Is. Accessed 24 Apr. 2023.
- Yeo, Darren. “Atomic Design 2022: What We Can Learn from Eames and Other Design Giants.” Medium, 24 Apr. 2022, medium.com/user-experience-design-1/atomic-design-2022-what-we-can-learn-from-eames-and-other-design-giants-4d8e2f579daa. Accessed 24 Apr. 2023.
