ui animation design tubik

Creative Motion: 12 Concepts of Interface Animation.

Animation Processes And Tools UI/UX

Life is constant motion, so we usually cannot imagine our life without movement. Motion, applied in digital products which we use every day, adds its two cents to the general active and dynamic life of modern society. Yet, the crucial thing about interface animation is that it helps the user to feel the transitions and interactions more natural as well as navigation more intuitive. Applied thoughtfully, motion can make the web or mobile UI clear and easy to use: make no mistake, this is what users expect from the product.

 

Here in Tubik Blog, we often bring up the issue of UI animation as a method of boosting positive user experience via attractive and functional interfaces. Today’s post presents the set of animated interfaces created by studio designers for the variety of projects and concepts.

 

Jewelry E-Сommerce Application

 

jewellery_e-commerce_app_concept_by_tubik

 

Here is the design concept for e-commerce – an app for the online jewelry shop. The presented screens show the animated interactions with items: you can see how users can choose a product from the catalog, check its details and rating. They can also share the product cards to their social network accounts and open check out. The center of the visual composition is focused on the images presenting the items, while icons are stroke and minimalistic not to distract buyers’ attention. The color palette features pastel shades which look sophisticated on general layout full of light and air.

 

Book Swap App

 

tubik_studio_book_swap

 

This one is the interface of a social network for readers concentrated on book swapping. The designer chose the dark basic background as the application is image-driven and features a lot of diverse pictures including numerous book covers and users’ avatars, so the general style, which dark environment creates for all that stuff, looks classy. As data blocks like “Followers” and “Following” are standard and recognizable elements for many social networks and blogs, in this app the designer decided to experiment a bit and optimize the space and factor out the common denominator leaving only ‘ers and ‘ing.

 

To-Do List App

 

upper app UI design case study

 

This set of animations presents Upper App, the simple and elegant to-do list for iPhones. The basic functionality of the app is built around user’s ability to create the list of tasks which can be saved for the particular date and time, easily deleted or marked complete. In addition, Upper analyzes task completion progress and shows stats to keep users updated and motivated. The absence of distractions, simple screen design and thought-out typography make the content highly readable and allow using the app easily in any environment and on-the-go.

Read more in the detailed case study

 

Events App

 

night in berlin ui animation tubik

 

Another UI concept by Tubik designers is Night in Berlin, the simple app which enables active and sociable people to see the list of all the events taking place in Berlin on the current day. Here is the list of events in animated version showing the interactions. The data is organized along the cards for every event, which users can review scrolling vertically. Each card shows the key details about the event: its type, title and the time when it starts as well as the thematic image in the background. Being interested, the user can tap on the card and see more details about the event.

 

Alarm Application

 

tubik_toonie_help_screens_interaction

 

App tutorial is an important part of the interface which helps users to get informed on the basic interactions. In Toonie Alarm, it consists of three screens that tell the user about the functionality of the app. Small concise copy blocks are supported by the smooth and pleasant animation of transitions to create the feeling of integrity and cheerful mascot featured as the consistent element and the center of the screen graphic composition.

 

toonie UI animation

 

Time picker in the alarm application is actually the core part of interaction with the app and the primary element at which motion design and development play the vital role for establishing both usability and visual harmony. When the user sets the time, the upper part of the screen features the animation reflecting that time of the day.

 

toonie switch UI animation

Another piece of animation that required attention and creativity was the switch on the Alarm Screen, the actual element of interaction showing that the alarm is set and active or not. Design solution supporting the general visual performance of the app was to make the toggle look like the animated sun when the alarm was in the active position.

 

toonie alarm stickers

 

Animated stickers make interaction even more lively and enjoyable and also enhance user experience making the interface attractive and playful.

 

toonie_stickers_jumble_animation

 

This animation shows one more feature of the alarm interface: when user shakes the device, the stickers on the tab all jumble randomly. It looks funny and supports interaction with the interface by imitation of natural physical reactions. And this bit of fun will not let anyone get bored. which corresponds to the general image of the app as funny and entertaining.

Read more in detailed case studies on UI design and animation

 

Logo Animation for Real Estate Platform

 

realli_logo_animation_tubik

 

Here’s the logo created for the project called Realli: it’s the branding sign for a website representing a multifunctional platform for diverse operations with real estate. It uses a mascot inscribed into the recognizable form of the pin mark, which is usually associated with the fixed location. Animated version is used in the web interface and helps to make the interaction more dynamic as well as strengthens the cheerful nature of the logo character.

 

Animated Illustration for Marketing Start-up

 

Rocket_animation_tubik_studio

 

Here is the fresh animation accomplished for the project called Referanza. In general terms, it is a startup based on enhanced marketing that helps businesses to improve customer satisfaction and turn clients into referrals. One of design tasks was a creative pop-up which enabled the user to launch a campaign. The animated illustration presented in the shot was an element of symbolic meaning applied on this screen: rockets are often associated with effective and fast business progress while animation featuring upward movement set the feeling of dynamic growth.

 

Animated Interaction for the Weather App

 

sunset sunrise animation tubik studio

 

This example shows the animated interaction designed for a simple and attractive weather application. One of the features it provided to users was the ability to see the time of sunset or sunrise for the current day and several days ahead. Actually, this part of functionality was supported with the presented screen beautified with cityscape illustration and livened up with motion.

 

Tutorial for Social Network

 

social_network_animation_tubik_studio

 

Here’s the piece of motion design accomplished for the project on UI/UX for the social network. Presented interactions play the role of tutorial for users and have the objective to show functionality and nature of the app in pleasant-looking and entertaining way which would correspond to the general style of UI design.

 

HealthCare App

 

health care app interactions tubik studio

 

This is a piece of UI design of HealthCare App, an application for doctors with the key objective in the optimization of the huge amount of data which doctors regularly deal with. Every single piece of information about every patient is vital for making a right decision, so creating the interface designer was focused on making it organized, clear and easy-to-use. Intuitive navigation was set as the biggest priority to make the app applicable even for people with low or medium level of tech literacy. This time we added animated transitions featuring some basic interactions with the app: inputting data, operating with pricing and completing the reception.

Read more in the detailed case study

 

Social App Tutorial

 

wayke tutorial animation tubik studio

 

Here is the practical case of applying motion in the illustrated tutorial which was designed for a mobile application WaykeApp presenting a social network of broad functionality. Bright graphic details supported with lively and dynamic animation not only provide information to users but also add positive vibes from the first seconds of interaction.

 

Calculator App

 

haywire-calculator-tubik

 

Life is not only work and serious issues, isn’t it? Sometimes, we want things just giving us entertainment and fun. This case is the one of that kind: a funny design concept of a haywire calculator that plays a game with users. It checks their attention sometimes giving wrong answers and expecting additional interactions, like shaking, for example, if users want to know the correct answer. That’s definitely not the fastest calculator to use, still, it’s cool for those who want to add some refreshment to basic everyday operations.

 

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.


Welcome to see the designs by Tubik on Dribbble and Behance

Subscribe