

{"id":2749,"date":"2017-02-22T18:36:03","date_gmt":"2017-02-22T15:36:03","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=2749"},"modified":"2023-08-15T08:05:21","modified_gmt":"2023-08-15T08:05:21","slug":"creative-motion-12-concepts-of-interface-animation","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/creative-motion-12-concepts-of-interface-animation\/","title":{"rendered":"Creative Motion: 12 Concepts of Interface Animation"},"content":{"rendered":"<p><span style=\"color: #333333;\">Life is the constant motion, so we usually cannot imagine our routine 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.<\/span><\/p>\n<p><span style=\"color: #333333;\">Here in Tubik Blog, we often bring up the issue of <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ui-animation-eye-pleasing-problem-solving\/\" target=\"_blank\" rel=\"noopener noreferrer\">UI animation<\/a> as a method of boosting positive user experience via attractive and functional interfaces. Today&#8217;s post presents the set of animated interfaces created by studio designers for a variety of projects and concepts.<\/span><\/p>\n<h2><span style=\"color: #333333;\">Jewelry E-Commerce Application<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7720\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/jewellery-ecommerce-app-concept.gif\" alt=\"jewellery ecommerce app concept\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">Here is the design concept for e-commerce \u2013 an app for an online jewelry shop. The presented screens show the animated interactions with items: you can see how users can choose a product from the catalog, and check its details and rating. They can also share the product cards to their social network accounts and open checkout. The center of the visual composition is focused on the images presenting the items, while <a href=\"https:\/\/blog.tubikstudio.com\/small-elements-big-impact-types-and-functions-of-ui-icons\/\">icons<\/a> are stroked and minimalistic so as not to distract buyers&#8217; attention. The color palette features pastel shades that look sophisticated on a general layout full of light and air.<\/span><\/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-8734\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/tubik_studio_book_swap.gif\" alt=\"tubikstudio book swap\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">This one is the interface of a social network for readers concentrated on book swapping. The designer chose the <a href=\"https:\/\/blog.tubikstudio.com\/light-or-dark-ui-tips-choose-proper-color-scheme\/\">dark basic background<\/a> as the application is image-driven and features a lot of diverse pictures, including numerous book covers and users&#8217; avatars, so the general style, which the dark environment creates for all that stuff, looks classy. As data blocks like \u201cFollowers\u201d and \u201cFollowing\u201d 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 &#8216;ers and &#8216;ing.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">To-Do List App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8120\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/upper_app_ui_design_tubik_studio.gif\" alt=\"upper app ui design_tubik_studio\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">This set of animations presents <a href=\"https:\/\/blog.tubikstudio.com\/case-study-upper-app-ui-design-for-to-do-list\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Upper App<\/a>, the simple and elegant to-do list for iPhones. The basic functionality of the app is built around the user\u2019s ability to create a list of tasks that can be saved for a 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.<\/span><\/p>\n<p><span style=\"color: #333333;\"><em>Read more in the detailed <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-upper-app-ui-design-for-to-do-list\/\" target=\"_blank\" rel=\"noopener noreferrer\">case study<\/a><\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Events App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8938\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/05\/night-in-berlin-ui-animation-tubik.gif\" alt=\"night in berlin ui animation tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">Another UI concept by Tubik designers is <a href=\"https:\/\/blog.tubikstudio.com\/case-study-night-in-berlin-ui-for-event-app\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Night in Berlin<\/a>, 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 the animated version showing the interactions. The data is organized along with the cards for every event, which users can review by 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.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Alarm Application<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8905\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/11\/TUBIK_Toonie_Help_Screens_Interaction.gif\" alt=\"TUBIK Toonie Help Screens Interaction\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">App tutorial is an important part of the interface, which helps users to get informed on the basic interactions. In <a href=\"https:\/\/blog.tubikstudio.com\/case-study-toonie-alarm-app-ui-design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Toonie Alarm<\/a>, 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 the cheerful <a href=\"https:\/\/blog.tubikstudio.com\/design-me-live-the-power-of-mascots-in-ui-and-branding\/\">mascot<\/a> is featured as the <a href=\"https:\/\/blog.tubikstudio.com\/design-consistency\/\">consistent element<\/a> and the center of the screen graphic composition.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7768\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/Day_Night-animation-toonie-alarm-app.gif\" alt=\"Day Night animation toonie alarm app\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">The Time picker in the alarm application is actually the core part of the interaction with the app and the primary element in which motion design and development play a vital role <\/span>in<span style=\"color: #333333;\"> 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.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7662\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/Switch-control-app-design.gif\" alt=\"Switch control app design\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">Another piece of animation that required attention and creativity was the switch on the Alarm Screen, the actual element of interaction showing whether the alarm is set and active or not. The 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.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9348\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/toonie-stickers-animation.gif\" alt=\"toonie stickers animation\" width=\"1400\" height=\"560\" \/><\/p>\n<p><span style=\"color: #333333;\">Animated stickers make the interaction even more lively and enjoyable and also enhance user experience making the interface attractive and playful.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10291\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/toonie_stickers_jumble_animation-1.gif\" alt=\"toonie_stickers_jumble_animation-1\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">This animation shows one more feature of the alarm interface: when a <\/span>user<span style=\"color: #333333;\"> 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.<\/span><\/p>\n<p><span style=\"color: #333333;\"><em>Read more in detailed case studies on <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-toonie-alarm-app-ui-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">UI design<\/a> and <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-toonie-ui-animation-development\/\" target=\"_blank\" rel=\"noopener noreferrer\">animation<\/a><\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Logo Animation for Real Estate\u00a0Platform<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8658\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/02\/realli_logo_animation_tubik.gif\" alt=\"realli logo animation tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">Here&#8217;s the logo created for the project called Realli: it&#8217;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 a fixed location. The <a href=\"https:\/\/blog.tubikstudio.com\/dont-stay-still-why-brand-needs-an-animated-logo\/\">animated logo<\/a> 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.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Animated Illustration for Marketing Start-Up<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9394\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/Rocket_animation_tubik_studio.gif\" alt=\"Rocket animation tubik studio\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">Here is the fresh animation accomplished for the project called <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-referanza-logo-design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Referanza<\/a>. 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 the design tasks was a creative pop-up that 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.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Animated Interaction for the Weather App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12410\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/02\/sunset-sunrise-animation-tubik-studio-1-1.gif\" alt=\"sunset-sunrise-animation-tubik-studio-1\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">This example shows the animated interaction designed for a simple and attractive <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/weather-in-ui-design-come-rain-or-shine\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">weather application<\/a>. One of the features 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 by the presented screen beautified with the cityscape illustration, and livened up with motion.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Tutorial for Social Network<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8070\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/11\/social_network_animation.gif\" alt=\"social network animation\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">Here&#8217;s\u00a0the piece of motion design accomplished for the project on UI\/UX for the social network. Presented interactions play the role of <a href=\"https:\/\/blog.tubikstudio.com\/onboarding-tutorial-design-greet-inform-engage\/\">tutorial for users<\/a> and have the objective of showing the functionality and nature of the app in a pleasant-looking and entertaining way that would correspond to the general style of UI design.<\/span><\/p>\n<h2><span style=\"color: #333333;\">HealthCare App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9751\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/health-care-app-interactions-tubik-studio-1-1.gif\" alt=\"healthcare app interactions-tubik-studio\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">This is a piece of UI design for the <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-health-care-app-ui-for-doctors\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">HealthCare App<\/a>, an application for doctors with the key objective of the optimization of the huge amount of data that doctors regularly deal with. Every single piece of information about every patient is vital for making the 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 a 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.<\/span><\/p>\n<p><span style=\"color: #333333;\"><em>Read more in the detailed <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-health-care-app-ui-for-doctors\/\" target=\"_blank\" rel=\"noopener noreferrer\">case study<\/a><\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Social App Tutorial<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12411\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/02\/wayke-tutorial-animation-tubik-studio-1-1.gif\" alt=\"wayke-tutorial-animation-tubik-studio-1\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">Here is the practical case of applying motion in the illustrated tutorial which was designed for a mobile application <a style=\"color: #333333;\" href=\"https:\/\/dribbble.com\/shots\/3141971-Wayke-Tutorial-Animation\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">WaykeApp<\/a> 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.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Calculator App<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12412\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/02\/haywire-calculator-tubik-1-1.gif\" alt=\"haywire-calculator-tubik-1\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">Life is not only work and serious issues, isn&#8217;t it? Sometimes, we want things just to give us entertainment and fun. This case is 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&#8217;s definitely not the fastest calculator to use; still, it&#8217;s cool for those who want to add some refreshment to basic everyday operations.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Today\u2019s 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\u2019t miss new presentations in our future posts.<\/span><\/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\/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\/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\/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-eye-pleasing-problem-solving\/\">UI Animation: Eye-Pleasing, Problem-Solving<\/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\/case-study-upper-app-coding-ui-animation\/\">Case Study: Upper App. Coding UI Animation<\/a><\/span><\/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\/dont-stay-still-why-brand-needs-an-animated-logo\/\">Don\u2019t Stay Still. Why Brand Needs an Animated Logo<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/motion-for-mobile-creative-concepts-of-ui-animation\/\">Motion for Mobile. 20 Creative Concepts of UI Animation<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The collection of creative design concepts of animated user interfaces for various purposes and different target audience, which show how motion can enhance UX.<\/p>\n","protected":false},"author":3,"featured_media":8926,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,7,9],"tags":[258,467,298,468,299,469,319,479,324,482,336,491,16,337,502,20,339,504,87,365,515,100,440,534,112,447,538,212,457,215,458,233,463,256,465,257,466],"coauthors":[],"class_list":["post-2749","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","category-processes_and_tools","category-ui_ux","tag-interface-animation","tag-ui-design-practices","tag-logo","tag-ui-design-process","tag-logo-design","tag-ui-design-tips","tag-mobile-app","tag-usability","tag-mobile-design-inspiration","tag-user-experience","tag-motion-design","tag-user-interface","tag-animation","tag-motion-design-article","tag-ux","tag-app-design","tag-motion-design-examples","tag-ux-design-article","tag-creative-design","tag-product-design","tag-uxui","tag-design","tag-tubik","tag-web-design-article","tag-design-concept","tag-tubik-studio","tag-web-design-inspiration","tag-graphic-design","tag-ui","tag-graphic-design-inspiration","tag-ui-animation","tag-human-computer-interaction","tag-ui-design-article","tag-interaction-design","tag-ui-design-examples","tag-interface","tag-ui-design-inspiration"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creative Motion: 12 Concepts of Interface Animation<\/title>\n<meta name=\"description\" content=\"The collection of creative design concepts of animated user interfaces for various purposes and different target audience, which show how motion can enhance UX.\" \/>\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\/creative-motion-12-concepts-of-interface-animation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creative Motion: 12 Concepts of Interface Animation\" \/>\n<meta property=\"og:description\" content=\"The collection of creative design concepts of animated user interfaces for various purposes and different target audience, which show how motion can enhance UX.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/creative-motion-12-concepts-of-interface-animation\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-22T15:36:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-15T08:05:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/09\/jewellery_e-commerce_app_concept_tubik.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\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\/creative-motion-12-concepts-of-interface-animation\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/creative-motion-12-concepts-of-interface-animation\/\",\"name\":\"Creative Motion: 12 Concepts of Interface Animation\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/creative-motion-12-concepts-of-interface-animation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/creative-motion-12-concepts-of-interface-animation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/09\/jewellery_e-commerce_app_concept_tubik.png\",\"datePublished\":\"2017-02-22T15:36:03+00:00\",\"dateModified\":\"2023-08-15T08:05:21+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The collection of creative design concepts of animated user interfaces for various purposes and different target audience, which show how motion can enhance UX.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/creative-motion-12-concepts-of-interface-animation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/creative-motion-12-concepts-of-interface-animation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/creative-motion-12-concepts-of-interface-animation\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/09\/jewellery_e-commerce_app_concept_tubik.png\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/09\/jewellery_e-commerce_app_concept_tubik.png\",\"width\":1600,\"height\":1200,\"caption\":\"jewellery ecommerce app_concept_tubik\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/creative-motion-12-concepts-of-interface-animation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creative Motion: 12 Concepts of Interface 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":"Creative Motion: 12 Concepts of Interface Animation","description":"The collection of creative design concepts of animated user interfaces for various purposes and different target audience, which show how motion can enhance UX.","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\/creative-motion-12-concepts-of-interface-animation\/","og_locale":"en_US","og_type":"article","og_title":"Creative Motion: 12 Concepts of Interface Animation","og_description":"The collection of creative design concepts of animated user interfaces for various purposes and different target audience, which show how motion can enhance UX.","og_url":"https:\/\/tubikstudio.com\/blog\/creative-motion-12-concepts-of-interface-animation\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2017-02-22T15:36:03+00:00","article_modified_time":"2023-08-15T08:05:21+00:00","og_image":[{"width":1600,"height":1200,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/09\/jewellery_e-commerce_app_concept_tubik.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\/creative-motion-12-concepts-of-interface-animation\/","url":"https:\/\/tubikstudio.com\/blog\/creative-motion-12-concepts-of-interface-animation\/","name":"Creative Motion: 12 Concepts of Interface Animation","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/creative-motion-12-concepts-of-interface-animation\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/creative-motion-12-concepts-of-interface-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/09\/jewellery_e-commerce_app_concept_tubik.png","datePublished":"2017-02-22T15:36:03+00:00","dateModified":"2023-08-15T08:05:21+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The collection of creative design concepts of animated user interfaces for various purposes and different target audience, which show how motion can enhance UX.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/creative-motion-12-concepts-of-interface-animation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/creative-motion-12-concepts-of-interface-animation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/creative-motion-12-concepts-of-interface-animation\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/09\/jewellery_e-commerce_app_concept_tubik.png","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/09\/jewellery_e-commerce_app_concept_tubik.png","width":1600,"height":1200,"caption":"jewellery ecommerce app_concept_tubik"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/creative-motion-12-concepts-of-interface-animation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creative Motion: 12 Concepts of Interface 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\/2749","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=2749"}],"version-history":[{"count":4,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/2749\/revisions"}],"predecessor-version":[{"id":14633,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/2749\/revisions\/14633"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/8926"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=2749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=2749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=2749"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=2749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}