Animation in UI

We fall for designer topics as we love creativity, not mentioning the fact that Yalantis designers are something to be proud of! Every two weeks our designers team gets together for an inner seminar and shares the experience within Yalantis creative core.

Even though these guys closely collaborate with each other daily, such seminars are specifically called to be a source of the new discoveries in the art craft and increase the overall level of professionalism. We deeply support such initiative doing our best to motivate and encourage all the other guys sitting in our cosy homelike office to grow professionally as an individual and a team.

So the first designer seminar was devoted to animation, the basics of the After Effects and their use in the process of the app development. Let’s take a look at what one of our designers had to say about all that.

Good interface wins it all


The role of the correctly developed interface is growing important as it’s a bridge between a user and a business owner. That’s why the utmost attention should be paid to maintaining this bridge, making it stable and as attractive and easy to pass through as possible. Friendly user interface is something that makes a user happy, both because it is convenient and looks good. At the same time it is in charge of convertible actions and revenue for a developer as the most desirable result.

So what’s the key to this sacred knowledge of building great interfaces? There is no secret key in fact. The only right answer is analysis of the user interaction with the app. Only by gathering the data and having a close look at the analytics thrown in for a good measure one can predict a possible reaction of a customer to the app in general and the interface being on top of that process.

The why for Animation

Animation in the user interfaces is indeed more important than you might think. Well, first of all it’s cool, but you probably already know that. Next, animation helps a user in his hard process of figuring out all the stuff your app has to offer. It shows the transition from one state to another and what happens in reply to the user actions. Animation is a go-to tool if you want to print the instructions of the system navigation in a motion format.

All this is especially revelant now as Apple’s launch of iOS7 has set the course for flat design and animation. This new life Apple breathed into its products’ designs has long been discussed by everyone dealing with iPhone apps.

If you think we have no single criticism to iOS7, I am afraid you are wrong. As all the designers, we are picky and fastidious. So we don’t really like the obscure character of the interaction spots, like the buttons and so, as well as going over the top with animations and transitions (in the first iOS7 versions at least the animations took too long a time). But what we do find interesting and worthwhile is simplification of the elements, flat design, great emphasis on typography, fonts and texts. What is more, iOS7 makes it clear that animation becomes your must-have feature for flat design.


Clever use of animations

So what? Do we have to glue animation everywhere now? Not exactly. It is highly advisable to use it only where it doesn’t look odd and can really help. In case the animation makes you wait and does nothing but bother and irritate, it influences the user experience with the product in a bad and unpleasant manner.

One of the ways to create animation, as to be able to visually demonstrate it to both a developer and a client is made possible by using Adobe After Effects. This tool is applied for compositing, motion design, 2D and 3D animation in different video production services. Also we can successfully use After Effects for UI.

What the seminar was about


During our seminar with the team, we discussed general principles of work with After Effects, particularities of the user interface and its opportunities. We also looked at the examples of how this tool is used in different spheres with a stress on the cases that characterize our work environment. We had a look at the main principles of animation and shared our personal stuff: like what’s so great about animation and why each of us feels so attracted to it at times.

What exactly we stared at?

Here is the animation itself with the sound attached to it: 

I also used animation at the projects for presentations left in my «when I was a student» era (another useful sphere to use animation by the way).

Couple of final thoughts

Popularity of different effects the app can brag about is gaining momentum. Obviously there appear more and more instruments and methods for animation design implementation. Regarding developers, animation is gradually becoming a norm for them as well. Although they need some extra time and patience to embed animation into the project but the visual effect deserves giving it a shot.

3.1/ 5.0
Article rating
Remember those Facebook reactions? Well, we aren't Facebook but we love reactions too. They can give us valuable insights on how to improve what we're doing. Would you tell us how you feel about this article?

We use cookies to personalize our service and to improve your experience on the website and its subdomains. We also use this information for analytics.

More info