large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://uxdesign.cc/motion-in-ux-design-9-points-to-get-started-e891974dc7ee?source=rss----138adf9c44c---4">uxdesign.cc &ndash; User Experience Design &mdash; Medium</a> | Arpit Agarwal </p>
<h4>Start breathing life into your creations</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*18NR2HSMnRsf5WBA-zJ23w.gif">Motion Creates Life.</p>
<p><strong>Animated means full of life and excitement</strong>. Animation adds life to static things. When it comes to software, it is not just for delight but for solving problems.</p>
<p>As human beings we are used to see the world moving around us, and if any piece of software has coherent animations, it feels natural.</p>
<p>Tech leaders in the industry are pushing their products towards being more natural. Sophisticated words like Motion Design, Motion UX, UX Choreography are gaining popularity.</p>
<blockquote><p><em>Remember – Motion subconsciously builds the </em><strong><em>personality of your application. </em></strong>Much like layout, spacing, typography and colors.</p></blockquote>
<p>Have you ever observed that elastic bounce on an iPhone when you finish scrolling stuff? Seemingly tiny details like these play a big part in forming the personality of Apple’s products.</p>
<h3>Cool, Let’s get started on using motion</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*WVO2fUsifiXktIOaradZGQ.gif"></p>
<h3><strong>1. Start Observing</strong></h3>
<p>Develop an eye for motion. If you can’t observe things moving, you won’t be able to work with then. Start observing how stuff moves on your screen while you use your favourite apps. Look again, and see why you like it and try to understand how things move. Observe what all is changing — shapes, sizes, position, colors. Doesn’t matter if it is tiny or huge, try to find what part motion is playing in the whole composition.</p>
<h3><strong>2. Animation is not just a layer of paint</strong></h3>
<p>Animation reveals a deeper meaning. Being a creator, you must consciously think of animations from the start. If you’re at the design stage, animate your prototypes to add that dimension of time. If you’re at the development stage, divide the code into modular components to move stuff around easily. <a href="https://medium.com/@acyoo/architecting-ios-development-at-zomato-cf894a7fa5e3">See more on modularity</a>. Be mindful of the animated personality of your creation and it will give you a deeper perspective into anything you build.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*t3dqGWRLsL_QGSkaUSic0w.gif"></p>
<h3><strong>3</strong>. Where to introduce motion in your product?</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Pmk25Ep7BAtivcKkVcmbCA.gif">But where?</p>
<p>Some easy places where motion can be introduced into your product could be <strong>when</strong> <strong>screens are changing</strong>, when the user <strong>interacts with an element</strong>, or when the<strong> user has to wait for something</strong>.</p>
<h3><strong>4</strong>. Types of Motion UX</h3>
<p>You can categorise motion in products as <strong>Transitions</strong> (content changes/user moves to another screen), <strong>Micro-interactions</strong> (Twitter’s Like button for example), <strong>Graphical animations</strong> (like the scooter jump on the splash screen of Zomato’s Order app).</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aP_ns6KdA_kvb3csJEZTEg.gif">Types of Motion UX</p>
<h3><strong>5</strong>. Provide <strong>spatial information</strong> with Motion</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*z9j3rcz8ER5DQF_3mUd4HA.gif">Motion communicates space.</p>
<p>If a UI element enters from the right of the screen, users will mentally organise that element’s position to be on the right. For example, if a hamburger menu button is placed on the top-left of the screen, the menu must animate-in from the left. To check if your animations communicate right, show it to people and listen to what they have to say. It is the easiest way to avoid any possible confusion.</p>
<h3><strong>6. Start understanding stuff like Duration, Timing Curve, Animation path, Initial &amp; Final values</strong></h3>
<p>These parameters technically form your animation piece. Play around with them and get a hang of these controls. Once you feel in control of these, you can make motion masterpieces. For UI, <a href="https://material.io/guidelines/motion/material-motion.html">Google has some nice guidelines</a>.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*gyD2I6o6-OPu3_rbtaEQkQ.gif">Learn about animation parameters — These 2 boxes have all the parameters same except the Timing Curve. Explore and read about it.</p>
<h3>7. Never MAKE people wait in the middle of a flow</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*QHIpIqZwA_lq_bOV9Z2kjQ.gif"></p>
<p>Never slow down people in the middle of a flow to MAKE them wait for an animation to finish. If they really HAVE to wait, then delight them with meaningful animation. At all times, remember to use your animation to solve a problem. There is the reason why animated loaders exist. Additionally, do not overload your software with movement. It’s not a film.</p>
<blockquote><p><em>Pro tip – Keep animations subtle and in line with your product’s storyline to create delightful experiences.</em></p></blockquote>
<h3>8. <strong>Tools to use</strong></h3>
<p>Lottie, Adobe Animate CC, After Effects, Sketch2AE, Framer, Origami, Animatic App, UIDynamics (iOS) are some tools for Motion Design . Look them up.</p>
<p><em>I recommend using </em><strong><em>pen and paper first </em></strong><em>to get started with your idea. Move on to any digital software after doing this. For animations in this article, I did hand drawn frames on the </em><a href="https://animatic.io/"><em>Animatic App</em></a><em>. An animatic helps keep things simple and focused.</em></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*DbUs1gsNLdXaqgn4v8kqEw.gif">Start with Pen and Paper</p>
<h3>9. Capture and Save things you find interesting</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FUBjAjXYGcD-Jy3MpxLxkw.gif"></p>
<p>Save stuff you find interesting. Watch it over and over again, slow it down and understand how elements are moving. Learn by copying. My mac is full with animated GIFs I find interesting. Create buckets for <a href="https://dribbble.com/shots?list=animated">GIFs on dribbble</a>. To capture and record stuff from your Mac screen, G<a href="https://giphy.com/apps/giphycapture">iphy Capture</a> works great.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*CSqaOB0Tel9HiyzPsttAAA.gif">Be Fearless</p>
<h3>💥 Bonus Point —Say Goodbye to the Fear Monster</h3>
<p>Still scared to start? Sit down. Relax. Eat that dessert you love. Play that song you desire. Turn off your phone. Keep a pen and paper next to you. Maybe get a small nap. Feel good. Feel comfortable. Keep that blank piece of paper in front of you. Hold that pen in your hand. Scribble randomly. Pick up another piece of paper. Scribble something random again. Next piece of paper. Make a shape. Next piece of paper. Draw more. Make a storyboard. Make the storyboard again. Feel the freedom and get your hands moving. Start. Just Start. See where it takes you.</p>
<blockquote><p>It’s more scary to touch a pen on paper than to draw. You are creative the moment you turn that blank piece of paper into anything else.</p></blockquote>
<p><em>Thanks for reading. Hope it helps you! </em>✌️</p>
<p>👀 <em>Check out some animations I recently made </em>—</p>
<p><a href="https://dribbble.com/arpitagarwal">Arpit Agarwal</a></p>
<p>👏👏 Enjoyed reading this? Press the Clap button to help this story grow.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2F50d69a%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2F50d69a%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252F50d69a%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/05d5fd32eda31cbd1b83287606744532/href">https://medium.com/media/05d5fd32eda31cbd1b83287606744532/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=e891974dc7ee" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://uxdesign.cc/motion-in-ux-design-9-points-to-get-started-e891974dc7ee">Get started with Motion Design— 9 Easy Points</a> was originally published in <a href="https://uxdesign.cc">UX Collective</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Get started with Motion Design— 9 Easy Points

Get started with Motion Design— 9 Easy Points

Start breathing life into your creations

Top Stories