Should motion design guidelines appear in Design Systems? Yes!
This article is about motion design and animations for digital interfaces and it’s about Design Systems as well. Design Systems are a powerful tool that I think it’s worth understanding what they are and where they come from.
However, if you’re a seasoned designer and know all about it, feel free to jump right into the chapter titled “Motion Design in Digital Interfaces”. If you chose to stick around, let’s dive right into the Design System’s earlier ancestor, the Style Guide.
A Brief History of Style Guides
Any type of design work for a big company starts with studying the style of that company, whether it’s a client or the company you work for, everything a particular company does should obey the company’s Style Guide.
The Style Guide is a set of guidelines a designer should stick to while working for a particular company, it usually has design examples for print works, digital presentations, a set of approved colors, fonts, size variations, layouts and sometimes much more, depending on the specific company needs.
The Style Guide (sometimes referred to as a “Brand Book”, a relic from the era of print materials, when everything used to be a physical “book”) ensures consistency across many different designers and design teams, it also ensures company values are kept without the need to explain them all over again.
It’s not uncommon to also find in a Style Guide writing guidelines for that company or project, for example: “Buttons should always contain a verb”, “Links should always be CAPITALIZED”, “Titles should always start with Capital Letter”, “Landing Pages should always address the user directly” etc.
The modern Style Guide is descendant from NASA 1976 “Graphics Standards Manual”, which lays out the design guidelines for all products of NASA from that era, it showed us how to keep a coherent brand across many teams all over the world, it worth going over it even after all these years, you can read NASA Graphics Standards Manual right here.
The book contains fonts, colors, documents, layouts, symbols and image use cases, it even contains some print and posters guidelines, and my personal favorite part is the use of company assets printed on cars and airplanes, that’s just for THAT particular company though, don’t expect to find airplane design guidelines in any other company’s style guide (it’s NASA, after all).
Style Guides are often used as a digital Brand Book, as NASA’s “Graphics Standards Manual”, it worked mostly fine in the print age, but it has some missing parts for the digital age, that’s why we now have Design Systems.
Entering Design Systems
Design Systems are the next logical step from a simple Style Guide, a Design System is a library of components ready to use or to customize to our own needs.
A Design System is a digital-first set of guidelines for any given company or project and so it can include many things like different states of buttons, accordion components, a baked-in behavior of component, even code snippets (to describe a functional component, NOT just a visual representation of it).
As Style Guides traditionally come in a sort of a “book” or a PDF file, a Design System mostly come as a website, in which you can click on different components and see how they work, it’s a more robust solution than a Style Guide and much more digital-first, it’s potentially endless, as pages can go on forever and you could have as many pages as needed to describe your system.
One of the most simple to understand examples of a Design System is the open source project Clarity, which includes both visual representation of components for designers (such as buttons, cards, alerts and much more) and code snippets for developers who want to implement it in their projects, feel free to check it out right here: Clarity Design System.
Another good example of a Design System is Apple’s “Human Interface Guidelines” for iOS, I include it here as a Design System and NOT a Style Guide because it is a very digital-first solution, it contains videos to explain things, it includes concepts like “App Architecture” and “User Interaction”, it also has varying page length depending on the category and is a great set of guidelines to get to know, read Apple’s Human Interface Guidelines for iOS right here.
If you read through Clarity and Apple’s Guidelines you probably get the gist of Design Systems by now, it’s a more practical way to show your design guidelines than a traditional Style Guide since it has digital products and interfaces in mind, it can address both designers and developers in a way both can understand and implement in their own projects, no matter if it’s an iPhone app or a web site or something else.
Both examples shown here have a good amount of information about different components, about colors, typography, layouts, themes and much more, but what about Motion Design and Animation?
Is it not important in the digital-first Design System?
Motion Design in Digital Interfaces
Motion Design and Animation is one of the main things that differ print design from digital design, as Motion Design is impossible in print work and all so possible in digital design work.
According to my own survey I conducted as part of my MA studies, 75% of respondents replied that Motion Design and Animation in Digital Interfaces is “very important” while 23% of respondents replied it’s “somewhat important” and only 2% said it’s OK. only 2%.
Notice that nobody replied that it’s not important, nobody replied that it’s annoying or that it slows them down, even though I gave them those options.
Proper Motion Design can give your product or website a personality, it can make your brand seem more accessible, it can signal the users where to go next, and if nothing else, it can really reduce the perceived slowness of your system.
Yet most Design Systems never mention it, it’s up for the designer or developer to decide on a given project’s motion personality, the Design System has failed us.
Let’s review Apple’s Animation Guidelines (for iOS, as before), they give us a paragraph about the purpose of animation in iOS app design (as seen below, quite similar to my own “Proper Motion Design” paragraph from this chapter), than they give us a video example of their own Calendar app.
“Beautiful, subtle animation throughout iOS builds a visual sense of connection between people and content onscreen. When used appropriately, animation can convey status, provide feedback, enhance the sense of direct manipulation, and help users visualize the results of their actions.” — Apple’s Human Interface Guidelines
After that Apple gives us 4 more pointers as follows: use animation and motion effects judiciously, strive for realism and credibility, use consistent animation, make animations optional, that’s all we get (don’t get fooled by the link for more guidance called “Motion”, it’s only about the last “optional” part and it’s more technical details about Apple’s Reduce Motion feature).
You might think “what’s wrong with that?”, you might like using animation sparingly, or you might like your animations to be realistic or consistent, but the point here is that it’s not a theoretical guide to animation, it’s Apple’s practical guidelines to iOS app design, you know, one of the largest digital ecosystems in the world.
Did you feel those 4 pointers were practical? Do you now know how to make those animations? How to make realistic motion? How long should this motion be? Should this motion be symmetric or asymmetric?
Those Guidelines obviously aren’t enough for creating motion and animation in digital products, but not all Design Systems are crated equal, and if you think I’m too hard on Apple, please compare their guidelines for motion and animation with those brought in the next chapter.
Motion and Animation in Design Systems
A better example of a Design System including motion and animation guidelines will be Google’s Material Design Guidelines, it starts off very similar to Apple’s with the Principles of motion, and than it spans over 4 pages of actual information and examples.
There’s a lot of information here on how to use motion and animation, the speed, the duration, easing, asymmetrical motion, implementation in code (for example cubic-bezier(0.4, 0.0, 0.2, 1) in CSS), the sequencing of different animations, transformations, transitions, focal elements, grouping of elements and more.
Google’s Design System’s motion guidelines have examples for everything, simple examples and complex ones, some examples are even in slow motion so you can really see the fine-tuning of their animations, which really helps when it comes to multiple animated elements.
Another great Design System is Carbon (by IBM), it also contains a section titled Motion and it also have lots of information about animation duration, easing, asymmetrical animations, choreography, visual examples and even some sample code (for example cubic-bezier(0.2, 0, 0.38, 0.9) for CSS, used for productive animation style).
The whole point of Design Systems is to standardise design elements, assets and philosophy between different teams of designers, and motion design should be no different, if you want a consistent experience just put all the guidelines in your Design System.
In different design teams there’s often different culture and taste, some designers think all animations should be symmetrical, everything that leaves the screen, for example, should enter the screen in exactly the same way but in reverse, as we saw in Google’s guidelines it is not true for them, animations should have a very different speed and easing to indicate whether they come in or go out.
There are many different examples of this situations where animation just gets set aside, even in a very detailed Design System, layouts, colors and fonts take center stage while motion is an afterthought, buy why?
Design Systems and Modern Design Tools
Design tools have changed quite a lot in the last few years and there are no real standard in the industry anymore, some designers use Sketch, some use Figma (my personal favorite), some use XD, some use Illustrator, some use Photoshop, most designers know how to use more than just one tool and most design teams mix and match those tools (and many more) for different projects or different purposes inside those projects.
Those tools are the tools of most product or UI designers, motion designers and animators usually have a different set of tools to work with, some use Adobe Animate, some use Principle, some do use sketch or XD, but most either write their animations directly in code (CSS, SVG for example) or just use Adobe After Effects.
The tools are not to blame though, wouldn’t it be nice if After Effects could natively render to code? Sure, wouldn’t it be sweet if Figma could edit its transitions with a genuine timeline-based system? of course it would, but those same tools can’t really produce a functional ready-to-implement accordion component and I see accordions in any Design System (for example, this Design System of the US federal government).
Modern design tools sometimes make it hard to really edit motion, but that’s no excuse, the real reason is that people, and sometimes even designers, think of animation and motion design as a nice-to-have, something they’ll get to if there’s still time at the end of the project, even though they know it’s important, even though they wish they had the time.
The truth is there’s never enough time, if it’s important to your product, it should become a priority otherwise you’ll never do it after the development phase, and you shouldn’t, that’s when it starts to get expensive to go back and that’s the reason motion design comes as an afterthought in the first place.
Digital first designers, no matter the title, should think of animation as part of their product, it’s a bit like thinking of your button hover state, it will work without it, but you shouldn’t leave it to the end, you should incorporate it into the design, and than it becomes one with your product, than your product can become more than just navigating through different screens, it can become an experience.
If you’re building a Design System, it’s even more important because leaving it to the design teams themselves is a bad idea, it only takes one designer to say “we’ll do it at the end” to never get to it and if your Design System is specific enough to get it off their hands, the design team can really shine with what they do best — work inside the constrains of the brand.
