Complete Guide to UI Animation and Tools in UNDER 10 minutes!

this is what gives UI and web design personality and this is everything you need to know to create amazing UI animations yourself in its basic form UI animations are all about State changes moving from State a to State B it's also about conditionals how those State changes are controlled by triggers and responses in web and UI design there are two main C categories of animations non-real time and real time non-real time animations occur after an initial trigger and we're locked into watching that animation until it is complete it has a set choreography that plays out from beginning to end real-time animation or interactive Graphics are when a user can directly interact with the animation and it reacts to what they do for example this clever capture screen that makes you catch flies before you can continue There are a few main use cases where we see animations being used in UI and web designs a lot in animated mockups these are things that you might see on dribbl or on social media or in marketing ads that are motion graphic representations of an app these are not necessarily functional examples but usually made to illustrate a concept in an interesting way in prototypes these can be simple screen-to-screen figma interactions that have animated Properties or more advanced multi- gesture and multi-input prototypes which are primarily focused on testing in the usability of your user experience that might include some animated properties elements or transitions in live products and these can be things like page transitions on websites micro interactions in apps graphic animations on loading screens or any combination of these non-real time and realtime animations so let's get into how to actually create these yourself step one is to conceptualize and plan start with brainstorming your animation ideas this could be in the form of a script a task diagram or storyboarding to get your animation ideas down think about the story you want to tell or the purpose of the interactions you want to create next you're going to want to create and Export the graphic elements for your animations this is where you would use a vector-based graphic design tool like figma Adobe XD sketch or pen pot to design your graphic elements once you've done that you'll want to export those Graphics in the appropriate format for your use case for complex images where transparency is needed pngs are the best for scalability and manipulation in code svgs are the way to go next you're going to want to select the right animation tool for your needs these tools allow you to control animation parameters and attributes like key frames adjusting timing and duration or defining interactive triggers and responses speaking of tools brings me to one of my favorites and today's sponsor protopie you can do things in protopie with advanc advaned interactions multi- gesture and Multi-Device prototypes that you cannot do with anything else designing interactive text fields to test out different input scenarios ensuring a seamless and familiar typing experience with Native keyboard support you can use camera interactions that enable you to incorporate gestures and movements for a really immersive user experience whether that's on mobile apps or websites for handheld devices voice prototyping with protopie is amazing you can simulate voice commands and respon to create intuitive iot experiences and you can test on real devices using protopie player apps for iOS Android and we OS so you know your prototypes are functioning flawlessly in the environment that they were intended for and you can leverage multi-touch gestures like long press pinch and rotate to create interactive and reactive experiences that feel really natural and intuitive up until now protopie was a bit costly and Out Of Reach for some designers but I'm really excited to announce that they just released a new plan for Freelancers and individuals this is tailored specifically for ux and UI designers like us if you are at all interested in interaction design then you have to try this out and you can learn all about it and grab your account and a discount using the link in the description below here is a table that I've compiled with the current modern animation tools that allow you to create everything from mockups to Advanced Multi-Device prototypes each of these tools has its strengths and weaknesses some are better at non-real time Graphics While others are better at interaction or prototyping feel free to pause this video or take a screenshot if you'd like to compare these different tools at a glance and check the description for a breakdown and links to all of these now that you've selected your animation tool you'll want to get familiar with the workspace and set up your first project here in Ry for example you can browse through community files you can watch tutorials and walkthroughs and set up a project and start creating your an animations many of these applications are set up pretty similarly with the layers panel and assets on the left and the design and animation parameters on the right and you'll also most likely notice a timeline at the bottom or a state machine like they have here in RVE so this is where you would import the graphics that you created earlier animate them and then program the conditionals and interactive States and responses that you want those animations to have there are 12 main principles of ux and mo that we can reference to decide what properties and techniques that we want to use to create the perfect animation easing which adjusts the speed of an animation to make the movement feel natural offset And Delay which introduces different start times or speeds for elements to create depth and focus parenting which connects elements together and shows their relationship transformation which changes an element's size shape or other properties value change which animates changes like numbers or progress masking which reveals hides parts of an element overlay which places elements on top of others cloning which duplicates Elements obscuration which uses elements to partially or fully hide other elements Parallax which moves the background and foreground elements at different speeds to create a sense of depth dimensionality which adds depth to design by simulating a 3D space and Dolly and zoom which simulates camera movements to focus on elements or change perspective step five is handoff and implementation when finished you can export the file format that you need whether that's a video to share on dribble or the L or Json file to implement on your website if you're working with someone to integrate your animated graphics into a website or native app you'll want to create documentation and specifications for the developer if you're doing it on your own then you'll need to export the graphics to be embedded and prepare the structure of your HTML and CSS files to add in the code that will instruct your animations on how they should behave for simple animations you might be able to use just CSS for more complex animations and interactions you can use JavaScript you can also use any number of popular existing JavaScript and react animation libraries like Gap anime.js 3js or react motion or framer motion just to name a few so a few important things to remember don't go overboard most of the complex animations that you see are just for dribble and to showcase the animation skills of the designer or the product in a creative way implementing these can cause slower load times on websites huge website files as well as a lot of time to implement and create so just use your discretion always think about different Comfort levels of those that might find certain types of animations and motions distracting or disorienting have an off switch or a fallback planned don't use UI animations just for animation sake make sure you're being intentional and purposeful about them make sure that they have a reason that they're cause Delight that they're functional or that they're informational and that's it you're now equipped to make some of the most impressive eye-catching UI animations and interactions yourself if you like this like And subscribe and share it with someone you know and if you enjoy my teaching style consider enrolling in our Complete product design course where you'll learn endtoend ux UI design including business and strategy all with a mindful Approach at an affordable price oh and watch this next

Channel: DesignerUp

Views: 1,948

Keywords: UI/UX design, UI design, how to design UI/UX, UI design tips, UI design tutorial, UX/UI, Product Design, UX Designer, Product Designer, Designerup, ui animation, ui animation figma, ui animation after effects, micro interactions, motion design, motion design tutorials, animation for beginners, protopie tutorial, rive animation tutorial, motion graphics, prototype

Id: O6o5AtU2p10

Length: 8min 36sec (516 seconds)

Published: Wed Apr 10 2024