Interface designers are taking a greater interest in UX design with animated mockups that emulate user actions. These UX mockups rely on motion with animated effects to define how an interface should respond to user input.
Most UX designers learn to use software to create these animations. The two most popular choices are Adobe After Effects and Principle (OS X only). You can design interface mockups in a program like Photoshop, and move the UIs into these programs for animation.
If you’re interested to learn UX animation, then freebies will be a tremendous asset. You can study the work of others, and play with their designs to see how it all works.
Swiping is a very common action in mobile apps for various purposes. The default iOS swipe action is used to display alternate options for editing/deleting items, and that’s exactly what you get in this freebie created by Ramil Derogongun.
You can download the free AEP file for After Effects, and try it out yourself. The UI follows a very basic wireframe scheme with user input displayed as a blue dot. These types of user behaviors are the best to be shown through animation because it gives developers a chance to see how the interface should work.
Here’s an incredibly dynamic UX animation effect shared by Alexander Boychenko. This mockup is based on the PlayStation Controller for a mobile app UI. It includes a Sketch and Principle file you can download for free.
This freebie shows how to create transitions that swipe between screens. But you also get to see how page elements animate around the screen in various directions.
Here’s an AEP After Effects freebie for mobile loading spinners. These types of animated GIFs became very popular when Ajax made its way into mainstream web development.
Now these mobile loaders are a dime a dozen, and they can even be heavily customized to fit certain interfaces. This freebie comes with an AEP file and a Sketch file to edit the vectors if you want to modify them.
Transition effects often seem very simple but actually require a good amount of work. This play/pause animation created by Alex Pronsky is a great example.
With this freebie you can examine how to animate various thin line icons into shapes and symbols. Once you learn the program, it becomes a lot easier to do this type of stuff, so it helps to have freebies at your disposal for research.
Here’s another great freebie released by Sergey Bykov for what he calls the Ritter App. This includes a free Sketch file for the vector interface, along with a free PRD file for the Principle animation.
You’ll get a lot of different animations in this freebie, so I think it would be more useful to an intermediate-to-advanced designer. Beginners can learn a lot from it as well, but may have a steep learning curve.
User onboarding is a crucial step for every new mobile application. It’s always nice to include some animations at this stage, that’s why these onboarding card animations can be very helpful to app designers.
This was created by Austin Baird, and released for free to be used on any UI/UX project.
Menu dropdowns often employ crazy animations to capture our attention. This After Effects freebie uses a dropdown stairs animation on the menu for individual elements to make them drop like stairs.
This may not be useful for everyone but it’s certainly a great way to learn about After Effects interface animation.
All of these resources are completely free to download and toy with in your own projects. If you’re brand new to UX animation I guarantee you’ll learn a lot by studying these freebies. If you know any other great resources feel free to drop links in the comments.