The Benefits of Animated UI/UX GIFs Created with After Effects
by Jake Rocheleau
on February 18, 2016
I’ve seen this trend becoming much more popular amongst mobile and web designers. Adobe After Effects is a powerful software suite typically used for adding effects into videos. But it can also create animations for user interfaces in smartphone apps, tablets, and website layouts. It takes a lot of practice but After Effects is quite the interesting program.
These AE animations can be exported as GIFs and used to demonstrate how a UI should behave. Examples may include swiping through a photo gallery, sliding open a menu, performing a search, or anything similar. I’d like to share some ideas about why you might want to learn After Effects and start creating these animations for your digital projects.
Why Create Animations?
As a designer you often need to present the final interface to developers or clients who wish to make the website or application. This is fine if you can work with static elements, or if the animation effects are very basic. However once you get further into things like mobile app design you’ll find yourself creating very dynamic menus and screen transitions.
By designing a GIF you can show off how the animation should unfold. It will show which parts of the screen should move away, how they should move, and what should appear afterwards. Even basic effects like scrolling down might pinch or squeeze parts of the design. The clearer your ideas can be communicated, the easier it will be to make them.
UI and UX Differences
The term ‘User Interface’ includes all the pieces of an interface that users interact with. Buttons, links, input fields, and similar page elements. Designing a good UI means knowing where to place things so they’re accessible and easily recognized.
User Experience incorporates the actual interaction itself. How will a user swipe down on a menu – should they even be able to do that? Should it be a tap-based menu or maybe tap-and-hold? UX design is a field which looks more at how users interact with the UI. You want to know this before designing anything so you can place elements in the proper order.
For example the pull-to-refresh effect in most iPhone apps has become a staple feature. Many users expect this to be possible when viewing a feed. So instead of deviating from this widely accepted idea it would be smarter to build this feature into your application. How far to pull and how the animation unfolds is always debatable – but the bare-bones experience will always revolve around what the user expects to happen.
These 2 concepts are similar but not exactly the same. Understanding UX will help you craft a very clean, stable UI. In fact if you often use mobile apps then you should instinctively know what type of experience works best. So having the ability to showcase each effect through animation will get your ideas across much smoother.
Learn by Example
Recently I published a design gallery of animations created using After Effects. The gallery has a focus on mobile apps typically built for Android or iOS. Looking over some of those examples should give you an idea as to what kinds of animations would be most useful.
You don’t need a fully polished design to create UI/UX effects. Typically you just need some idea worth implementing. This may start by scribbling ideas onto paper and recreating them digitally in Photoshop. But the final goal is to create interface animations which clearly explain how a user would interact with the UI. Easier said than done, but with practice this can become like second nature.
You should check out this freebie AE file which demonstrates the process of creating animated interfaces. This was released on Dribbble by Fabio Basile as an example of his practice using After Effects. Very much like deconstructing a freebie PSD, this file could help someone who has never worked within After Effects before.
However the best place to start would be learning the basics. If you aren’t even familiar with How to Make a GIF in Photoshop by VandelayDesign, then you should probably familiarize yourself there first before diving into After Effects. There are plenty of free guides online which go into the basics of AE as well once you are up to speed. But you might also consider a paid alternative such as UX in Motion. They have a library of tutorials along with some free AE templates to get you started.
One last freebie I should mention can be downloaded here from Pierre Bravoz. It’s a collection of iPhone UI animations packed into one .AE file. This could be a very useful freebie if you’re trying to recreate many different mobile app interface animations.
I feel there is a need for this type of work and it’s not always based in big studios. Freelance designers can benefit from showing a wireframe animation to their client before constructing the entire UI. This gives everyone a chance to see how a website or application will behave during the early construction.
Some of these effects could be duplicated in Photoshop, but it’s really not the best software to use for animation. If you have access to After Effects I’d recommend reading through some tutorials online. Not everything will be useful but there are guides out there for those who wish to learn.