Animating Interfaces using Principle
I recently began to experiment around with Principle-App to one up my skills in User Experience. Animation is crucial in Interfaces and Interaction Design since it’s responsible to match User Expectation and helps to provide meaning to the interaction. It accounts to create tweens between various crucial keyframes with appropriate motion and delay. As someone who took up Multimedia as their elective in my Master’s for a semester — I was quite amused by the 12 principles of Animation by Walt Disney. Principle reminds me of how animation can be powerful to attract attention and ensure delight to the user.
A business can almost guarantee their user-retention if their app can delight users with kick-ass animations in the first few interactions.
Good examples are: Candy Crush & Pokemon Go.
I began to create these animations using Principle alone at the start to learn and then decided to to import assets from Sketch to Principle.
Below are a few examples of how I blueprinted and animated multiple interfaces.
1. A Simple Card Anim from Closed to Open State
Blueprint
Deconstruction
This was essentially easy to create since it didn’t consist of a lot of elements. The width & height’s time for the bicycle’s image animation from circle to rectangle was increased to 1 second.
Similarly, the opacity for arrow in the first artboard was 0% and increased to 100% in the second artboard, while the angle was switched from 180 degrees to 0 along with the width and height changing to suggest the arrow appearing from the inside of the interface.
2. Artifact Hover Animation with Actions
Blueprint
Deconstruction
The Artifact was a lot more complex than the card anim and used Taps & Hovers. Apart from that, it used a lot of other elements to scale up and down. As you can see above, it used 5 art-boards in total.
3. Complex Animation with a Sketch File Import
The following animation is a lot more complex and began with us, the design team at CredR Auto naming it “Project Zoop” to scare the developers.
Instead of a paper blueprint, I decided to create a Principle Blueprint for the same.
Blueprint
Now, this blueprint was essentially very easy to create and took around 1 hour of deep work. However, it was still a lot less effort than I would have put to animate the sketch file — but still more than it would have taken to do on paper.
A blueprint on paper wouldn’t have been able to convey the delight one gets when the card is dropped into the cart.
I would highly recommend blueprinting with shapes on Principle when animations are complex and consist of major differences in width and scale of the element. Also, based on the art-board size and number of elements that are positioned to move. It helps convince the team what you’re trying to achieve and how you plan on doing that.
This Principle Blueprint was responsible to move things in the correct direction and get the designs to speed. Remember the anim before this? It became the foundation for the hover effect.
Imported Anim from Sketch
Deconstruction
Although, we had to hack around with Principle and copy-paste layers at bitmap, this was a successful attempt for animating the correct layers. Of course, you wouldn’t get the exact animation you’re hunting — but it would be…
Special thanks to Saurabh Kumar and Sunny Kumar for being an amazing team and nudging me to take things to the next level with Principle.
I recently took up a webinar with UXWebinar, courtesy of Quill Labs where I teach on how to use Principle with Sketch so that you don’t have to go through the mistakes I made.
