Who doesn’t like the freebies? When there are such amazing 20 Best Freebies for Aspiring UX Motion Designers why would they not want to take it. The interface designing these days is getting very inspired the by the UX patterns. They give the special touch to the interface with more user friendly options and intuitive elements that can instantly respond to the user actions. The mock-ups used in the UX designs rely heavily on the special effects which determine how the interface will actually respond to the inputs of the user.
The idea is to be able to emulate the user actions with the help of the animated effects. There are various programs that are used for the UX designing with the help of the animations. Principle is one such program that can help create great UX designs but it is available only for the Mac OS X users only. However, the designers can also use the Adobe After Effects for this purpose. If you are someone who wants to learn these effects then you will be greatly benefited by the freebies available on the internet.
We have compiled a list of 20 such freebies that you can use for your project.
1. Delete Action
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 animationbecause it gives developers a chance to see how the interface should work.
2. Widget Swipe
Here’s another swipe animated mockup that focuses on cart items in a slideshow. Designed by Leon Wu, this free swipe animation comes with a PRD file which is made for Principle.
The animation is extremely simple, and demonstrates how items should move on the screen when pressure is applied. You also get a feel for the easing effect whenever the swipe action is released.
3. Dualshock UI
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.
4. Hamburger Menu Animation
Hamburger icons are still all the rage in mobile interfaces. This menu icon freebie demonstrates how to animate the three-bar icon into an "X" icon.
It’s a repeating animation, so the "X" also animates back into a hamburger menu icon. This is a great freebie to learn about vector manipulation for UI elements.
5. Snapster
This free mockup is for a mobile app called Snapster. It focuses on the welcome/onboarding screen where users can see demos of the app, and learn how it actually functions.
It’s a PRD file, and unfortunately this doesn’t play nice with After Effects, so only Principle users can benefit from this one.
6. Loading Spinners
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.
7. Play/Pause Transition
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.
8. iPhone Mockup
While this freebie doesn’t directly contain animation, it’s meant to be used for production work on iPhone applications. It’s a free iPhone 5S AEP file for use in After Effects as an iPhone template.
Simply import your interface mockup, and create the animations in After Effects. Then you can plug it into this iPhone mockup to share with your team.
9. iPhone Template
This is another custom After Effects template with a more modern iPhone design. The freebie is available from this page at UX in Motion.
Everything in the template is super easy to customize. On the download page, you’ll also find a section labeled "Video Instructions" where you can learn how to animate the app.
10. Micro Animation
Even the smallest app animations can make a big impact on user experience. This freebie displays a "Like" micro animation whenever a user "likes" a post.
The heart icon has its own animation with the user’s profile photo added to the stack of likes. This freebie is only for Principle and you also have a .mov file to download if you wish.
11. Wallet App
Digital wallets are becoming much more popular, and this freebie makes it easier to design one. You get a Sketch file with all the raw vector elements, plus a free PRD file for Principle animation.
This freebie was designed by Sergey Bykov as a fun little side project. But it can be very educational if you take it apart, and work with the animation step-by-step.
12. iOS Switch
With Apple’s iOS 7, the world got a freshly designed switch for on/off labels. This led to many different effects including a free animation which mimics the native on/off switch.
In this file, you get a very simple animation effect with a basic easing. The switch moves over, and the background turns green, then reverts back when the switch is turned off.
13. Ritter App
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.
14. Invite Friends
We all know and love the plus icon flyout menu of Google. Well, Jardson Almeida created a Friends Invite menu based on a simple Material Design concept.
Everything was designed in Sketch, and imported to Principle for animation. You get both files as freebies to download and toy around with.
15. Card Swipe
Here’s another general swiping freebie made only for Principle users. This is a card swipe interface created for general purpose slideshows or native app UIs.
I think this is the perfect freebie for a beginner who’s just getting into Principle. It’s not so complicated that you’ll feel lost, yet it’s not so simple that you’ll feel trivialized.
16. Chat on Map
Many designers still use Photoshop for interfaces, and it’s also true of this map chat freebie. You can download a PSD file for the interface, and a PRD file for the Principle animation.
It’s a surprisingly tame animation for the style, but it still looks great and functions exactly as you’d expect in a simple maps/geolocation app.
17. App Loading
Mobile apps often use loading screens to tell visitors that something’s happening in the backend. One of my favorite freebies in this collection is this loading animation created by Roman Wagner.
It loads individual elements one after another once the loading screen has finished. This animation is very smooth, and completely credible in the realm of mobile app design.
18. Onboarding Cards
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.
19. Principle Demos
As you delve further into Principle, you’ll learn a lot of advanced workflow techniques. One of the best freebies to go further is this one created for the Yalantis creative team.
This is a completely free resource for Principle users to download and play with. It covers a few tricks showing how to become a pro at Principle animation.
20. Dropdown Menus
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.
No comments:
Post a Comment