#ADOBE ANIMATE 2019 PATTERNS HOW TO#

You wouldn’t use another brand’s colors or typeface on your product, so don’t just follow another brand’s motion guidelines either. But it’s not a good fit when that’s not your goal. That’s perfect if you’re making something for the Google ecosystem (or intentionally wanting to seem like you are).

#ADOBE ANIMATE 2019 PATTERNS HOW TO#

A good one, yes, but its aim is to show you how to animate the Google way. Material Design’s motion section is Google’s take on motion guidelines. No, not even if it’s Material Design’s motion guidelines. Using other motion sections as reference for your own design system is very helpful, but I don’t recommend adopting another brand’s motion guidelines wholesale in place of your own. (In fact, we’ll be referencing a few them in this very article.) They make for a helpful resource when planning your design system, and they can be useful research for your design system’s motion guidelines too. Not every design system has to be public, but it’s great that so many of them are. And you can use the questions and pain points that come up most often to guide and focus your motion guideline efforts. You’ve probably guessed where I’m going with this, but all of those concerns are things you can help provide answers to in your motion guidelines. While every team is different, the concerns and questions I’ve heard most often when doing this research are things like: “How do I know an animation is good, or fits with our brand?”, “How can I convey the animation details to our engineers effectively?”,or “Our developers always say there’s no time to implement the animations we design.” Most importantly, listen to how they talk about using animation in their work and what goes well or not so well. Ask them about what they wish they had to help with the pain points they encounter. Ask them how/if they use animation, and where animation falls in their design process. Set up some user interviews (the users of your design system) and ask them about where they get stuck with animation. Your team may not tell you about their animation pain points unprompted, but that doesn’t mean they don’t have any. No one wants to spend hours on extensive guidelines that address more than your team will ever actually need. This helps you set an appropriate scope for what you need to cover in your guidelines. The biggest thing you can gain from this is finding out what they need and what to focus on. That holds true for the guidelines you create around animation too. The Groundwork: Defining What You Need To Cover First, Talk To PeopleĪs Jina Anne says, “ Design systems are for people.” I’ve often heard the advice that talking to the people who will be using the design system you’re creating is key to making a design system people will actually use. Let’s dig in to get started on a set of motion guidelines for your design system. Having a clear stance on how animation is used (or not used) in your design system can help ensure your brand is using animation consistently and effectively while also helping your team work faster. Then people following the design system either do whatever they want with animation - which can lead to a strange mish-mash of animation execution across the experience - or, they just don’t use animation at all because they don’t have time to figure out all the details themselves. So, when it’s not addressed in a design system, that system essentially leaves that area of UI design tooling unaccounted for.

Just like typography and color, the animation you use says something about your product and its personality. Why Animation?Īnimation is an important design tool for both UX and brand messaging. This article is all about what to include in a set of motion guidelines for your design system and how to pull it off. In the past few years, I’ve talked with many teams and designers who admit they think motion is something they should address, but they just aren’t sure how. Sure, some teams may have decided that motion wasn’t something their product needed guidance on, but I suspect that in some cases motion was left out because they weren’t sure what to include.

(This article is sponsored by Adobe.) Design systems come in all shapes and sizes, but as Sparkbox’s design system survey noted, not all of them include guidelines for animation. In this article, Val Head explains how you can help ensure that your brand is using animation consistently and effectively while also helping your team work faster. It’s important to understand how animation can be used (or not used) in your design system.

Adobe animate 2019 patterns