UI Animation for Beginners with Principle app
Animations are not merely meant to delight and entertain, the animation in UI can bolster user interactions and increase engagement. Nowadays, users have come to expect an optimized, friction-free digital experience across all platforms and devices, and the animation becomes more and more essential to support ease of use and make an experience more intuitive.
Animation is the beating heart of user interface. As such, it is an essential factor of the overall user experience. — Ana Hercigonja
Why Animation
Basically, animation can incorporate with the design in two aspects: one is to play on a high-screen level, such as when screens transition from one to the next and the other role animation plays is at a granular level within designs, such as by adding the animation effect of the button to sending the feedback to the users that the action is completed.
The above aspects are discussing how animation incorporating the design itself and considering the trend of remote working these days, to master the animation could also help the designers to communicate their ideas to the team and stakeholders.
Animation could also help the designers to better present their work to the team and stakeholders, especailly when remote wokring.
Principles
According to Pablo Stanley, who was the design lead in Invision. There are three principles in creating the animation, which are:
- It is functional;
- It feels natural;
- Adds character;
The animation is not merely as the icing of the cake and it serves a very specific function. This kind of animation is subtle and not intend to take up all of the focus to itself but is designed with the purpose of either helping users to perform or task or direct users’ attention. The animation itself should act as the object in the physical world, otherwise, it will become unnecessarily stand out and spoil the overall user experience. The animation should also align with the brand attributes.
Common Types of UI Animations
According to Pablo Stanley, the properties of animation can be classified as Easing, Position, Scale, Rotation, Opacity, Choreography, Relationships, Overlay, Zoom, Parallax, and Hierarchy. Considering the post is for the beginner and the length of the article, I may not include each type here but only focusing a few types that are more commonly used.
Animate with Principle app
There are several options tools in the market for creating the animation and I found the Principle offers the best compatibility with my design tool of Sketch, so I go with that in my animation’s design. The principle app also provides 14 days free trial. Firstly, I will create an artboard (shortcut A), then creating the shape with the insect function.
Then right-click to duplicate another artboard. The trick here is to keep the name of your layers in the artboards the same, which allows the Principle to automatically generate the effect for you later.
Then downscale the shape (shift+alt) in the duplicated artboard. Click the artboard to trigger the event and point to the duplicated artboard. Then do that again from the duplicated artboard to the original artboard to turn it back off. Once you click the events on top of the artboard, you will see the animate panel. As it is downscale, so the width and height of the shape both change, and you could adjust the time frame here.
Here is the outcome of the animation:
With the same approach, you could try more different types of animation by changing the weight, height, size, color, and position.
Animations can bolster user interactions and increase engagement and it could support the ease of use and make user experiences more intuitive. The below example is how I use the approach introduced before to elevate the user experiences of the app that I designed.
The app I designed with the animation
Advanced
There are more animations that haven’t covered in this article. For instance, in my previous post, I introduced how cards take the UI design to the next level, and the animation could also work with the cards to let the design feels more sophisticated and contemporary. Here is the tutorial from the Principle that you could refer to.
Here is the example that I create the animation for the cards in my UI.
Swiping between cards
Before you leave, here are the useful links I collected in introducing the animation and the tips would help you to create your own fantastic works. Hope it helps! Thank you for reading!
