{"id":422,"date":"2018-04-22T04:06:50","date_gmt":"2018-04-22T04:06:50","guid":{"rendered":"http:\/\/hardy-lavoie.com\/?p=422"},"modified":"2018-11-11T04:08:21","modified_gmt":"2018-11-11T04:08:21","slug":"module-6-ui-animation","status":"publish","type":"post","link":"https:\/\/hardy-lavoie.com\/?p=422","title":{"rendered":"MODULE 6: UI ANIMATION"},"content":{"rendered":"<p><strong>READING &amp; WRITING:\u00a0Chapter 9: Animate!\u00a0<\/strong><\/p>\n<p><img decoding=\"async\" class=\"rg_ic rg_i alignleft\" src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcQonvNBIG8XhwIYt_Dw7kEwXyENL2LLjxzpCv8VDNRMQgaIaFxC\" alt=\"Image result for animate\" \/>Well, this chapter opens up with perhaps the greats analogy ever to describe these overwhelming\u00a0processes: sometimes you think you\u2019ll be conducting the greatest symphony in the nicest concert hall, but actually find yourself in a dark basement filled to the brim with feral cats tasked with now, trimming all of their nails. Yeah, the process of making this animation was quite like this, but more on that in a later section.<\/p>\n<p>This was a great chapter that felt like it boiled down many of the directions and points that were present in the previous chapters and covered things like, directional movement, sorting your key poses, and hitting you sound marks accurately. While these things were helpful to keep in mind, I felt like the overall chapter was difficult in some ways to transfer over the creative assignment, because creating a UI animation isn\u2019t quite as dynamic as creating an animated story. So I tried to pull apart the takeaways that would be helpful in the creation of the animation, but I think that in the future, I might want to try creating an actual animated short (and I mean REALLY SHORT) in order to feel like all of the readings were applied to a creative process.<\/p>\n<p>Again, aside from that opening chapter that made a devastatingly accurate picture of my personal experience, I do appreciate that the rest of the chapter went back to this familiar, supportive tone that made me feel like I could actually do something like this in the future. And while the book has been great for that this semester, personally, I think I would have benefited from a text that looked at the technical aspects of creation as well.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>RESEARCH TO INFORM:<\/strong><\/p>\n<ol>\n<li>I love the motion of the moon around the plant. Who wouldn\u2019t like to watch that as their app refreshes?<\/li>\n<\/ol>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"\" src=\"https:\/\/tubikstudio.com\/wp-content\/uploads\/2016\/01\/pull_to_refresh-tubik-studio.gif\" width=\"451\" height=\"338\" \/><\/p>\n<p>2. \u00a0I\u2019m not even sure what this app is meant to track, but the transition between night and day is beautiful and soothing.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"\" src=\"https:\/\/tubikstudio.com\/wp-content\/uploads\/2015\/12\/tubik-studio-motion-design.gif\" width=\"454\" height=\"340\" \/><\/p>\n<p>3. This on\/off switch\u00a0features a great reverberation between right and left sides when the transition\u00a0takes place.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"\" src=\"https:\/\/tubikstudio.com\/wp-content\/uploads\/2015\/12\/button-animation-tubik.gif\" width=\"453\" height=\"340\" \/><\/p>\n<p>4. This UI Design reminded me of the Apple website, which I believe to be one of the best, simplistic yet, visually stunning sites on the web.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"\" src=\"https:\/\/tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubik_organic_landing_page_scroll_animation.gif\" width=\"456\" height=\"342\" \/><\/p>\n<p>5. The motion that takes place in this face-recognition app is pretty awesome and I can\u2019t take my\u00a0eyes off of it. I don\u2019t even know if it\u2019s a real thing, but if it is, I need to find it and download it cause it looks like it would be fun to play around with.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"\" src=\"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2015\/10\/facescan.gif\" width=\"465\" height=\"349\" \/><\/p>\n<p>6. With the winter we have had, the site of even virtual snowfall is depressing. But this design has a really smooth transition<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"\" src=\"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2015\/10\/weather-by-beardchicken.gif\" width=\"468\" height=\"351\" \/><\/p>\n<p>7. I chose this example because we follow a lot of Soccer, and the app that I currently use (Forza) could learn a thing or two about having a clean, friendly interface.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"\" src=\"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2015\/10\/soccer-analytics.gif\" width=\"466\" height=\"350\" \/><\/p>\n<p>8. Basically, I chose this one because the animation is just mesmerizing. The transitions between devices are seamless<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"\" src=\"https:\/\/cdn.dribbble.com\/users\/314283\/screenshots\/1277779\/untitled-1.gif\" width=\"465\" height=\"349\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>CREATE:<\/strong><\/p>\n<p>So, here it is:<\/p>\n<div class=\"jetpack-video-wrapper\"><span class=\"embed-youtube\"><iframe class=\"youtube-player\" src=\"https:\/\/www.youtube.com\/embed\/KzqJxC4v4cY?version=3&amp;rel=1&amp;fs=1&amp;autohide=2&amp;showsearch=0&amp;showinfo=1&amp;iv_load_policy=1&amp;wmode=transparent\" allowfullscreen=\"allowfullscreen\" data-ratio=\"0.5628571428571428\" data-width=\"700\" data-height=\"394\" data-mce-fragment=\"1\"><\/iframe><\/span><\/div>\n<p>&nbsp;<\/p>\n<p>This was really hard because a lot of the ideas that I had sketched out based on the research were complicated because I was looking at some pretty advanced examples. I have a lot of trouble working with After Effects; after all the work done in it this semester, I don\u2019t feel like I picked up on it as quickly or easily as many other Adobe programs I\u2019ve worked with before. My first couple of attempts were tossed out pretty quickly \u2013 the motion and timing was all off.<\/p>\n<p>I decided to go back to something simple that would take the search bar tutorial that was provided, but the change it up a bit. I was at a loss for a subject to search for, but thankfully (I think?), my cat decided that it was time to pay attention to him rather than the computer in front of me.<\/p>\n<p>My favorite bit is probably the spin that goes into the search bar at the very start, and the rest worked out just alright. I think what I need is a proper book that deals with all of the\u00a0components of the program in detail in order to really expand on my ability to bring my ideas into fruition. I feel like I spend more time fighting with the program to get the visual I imagine seeing on the screen than I do for actually fine-tuning and make something really good. I\u2019d definitely take any and all reading suggestions.<\/p>\n<div id=\"atatags-370373-5be7970ce49e0\"><\/div>\n<div class=\"wpcnt\">\n<div class=\"wpa wpmrec\"><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>READING &amp; WRITING:\u00a0Chapter 9: Animate!\u00a0 Well, this chapter opens up with perhaps the greats analogy ever to describe these overwhelming\u00a0processes: sometimes you think you\u2019ll be conducting the greatest symphony in the nicest concert hall, but actually find yourself in a dark basement filled to the brim with feral cats tasked with now, trimming all of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[77,75,81],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>MODULE 6: UI ANIMATION -<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hardy-lavoie.com\/?p=422\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"MODULE 6: UI ANIMATION -\" \/>\n<meta property=\"og:description\" content=\"READING &amp; WRITING:\u00a0Chapter 9: Animate!\u00a0 Well, this chapter opens up with perhaps the greats analogy ever to describe these overwhelming\u00a0processes: sometimes you think you\u2019ll be conducting the greatest symphony in the nicest concert hall, but actually find yourself in a dark basement filled to the brim with feral cats tasked with now, trimming all of [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hardy-lavoie.com\/?p=422\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/meaghanhardylavoie\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-22T04:06:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-11-11T04:08:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcQonvNBIG8XhwIYt_Dw7kEwXyENL2LLjxzpCv8VDNRMQgaIaFxC\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@MLHL84\" \/>\n<meta name=\"twitter:site\" content=\"@MLHL84\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hardy-lavoie.com\/#website\",\"url\":\"https:\/\/hardy-lavoie.com\/\",\"name\":\"Meaghan Hardy-Lavoie\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hardy-lavoie.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/hardy-lavoie.com\/?p=422#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcQonvNBIG8XhwIYt_Dw7kEwXyENL2LLjxzpCv8VDNRMQgaIaFxC\",\"contentUrl\":\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcQonvNBIG8XhwIYt_Dw7kEwXyENL2LLjxzpCv8VDNRMQgaIaFxC\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hardy-lavoie.com\/?p=422#webpage\",\"url\":\"https:\/\/hardy-lavoie.com\/?p=422\",\"name\":\"MODULE 6: UI ANIMATION -\",\"isPartOf\":{\"@id\":\"https:\/\/hardy-lavoie.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hardy-lavoie.com\/?p=422#primaryimage\"},\"datePublished\":\"2018-04-22T04:06:50+00:00\",\"dateModified\":\"2018-11-11T04:08:21+00:00\",\"author\":{\"@id\":\"https:\/\/hardy-lavoie.com\/#\/schema\/person\/b3d0c0908df37b760d35ed163fd98021\"},\"breadcrumb\":{\"@id\":\"https:\/\/hardy-lavoie.com\/?p=422#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hardy-lavoie.com\/?p=422\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hardy-lavoie.com\/?p=422#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hardy-lavoie.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"MODULE 6: UI ANIMATION\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/hardy-lavoie.com\/#\/schema\/person\/b3d0c0908df37b760d35ed163fd98021\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/hardy-lavoie.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8a1327cdafc0f7010f87aa1864663969?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8a1327cdafc0f7010f87aa1864663969?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"MODULE 6: UI ANIMATION -","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:\/\/hardy-lavoie.com\/?p=422","og_locale":"en_US","og_type":"article","og_title":"MODULE 6: UI ANIMATION -","og_description":"READING &amp; WRITING:\u00a0Chapter 9: Animate!\u00a0 Well, this chapter opens up with perhaps the greats analogy ever to describe these overwhelming\u00a0processes: sometimes you think you\u2019ll be conducting the greatest symphony in the nicest concert hall, but actually find yourself in a dark basement filled to the brim with feral cats tasked with now, trimming all of [&hellip;]","og_url":"https:\/\/hardy-lavoie.com\/?p=422","article_publisher":"https:\/\/www.facebook.com\/meaghanhardylavoie","article_published_time":"2018-04-22T04:06:50+00:00","article_modified_time":"2018-11-11T04:08:21+00:00","og_image":[{"url":"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcQonvNBIG8XhwIYt_Dw7kEwXyENL2LLjxzpCv8VDNRMQgaIaFxC"}],"twitter_card":"summary_large_image","twitter_creator":"@MLHL84","twitter_site":"@MLHL84","twitter_misc":{"Written by":"admin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/hardy-lavoie.com\/#website","url":"https:\/\/hardy-lavoie.com\/","name":"Meaghan Hardy-Lavoie","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hardy-lavoie.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/hardy-lavoie.com\/?p=422#primaryimage","inLanguage":"en-US","url":"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcQonvNBIG8XhwIYt_Dw7kEwXyENL2LLjxzpCv8VDNRMQgaIaFxC","contentUrl":"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcQonvNBIG8XhwIYt_Dw7kEwXyENL2LLjxzpCv8VDNRMQgaIaFxC"},{"@type":"WebPage","@id":"https:\/\/hardy-lavoie.com\/?p=422#webpage","url":"https:\/\/hardy-lavoie.com\/?p=422","name":"MODULE 6: UI ANIMATION -","isPartOf":{"@id":"https:\/\/hardy-lavoie.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hardy-lavoie.com\/?p=422#primaryimage"},"datePublished":"2018-04-22T04:06:50+00:00","dateModified":"2018-11-11T04:08:21+00:00","author":{"@id":"https:\/\/hardy-lavoie.com\/#\/schema\/person\/b3d0c0908df37b760d35ed163fd98021"},"breadcrumb":{"@id":"https:\/\/hardy-lavoie.com\/?p=422#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hardy-lavoie.com\/?p=422"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/hardy-lavoie.com\/?p=422#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hardy-lavoie.com\/"},{"@type":"ListItem","position":2,"name":"MODULE 6: UI ANIMATION"}]},{"@type":"Person","@id":"https:\/\/hardy-lavoie.com\/#\/schema\/person\/b3d0c0908df37b760d35ed163fd98021","name":"admin","image":{"@type":"ImageObject","@id":"https:\/\/hardy-lavoie.com\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/8a1327cdafc0f7010f87aa1864663969?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8a1327cdafc0f7010f87aa1864663969?s=96&d=mm&r=g","caption":"admin"}}]}},"_links":{"self":[{"href":"https:\/\/hardy-lavoie.com\/index.php?rest_route=\/wp\/v2\/posts\/422"}],"collection":[{"href":"https:\/\/hardy-lavoie.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hardy-lavoie.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hardy-lavoie.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hardy-lavoie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=422"}],"version-history":[{"count":1,"href":"https:\/\/hardy-lavoie.com\/index.php?rest_route=\/wp\/v2\/posts\/422\/revisions"}],"predecessor-version":[{"id":423,"href":"https:\/\/hardy-lavoie.com\/index.php?rest_route=\/wp\/v2\/posts\/422\/revisions\/423"}],"wp:attachment":[{"href":"https:\/\/hardy-lavoie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hardy-lavoie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hardy-lavoie.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}