My Transition- from Motion designs to UI animations
Dear reader,
The thought behind writing this piece of work was to enlighten you about the changes and challenges one might go through in switching the tracks while riding the same train. Meaning to say, how you have to function with the same tools for a completely different product and how complex but adventurous & time engaging it all can be. Happy reading!
’Tis the time to EXPLORE!
As a motion designer, there are high chances that in the early stages of your career you’ll primarily get to work on marketing videos, logo animations, things associated with the brand and of course, fulfilling the needs of the clients. Though there are tons of things you can explore and learn while working within this territory, one still often starts thinking, how I can use this skill set that I nurtured for years in different verticals and broaden my horizons. And that’s where my exciting transition from motion designs to UI animations or SVG animations started a year ago.
Hit the rewind button
Let me take you back in the past to give you a sneak peek into my transformation journey. I am a 2D motion designer based in India and have been transforming shapes and characters for a while now. Six years to be more precise.
Mostly I worked on 2D explainer (marketing) videos, created my own storyboards and design illustrations, which helped me at a certain extent in setting up a base of being an independent artist. And, being surrounded by and working with traditional 2D animators and 3D artists really helped explore new ways of doing things. I got to work on a wide spectrum of animations, from cell animations to C4D deformers, from Newton to joy-stick n sliders. And this range of work in my portfolio helped me land up with opportunities to work with people all around the world for different sorts of products and services. However, now it was the time to walk on a new track but with the same shoes, and solve a different set of problems using my existing skills.
I had a whale of a time!
While working on motion graphics video, you try to create a cinematic experience for your viewer and give them a visual delight to convey your message in a stronger fashion. You go for dynamic transitions and morphing, exaggerated character animations to keep the audience engaged and simultaneously communicate the services of your clients.
But UI animations were totally on the other side of the pole, you need to design animations for micro-levels. It shouldn’t be distracting the user of your product/service in the process of his User Experience but should communicate and give feedback to them in a very subtle manner. In fact, a minor tweak of a few frames or easing graphs can make the user relentless. Once I got to know about such nuances, it changed my approach of looking at my animations and made me realize how micro-interactions can make a significant impact on user experience other than giving them a visual treat. Also now your viewers can literally interact with your animation which feels more like two-way communication and also gives an experience of a live app. Apart from your own work now you are surrounded by some amazing product designers that help you learn about their craft as well. Bingo!
Some things were Greek to me!
I simply didn’t have the idea about the creative challenges that were packed in the box of this “Shape-shifting” transition for me from working on videos to interactive apps. The biggest issue was, I had to hold back myself and unlearn my way of approaching the designs to make room for the new thoughts of style. I still recall the feedback I got from my team lead when I animated my first micro-interaction: “not to go over the top”. While on the contrary, throughout my career (as a marketing video animator) I was mostly told to be as dynamic as possible in my animations for the purpose of keeping the video as much alive and engaging as possible. So I had to find out ways for minimal animations, yet keeping the soul of a motion designer alive in it.
Turning over a new leaf
The most significant change that I realized in my job was my working style. Typically motion designers use hundreds of plugins and expressions to create those super cool looking animations. But now as a micro-interaction artist, I had to put all those tools in a closet and work in the most traditional way possible. Though after Lottiefiles came into existence, it has made the job of a designer and developers a lot easier than ever before, but it does not support them. Any effect or expression makes the job sometimes very painful. Applying a simple shadow effect or echo effect in your shape was just 2 clicks away. But now you have to go through a ton of stages to achieve that all manually, because in doing animation for apps you need the output to be in JSON format, and it doesn’t support effects and scripts. But I’m optimistic about it being more flexible in upcoming times.
What the future beholds!
The UI animations have been there for a while, since the birth of iOS and Android. But it’s Lottiefiles that has popularized this technique conveniently. You may not find professional animations in apps sometimes as most product designers are exploring this territory for the first time, so you can’t expect them to be phenomenal at it. But as they keep exploring how to use this new ingredient in their products, and companies also hire promotion designers to leverage this tool to solve user problems, you will get to see wonders in UI animations as well by the time.
Well, that’s about it!
Thank you so much for spending your precious time reading this piece.
Hope you enjoyed it!
Signing off for now!
Give some claps 👏🏻 if you enjoyed the article.
To see more of our work check out Slice app on Android and iOS
Have some thoughts on this or would want to know more? Get in touch with us at design@sliceit.com
