{"id":4635,"date":"2018-04-10T17:27:00","date_gmt":"2018-04-10T14:27:00","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=4635"},"modified":"2023-07-24T11:45:49","modified_gmt":"2023-07-24T11:45:49","slug":"conceptual-animation-making-ui-design-stand-out","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/conceptual-animation-making-ui-design-stand-out\/","title":{"rendered":"Conceptual Animation: Making UI Design Stand Out"},"content":{"rendered":"

Animation in user interfaces has been an issue of hot debates for several years so far. It\u2019s especially active in the domain of conceptual animation for user interfaces. It offers creative experiments and pushes the limits of UI motion.<\/span><\/p>\n

Here in <\/span>Tubik, we have already shared articles about UI animation<\/a> and its benefits for apps and websites. Today, let\u2019s continue the theme considering how conceptual animation influences product success together with Tubik motion designer Kirill Yerokhin.<\/span><\/p>\n

What Is Conceptual Animation?<\/span><\/h2>\n

Conceptual animation is a field of concept art. It is a piece of motion design that is created to convey a particular idea before it is put into a real product. In user interface design, <\/span>conceptual animation may be found in various concepts for interactions, transitions, manipulations with controls, animation marking the feedback from the system, etc. Motion designers use a variety of tools among which we could mention Adobe After Effects, Principle, Figma, <\/span>and InVision.<\/span><\/p>\n

\"tubikstudio<\/p>\n

 <\/p>\n

Why Is Conceptual Animation Needed in UI Design?<\/span><\/h2>\n

This is a kind of controversial issue today. Conceptual animation steps aside from the ready-made solutions and well-checked approaches trying the ways to go beyond the limits and rules. Animation of this kind may seem unreal, needless or impossible for technical realization.<\/span><\/p>\n

The point is that both static design (glyphs, icons<\/a>, changing color and shape of controls or interface as a whole) and animation of UI present the way to make an application stand out from the crowd of similar applications which sometimes look like clones.<\/span><\/p>\n

\"mobile<\/p>\n

The statement that all the developers hate conceptual animation and never want to work on its realization is not true. In design it depends. Actually, as well as in other creative spheres where innovations are met with disbelief by some people saying it\u2019s impossible to make. While others do their best and find new ways and approaches to letting people solve new problems.<\/span><\/p>\n

Demand determines supply. As soon as the \u201cmarket\u201d sees a fresh design concept, animation, in particular, there are the ones who will seek ways to make it real and use it in the real world. At this moment the product of the designer\u2019s thought stops being just a concept. Here in Tubik, we have had numerous cases when conceptual interface animations, even quite complex ones, were successfully coded by third-party developers.<\/span><\/p>\n

Practice shows that on the technical side of the issue, the realization of the conceptual animation is a question of time to spend rather than the general existence of such a possibility.<\/span><\/p>\n

 <\/p>\n

Examples of UI Animation Concepts<\/span><\/h2>\n

 <\/p>\n

Scrolling a list of items<\/span><\/h3>\n

\"UI<\/p>\n

The first example features interaction with a list of items: while the left variant just moves all the list up, the right one imitates pulling the cards with a little holdback. The second variant looks lively and adds a bit of fun to the scrolling process. Another interesting thing is that the right concept creates a visual illusion of more space between the cards which supports the feeling of more air in the interface.<\/span><\/p>\n

 <\/p>\n

Transition from the list to the item<\/span><\/h3>\n

\"motion<\/p>\n

Here’s another example: the left option shows the basic way of transition from the list or menu to a particular item screen while the right one adds dynamics to the process.<\/span><\/p>\n

 <\/p>\n

Opening side menu<\/span><\/h3>\n

\"UI<\/p>\n

A conceptual animation may also add life and dynamics to such a basic operation as an opening side menu. Using a gradual flow of featuring the objects, the designer makes the process look more elegant.<\/span><\/p>\n

 <\/p>\n

UI Animation Concepts in Realistic Interfaces<\/span><\/h2>\n

 <\/p>\n

Conceptual animation is one of the creative stages of user interface design: motion designers may offer different options to discuss with clients and developers. Here are some examples worked out by Kirill together with UI designers.<\/span><\/p>\n

\"finance<\/p>\n

Finance App animation creates a stylish transition from the pie chart to the list applying color marking<\/em><\/span><\/p>\n

\"music<\/p>\n

Music News App animation plays with shapes and lines in the transition from categories screen to a list<\/em><\/span><\/p>\n

\"Home<\/p>\n

Animation concept for UI of Home Budget app<\/a> adds dynamics to opening the hamburger menu<\/em><\/span><\/p>\n

\"business<\/p>\n

Business Card UI Concept imitates the funny effect of pulling out the card from a profile avatar<\/em><\/span><\/p>\n

\"calendar<\/p>\n

Calendar app animation concept sets an elegant transition from the calendar screen to a\u00a0schedule screen<\/em><\/span><\/p>\n

\"tubikstudio<\/p>\n

One more animation adding fun and supporting visual hierarchy to interactions with the side menu<\/em><\/span><\/p>\n

 <\/p>\n

Key Benefit of UI Animation Concepts<\/span><\/h2>\n

 <\/p>\n

In fact, the creation and research of something innovative start from a concept in practically any industry or creative field. Look at the automotive industry or architecture, remember how new art directions appeared and developed in history. Whatever is the sphere, the attitude to concepts will show two opposites from \u201cthat\u2019s just a fantasy that has nothing to do with real life\u201d to \u201cwhy not…\u201d Both variants are viable. Still, for better or worse, concepts from the power that makes progress possible.<\/span><\/p>\n

The same situation is observed in the domain of UI animation. Most animations that today are taken for granted as an integral part of our interfaces were a kind of \u201cunreal\u201d concepts not so long ago. In the age of flat design<\/a>, when shapes and colors are striving for simplicity and cleanness, animation becomes the proven way to make apps and solutions stand out in terms of tense competition.<\/span><\/p>\n

\"Case<\/p>\n

 <\/p>\n

Useful Reading<\/span><\/h2>\n

Motion in UX Design: 6 Effective Types of Web Animation<\/a><\/p>\n

How to Use Animations in Mobile Apps<\/a><\/p>\n

Motion for Mobile. 20 Creative Concepts of UI Animation<\/a><\/span><\/p>\n

UI Animation: Eye-Pleasing, Problem-Solving<\/a><\/span><\/p>\n

Creative Motion: 12 Concepts of Interface Animation<\/a><\/span><\/p>\n

UI in Action. 15 Animated Design Concepts of Mobile UI<\/a><\/span><\/p>\n

Animated Interactions. Motion on Purpose<\/a><\/span><\/p>\n

UI Animation. Microinteraction for Macroresult<\/a><\/span><\/p>\n

Interface Animation. The Force of Motion<\/a><\/span><\/p>\n

Case Study: Toonie. UI Animation Development<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

The article gives the definition of conceptual animation and considers its role in attractive and innovative UI design. Packed with a variety of UI examples.<\/p>\n","protected":false},"author":3,"featured_media":8774,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,7,9],"tags":[18,465,20,466,100,467,147,468,151,479,256,482,258,487,264,489,269,491,319,492,324,502,331,504,332,515,336,533,457,16,458],"coauthors":[],"class_list":["post-4635","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","category-processes_and_tools","category-ui_ux","tag-animation-concepts","tag-ui-design-examples","tag-app-design","tag-ui-design-inspiration","tag-design","tag-ui-design-practices","tag-design-studio","tag-ui-design-process","tag-design-tips","tag-usability","tag-interaction-design","tag-user-experience","tag-interface-animation","tag-user-experience-design-process","tag-interface-navigation","tag-user-experience-examples","tag-ios-animation","tag-user-interface","tag-mobile-app","tag-user-interface-design","tag-mobile-design-inspiration","tag-ux","tag-mobile-ui","tag-ux-design-article","tag-mobile-user-interface","tag-uxui","tag-motion-design","tag-web-design","tag-ui","tag-animation","tag-ui-animation"],"acf":[],"yoast_head":"\nConceptual Animation: Making UI Design Stand Out<\/title>\n<meta name=\"description\" content=\"The article gives the definition of conceptual animation and considers its role in attractive and innovative UI design. Packed with a variety of UI examples.\" \/>\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\/conceptual-animation-making-ui-design-stand-out\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Conceptual Animation: Making UI Design Stand Out\" \/>\n<meta property=\"og:description\" content=\"The article gives the definition of conceptual animation and considers its role in attractive and innovative UI design. Packed with a variety of UI examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/conceptual-animation-making-ui-design-stand-out\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-10T14:27:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-24T11:45:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/concept-UI-animation-examples-and-tips.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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/conceptual-animation-making-ui-design-stand-out\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/conceptual-animation-making-ui-design-stand-out\/\",\"name\":\"Conceptual Animation: Making UI Design Stand Out\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/conceptual-animation-making-ui-design-stand-out\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/conceptual-animation-making-ui-design-stand-out\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/concept-UI-animation-examples-and-tips.jpg\",\"datePublished\":\"2018-04-10T14:27:00+00:00\",\"dateModified\":\"2023-07-24T11:45:49+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The article gives the definition of conceptual animation and considers its role in attractive and innovative UI design. Packed with a variety of UI examples.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/conceptual-animation-making-ui-design-stand-out\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/conceptual-animation-making-ui-design-stand-out\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/conceptual-animation-making-ui-design-stand-out\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/concept-UI-animation-examples-and-tips.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/concept-UI-animation-examples-and-tips.jpg\",\"width\":1500,\"height\":1000,\"caption\":\"concept UI animation examples and tips\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/conceptual-animation-making-ui-design-stand-out\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Conceptual Animation: Making UI Design Stand Out\"}]},{\"@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":"Conceptual Animation: Making UI Design Stand Out","description":"The article gives the definition of conceptual animation and considers its role in attractive and innovative UI design. Packed with a variety of UI examples.","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\/conceptual-animation-making-ui-design-stand-out\/","og_locale":"en_US","og_type":"article","og_title":"Conceptual Animation: Making UI Design Stand Out","og_description":"The article gives the definition of conceptual animation and considers its role in attractive and innovative UI design. Packed with a variety of UI examples.","og_url":"https:\/\/tubikstudio.com\/blog\/conceptual-animation-making-ui-design-stand-out\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2018-04-10T14:27:00+00:00","article_modified_time":"2023-07-24T11:45:49+00:00","og_image":[{"width":1500,"height":1000,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/concept-UI-animation-examples-and-tips.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/conceptual-animation-making-ui-design-stand-out\/","url":"https:\/\/tubikstudio.com\/blog\/conceptual-animation-making-ui-design-stand-out\/","name":"Conceptual Animation: Making UI Design Stand Out","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/conceptual-animation-making-ui-design-stand-out\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/conceptual-animation-making-ui-design-stand-out\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/concept-UI-animation-examples-and-tips.jpg","datePublished":"2018-04-10T14:27:00+00:00","dateModified":"2023-07-24T11:45:49+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The article gives the definition of conceptual animation and considers its role in attractive and innovative UI design. Packed with a variety of UI examples.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/conceptual-animation-making-ui-design-stand-out\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/conceptual-animation-making-ui-design-stand-out\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/conceptual-animation-making-ui-design-stand-out\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/concept-UI-animation-examples-and-tips.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/concept-UI-animation-examples-and-tips.jpg","width":1500,"height":1000,"caption":"concept UI animation examples and tips"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/conceptual-animation-making-ui-design-stand-out\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Conceptual Animation: Making UI Design Stand Out"}]},{"@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\/4635","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=4635"}],"version-history":[{"count":6,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4635\/revisions"}],"predecessor-version":[{"id":14463,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4635\/revisions\/14463"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/8774"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=4635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=4635"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=4635"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=4635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}