{"componentChunkName":"component---src-templates-insight-tsx","path":"/5-animation-principles-for-ux-design","result":{"data":{"contentfulInsight":{"id":"7ef2dd8e-3aa1-5e36-acff-a7dcdc610340","newStyles":null,"isGated":false,"type":"Article","topics":["Design Strategy","Product Design"],"title":"5 Ways to Shake Up Your Digital Product Experience With Animation","subtitle":null,"heroIllustration":{"file":{"url":"//images.ctfassets.net/ry6adbgbrq11/6ZH9fXqM3BpvACPxKrgkZ0/a33cc51b5fed93a7b115cd02a37c3732/gif_1_03_x3_grey.gif"}},"author":{"name":"Evan Shoemaker","headshot":{"fixed":{"width":96,"height":96,"src":"//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=96&h=96&q=50&fit=fill&f=face","srcSet":"//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=96&h=96&q=50&fit=fill&f=face 1x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=144&h=144&q=50&fit=fill&f=face 1.5x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=192&h=192&q=50&fit=fill&f=face 2x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=288&h=288&q=50&fit=fill&f=face 3x","srcWebp":"//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=96&h=96&q=50&fm=webp&fit=fill&f=face","srcSetWebp":"//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=96&h=96&q=50&fm=webp&fit=fill&f=face 1x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=144&h=144&q=50&fm=webp&fit=fill&f=face 1.5x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=192&h=192&q=50&fm=webp&fit=fill&f=face 2x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=288&h=288&q=50&fm=webp&fit=fill&f=face 3x"}}},"sidebarAd":null,"content":{"raw":"{\"nodeType\":\"document\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Bouncing, blinking, blurring. Disappearing, dragging, dissolving. All great verbs. And all dynamic examples of animation actions you can use to surprise and delight your digital product’s users.\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Animation can make or break a product experience. When done well, animation shows your brand is sophisticated and smooth. Overdone or absent and your users might give you the stink eye and shut down.\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Now, you may think of animation as some Pixar-adjacent cartoon or slick graphic. But it’s way more than that. It’s the smallest of details like the blur of a CTA box when you hover over it. And the most obvious elements like your product’s how-to video on your landing page. \",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Basically, it’s anything that’s anti-static. And it’s all worth building into your product to entice your users to come back again and again.\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"heading-3\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Can’t Stop the Feeling Animation Brings to Your Digital Product\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"You know the sentiment: “People won’t remember what you said, but how you made them feel.” It’s (mostly) true. Words definitely still matter. \",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"The point is, when your users open your app for the first time, your goal is to get them to keep opening the app, right? The best way to do that is to evoke emotion. Make them \",\"marks\":[],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"feel\",\"marks\":[{\"type\":\"italic\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\" something. \",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"As a product user, you see examples of subtle animation all the time. And you feel the effects.\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"embedded-entry-block\",\"data\":{\"target\":{\"sys\":{\"id\":\"30Gy4wy2mzqzX0RPAxTeRT\",\"type\":\"Link\",\"linkType\":\"Entry\"}}},\"content\":[]},{\"nodeType\":\"unordered-list\",\"data\":{},\"content\":[{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"The unfolding of the “N” when you open the Netflix app \",\"marks\":[{\"type\":\"bold\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"signals you to sit back and chill out.\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"The revolving carousel of pictures on the New York Times landing page \",\"marks\":[{\"type\":\"bold\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"straightens your spine and tells you it’s time to pay attention.\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"The rotating circle on google shifting from red to yellow to blue to green \",\"marks\":[{\"type\":\"bold\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"distracts you as the next page loads.\",\"marks\":[],\"data\":{}}]}]}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"You see, mindful touches of animation show your users you’re with them at every step of their journey. And showing them your thoughtful side gives your brand warmth and depth. Like a big bowl of pho. (And who doesn’t like pho?)\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"With animation that signals who your brand is, suddenly you’re not just \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"data\":{\"uri\":\"https://webuild.io/fintech-technology-trends-2021\"},\"content\":[{\"nodeType\":\"text\",\"value\":\"a Fintech app\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"text\",\"value\":\". You’re a friendly and reliable budget creation tool that exists to help users achieve their financial goals. And your motion-activated finesse becomes just one of the things your users love about you.\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"heading-3\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"5 Ways to Use Animation That Reimagine Your User Experience\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Incorporating animation into your digital product takes two parts imagination and one part faith. Because when it comes to animation, you’re dealing with the intangible. \",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"By adding a pulsing “Buy now” button to your digital storefront, you may not automatically see a boost in conversion rates. But you \",\"marks\":[],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"will\",\"marks\":[{\"type\":\"italic\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\" add a little zest into the life of your product. And sometimes that’s just as important.\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Beyond pulsing buttons, here are five ways to use animation in your digital product.\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"\",\"marks\":[],\"data\":{}},{\"nodeType\":\"embedded-entry-inline\",\"data\":{\"target\":{\"sys\":{\"id\":\"5BNQMdhlSjtfUKpeCwGHAd\",\"type\":\"Link\",\"linkType\":\"Entry\"}}},\"content\":[]},{\"nodeType\":\"text\",\"value\":\"\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"ordered-list\",\"data\":{},\"content\":[{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Brand storytelling\\n\",\"marks\":[{\"type\":\"bold\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"There’s a first time for everything, including using your product. So what are users to do? Give them explainer videos, in-app guides, or tutorials that engage and wow them. There are so many opportunities to make the initial interactions with your brand memorable ones. Make them count and infuse them in \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"data\":{\"uri\":\"https://webuild.io/case-studies/gosite\"},\"content\":[{\"nodeType\":\"text\",\"value\":\"the way your brand shares its story\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"text\",\"value\":\".\\n\",\"marks\":[],\"data\":{}},{\"nodeType\":\"embedded-entry-inline\",\"data\":{\"target\":{\"sys\":{\"id\":\"5EpWqshTmgQ1F2omvQZVWV\",\"type\":\"Link\",\"linkType\":\"Entry\"}}},\"content\":[]},{\"nodeType\":\"text\",\"value\":\"\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Animated prototypes\\n\",\"marks\":[{\"type\":\"bold\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"Similar to in-app guides and tutorials, an animated prototype shows users a sample of how your product is used. It’s an easy way to showcase what your product can do so a user can get an idea of what to expect. It’s not so much teaching them how to use your product as it is showing them what’s possible when they use it.\\n\",\"marks\":[],\"data\":{}},{\"nodeType\":\"embedded-entry-inline\",\"data\":{\"target\":{\"sys\":{\"id\":\"3LlI81wQlkBHZVZMGuVX5d\",\"type\":\"Link\",\"linkType\":\"Entry\"}}},\"content\":[]},{\"nodeType\":\"text\",\"value\":\"\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Visual feedback\\n\",\"marks\":[{\"type\":\"bold\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"There are so many possibilities for visual feedback — and examples you see all the time, but don’t even know it. Each visual feedback element tells the user, “Hey, I’m with you. I’m alive. And I’m taking you where you need to go.” A few examples include:\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"unordered-list\",\"data\":{},\"content\":[{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Interactive CTAs \",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Hover, click, or focus states\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Loading states\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Scroll states\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Navigational transitions\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Progress animations\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Anything that responds to how your user interacts with it\\n\",\"marks\":[],\"data\":{}},{\"nodeType\":\"embedded-entry-inline\",\"data\":{\"target\":{\"sys\":{\"id\":\"2Oi95jtMJc1o6Ul1bvMxYz\",\"type\":\"Link\",\"linkType\":\"Entry\"}}},\"content\":[]},{\"nodeType\":\"text\",\"value\":\"\",\"marks\":[],\"data\":{}}]}]}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Visual Hints \",\"marks\":[{\"type\":\"bold\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"A visual hint orients users to your interface. For example, moving a slider continues a slideshow of images, or underlining a link when you hover over it. It gives the user a nudge to click or scroll. Without a visual hint, a user might now know there’s an action they can take. And you might miss out on conversions as a result.\\n\",\"marks\":[],\"data\":{}},{\"nodeType\":\"embedded-entry-inline\",\"data\":{\"target\":{\"sys\":{\"id\":\"189s32msM5Ge7kPmCDL3o6\",\"type\":\"Link\",\"linkType\":\"Entry\"}}},\"content\":[]},{\"nodeType\":\"text\",\"value\":\"\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Microinteractions \",\"marks\":[{\"type\":\"bold\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"Ever wonder if a payment has gone through? Without a microinteraction to let you know your transaction was successful, you’re left checking your bank account instead. Microinteractions signal the end of a process, visually.\",\"marks\":[],\"data\":{}}]}]}]},{\"nodeType\":\"heading-3\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Adding Animations to Your UX Doesn’t Have to be a Huge Task\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Uploading GIFs and embedding YouTube links to your homepage is an easy lift. But developing a library of animated interactions? That’s going to take a little more brainpower and design prowess. \",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"The good news is, if you do it right, you won’t have to reinvent the wheel every time.\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"If your team \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"data\":{\"uri\":\"https://webuild.io/design-system-digital-brand-benefits\"},\"content\":[{\"nodeType\":\"text\",\"value\":\"adopts a design system\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"text\",\"value\":\", all your brand’s animated elements can be catalogued and easily accessible. Then, when your product designers need to incorporate a brand-consistent interactive CTA, boom. Your design system delivers. It’s more work in the beginning, but it will save your team time in the long run. And your team will love it.\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Not sure which animations resonate best with your users? Get in their head and \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"data\":{\"uri\":\"https://webuild.io/a-b-testing-digital-product-strategy\"},\"content\":[{\"nodeType\":\"text\",\"value\":\"A/B test your options\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"text\",\"value\":\". You can literally test anything you lay your eyes on, and it helps you build a better product by swapping out what doesn’t work. \",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"And if whipping up animations for your product and \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"data\":{\"uri\":\"https://webuild.io/ux-design-system-goals-5-step-guide\"},\"content\":[{\"nodeType\":\"text\",\"value\":\"building a design system\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"text\",\"value\":\" seems overwhelming, there’s no shame in asking for help. We love that stuff. And heavy lifting. \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"data\":{\"uri\":\"https://webuild.io/contact/\"},\"content\":[{\"nodeType\":\"text\",\"value\":\"Just ask.\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"text\",\"value\":\"\",\"marks\":[],\"data\":{}}]}]}","references":[{"__typename":"ContentfulImage","id":"442470ae-e156-5be9-8545-26f57c39d2ce","contentful_id":"30Gy4wy2mzqzX0RPAxTeRT","caption":null,"altText":"Animated gif of the Netflix logo. A red letter N in the middle of a black screen zooms toward the viewer and breaks into colorful vertical lines.","imageStyling":"FULL WIDTH","imageType":null,"asset":{"file":{"url":"//images.ctfassets.net/ry6adbgbrq11/ep1sCrYUu5OPFh7eRNIma/6adef662687674c836b050f2079f7ac8/NetflixAnimation.gif"},"fluid":{"aspectRatio":1.7777777777777777,"src":"//images.ctfassets.net/ry6adbgbrq11/ep1sCrYUu5OPFh7eRNIma/6adef662687674c836b050f2079f7ac8/NetflixAnimation.gif?w=800&q=50","srcSet":"//images.ctfassets.net/ry6adbgbrq11/ep1sCrYUu5OPFh7eRNIma/6adef662687674c836b050f2079f7ac8/NetflixAnimation.gif?w=200&h=113&q=50 200w,\n//images.ctfassets.net/ry6adbgbrq11/ep1sCrYUu5OPFh7eRNIma/6adef662687674c836b050f2079f7ac8/NetflixAnimation.gif?w=400&h=225&q=50 400w,\n//images.ctfassets.net/ry6adbgbrq11/ep1sCrYUu5OPFh7eRNIma/6adef662687674c836b050f2079f7ac8/NetflixAnimation.gif?w=800&h=450&q=50 800w,\n//images.ctfassets.net/ry6adbgbrq11/ep1sCrYUu5OPFh7eRNIma/6adef662687674c836b050f2079f7ac8/NetflixAnimation.gif?w=1200&h=675&q=50 1200w,\n//images.ctfassets.net/ry6adbgbrq11/ep1sCrYUu5OPFh7eRNIma/6adef662687674c836b050f2079f7ac8/NetflixAnimation.gif?w=1280&h=720&q=50 1280w","srcWebp":"//images.ctfassets.net/ry6adbgbrq11/ep1sCrYUu5OPFh7eRNIma/6adef662687674c836b050f2079f7ac8/NetflixAnimation.gif?w=800&q=50&fm=webp","srcSetWebp":"//images.ctfassets.net/ry6adbgbrq11/ep1sCrYUu5OPFh7eRNIma/6adef662687674c836b050f2079f7ac8/NetflixAnimation.gif?w=200&h=113&q=50&fm=webp 200w,\n//images.ctfassets.net/ry6adbgbrq11/ep1sCrYUu5OPFh7eRNIma/6adef662687674c836b050f2079f7ac8/NetflixAnimation.gif?w=400&h=225&q=50&fm=webp 400w,\n//images.ctfassets.net/ry6adbgbrq11/ep1sCrYUu5OPFh7eRNIma/6adef662687674c836b050f2079f7ac8/NetflixAnimation.gif?w=800&h=450&q=50&fm=webp 800w,\n//images.ctfassets.net/ry6adbgbrq11/ep1sCrYUu5OPFh7eRNIma/6adef662687674c836b050f2079f7ac8/NetflixAnimation.gif?w=1200&h=675&q=50&fm=webp 1200w,\n//images.ctfassets.net/ry6adbgbrq11/ep1sCrYUu5OPFh7eRNIma/6adef662687674c836b050f2079f7ac8/NetflixAnimation.gif?w=1280&h=720&q=50&fm=webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},{"__typename":"ContentfulImage","id":"95c7b15d-14da-5efa-97e7-b4f0306555fb","contentful_id":"5BNQMdhlSjtfUKpeCwGHAd","caption":null,"altText":"Animated illustration of a web interface with interactive speech bubbles and play buttons. The gif shows a hand emerging with a checklist. The animation is looped.","imageStyling":null,"imageType":["Image-left"],"asset":{"file":{"url":"//images.ctfassets.net/ry6adbgbrq11/6n97ACApgDmtISiSpg13WH/f371f059ac497035cc5245350b1525b4/Inline_GIF_-_BrandStorytelling.gif"},"fluid":{"aspectRatio":1.4299674267100977,"src":"//images.ctfassets.net/ry6adbgbrq11/6n97ACApgDmtISiSpg13WH/f371f059ac497035cc5245350b1525b4/Inline_GIF_-_BrandStorytelling.gif?w=800&q=50","srcSet":"//images.ctfassets.net/ry6adbgbrq11/6n97ACApgDmtISiSpg13WH/f371f059ac497035cc5245350b1525b4/Inline_GIF_-_BrandStorytelling.gif?w=200&h=140&q=50 200w,\n//images.ctfassets.net/ry6adbgbrq11/6n97ACApgDmtISiSpg13WH/f371f059ac497035cc5245350b1525b4/Inline_GIF_-_BrandStorytelling.gif?w=400&h=280&q=50 400w,\n//images.ctfassets.net/ry6adbgbrq11/6n97ACApgDmtISiSpg13WH/f371f059ac497035cc5245350b1525b4/Inline_GIF_-_BrandStorytelling.gif?w=439&h=307&q=50 439w","srcWebp":"//images.ctfassets.net/ry6adbgbrq11/6n97ACApgDmtISiSpg13WH/f371f059ac497035cc5245350b1525b4/Inline_GIF_-_BrandStorytelling.gif?w=800&q=50&fm=webp","srcSetWebp":"//images.ctfassets.net/ry6adbgbrq11/6n97ACApgDmtISiSpg13WH/f371f059ac497035cc5245350b1525b4/Inline_GIF_-_BrandStorytelling.gif?w=200&h=140&q=50&fm=webp 200w,\n//images.ctfassets.net/ry6adbgbrq11/6n97ACApgDmtISiSpg13WH/f371f059ac497035cc5245350b1525b4/Inline_GIF_-_BrandStorytelling.gif?w=400&h=280&q=50&fm=webp 400w,\n//images.ctfassets.net/ry6adbgbrq11/6n97ACApgDmtISiSpg13WH/f371f059ac497035cc5245350b1525b4/Inline_GIF_-_BrandStorytelling.gif?w=439&h=307&q=50&fm=webp 439w","sizes":"(max-width: 800px) 100vw, 800px"}}},{"__typename":"ContentfulImage","id":"3e79fb57-2b0b-5b9f-a49f-66167210debc","contentful_id":"5EpWqshTmgQ1F2omvQZVWV","caption":null,"altText":"Animated gif showing a smart phone wire frame with an editing tool moving the design around. The looped animation shows design tools like a cursor and boxes for image placement.","imageStyling":null,"imageType":["Image-left"],"asset":{"file":{"url":"//images.ctfassets.net/ry6adbgbrq11/9TDcSEoGgOgtK1pfGpdUl/f10c53f1bf8fe30617d608101894b1c5/Inline_GIF_-_AnimatedPrototypes.gif"},"fluid":{"aspectRatio":1.0050251256281406,"src":"//images.ctfassets.net/ry6adbgbrq11/9TDcSEoGgOgtK1pfGpdUl/f10c53f1bf8fe30617d608101894b1c5/Inline_GIF_-_AnimatedPrototypes.gif?w=800&q=50","srcSet":"//images.ctfassets.net/ry6adbgbrq11/9TDcSEoGgOgtK1pfGpdUl/f10c53f1bf8fe30617d608101894b1c5/Inline_GIF_-_AnimatedPrototypes.gif?w=200&h=199&q=50 200w,\n//images.ctfassets.net/ry6adbgbrq11/9TDcSEoGgOgtK1pfGpdUl/f10c53f1bf8fe30617d608101894b1c5/Inline_GIF_-_AnimatedPrototypes.gif?w=400&h=398&q=50 400w","srcWebp":"//images.ctfassets.net/ry6adbgbrq11/9TDcSEoGgOgtK1pfGpdUl/f10c53f1bf8fe30617d608101894b1c5/Inline_GIF_-_AnimatedPrototypes.gif?w=800&q=50&fm=webp","srcSetWebp":"//images.ctfassets.net/ry6adbgbrq11/9TDcSEoGgOgtK1pfGpdUl/f10c53f1bf8fe30617d608101894b1c5/Inline_GIF_-_AnimatedPrototypes.gif?w=200&h=199&q=50&fm=webp 200w,\n//images.ctfassets.net/ry6adbgbrq11/9TDcSEoGgOgtK1pfGpdUl/f10c53f1bf8fe30617d608101894b1c5/Inline_GIF_-_AnimatedPrototypes.gif?w=400&h=398&q=50&fm=webp 400w","sizes":"(max-width: 800px) 100vw, 800px"}}},{"__typename":"ContentfulImage","id":"612617e8-8c74-587a-a114-2961c2efcd46","contentful_id":"3LlI81wQlkBHZVZMGuVX5d","caption":null,"altText":"Animated illustration showing an arrow moving along a path passing circles that transform from grey to colorful as the arrow passes and arrives at the check mark. Gif illustrates feedback weaving in and out to completion.","imageStyling":null,"imageType":["Image-left"],"asset":{"file":{"url":"//images.ctfassets.net/ry6adbgbrq11/7eDJwujumbciPB9TmlIhvY/26b28704dad944e867b619fdd4f3948b/Inline_GIF_-_VisualFeedback.gif"},"fluid":{"aspectRatio":2.3682008368200838,"src":"//images.ctfassets.net/ry6adbgbrq11/7eDJwujumbciPB9TmlIhvY/26b28704dad944e867b619fdd4f3948b/Inline_GIF_-_VisualFeedback.gif?w=800&q=50","srcSet":"//images.ctfassets.net/ry6adbgbrq11/7eDJwujumbciPB9TmlIhvY/26b28704dad944e867b619fdd4f3948b/Inline_GIF_-_VisualFeedback.gif?w=200&h=84&q=50 200w,\n//images.ctfassets.net/ry6adbgbrq11/7eDJwujumbciPB9TmlIhvY/26b28704dad944e867b619fdd4f3948b/Inline_GIF_-_VisualFeedback.gif?w=400&h=169&q=50 400w,\n//images.ctfassets.net/ry6adbgbrq11/7eDJwujumbciPB9TmlIhvY/26b28704dad944e867b619fdd4f3948b/Inline_GIF_-_VisualFeedback.gif?w=566&h=239&q=50 566w","srcWebp":"//images.ctfassets.net/ry6adbgbrq11/7eDJwujumbciPB9TmlIhvY/26b28704dad944e867b619fdd4f3948b/Inline_GIF_-_VisualFeedback.gif?w=800&q=50&fm=webp","srcSetWebp":"//images.ctfassets.net/ry6adbgbrq11/7eDJwujumbciPB9TmlIhvY/26b28704dad944e867b619fdd4f3948b/Inline_GIF_-_VisualFeedback.gif?w=200&h=84&q=50&fm=webp 200w,\n//images.ctfassets.net/ry6adbgbrq11/7eDJwujumbciPB9TmlIhvY/26b28704dad944e867b619fdd4f3948b/Inline_GIF_-_VisualFeedback.gif?w=400&h=169&q=50&fm=webp 400w,\n//images.ctfassets.net/ry6adbgbrq11/7eDJwujumbciPB9TmlIhvY/26b28704dad944e867b619fdd4f3948b/Inline_GIF_-_VisualFeedback.gif?w=566&h=239&q=50&fm=webp 566w","sizes":"(max-width: 800px) 100vw, 800px"}}},{"__typename":"ContentfulImage","id":"2b4f7029-addf-5cc3-8d6c-e2b0eadf388b","contentful_id":"2Oi95jtMJc1o6Ul1bvMxYz","caption":null,"altText":"Animated gif showing an illustration of a hand clicking on a button. Below the button are a fast forward, rewind, and record button.","imageStyling":null,"imageType":["Image-left"],"asset":{"file":{"url":"//images.ctfassets.net/ry6adbgbrq11/3kPtOjRMxxnTzXPiFiLLGd/15a3b28895a2590478a7abe4b86494c6/Inline_GIF_-_VisualHints.gif"},"fluid":{"aspectRatio":2.2651162790697676,"src":"//images.ctfassets.net/ry6adbgbrq11/3kPtOjRMxxnTzXPiFiLLGd/15a3b28895a2590478a7abe4b86494c6/Inline_GIF_-_VisualHints.gif?w=800&q=50","srcSet":"//images.ctfassets.net/ry6adbgbrq11/3kPtOjRMxxnTzXPiFiLLGd/15a3b28895a2590478a7abe4b86494c6/Inline_GIF_-_VisualHints.gif?w=200&h=88&q=50 200w,\n//images.ctfassets.net/ry6adbgbrq11/3kPtOjRMxxnTzXPiFiLLGd/15a3b28895a2590478a7abe4b86494c6/Inline_GIF_-_VisualHints.gif?w=400&h=177&q=50 400w,\n//images.ctfassets.net/ry6adbgbrq11/3kPtOjRMxxnTzXPiFiLLGd/15a3b28895a2590478a7abe4b86494c6/Inline_GIF_-_VisualHints.gif?w=487&h=215&q=50 487w","srcWebp":"//images.ctfassets.net/ry6adbgbrq11/3kPtOjRMxxnTzXPiFiLLGd/15a3b28895a2590478a7abe4b86494c6/Inline_GIF_-_VisualHints.gif?w=800&q=50&fm=webp","srcSetWebp":"//images.ctfassets.net/ry6adbgbrq11/3kPtOjRMxxnTzXPiFiLLGd/15a3b28895a2590478a7abe4b86494c6/Inline_GIF_-_VisualHints.gif?w=200&h=88&q=50&fm=webp 200w,\n//images.ctfassets.net/ry6adbgbrq11/3kPtOjRMxxnTzXPiFiLLGd/15a3b28895a2590478a7abe4b86494c6/Inline_GIF_-_VisualHints.gif?w=400&h=177&q=50&fm=webp 400w,\n//images.ctfassets.net/ry6adbgbrq11/3kPtOjRMxxnTzXPiFiLLGd/15a3b28895a2590478a7abe4b86494c6/Inline_GIF_-_VisualHints.gif?w=487&h=215&q=50&fm=webp 487w","sizes":"(max-width: 800px) 100vw, 800px"}}},{"__typename":"ContentfulImage","id":"d72cfabd-c052-567d-95c6-5002358b02c4","contentful_id":"189s32msM5Ge7kPmCDL3o6","caption":null,"altText":"Animated gif showing a hand moving a toggle from off to on. The gif shows options to turn off and on with icons for a play button, a person's contact info, and a phone number.","imageStyling":null,"imageType":null,"asset":{"file":{"url":"//images.ctfassets.net/ry6adbgbrq11/1mx8BdXSrDnth7Fkv51BAe/bced44b4f0a7a57a73b39a896ca42ff7/Inline_GIF_-_Microinteractions.gif"},"fluid":{"aspectRatio":0.9544159544159544,"src":"//images.ctfassets.net/ry6adbgbrq11/1mx8BdXSrDnth7Fkv51BAe/bced44b4f0a7a57a73b39a896ca42ff7/Inline_GIF_-_Microinteractions.gif?w=800&q=50","srcSet":"//images.ctfassets.net/ry6adbgbrq11/1mx8BdXSrDnth7Fkv51BAe/bced44b4f0a7a57a73b39a896ca42ff7/Inline_GIF_-_Microinteractions.gif?w=200&h=210&q=50 200w,\n//images.ctfassets.net/ry6adbgbrq11/1mx8BdXSrDnth7Fkv51BAe/bced44b4f0a7a57a73b39a896ca42ff7/Inline_GIF_-_Microinteractions.gif?w=335&h=351&q=50 335w","srcWebp":"//images.ctfassets.net/ry6adbgbrq11/1mx8BdXSrDnth7Fkv51BAe/bced44b4f0a7a57a73b39a896ca42ff7/Inline_GIF_-_Microinteractions.gif?w=800&q=50&fm=webp","srcSetWebp":"//images.ctfassets.net/ry6adbgbrq11/1mx8BdXSrDnth7Fkv51BAe/bced44b4f0a7a57a73b39a896ca42ff7/Inline_GIF_-_Microinteractions.gif?w=200&h=210&q=50&fm=webp 200w,\n//images.ctfassets.net/ry6adbgbrq11/1mx8BdXSrDnth7Fkv51BAe/bced44b4f0a7a57a73b39a896ca42ff7/Inline_GIF_-_Microinteractions.gif?w=335&h=351&q=50&fm=webp 335w","sizes":"(max-width: 800px) 100vw, 800px"}}}]},"publishDate":"2021-06-15","hashtags":null,"readNext":null,"shareQuote":{"shareQuote":"Animation can surprise, delight, and make an emotional connection with digital product users. Follow these 5 animation principles to improve your UX."},"shareImage":{"fixed":{"src":"//images.ctfassets.net/ry6adbgbrq11/7D6bQtce7XCjMSfS1KfZWF/e035709ea28a02f15a6b929421295645/Animation_Shake_Up_-_Social_Share.jpg?w=1200&h=630&q=50&fit=fill"}},"contentUpgrade":null,"seoTitle":"5 UX Animation Principles & Best Practices"},"allContentfulInsight":{"nodes":[{"type":"Article","title":"Accessibility Standards: Are They Part of Your Fintech Product Yet?","slug":"ada-compliance-checklist-for-fintech-products","author":{"name":"Abby Milan","headshot":{"fixed":{"width":48,"height":48,"src":"//images.ctfassets.net/ry6adbgbrq11/4x5mYiTzDHIhuz4Qns3GN0/f4260c3d45eee4d35e015041da397b75/Employee.png?w=48&h=48&q=50&fit=fill&f=face","srcSet":"//images.ctfassets.net/ry6adbgbrq11/4x5mYiTzDHIhuz4Qns3GN0/f4260c3d45eee4d35e015041da397b75/Employee.png?w=48&h=48&q=50&fit=fill&f=face 1x,\n//images.ctfassets.net/ry6adbgbrq11/4x5mYiTzDHIhuz4Qns3GN0/f4260c3d45eee4d35e015041da397b75/Employee.png?w=72&h=72&q=50&fit=fill&f=face 1.5x,\n//images.ctfassets.net/ry6adbgbrq11/4x5mYiTzDHIhuz4Qns3GN0/f4260c3d45eee4d35e015041da397b75/Employee.png?w=96&h=96&q=50&fit=fill&f=face 2x,\n//images.ctfassets.net/ry6adbgbrq11/4x5mYiTzDHIhuz4Qns3GN0/f4260c3d45eee4d35e015041da397b75/Employee.png?w=144&h=144&q=50&fit=fill&f=face 3x","srcWebp":"//images.ctfassets.net/ry6adbgbrq11/4x5mYiTzDHIhuz4Qns3GN0/f4260c3d45eee4d35e015041da397b75/Employee.png?w=48&h=48&q=50&fm=webp&fit=fill&f=face","srcSetWebp":"//images.ctfassets.net/ry6adbgbrq11/4x5mYiTzDHIhuz4Qns3GN0/f4260c3d45eee4d35e015041da397b75/Employee.png?w=48&h=48&q=50&fm=webp&fit=fill&f=face 1x,\n//images.ctfassets.net/ry6adbgbrq11/4x5mYiTzDHIhuz4Qns3GN0/f4260c3d45eee4d35e015041da397b75/Employee.png?w=72&h=72&q=50&fm=webp&fit=fill&f=face 1.5x,\n//images.ctfassets.net/ry6adbgbrq11/4x5mYiTzDHIhuz4Qns3GN0/f4260c3d45eee4d35e015041da397b75/Employee.png?w=96&h=96&q=50&fm=webp&fit=fill&f=face 2x,\n//images.ctfassets.net/ry6adbgbrq11/4x5mYiTzDHIhuz4Qns3GN0/f4260c3d45eee4d35e015041da397b75/Employee.png?w=144&h=144&q=50&fm=webp&fit=fill&f=face 3x"}}}},{"type":"Article","title":"Fintech on Fire: Trends, Investments, and How to Make Your Product Beat the Rest","slug":"fintech-technology-trends-2021","author":{"name":"Evan Shoemaker","headshot":{"fixed":{"width":48,"height":48,"src":"//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=48&h=48&q=50&fit=fill&f=face","srcSet":"//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=48&h=48&q=50&fit=fill&f=face 1x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=72&h=72&q=50&fit=fill&f=face 1.5x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=96&h=96&q=50&fit=fill&f=face 2x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=144&h=144&q=50&fit=fill&f=face 3x","srcWebp":"//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=48&h=48&q=50&fm=webp&fit=fill&f=face","srcSetWebp":"//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=48&h=48&q=50&fm=webp&fit=fill&f=face 1x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=72&h=72&q=50&fm=webp&fit=fill&f=face 1.5x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=96&h=96&q=50&fm=webp&fit=fill&f=face 2x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=144&h=144&q=50&fm=webp&fit=fill&f=face 3x"}}}},{"type":"Article","title":"8 Reasons Why Every Product Design Team Needs to Use Figma — Or Get Left Behind","slug":"why-use-figma-for-digital-product-design","author":{"name":"Evan Shoemaker","headshot":{"fixed":{"width":48,"height":48,"src":"//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=48&h=48&q=50&fit=fill&f=face","srcSet":"//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=48&h=48&q=50&fit=fill&f=face 1x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=72&h=72&q=50&fit=fill&f=face 1.5x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=96&h=96&q=50&fit=fill&f=face 2x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=144&h=144&q=50&fit=fill&f=face 3x","srcWebp":"//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=48&h=48&q=50&fm=webp&fit=fill&f=face","srcSetWebp":"//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=48&h=48&q=50&fm=webp&fit=fill&f=face 1x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=72&h=72&q=50&fm=webp&fit=fill&f=face 1.5x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=96&h=96&q=50&fm=webp&fit=fill&f=face 2x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=144&h=144&q=50&fm=webp&fit=fill&f=face 3x"}}}},{"type":"Article","title":"The Ultimate Unifier: Why Your Digital Product Needs a Design System","slug":"ux-design-system-goals-5-step-guide","author":{"name":"Evan Shoemaker","headshot":{"fixed":{"width":48,"height":48,"src":"//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=48&h=48&q=50&fit=fill&f=face","srcSet":"//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=48&h=48&q=50&fit=fill&f=face 1x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=72&h=72&q=50&fit=fill&f=face 1.5x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=96&h=96&q=50&fit=fill&f=face 2x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=144&h=144&q=50&fit=fill&f=face 3x","srcWebp":"//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=48&h=48&q=50&fm=webp&fit=fill&f=face","srcSetWebp":"//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=48&h=48&q=50&fm=webp&fit=fill&f=face 1x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=72&h=72&q=50&fm=webp&fit=fill&f=face 1.5x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=96&h=96&q=50&fm=webp&fit=fill&f=face 2x,\n//images.ctfassets.net/ry6adbgbrq11/2o8ORNmNcKbkvTC9fPJwK4/0f8f8e30f5f6afeeb3236c103d748bae/Employee__1_.png?w=144&h=144&q=50&fm=webp&fit=fill&f=face 3x"}}}},{"type":"Article","title":"How to Make Your Product Come First in the Frenzied Fintech Brand Race","slug":"best-fintech-branding-strategy","author":{"name":"Abby Milan","headshot":{"fixed":{"width":48,"height":48,"src":"//images.ctfassets.net/ry6adbgbrq11/4x5mYiTzDHIhuz4Qns3GN0/f4260c3d45eee4d35e015041da397b75/Employee.png?w=48&h=48&q=50&fit=fill&f=face","srcSet":"//images.ctfassets.net/ry6adbgbrq11/4x5mYiTzDHIhuz4Qns3GN0/f4260c3d45eee4d35e015041da397b75/Employee.png?w=48&h=48&q=50&fit=fill&f=face 1x,\n//images.ctfassets.net/ry6adbgbrq11/4x5mYiTzDHIhuz4Qns3GN0/f4260c3d45eee4d35e015041da397b75/Employee.png?w=72&h=72&q=50&fit=fill&f=face 1.5x,\n//images.ctfassets.net/ry6adbgbrq11/4x5mYiTzDHIhuz4Qns3GN0/f4260c3d45eee4d35e015041da397b75/Employee.png?w=96&h=96&q=50&fit=fill&f=face 2x,\n//images.ctfassets.net/ry6adbgbrq11/4x5mYiTzDHIhuz4Qns3GN0/f4260c3d45eee4d35e015041da397b75/Employee.png?w=144&h=144&q=50&fit=fill&f=face 3x","srcWebp":"//images.ctfassets.net/ry6adbgbrq11/4x5mYiTzDHIhuz4Qns3GN0/f4260c3d45eee4d35e015041da397b75/Employee.png?w=48&h=48&q=50&fm=webp&fit=fill&f=face","srcSetWebp":"//images.ctfassets.net/ry6adbgbrq11/4x5mYiTzDHIhuz4Qns3GN0/f4260c3d45eee4d35e015041da397b75/Employee.png?w=48&h=48&q=50&fm=webp&fit=fill&f=face 1x,\n//images.ctfassets.net/ry6adbgbrq11/4x5mYiTzDHIhuz4Qns3GN0/f4260c3d45eee4d35e015041da397b75/Employee.png?w=72&h=72&q=50&fm=webp&fit=fill&f=face 1.5x,\n//images.ctfassets.net/ry6adbgbrq11/4x5mYiTzDHIhuz4Qns3GN0/f4260c3d45eee4d35e015041da397b75/Employee.png?w=96&h=96&q=50&fm=webp&fit=fill&f=face 2x,\n//images.ctfassets.net/ry6adbgbrq11/4x5mYiTzDHIhuz4Qns3GN0/f4260c3d45eee4d35e015041da397b75/Employee.png?w=144&h=144&q=50&fm=webp&fit=fill&f=face 3x"}}}}]}},"pageContext":{"slug":"5-animation-principles-for-ux-design","topics":["Product Design","Design Strategy","Tools & Trends","Process","Product Marketing","Design Systems","Performance"]}},"staticQueryHashes":["150141661","2802189038"]}