Design

How to approach animation tools when everyone’s an animator

Eric Strubinger
Eric Strubinger

Have you heard about the latest and greatest new design tool? It’s what product designers’ dreams are made of and will revolutionize the industry. With this one tool, you can quickly create comprehensive user flows, wireframes, high fidelity user interfaces, detailed micro-interactions, and clickable prototypes. Plus, it shares inspectable elements for front-end developers.

The best part? You can control it with your mind! Did I mention that it also makes a pretty great sandwich?

Unfortunately, this tool doesn’t quite exist yet. That said, it's only a matter of time before it does. After all, over the past seven years, an arsenal of new tools have been added to the design industry’s kit—each one promising faster workflows and infinite possibilities. Each announcement or release makes a big splash in the product design community and becomes a hot topic discussed around fancy coffee machines.

These are exciting times. Still, it’s important for designers to stay grounded. Read on for three things to consider when exploring new tools. 

1.) Strong foundational design knowledge is still invaluable

As tools become more capable and easy-to-use, a strong foundational knowledge and earned skillset are still key. A good example is the visual side of design. A deep understanding of typography, color theory, and layout are essential skills required to create top-notch user interfaces. If you don’t know the basics of design, it doesn’t matter if you can use the latest tool.

Another example is motion design. Sophisticated UI interactions are becoming increasingly common in products. New tools make it easier to prototype animations; yet, it's still our responsibility to ensure that motion is utilized appropriately. 

When done correctly, motion plays a crucial role in unlocking the full potential of a product; however, when done incorrectly, it harms rather than enhances. The goal is to add value by creating focus and the perception of continuity and speed, providing visual feedback, and adding navigational context. However, animations that are too abrupt can be jarring and disorienting. If a user sees motion behave in a way that does not align with their understanding of the physical world, it can cause confusion.

 

Pro tip: Do your research

Find products that nail motion design and break down how each element moves through the interaction. Understand how it adds meaning and continuity to the user experience. Study motion design and understand basic animation principles. “The Illusion of Life: Disney Animation” was released in 1981, and the 12 principles defined in the book are STILL being referenced and applied today by designers and developers. In fact, it has been adapted to “The 12 Principles of UX in Motion.”

2.) Understand the required development effort

Additional front-end development efforts are required to add animations to an interface. If a front-end developer is re-creating an animation you have prototyped, then you need to be able to articulate the value it's adding to the product. If not, your product manager will likely drag you into an alley for a serious conversation!

A guide to animation tools

A designer working in an agile development environment also needs to be aware of the timeline and sprint cycles. Often, the front-end engineer will need the entire sprint to get the pieces in place, and custom animations have to be added as improvements in a later sprint. Upfront planning will make the team aware that an enhancement to the feature is on the way. Collaborate in determining how the work will be segmented, and deliver quality results as a team. 

 

Pro tip: Identify where motion will add the most value

If you're working within a budget (which we all are), you might need to pick your battles. Make sure you're able to deliver as a team.

3.) Stay focused on the product’s goal

A shiny, new tool to create assets is useless if it does not solve the right problem. User research and product strategy are still essential for success. Design tools may come and go, but a solid strategy is always necessary for the creation of successful products. 

 

Pro tip: Prototype using real data

I often reference various sites for design inspiration and have come across some beautifully designed UIs with clean, powerful data visualizations. If you aim to implement a similar solution, it’s helpful to use accurate data in your prototypes to confirm that everything is working for your product’s application. After all, it’s easy to make placeholder data look good. 

Focus on skills

Tools are temporary, but foundational skills are forever. I must admit I am intrigued by new tools just as much as the next designer, but it's just as important to continue sharpening and developing your skills outside of software. Product design is about solving problems, not just making pictures with software.