We at Flow think that animation is more important than ever in UI design. This is clear in the advances we see in hardware and software platforms, indicated by spotlights on Advanced Animation practices or Material Motion as well as through brilliant thought leadership from practitioners such as Val Head and Sarah Drasner among many others. When designers and developers take time to carefully, thoughtfully include animation into their interfaces the results are really amazing apps and websites that truly inspire.
Empowering Creativity
Even though everyone is talking about it and companies are making it possible, it often remains difficult to get great animations into a production environment. From the choice of software(and even hardware) platforms, communication between team members, to the capabilities of design and development environments, or even time itself, there are a lot of reasons why crafting animations takes additional effort.
Here are a few great examples of micro interaction animations:
Many tools like After Effects empower designers to create gorgeous animations (like the ones above), where others like Principle or Framer do the same for motion design mixed with interaction.
While such tools have provided incredible foundations for the advancement of animations and interaction design, they tend to leave designers and developers with assets that are difficult to translate into products. Often, the fine details of animation work fail to make it into a final app or website.
Understanding Both Sides of the Animation
There are a couple ways to guarantee animations make it through to production. One can learn how to be both a designer and developer — or, in other words, learn how to become a unicorn. Alternatively, teams can establish a very tight working relationship between design and development, where each participant knows enough about one another’s work to truly bring animations to life. In either case, a deep understanding of the possibilities for design / animation as well as for creating those in software are critical to successfully bringing animation to life.
Design Tools Need To Understand Too
Let’s say you’ve put a lot of effort into crafting something beautiful and said to a developer “Here’s an animation I’ve been working on,” only to hear right away, “That’s not possible.” If you’ve ever run into this situation, it’s probably because the tools you’re using are great for animation, but not for getting the final results into production-ready format.
Instead of generating assets that need to interpreted into code — or often ones that are very difficult or simply not possible to code up — new tools should empower creativity and generate assets tailored for specific production environments. It is critical that modern design tools have an understanding of the production environments towards which a designer’s work is headed.
There’s Power in Code.
There’s power in code that can’t be replicated in many of today’s modern design tools. There are many elements that can be used to generate dynamic animations, like pressure, speed, motion, and location, all of which are incredibly difficult to replicate in tools that have been architected for 2d or linear thinking. Furthermore, with this kind of understanding built into their architectures, these tools will be able to greatly empower while also guiding creativity towards outputs that can be easily replicated in software — the best ones will do this for you. Tools that understand and can generate great software will be the cornerstone of any future interaction design practice.
This article is sponsored by JABT Labs.