Animation in UI is a tool of great power breathing life into the process of interaction. It helps user to get fast feedback, provides opportunities for fast and easy microinteractions, marks out key elements of the layout and adds engaging feeling of live and dynamic process. Used wisely, it is able to add more positive vibes to user experience. It is especially true for mobile applications which have to be organized along guidelines in terms of limited space of the screen and at the same time provide informative and functional interface.
In our previous articles we have already provided ideas about the role of animation in UI design, its potential in boosting effective microinteractions and popular purposes for using animated microinteractions. With rapid growth of mobile devices animation got even more significant popularity and diversity, enabling fast and easy processes for touchable interfaces, especially on-the-go. Therefore, animation is an effective way to make the product simple, clear, bright and user-centered.
Today we would like to support that idea with a bit of practice via the set of design concepts by Tubik Studio designers. It includes motion design practices for animated interactions in mobile user interfaces of different kinds, stylistic choices and functionality. So, welcome to review!
Presented UI features the concept of a blogging app for everyday use. It features lots of images, and the news feed consists of topic-colored tiles for the posts. By tapping on the post author the users are brought to their profile where like in any other social network they can follow/unfollow the person and browse through their recent activity. Slight motion effects add the unobtrusive feeling of interacting with physic objects and livens up the visual presentation.
The animation features user interactions with a mobile application presenting social network. People usually want to see this sort of app fast, dynamic and clear. Interactions are presented here by simple motions based on colorful UI accents. They show the functionality of the screen and add slight lively vibes to the interface.
It is well-known that designers should be careful with animated elements in UI as too much animation confuses a user, but if a motion accent supports the general layout it brings better conversions. Here designers showed animated interaction in the art gallery mobile application featuring the set of events previews and transition to more detailed information about the particular event. The vertical movement is highlighted with colorful diagonal lines which are keeping the same structure across all the screens.
Sport apps are popular nowadays as more and more people use their devices to support their trainings, keep the data and track the progress. So here is the design concept for such an app demontrating functionality via animated interactions. The structure is very simple: it consists of a side menu and content. Menu moves from left to right to show all the app sections. The main idea is to make some «rubber effect» for the content when the side menu opens. It serves one goal — to make all content details visible even when menu is open on the screen. Colour palette is all about fresh and bright scheme to motivate users to act and in combination with slight motion accents it creates good mix.
Presented design concept features animated interactions within a product card in the shopping app. Users can move the photos showing catalogue items, set the size, see the price and add to cart. Here animated elements support high level of usability: they immediately inform the user about completion of the action. That provides fast and easy microinteractions and saves key data within one screen. At the same time, animation doesn’t overload interaction process and supports clear navigation.
This concept presents one more design idea for the app of everyday use with a calendar enabling the person to schedule appointments and add notes. Bright interface playing out rich pallete and gradients is supported with smooth and stylish animated accents providing harmonic support to general visual presentation.
This example shows two UI interactions inside one animation: timer progress and pull down. This is a one-screen app with the minimum of functionality (timer) and the maximum of animation to concentrate user’s attention on the «time flow». Timer can be started by Start button or by pull-down. Of course, such transitions are much more for fun, but they will definitely attract users who like visually original solutions and custom graphic design.
One more bright animated concept shows navigation design within the mobile application informing the user about city news. Catchy colors and stylish icons are strengthened with original motion design solution for active elements appearing on the tap and enabling further directions of transition.
Another animation concept for the same city news app activates one-touch interaction and shows one more interaction in navigation of the app, this time adding transition to user profile.
Here is the interface of a social network for those who like cooking and want to communicate and get updated about this topic in fast and easy way. The app enables using all the scope of social functions: sharing recipes, making discussions, chatting, following, uploading images, collecting favorites and so on. Nice and smooth animations supports general stylistic concept and shows interactions within app functionality.
Here is the interface of a social network for those who like cooking and want to communicate and get updated about this topic in fast and easy way. The app enables using all the scope of social functions: sharing recipes, making discussions, chatting, following, uploading images, collecting favorites and so on. Nice and smooth animations supports general stylistic concept and shows interactions within app functionality.
No doubt, good food is the great way to feel the world more positive and that is the message behind the presented animated interface design. This is the concept of a mobile application for a chain of cafes providing the functionality for saving coupons and discounts and then using them buying tasty stuff. Interface animation is added to make the screen and interactions more lively and engaging and enable easy microinteractions.
This concept is the animated version of the user interface for a contact list app. It features variants of vertical and horizontal scroll as well as other interactions with the application. Animation not only livens up the process of interaction but also strengthen stylistic concept of the app with special visual effects.
This simple mobile app consists of just a couple of screens and simply allows to track the current location of your followers on the map. Here is the home screen animation and its dynamics in the process of search, and also the search results gallery. Animations imitates movement of physical cards which makes interaction with neatly organized data base engaging and clear for user.
Here you can see the screens of the mobile app organized around the idea of healthy lifestyle and providing recipes and tips on healthy food. Engaging graphic elements and correspondent color solutions are used to set the theme as well as enable fast visual perception of information which is supported with unobtrusive motion design accents. Animation is also used to show various interactions with a product. Together all those features support user-friendly, attractive and informative interface design.
In bottom line it’s important to remember: animation which is applied in the interface should have a clear purpose enhancing general user experience. In vast majority of cases, UI designer and motion designers try to find design solutions in which animated elements will satisfy multiple options increasing usability and desirability of the interface.
Today’s list is over but studio practice is full of many other interesting examples of design concepts for different purposes and needs of modern users. Don’t miss new presentations in our future posts.
Originally written for tubikstudio.com
Welcome to see the designs by Tubik Studio on Dribbble and Behance
Welcome to Tubik Blog
