

{"id":4323,"date":"2018-02-09T18:00:34","date_gmt":"2018-02-09T15:00:34","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=4323"},"modified":"2023-07-24T11:53:32","modified_gmt":"2023-07-24T11:53:32","slug":"motion-for-mobile-creative-concepts-of-ui-animation","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/","title":{"rendered":"Motion for Mobile. 20 Creative Concepts of UI Animation"},"content":{"rendered":"<p><span style=\"color: #333333;\">A lot of trends have stepped aside but motion keeps its top positions in the domain of user experience for mobile and web. <a href=\"https:\/\/blog.tubikstudio.com\/ux-design-how-to-use-animations-in-mobile-apps\/\">Animation<\/a> has become an essential part of effective user interfaces making them more interactive, fun and user-friendly.<\/span><\/p>\n<p><span style=\"color: #333333;\">Tubik designers know how helpful the well-crafted animation can be for the usability of digital products, especially for mobile applications. Adding to diverse design ideas and practical examples shown on our blog before, today a fresh set of concepts with sophisticated UI animations is ready for your attention. Let\u2019s take a look at them.<\/span><\/p>\n<h2><span style=\"color: #333333;\">Vegan Recipe App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8777\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/vegan_recipe_app_ui_animation_tubik.gif\" alt=\"vegan recipe app ui animation_tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">This is a concept of the Vegan Recipe app enabling users to choose the dishes based on vegetarian principles and add the necessary ingredients to the shopping list. Here you can see the basic set of interactions including the choice of recipes with the horizontal swipe. When users tap on the specific recipe, they can see detailed information on its ingredients and nutrition. The tab bar includes simple icons helping to navigate the app.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Tasty Burger App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8600\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/12\/burger_app_ui_animation_tubik.gif\" alt=\"burger app ui animation tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">Another food concept is the fresh and juicy <a href=\"https:\/\/blog.tubikstudio.com\/case-study-tasty-burger-ui-design-for-food-ordering-app\/\">Tasty Burger App<\/a> allowing users to order a traditional burger from the menu or customize any option for themselves adding or removing the ingredients. The item screen is focused on the high-quality photo of the chosen burger making, users want it even more. The ingredients are displayed at the bottom of the screen so users can add or remove them without effort since it\u2019s one of the easiest tap areas to reach. And finally a yellow <a href=\"https:\/\/blog.tubikstudio.com\/ui-design-basic-types-of-buttons-in-user-interfaces\/\">CTA button<\/a> \u201cAdd to Cart\u201d helps to complete the purchase.<\/span><\/p>\n<p><span style=\"color: #333333;\">The menu screen includes a brand name on the top to increase the recognizability. Users can apply filters for the fast search or pick an item from \u201cspecial offers\u201d. All the UI elements in the menu screen are structured due to the sufficient visual hierarchy allowing users to interact with the app.<\/span><\/p>\n<h2><span style=\"color: #333333;\">Mobile Game App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8778\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-interactions-tubik.gif\" alt=\"mobile game interactions tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">This is the animated concept showing interactions for the mobile game Chicken Attack. It allows players to create their own networks via a set of random matches that can be skipped or added. The triadic color scheme makes UI look more playful and funny <a href=\"https:\/\/blog.tubikstudio.com\/big-reasons-to-apply-illustrations-in-ui-design\/\">flat illustrations<\/a> of chickens bring positive emotions. The animation shows how an egg breaks and one more chicken, presenting a player, joins a team. This way the basic operation of adding a player becomes lively and gets a strong association with the theme of the game.<\/span><\/p>\n<h2><span style=\"color: #333333;\">Business Card App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8771\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/business_card_app_animation_tubik.gif\" alt=\"business card app animation tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">Here&#8217;s the UI concept of the Business Card App, an application for creating, keeping and sending contact data in a form of virtual business cards. For users working at multiple positions, it may save a set of cards as you can see in the animation. Cards in the user&#8217;s set appear by dragging the first one down.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Watering Tracker App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7666\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/watering-tracker-app-ui.gif\" alt=\"watering tracker app ui\" width=\"800\" height=\"600\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8780\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/watering_tracker_app_interactions_tubik.gif\" alt=\"watering tracker app interactions_tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">Here are two screens presenting some interactions for <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-watering-tracker-ui-design-for-home-needs\/\">a watering tracker<\/a>. It reminds users to water the plants as well as track the watering stats for every plant. When users accomplished watering they push a custom button with water drops and it changes into a check sign. In addition, there is information showing when a plant needs to be watered next time, so when people confirm watering it changes the data immediately.<\/span><\/p>\n<p><span style=\"color: #333333;\">The second screen presents a feature of adding a new plant to the list. Users can take a photo of a plant and the app automatically defines what it is and how it should be watered.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Photo App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8072\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/11\/tubik_photo_app-interactions.gif\" alt=\"tubik photo app interactions\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">Here\u2019s a UI concept for a photo app. It\u2019s a social network that allows photographers to present their portfolios elegantly and connect to the world. The current view shows a profile screen with a photo gallery. Users can see view photos with a swipe and tap to open the full-sized versions.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Homey App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8781\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/homey_app_interactions_tubik-1-1.gif\" alt=\"homey app interactions tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">It is the UI concept for Homey, the app enabling users to apply the functionality of smart home in their dwellings. The featured screens show that users can choose the room and see the basic data about them like temperature, humidity, and energy consumption. Also, people can tune the settings and see the expenses as well as turn saving mode and security of different levels. All the interactions are animated with the use of colors that looks especially deep on the dark background.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Loading Motion for iPhone X<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8782\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/loading_animation_iphonex_tubik.gif\" alt=\"loading animation iphonex tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">Here&#8217;s a concept of a content loading animation shown in the status bar of the iPhone X. When users drag it down the rainbow animation appears. This is a bright way to decrease the tension of waiting and entertain users for a moment.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Balance App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8783\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/balance-app-interactions-tubik-design.gif\" alt=\"balance app interactions tubik design\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">This is a concept of the Balance App, a mobile application for tracking finances. It helps users to check the balance of their bank cards easily, check the expenses along with particular categories and keep updated on how much money is left to the limits set by the user. The designer has chosen the green color as the basis as it is often associated with safety, confidence, and growth. The smooth animation demonstrates the transition from one screen to another.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Travel Brightly App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8784\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/travel_app_interactions_tubik_animation.gif\" alt=\"travel app interactions tubik_animation\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">This is a user interface concept for Travel Brightly App. It\u2019s a mobile application providing information about various destinations around the world. The app collects various offers on accommodation and tickets to them and enables users to share their reviews. The feature making the app really special is bright <a href=\"https:\/\/blog.tubikstudio.com\/big-reasons-to-apply-illustrations-in-ui-design\/\">custom illustrations<\/a> for every presented place. Graphics are followed by names of cities and both demonstrate the animation when users choose a city.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Mobile Menu Interactions<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8284\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/10\/menu_interactions_ui_animation_tubik.gif\" alt=\"menu interactions ui animation_tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">Here&#8217;s the concept presenting interactions with the menu of categories for a simple app enabling a user to collect and track all kinds of daily activities. Contrast colors and bold <a href=\"https:\/\/blog.tubikstudio.com\/mobile-typography-8-steps-toward-powerful-ui\/\">typography<\/a> also contribute much to making navigation clear and intuitive. Smooth motion supports the usability and elegance of interactions.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Learn Chinese App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8785\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/learn_chinese_app_interactions_tubik.gif\" alt=\"learn chinese app interactions tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">This is a UI concept of Learn Chinese application presenting the cards to learn Chinese characters and pronunciation. One side of a card shows the user a character and the other side allows for seeing its transliteration and translation as well as enables users to hear it. Users can save the cards, mark them studied or non-studied, and learn various thematic collections. The interesting motion makes the learning process brighter and more interactive.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Book Swap App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8720\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/bookswap_app_interactions_tubik.gif\" alt=\"bookswap app interactions tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">Here\u2019s a UI concept of a book swapping application. It organizes the books by cards: each book card has a unique design that matches its cover. The animated concept shows the interactions with the feed showing books and their owners, and also the card of two books to be swapped. Moreover, the animation can be seen in the smallest details including the CTA button \u201cSwap\u201d with moving arrows.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">WineYard App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8718\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/wineyard_app_UI_animation_tubik.gif\" alt=\"wineyard app UI animation_tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">This is WineYard, the application enabling users to learn about different kinds of wine, and get tips on serving them and food to combine with. Also, the app gives information about where the chosen wine can be bought based on the user&#8217;s location. When users push \u201cView more\u201d, the full data about an item appears in a smooth motion while other UI elements such as a photo and title fade away.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Cinema App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7721\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/cinema_app_interactions_UI_tubik.gif\" alt=\"cinema app interactions UI\" width=\"800\" height=\"600\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">This is a UI design concept for a mobile application for the cinema chain. The first screen features interactions with the home screen showing the list of films. Films are presented via posters placed closely to each other so that users could see more options at once. Tapping on a poster people go to a screen of the particular film with all the necessary details.<\/span><\/p>\n<p><span style=\"color: #333333;\">The second screen shows the flow of choosing and booking a seat. Picking up a particular showing, users can see the available seats, pick the ones they like, and book them, paying right from the app.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Music News App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8769\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/music_news_app_animation_tubik.gif\" alt=\"music news app animation_tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">This is a creative concept for Music News App helping collect lyrics, news, <\/span>and<span style=\"color: #333333;\"> quizzes about music all in one place. UI is presented via a bright color scheme and custom illustrations which make an app look original. The background of a home page applies geometric shapes that change their place and colors when users swipe through the screen.<\/span><\/p>\n<h2><span style=\"color: #333333;\">NGIN App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7717\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/ngin_app_car_statistics_animation_tubik.gif\" alt=\"app car statistics animation tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">NGIN is the conceptual application for smart car control. The app automates the process of regular data collection informing users about the technical state of the vehicle and the conditions of its exploitation. The presented screen gives the user basic current stats like average speed, distance, fuel consumption, and useful notifications. The animation shows the interactions with the graph curve of the speed for the chosen period and the notification which features a glitch effect to add a bit of fun and support the general stylistic concept.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Home Budget App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8741\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/home-budget-app-interaction-animation-tubik.gif\" alt=\"home budget app interaction animation tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8770\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/Home-Budget-app-interactions-motion-tubik.gif\" alt=\"Home Budget app interactions-motion-tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-home-budget-app-ui-for-finance\/\" target=\"_blank\" rel=\"noopener noreferrer\">Home Budget<\/a> application allows users to manage their expenses and incomes, creating an extended database for tracking financial flows and changes and getting comprehensive stats. The animation makes interactions and navigation more intuitive despite a significant amount of data.<\/span><\/p>\n<p><span style=\"color: #333333;\">The second concept shows interaction with the feed of financial operations for the current day and the <a href=\"https:\/\/blog.tubikstudio.com\/uiux-design-glossary-navigation-elements\/\">hamburger menu<\/a>.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Food App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8786\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/recipe-card-UI-animation.gif\" alt=\"recipe card UI animation\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">This is a mobile application that provides users with a <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ui-experiments-options-for-recipe-cards-in-a-food-app\/\" target=\"_blank\" rel=\"noopener noreferrer\">database of recipes<\/a>. It helps to find recipes on the basis of the supplies users currently have at home or create a shopping list to buy ingredients that are missing. The concept shows the process of interactions with recipe cards. Users can choose the right card with a sideswipe. Unobtrusive and elegant animation during the first interaction can prompt about the additional functionality that is hidden under the card and available on swipe down. For this project, designers offered several variants of the layout and motion &#8211; check them in a <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ui-experiments-options-for-recipe-cards-in-a-food-app\/\" target=\"_blank\" rel=\"noopener noreferrer\">case study<\/a>.<\/span><\/p>\n<hr \/>\n<p><span style=\"color: #333333;\">As you can see, animation can become an effective solution for various problems in user interface design. Well-crafted motion components can improve navigation and make the interactive process even more user-friendly.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Recommended reading<\/span><\/h2>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/web-animation\/\">Motion in UX Design: 6 Effective Types of Web Animation<\/a><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ui-animation-eye-pleasing-problem-solving\/\">UI Animation: Eye-Pleasing, Problem-Solving<\/a><\/span><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/ux-design-how-to-use-animations-in-mobile-apps\/\">How to Use Animation in Mobile UI<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/conceptual-animation-making-ui-design-stand-out\/\">Conceptual Animation. Making UI Design Stand Out<\/a><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/creative-motion-12-concepts-of-interface-animation\/\">Creative Motion: 12 Concepts of Interface Animation<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/\">UI in Action. 15 Animated Design Concepts of Mobile UI<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/animated-interactions-motion-on-purpose\/\">Animated Interactions. Motion on Purpose<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ui-animation-microinteraction-for-macroresult\/\">UI Animation. Microinteraction for Macroresult<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/interface-animation-the-force-of-motion\/\">Interface Animation. The Force of Motion<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-toonie-ui-animation-development\/\">Case Study: Toonie. UI Animation Development<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A fresh set of motion design concepts: check diverse approaches to user-friendly UI animation improving navigation and interactions in mobile applications.<\/p>\n","protected":false},"author":3,"featured_media":4332,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,7,9],"tags":[100,463,147,465,256,466,258,491,269,504,319,321,324,328,331,332,336,440,16,447,18,457,20,458],"coauthors":[],"class_list":["post-4323","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","category-processes_and_tools","category-ui_ux","tag-design","tag-ui-design-article","tag-design-studio","tag-ui-design-examples","tag-interaction-design","tag-ui-design-inspiration","tag-interface-animation","tag-user-interface","tag-ios-animation","tag-ux-design-article","tag-mobile-app","tag-mobile-applications","tag-mobile-design-inspiration","tag-mobile-navigation-design","tag-mobile-ui","tag-mobile-user-interface","tag-motion-design","tag-tubik","tag-animation","tag-tubik-studio","tag-animation-concepts","tag-ui","tag-app-design","tag-ui-animation"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Motion for Mobile. Creative Concepts of UI Animation<\/title>\n<meta name=\"description\" content=\"A fresh set of motion design concepts: check diverse approaches to user-friendly UI animation improving navigation and interactions in mobile applications.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Motion for Mobile. Creative Concepts of UI Animation\" \/>\n<meta property=\"og:description\" content=\"A fresh set of motion design concepts: check diverse approaches to user-friendly UI animation improving navigation and interactions in mobile applications.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-09T15:00:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-24T11:53:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/UI-animation-mobile-interfaces-tubik-blog-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"1000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/\",\"name\":\"Motion for Mobile. Creative Concepts of UI Animation\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/UI-animation-mobile-interfaces-tubik-blog-1.jpg\",\"datePublished\":\"2018-02-09T15:00:34+00:00\",\"dateModified\":\"2023-07-24T11:53:32+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"A fresh set of motion design concepts: check diverse approaches to user-friendly UI animation improving navigation and interactions in mobile applications.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/UI-animation-mobile-interfaces-tubik-blog-1.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/UI-animation-mobile-interfaces-tubik-blog-1.jpg\",\"width\":1500,\"height\":1000,\"caption\":\"UI animation mobile interfaces tubik blog\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Motion for Mobile. 20 Creative Concepts of UI Animation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Motion for Mobile. Creative Concepts of UI Animation","description":"A fresh set of motion design concepts: check diverse approaches to user-friendly UI animation improving navigation and interactions in mobile applications.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/","og_locale":"en_US","og_type":"article","og_title":"Motion for Mobile. Creative Concepts of UI Animation","og_description":"A fresh set of motion design concepts: check diverse approaches to user-friendly UI animation improving navigation and interactions in mobile applications.","og_url":"https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2018-02-09T15:00:34+00:00","article_modified_time":"2023-07-24T11:53:32+00:00","og_image":[{"width":1500,"height":1000,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/UI-animation-mobile-interfaces-tubik-blog-1.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/","url":"https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/","name":"Motion for Mobile. Creative Concepts of UI Animation","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/UI-animation-mobile-interfaces-tubik-blog-1.jpg","datePublished":"2018-02-09T15:00:34+00:00","dateModified":"2023-07-24T11:53:32+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"A fresh set of motion design concepts: check diverse approaches to user-friendly UI animation improving navigation and interactions in mobile applications.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/UI-animation-mobile-interfaces-tubik-blog-1.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/UI-animation-mobile-interfaces-tubik-blog-1.jpg","width":1500,"height":1000,"caption":"UI animation mobile interfaces tubik blog"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/motion-for-mobile-creative-concepts-of-ui-animation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Motion for Mobile. 20 Creative Concepts of UI Animation"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=4323"}],"version-history":[{"count":5,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4323\/revisions"}],"predecessor-version":[{"id":14479,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4323\/revisions\/14479"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/4332"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=4323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=4323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=4323"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=4323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}