Learn Efficient Design & Prototyping Workflows with InVision Studio.
Users expect a fast reaction from the digital products they’re working with
A basic sticker sheet and workflow for animating user interfaces
A reference table for various effects that are commonly produced using Adobe After Effects. These can be useful for HUD items in games or creating various other effects
The following manifesto represents my answer to the question — “As a UX or UI, designer, how do I know when and where to implement motion to support usability?”
How I taught myself to create 50 pieces of animation in 100 days
Creating a basic animation is simple enough, but what if the goal is to add realism or visual interest?
Learn how to go from a static icon to a fun animation using Illustrator CC and After Effects CC
If you’ve never done animation before don’t worry, it’s actually pretty straightforward. We’ll show you how with a simple 5 step process
The course will help you overcome AE-related barriers and fears which are standing between you and the wonderful world of animation and motion design
The complete guide to getting 60fps animations with CSS
Practical suggestions to improve your UI micro-interactions
Each animation in an interface tells a micro story, and as a user encounters more and more animations throughout your site or product, these micro stories add up to reveal the personality and story of the brand or product behind them.
As everything integrated into an interface, app animations must be a functional element rather than decor
Obviously, the more details you want to include in your animation, the longer it will take you. But these are the essential techniques you’ll be using most of the time
Useful is better than delightful. After some time thinking and researching I came up with a list of 6 guidelines that I hope can be helpful for your animation endeavours
We interviewed Salih Abdul-Karim, Airbnb’s design lead and animator, to learn how he turned Noun Project’s icons into moving animations with a new tool called Lottie
I just want to collect all the main principles & rules in one place, so that other designers who want to start animating interfaces don’t have to search for additional information
Choosing a right animation technique for each situation allows us to work efficiently and achieve better result
While design solves universal problems, micro-interactions are the delightful moments your users have while using the product
A free user interface animation course to grow your design skills, improve your product, and increase the bottom line
In order to create the most usable interfaces, content can’t be an afterthought — words alone can define the experience of an app or website
We all know the power of the first contact. The first date may turn into the love of your life - or get forgotten in a couple of hours
I started collaborating on animations three years ago when I created the animated logo for my website. After that first experience, a new world opened up to me
Motion helps make a UI expressive and easy to use
Motion helps make UIs expressive and easy to use. Despite having so much potential, motion is perhaps the least understood of all the design disciplines
All screenshots © of their respective owners.