

{"id":1748,"date":"2016-06-22T16:52:48","date_gmt":"2016-06-22T13:52:48","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=1748"},"modified":"2023-08-17T12:04:49","modified_gmt":"2023-08-17T12:04:49","slug":"ui-in-action-15-animated-design-concepts-of-mobile-ui","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/","title":{"rendered":"UI in Action. 15 Animated Design Concepts of Mobile UI"},"content":{"rendered":"<p><span style=\"color: #333333;\">Animation in UI is a tool of great power, breathing life into the process of interaction. It helps a user to get fast feedback, provides opportunities for fast and easy microinteractions, marks out key elements of the layout, and adds the engaging feeling of the live and dynamic process. Used wisely, it is able to add more positive vibes to the user experience. It is especially true for mobile applications, which have to be organized along guidelines in terms of limited space on the screen and, at the same time, provide an informative and functional interface.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9693\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/02\/animation-color.jpg\" alt=\"animation color\" width=\"1500\" height=\"1042\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/02\/animation-color.jpg 1500w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/02\/animation-color-300x208.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/02\/animation-color-768x534.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/02\/animation-color-1024x711.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/02\/animation-color-150x104.jpg 150w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/p>\n<p><span style=\"color: #333333;\">In our previous articles, we have already provided ideas about the <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/interface-animation-the-force-of-motion\/\" target=\"_blank\" rel=\"noopener noreferrer\">role of animation<\/a> in UI design, its potential to boost <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ui-animation-microinteraction-for-macroresult\/\">effective microinteractions<\/a>, and popular <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/animated-interactions-motion-on-purpose\/\" target=\"_blank\" rel=\"noopener noreferrer\">purposes<\/a> for using animated microinteractions. With the 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 <a href=\"https:\/\/blog.tubikstudio.com\/faq-design-platform-human-centered-vs-user-centered-are-the-terms-different\/\">user-centered<\/a>. Today we would like to support that idea with a bit of practice via the set of design concepts by 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!<\/span><\/p>\n<h2>Blogging App<\/h2>\n<p><span style=\"color: #333333;\">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 <a href=\"https:\/\/blog.tubikstudio.com\/social-network-design-ux-for-communication\/\">social network<\/a> they can follow\/unfollow the person and browse through their recent activity. Slight motion effects add the unobtrusive feeling of interacting with physical objects and liven up the visual presentation.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8756\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/tubikstudio-blog-app-ui-animation.gif\" alt=\"tubikstudio blog app ui animation\" width=\"800\" height=\"600\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Social Network App<\/h2>\n<p><span style=\"color: #333333;\">Animation features user interactions with a mobile application presenting a social network. People usually want to see this sort of app fast, dynamic, and clear. Interactions are presented here by simple motions based on <a href=\"https:\/\/blog.tubikstudio.com\/color-matters-6-tips-on-choosing-ui-colors\/\">colorful UI accents<\/a>. They show the functionality of the screen and add slight\u00a0lively vibes to the interface.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7837\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/05\/tubik-studio_social_network.gif\" alt=\"tubik studio social network\" width=\"800\" height=\"600\" \/><\/p>\n<h2>Art Gallery App<\/h2>\n<p><span style=\"color: #333333;\">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 <a href=\"https:\/\/blog.tubikstudio.com\/business-terms-in-design-for-e-commerce-sales-basics\/\">conversions<\/a>. 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.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13683\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/06\/art-gallery-app-ui-tubikstudio-1-1.gif\" alt=\"art-gallery-app-ui-tubikstudio\" width=\"800\" height=\"600\" \/><\/p>\n<h2>Sports App<\/h2>\n<p><span style=\"color: #333333;\">Sport apps are popular nowadays as more and more people use their devices to support their training, keep data and track their progress. So, here is the design concept for such an app demonstrating functionality via animated interactions. The structure is very simple: it consists of a side menu and content. The menu moves from left to right to show all the app sections. The main idea is to make some &#8220;rubber effect&#8221; for the content when the side menu opens. It serves one goal \u2014 to make all content details visible even when the menu is open on the screen. The <a href=\"https:\/\/blog.tubikstudio.com\/color-theory-brief-guide-for-designers\/\">color palette<\/a> is all about a fresh and bright scheme to motivate users to act, and in combination with slight motion accents, it creates a good mix.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8754\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/sports-app.gif\" alt=\"sports app animation\" width=\"800\" height=\"600\" \/><\/p>\n<h2>Product Card<\/h2>\n<p><span style=\"color: #333333;\">Presented design concept features animated interactions within a product card in the shopping app. Users can move the photos showing catalog items, \u00a0set the size, see the price and add to a cart. Here animated elements support the high level of usability: they immediately inform the user about the completion of the action. That provides fast and easy microinteractions and saves key data within one screen. At the same time, the animation doesn&#8217;t overload the interaction process and supports <a href=\"https:\/\/blog.tubikstudio.com\/uiux-design-glossary-navigation-elements\/\">clear navigation<\/a>.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9664\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/product-card-ui-animation-tubik-studio-1-1.gif\" alt=\"product card ui animation tubikstudio\" width=\"800\" height=\"600\" \/><\/p>\n<h2><span style=\"color: #333333;\">Calendar App Animation<\/span><\/h2>\n<p><span style=\"color: #333333;\">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. <a href=\"https:\/\/blog.tubikstudio.com\/bright-colors-in-ui-design-strong-weak-sides\/\">Bright interface<\/a> playing out the rich palette and gradients is supported with smooth and stylish animated accents providing harmonic support to a general visual presentation.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8761\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/calendar-app-animation-tubik.gif\" alt=\"calendar app animation tubik\" width=\"800\" height=\"600\" \/><\/p>\n<h2><span style=\"color: #333333;\">Timeline App\u00a0<\/span><\/h2>\n<p><span style=\"color: #333333;\">This example shows two UI interactions inside one animation: timer progress and pull down. This is a one-screen app with the minimum functionality (timer) and the maximum animation to concentrate user&#8217;s attention on the &#8220;time flow&#8221;. Timer can be started by Start button or by the pull-down. Of course, such transitions are much more fun, but they will definitely attract users who like visually original solutions and custom <a href=\"https:\/\/blog.tubikstudio.com\/graphic-design-what-graphic-designers-do\/\">graphic design<\/a>.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7660\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/tubik-studio-motion-design.gif\" alt=\"tubik studio motion design\" width=\"800\" height=\"600\" \/><\/p>\n<h2><span style=\"color: #333333;\">UI Navigation Concept\u00a0<\/span><\/h2>\n<p><span style=\"color: #333333;\">One more bright animated concept shows navigation design within the mobile application informing the user about city news. Catchy colors and stylish <a href=\"https:\/\/blog.tubikstudio.com\/small-elements-big-impact-types-and-functions-of-ui-icons\/\">icons<\/a> are strengthened with an original motion design solution for active elements appearing on the tap and enabling further directions of transition.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9058\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/ui-concept-animation.gif\" alt=\"ui concept animation\" width=\"800\" height=\"600\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8772\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/tubik-studio-animated-interface.gif\" alt=\"tubikstudio animated interface\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">Another animation concept for the same city news app activates one-touch interaction and shows one more interaction in the navigation of the app, this time adding a transition to a user profile.<\/span><\/p>\n<p><span style=\"color: #333333;\"><em>Buon App Social Network<\/em><\/span><\/p>\n<p><span style=\"color: #333333;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1322\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/03\/tubik_studio_buonapp-ui-1.gif\" alt=\"tubikstudio ui design\" width=\"800\" height=\"600\" \/><\/span><\/p>\n<p><span style=\"color: #333333;\">Here is the interface of a social network for those who like cooking and want to communicate and get updated about this topic in a 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 support the general stylistic concept and show interactions within app functionality.<\/span><\/p>\n<h2><span style=\"color: #333333;\">Dynamic Scroll\u00a0<\/span><\/h2>\n<p><span style=\"color: #333333;\">This concept features a screen of a global social network. The idea was simple: to show user&#8217;s timeline with different kinds of posts such as check-ins, media content and stuff from user&#8217;s friends or their own. The task here was to add simple game accents which wouldn&#8217;t make the simple network too cluttered and would not distract\u00a0the user. The final decision was to make parallel timelines: the main vertical timeline and bright animated horizontal one. The function of the latter is to show the user where the last post was in terms of place and time.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7723\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubikstudio-motion-design.gif\" alt=\"tubikstudio motion design\" width=\"800\" height=\"600\" \/><\/p>\n<h2><span style=\"color: #333333;\">Cafe Coupon App\u00a0<\/span><\/h2>\n<p><span style=\"color: #333333;\">No doubt, good food is a 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 to buy tasty stuff. <a href=\"https:\/\/blog.tubikstudio.com\/ux-design-how-to-use-animations-in-mobile-apps\/\">Interface animation<\/a> is added to make the screen and interactions more lively and engaging and enable easy microinteractions.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7719\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/ui-animation-cafe-app-tubikstudio.gif\" alt=\"ui animation cafe app tubikstudio\" width=\"800\" height=\"600\" \/><\/p>\n<h2><span style=\"color: #333333;\">Contact List Concept\u00a0<\/span><\/h2>\n<p><span style=\"color: #333333;\">This concept is the animated version of the user interface for a contact list app. It features variants of the vertical and horizontal scroll as well as other interactions with the application. Animation not only livens up the process of interaction but also strengthens the stylistic concept of the app with special visual effects.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7724\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/Contact-List-Concept-Scrolls-Tubik.gif\" alt=\"Contact List Concept Scrolls Tubik\" width=\"800\" height=\"600\" \/><\/p>\n<h2>Location App<\/h2>\n<p><span style=\"color: #333333;\">This simple mobile app consists of just a couple of screens and simply allows you 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, as also the <a href=\"https:\/\/blog.tubikstudio.com\/how-to-design-search\/\">search results<\/a> gallery. Animations imitate the movement of physical cards, which makes interaction with a neatly organized data base engaging and clear for the user.<\/span><\/p>\n<p><span style=\"color: #333333;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1421\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubik-studio-motion-design-ui-1.gif\" alt=\"tubik studio motion design ui\" width=\"800\" height=\"600\" \/><\/span><\/p>\n<h2><span style=\"color: #333333;\">Healthy Food App\u00a0<\/span><\/h2>\n<p><span style=\"color: #333333;\">Here you can see the screens of the mobile app organized around the idea of a 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 a user-friendly, attractive, and informative interface design.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8735\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/tubik-studio-healthy-food-animation.gif\" alt=\"tubik studio healthy food animation\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">In bottom line, it&#8217;s important to remember: animation, which is applied in the interface, should have a clear purpose in enhancing the general user experience. In the vast majority of cases, UI designer and motion designers try to find design solutions in which animated elements will satisfy multiple options increasing the <a href=\"https:\/\/blog.tubikstudio.com\/user-experience-design-user-abilities\/\">usability and desirability<\/a> of the interface.<\/span><\/p>\n<p><span style=\"color: #333333;\">Today&#8217;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&#8217;t miss new presentations and\u00a0<a href=\"https:\/\/blog.tubikstudio.com\/category\/case_study\/\">design case studies<\/a> in our future posts.<\/span><\/p>\n<h2>Tubik Design Collections and Articles<\/h2>\n<p>If you want to check more creative sets and useful articles on UX design for web and mobile, here are some of them.<\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/app-design-ideas\/\">App Design Ideas: 7 Nifty Mobile Application Design Projects<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/media-editorial-website-design\/\">Information Beautified: Media and Editorial Website Designs<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/ux-design-traveling\/\">UX Design for Traveling: Impressive Web Design Concepts<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/web-design-concepts-for-business\/\">23 Impressive Web Design Concepts for Various Business Objectives<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/ui-designs-for-ecommerce\/\">Design for Sales: 10 Creative UI Designs for Ecommerce<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/ux-design-interactive-content\/\">UX Design: Types of Interactive Content Amplifying Engagement<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/web-animation\/\">Motion in UX Design: 6 Effective Types of Web Animation<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/effective-landing-page-design\/\">5 Pillars of Effective Landing Page Design<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/anatomy-of-web-page\/\">The Anatomy of a Web Page: Basic Elements<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/web-design-environment-ecology\/\">Save the Planet: Web Designs on Environment and Ecological Issues<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/creative-web-design-for-events\/\">Steal the Show: Creative Web Design for Diverse Events<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The set of design concepts providing practices by Tubik designers in the field of interface animation. Motion design for various mobile applications.<\/p>\n","protected":false},"author":3,"featured_media":13684,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,9],"tags":[336,437,447,16,457,20,463,100,465,147,466,151,467,233,479,256,482,258,491,264,502,319,515,324,331,332],"coauthors":[],"class_list":["post-1748","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","category-ui_ux","tag-motion-design","tag-tips","tag-tubik-studio","tag-animation","tag-ui","tag-app-design","tag-ui-design-article","tag-design","tag-ui-design-examples","tag-design-studio","tag-ui-design-inspiration","tag-design-tips","tag-ui-design-practices","tag-human-computer-interaction","tag-usability","tag-interaction-design","tag-user-experience","tag-interface-animation","tag-user-interface","tag-interface-navigation","tag-ux","tag-mobile-app","tag-uxui","tag-mobile-design-inspiration","tag-mobile-ui","tag-mobile-user-interface"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UI in Action. 15 Animated Design Concepts of Mobile UI.<\/title>\n<meta name=\"description\" content=\"The set of design concepts providing practices by Tubik designers in the field of interface animation. Motion design for various 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\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI in Action. 15 Animated Design Concepts of Mobile UI.\" \/>\n<meta property=\"og:description\" content=\"The diverse set of design concepts providing practices by Tubik Studio designers in the domain of interface animation. Motion design ideas for various mobile applications, supporting general layouts by means of slightest accents and up to core interactions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-22T13:52:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-17T12:04:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/06\/tubikstudio-ui-app-design.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/\",\"name\":\"UI in Action. 15 Animated Design Concepts of Mobile UI.\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/06\/tubikstudio-ui-app-design.png\",\"datePublished\":\"2016-06-22T13:52:48+00:00\",\"dateModified\":\"2023-08-17T12:04:49+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The set of design concepts providing practices by Tubik designers in the field of interface animation. Motion design for various mobile applications.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/06\/tubikstudio-ui-app-design.png\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/06\/tubikstudio-ui-app-design.png\",\"width\":800,\"height\":600,\"caption\":\"tubikstudio-ui-app-design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UI in Action. 15 Animated Design Concepts of Mobile UI\"}]},{\"@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":"UI in Action. 15 Animated Design Concepts of Mobile UI.","description":"The set of design concepts providing practices by Tubik designers in the field of interface animation. Motion design for various 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\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/","og_locale":"en_US","og_type":"article","og_title":"UI in Action. 15 Animated Design Concepts of Mobile UI.","og_description":"The diverse set of design concepts providing practices by Tubik Studio designers in the domain of interface animation. Motion design ideas for various mobile applications, supporting general layouts by means of slightest accents and up to core interactions.","og_url":"https:\/\/tubikstudio.com\/blog\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2016-06-22T13:52:48+00:00","article_modified_time":"2023-08-17T12:04:49+00:00","og_image":[{"width":800,"height":600,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/06\/tubikstudio-ui-app-design.png","type":"image\/png"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/","url":"https:\/\/tubikstudio.com\/blog\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/","name":"UI in Action. 15 Animated Design Concepts of Mobile UI.","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/06\/tubikstudio-ui-app-design.png","datePublished":"2016-06-22T13:52:48+00:00","dateModified":"2023-08-17T12:04:49+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The set of design concepts providing practices by Tubik designers in the field of interface animation. Motion design for various mobile applications.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/06\/tubikstudio-ui-app-design.png","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/06\/tubikstudio-ui-app-design.png","width":800,"height":600,"caption":"tubikstudio-ui-app-design"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"UI in Action. 15 Animated Design Concepts of Mobile UI"}]},{"@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\/1748","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=1748"}],"version-history":[{"count":4,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/1748\/revisions"}],"predecessor-version":[{"id":14717,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/1748\/revisions\/14717"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/13684"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=1748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=1748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=1748"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=1748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}