{"id":14587,"date":"2018-04-13T11:38:20","date_gmt":"2018-04-13T10:38:20","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=14587"},"modified":"2020-12-14T11:15:39","modified_gmt":"2020-12-14T11:15:39","slug":"get-started-motion-design-nine-steps","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/get-started-motion-design-nine-steps\/","title":{"rendered":"Get Started With Motion Design in Nine\u00a0Steps"},"content":{"rendered":"

Animated means full of life and excitement<\/strong>. Animation adds life to static things. When it comes to software, it\u2019s not just for delight but for solving problems.<\/p>\n

As human beings we are used to see the world moving around us, and if any piece of software has coherent animations, it feels alive and natural.<\/p>\n

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>\n

Remember \u2013 Motion subconsciously builds the personality of your application. Much like layout, spacing, typography and\u00a0colors.<\/span><\/p>\n

Have you ever observed that elastic bounce on an iPhone when you finish scrolling things? Seemingly tiny details like these play a big part in forming the personality of Apple\u2019s products.<\/p>\n

\"\"<\/a>

Motion Creates\u00a0Life.<\/p><\/div>\n

Cool, Let\u2019s get started on using\u00a0motion<\/h2>\n

\"\"<\/a><\/p>\n

<\/p>\n

1. Start Observing<\/h2>\n

Develop an eye for motion. If you can\u2019t observe things moving, you won\u2019t be able to work with them. Start observing how things move on your screen while you use your favourite apps. Look again, and find why you like it and try to look for the details. Observe what all is changing \u2014 shape, size, position, color. Doesn\u2019t matter if it is tiny or huge, try to find what part motion is playing in the whole composition.<\/p>\n

2. Animation is not just a layer of\u00a0paint<\/h2>\n

Animation reveals a deeper meaning. Being a creator, you must consciously think of animations<\/a> from the start. If you\u2019re in the design stage, animate your prototypes to add that dimension of time. If you\u2019re in the development stage, divide your code into modular components to easily move things around in the UI. See more on modularity<\/a>.<\/p>\n

Tip \u2013 Mindfully thinking about the animated personality of your creation will give it a character and help you get a deeper perspective on what you are trying to\u00a0build.<\/span><\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

3. Where to introduce motion in your\u00a0product?<\/h2>\n
\"\"<\/a>

But where?<\/p><\/div>\n

<\/p>\n

Some easy places where motion can be introduced into your product could be when<\/strong> screens are changing<\/strong>, when the user interacts with an element<\/strong>, or when the user has to wait for something<\/strong>.<\/p>\n

4. Types of Motion\u00a0UX<\/h2>\n

You can categorise motion in products as Transitions<\/strong> (content changes\/user moves to another screen), Micro-interactions<\/strong> (Twitter\u2019s Like button for example), Graphical animations<\/strong> (like the scooter jump on the splash screen of Zomato\u2019s Order app).<\/p>\n

\"\"<\/a>

Types of Motion\u00a0UX<\/p><\/div>\n

<\/p>\n

5. Provide spatial information with\u00a0Motion<\/h2>\n
\"\"<\/a>

Motion communicates space.<\/p><\/div>\n

If a UI element enters from the right of the screen, users will mentally organise that element\u2019s 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>\n

6. Start understanding things like Duration, Timing Curve, Animation path, Initial & Final values<\/h2>\n
\"\"<\/a>

Learn about animation parameters \u2014 These 2 boxes have all the parameters same except the Timing Curve. Explore and read about\u00a0it.<\/p><\/div>\n

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, Google has some nice guidelines<\/a>.<\/p>\n

7. Never MAKE people wait in the middle of a\u00a0flow\"\"<\/a><\/h2>\n

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\u2019s not a film.<\/p>\n

<\/div>
<\/svg><\/div>

Pro tip \u2013 Keep animations subtle and in-line with your product\u2019s storyline to create delightful experiences.<\/p><\/span><\/blockquote>\n

8. Tools to\u00a0use<\/h2>\n

Lottie, Adobe Animate CC, After Effects, Sketch2AE, Framer, Origami, Animatic App, UIDynamics (iOS) are some tools for Motion Design\u00a0. Look them up.<\/p>\n

\"\"<\/a>

Start with Pen and\u00a0Paper<\/p><\/div>\n

I recommend using <\/em>pen and paper first <\/em><\/strong>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>Animatic App<\/em><\/a>. An animatic helps keep things simple and focused.<\/em><\/p>\n

9. Capture and Save things you find interesting<\/h2>\n

\"\"<\/a>Save things you find interesting. Watch them over and over again, slow them down and understand how elements are moving. Learn by copying. My mac is full with animated GIFs I find interesting. You can also save GIFs on dribbble<\/a>. Additionally, to capture and record things on your Mac screen, Giphy Capture<\/a> works great.<\/p>\n

\"\"<\/a>

Be Fearless<\/p><\/div>\n

<\/p>\n

????Bonus Point \u2014Say Goodbye to the Fear\u00a0Monster<\/h2>\n

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>\n

<\/div>
<\/svg><\/div>

It\u2019s 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\u00a0else.<\/p><\/span><\/blockquote>\n

This article was originally published on Arpit's Medium page<\/a>.\u00a0<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Animated means full of life and excitement. Animation adds life to static things. When it comes to software, it\u2019s not just for delight but for solving problems. As human beings we are used to see the world moving around us, and if any piece of software has coherent animations, it feels alive and natural. Tech leaders in the industry are… Read More ￫<\/a><\/p>\n","protected":false},"author":221,"featured_media":14766,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-14587","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n