{"id":38576,"date":"2016-07-05T04:11:43","date_gmt":"2016-07-05T04:11:43","guid":{"rendered":"http:\/\/stackddesign.com\/?p=283"},"modified":"2016-07-05T04:11:43","modified_gmt":"2016-07-05T04:11:43","slug":"the-importance-of-animation-in-web-design","status":"publish","type":"post","link":"https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/","title":{"rendered":"The Importance of Animation in Web Design"},"content":{"rendered":"

Animation<\/a> is a subject which has been related to games and creating nice effects but its potential in improving user experience<\/a> has been underexplored. It can make the user interface intuitive and make it easier for the visitor to get around your website<\/a>. However, you will have to get the mix of textual content, visual content and animation effects<\/a> right if you don\u2019t want the loading time go up drastically.<\/p>\n

Animation<\/a> is not entirely new. Adobe flash revolutionized animation<\/a> and the use of vector graphics in web design. Moving animators and gif files were used previously to add a fun element to the design and break the monotone of the presentation. It made the engagement livelier. It was much later that graphics designers<\/a> started to understand the potential of animation<\/a> to improve user experience<\/a> and also drive sales by increasing conversion. Using CSS and Javascript codes have also made the pages less heavy and improved the loading speeds beyond belief.<\/p>\n

Why is animation so important in UI?<\/strong><\/p>\n

\u00a0<\/strong>Right amount of animation<\/a> can engage the audience and also guide them to the CTAs where they can convert. For example, when you are filling the password field of an account that you have on a website and mistakenly you key in a wrong password, immediately the field shakes to tell you that you are wrong. This design imitates the \u201chead nodding from side to side\u201d gesture that you often make when you know you have made a mistake.<\/p>\n

What do you think about a prompt that slides down slowly or a pop-up that appears almost from the thin air to draw your attention to a call to action? All these effects have improved interactivity of your website<\/a>. Sometimes, the icons become bigger in size as you hover your mouse over it and encourage you to make the click. A new form of animation<\/a> is to use a colored circle like a halo around an icon and as you point your mouse arrow towards it, the circle starts to spin. Isn\u2019t it cool?<\/p>\n

Don\u2019t overuse animation<\/strong><\/p>\n

\u00a0<\/strong>Although animation is great, there is a limit. Overusing it could make the page really slow. In the age of smart phones, when making a website is an imperative, you have to make your website responsive and quick. So, apply minimal effects. The most important question that you need to reflect on is that have you managed to improve user experience by using it? Is it making them happy or proving to be a useless distraction?<\/p>\n

If you can get answers to these questions correctly and you are satisfied with the design, more often than not, the visitors would also find it attractive. After all, you are also a user. You know what makes you happy or annoyed when you visit a website, right?<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Animation is a subject which has been related to games and creating nice effects but its potential in improving user experience has been underexplored. It can make the user interface intuitive and make it easier for the visitor to get around your website. However, you will have to get the mix of textual content, visual…<\/p>\n","protected":false},"author":552,"featured_media":38620,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[91,92,93,94,70,71],"yoast_head":"\nThe Importance of Animation in Web Design | Stackd Design<\/title>\n<meta name=\"description\" content=\"Animation is a subject which has been related to games and creating nice effects but its potential in improving user experience has been underexplored.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Importance of Animation in Web Design | Stackd Design\" \/>\n<meta property=\"og:description\" content=\"Animation is a subject which has been related to games and creating nice effects but its potential in improving user experience has been underexplored.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Dave Spicer\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/davespicer.au\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-05T04:11:43+00:00\" \/>\n<meta name=\"author\" content=\"Dave Spicer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dave Spicer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/\"},\"author\":{\"name\":\"Dave Spicer\",\"@id\":\"https:\/\/davespicer.com.au\/#\/schema\/person\/e95c97bbfc8f2c3e798527a8977c4d2b\"},\"headline\":\"The Importance of Animation in Web Design\",\"datePublished\":\"2016-07-05T04:11:43+00:00\",\"dateModified\":\"2016-07-05T04:11:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/\"},\"wordCount\":477,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/davespicer.com.au\/#organization\"},\"keywords\":[\"Animation\",\"Animation Effects\",\"Graphics Designers\",\"Interactivity of your Website\",\"User Experience\",\"Website\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/\",\"url\":\"https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/\",\"name\":\"The Importance of Animation in Web Design | Stackd Design\",\"isPartOf\":{\"@id\":\"https:\/\/davespicer.com.au\/#website\"},\"datePublished\":\"2016-07-05T04:11:43+00:00\",\"dateModified\":\"2016-07-05T04:11:43+00:00\",\"description\":\"Animation is a subject which has been related to games and creating nice effects but its potential in improving user experience has been underexplored.\",\"breadcrumb\":{\"@id\":\"https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/davespicer.com.au\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Importance of Animation in Web Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/davespicer.com.au\/#website\",\"url\":\"https:\/\/davespicer.com.au\/\",\"name\":\"Dave Spicer\",\"description\":\"Musician | Pianist | Vocalist | Educator\",\"publisher\":{\"@id\":\"https:\/\/davespicer.com.au\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/davespicer.com.au\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/davespicer.com.au\/#organization\",\"name\":\"Dave Spicer\",\"url\":\"https:\/\/davespicer.com.au\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/davespicer.com.au\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/davespicer.com.au\/wp-content\/uploads\/sites\/749\/2022\/09\/favicon.jpg\",\"contentUrl\":\"https:\/\/davespicer.com.au\/wp-content\/uploads\/sites\/749\/2022\/09\/favicon.jpg\",\"width\":1000,\"height\":1000,\"caption\":\"Dave Spicer\"},\"image\":{\"@id\":\"https:\/\/davespicer.com.au\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/facebook.com\/davespicer.au\",\"https:\/\/www.instagram.com\/davespicer.au\/\",\"https:\/\/www.linkedin.com\/in\/dave-spicer\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/davespicer.com.au\/#\/schema\/person\/e95c97bbfc8f2c3e798527a8977c4d2b\",\"name\":\"Dave Spicer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/davespicer.com.au\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f012ea034fe341369444b5bfda4bae5b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f012ea034fe341369444b5bfda4bae5b?s=96&d=mm&r=g\",\"caption\":\"Dave Spicer\"},\"description\":\"Dave founded Stacked Site to create a place where people can not only learn web design but be handed templates, documents, processes and be taught to find their own clients. His mission is to give people the tools to create wonderful businesses that light up their lives. Dave is a business owner by day, professional musician by night.\",\"url\":\"https:\/\/davespicer.com.au\/author\/vadirectory\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Importance of Animation in Web Design | Stackd Design","description":"Animation is a subject which has been related to games and creating nice effects but its potential in improving user experience has been underexplored.","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:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/","og_locale":"en_US","og_type":"article","og_title":"The Importance of Animation in Web Design | Stackd Design","og_description":"Animation is a subject which has been related to games and creating nice effects but its potential in improving user experience has been underexplored.","og_url":"https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/","og_site_name":"Dave Spicer","article_publisher":"https:\/\/facebook.com\/davespicer.au","article_published_time":"2016-07-05T04:11:43+00:00","author":"Dave Spicer","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dave Spicer","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/#article","isPartOf":{"@id":"https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/"},"author":{"name":"Dave Spicer","@id":"https:\/\/davespicer.com.au\/#\/schema\/person\/e95c97bbfc8f2c3e798527a8977c4d2b"},"headline":"The Importance of Animation in Web Design","datePublished":"2016-07-05T04:11:43+00:00","dateModified":"2016-07-05T04:11:43+00:00","mainEntityOfPage":{"@id":"https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/"},"wordCount":477,"commentCount":0,"publisher":{"@id":"https:\/\/davespicer.com.au\/#organization"},"keywords":["Animation","Animation Effects","Graphics Designers","Interactivity of your Website","User Experience","Website"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/","url":"https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/","name":"The Importance of Animation in Web Design | Stackd Design","isPartOf":{"@id":"https:\/\/davespicer.com.au\/#website"},"datePublished":"2016-07-05T04:11:43+00:00","dateModified":"2016-07-05T04:11:43+00:00","description":"Animation is a subject which has been related to games and creating nice effects but its potential in improving user experience has been underexplored.","breadcrumb":{"@id":"https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/davespicer.com.au\/the-importance-of-animation-in-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/davespicer.com.au\/"},{"@type":"ListItem","position":2,"name":"The Importance of Animation in Web Design"}]},{"@type":"WebSite","@id":"https:\/\/davespicer.com.au\/#website","url":"https:\/\/davespicer.com.au\/","name":"Dave Spicer","description":"Musician | Pianist | Vocalist | Educator","publisher":{"@id":"https:\/\/davespicer.com.au\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/davespicer.com.au\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/davespicer.com.au\/#organization","name":"Dave Spicer","url":"https:\/\/davespicer.com.au\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/davespicer.com.au\/#\/schema\/logo\/image\/","url":"https:\/\/davespicer.com.au\/wp-content\/uploads\/sites\/749\/2022\/09\/favicon.jpg","contentUrl":"https:\/\/davespicer.com.au\/wp-content\/uploads\/sites\/749\/2022\/09\/favicon.jpg","width":1000,"height":1000,"caption":"Dave Spicer"},"image":{"@id":"https:\/\/davespicer.com.au\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/davespicer.au","https:\/\/www.instagram.com\/davespicer.au\/","https:\/\/www.linkedin.com\/in\/dave-spicer\/"]},{"@type":"Person","@id":"https:\/\/davespicer.com.au\/#\/schema\/person\/e95c97bbfc8f2c3e798527a8977c4d2b","name":"Dave Spicer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/davespicer.com.au\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f012ea034fe341369444b5bfda4bae5b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f012ea034fe341369444b5bfda4bae5b?s=96&d=mm&r=g","caption":"Dave Spicer"},"description":"Dave founded Stacked Site to create a place where people can not only learn web design but be handed templates, documents, processes and be taught to find their own clients. His mission is to give people the tools to create wonderful businesses that light up their lives. Dave is a business owner by day, professional musician by night.","url":"https:\/\/davespicer.com.au\/author\/vadirectory\/"}]}},"_links":{"self":[{"href":"https:\/\/davespicer.com.au\/wp-json\/wp\/v2\/posts\/38576"}],"collection":[{"href":"https:\/\/davespicer.com.au\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davespicer.com.au\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davespicer.com.au\/wp-json\/wp\/v2\/users\/552"}],"replies":[{"embeddable":true,"href":"https:\/\/davespicer.com.au\/wp-json\/wp\/v2\/comments?post=38576"}],"version-history":[{"count":0,"href":"https:\/\/davespicer.com.au\/wp-json\/wp\/v2\/posts\/38576\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/davespicer.com.au\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/davespicer.com.au\/wp-json\/wp\/v2\/media?parent=38576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davespicer.com.au\/wp-json\/wp\/v2\/categories?post=38576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davespicer.com.au\/wp-json\/wp\/v2\/tags?post=38576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}