Skip to content
Luke McMullin: Interactive Designer

Luke McMullin: Interactive Designer

  • HOME
  • UX & UI
  • GRAPHIC DESIGN
  • MOTION & VIDEO
  • BLOG
  • ABOUT
  • CONTACT
  • Toggle search form

Animating User Interface Loops

Posted on March 5, 2023June 18, 2023 By lukemcm31 1 Comment on Animating User Interface Loops

You have your preproduction work finished and finally got to the point where you are beginning to animate. That being said, there are still things that could hinder your workflow and progress toward your end goal. In Animated Storytelling, Blazer gives some tips (shown below) on how to tackle these potential challenges and make your animation process as smooth as possible.

Plan It Out

More specifically, create a production calendar and fill it in backwards. That is, start with inserting your final deadline on a blank calendar, and then work back through important post-production, production, and preproduction dates. And be sure that all your deadlines are realistically attainable and paired with realistic motivators.

Back Up Everything

When my screen suddenly broke on my Macbook and I didn’t back up my files, I thought I had lost everything. Thankfully, because it was an external issue and not an internal one, I was able to safely back everything up at the Apple store using an external monitor. However, others aren’t so lucky; sometimes that internal damage or a crash that causes your project file to be corrupted can make all your hard work disappear. So always save your work often, back up important assets, be sure to have plenty of space on your hard drives, and organize your files.

Start Easy and Build Up

Starting at the beginning of your story can be intimidating for a lot of people, especially for me who has ADHD and therefore already has difficulty working linearly. So, start at your project’s “lowest-hanging fruit” (the scene that is the most fun or easiest to animate). Then work on another sequence that is marginally harder, and so on and so forth.

Once you arrive at your most challenging scenes, break them up into smaller pieces, for those pieces have their own story arcs to them and therefore you can treat them as individual, less overwhelming arcs.

Reassess and Remove

Even though you technically established everything in preproduction, you should always continue asking yourself if a shot or sequence is absolutely worth it. If not, then cut it. If it’s too long, then make it shorter.

Map Out All Movement

While your storyboard should have your key poses established, you could still run into logistical errors in the software when trying to fully animate something. Therefore, you should revisit those key poses, analyze each shot, and map out the “basic choreography” of your characters’/objects’ positions and movements, including all elements that will be in the final product

When mapping movement. be sure to pay attention to the laws of physics and reaction forces (e.g. leaning back before running, hair/clothing moving forward as the character stops) so that it doesn’t feel robotic. Also, it is helpful to chart the paths of your objects’ directional movements (horizontal, vertical, diagonal, circular).

Mix It Up

If your subjects remain in one specific position or too long, then the audience will start to lose interest. So, be sure to make the positions interesting by moving anything away from the dead center, mixing up their scaling, and vary the timing of your sequences.

How Does It Sound?

Sound is a crucial element in any animated storytelling, and you may have chosen your soundtrack way in advance and have it set in stone. But maybe it suddenly doesn’t eel right. In this case, consider being flexible with your sound. Perhaps swap tracks to view your animation with a fresher lens and affirm your original choice. It’s often helpful to let your soundtrack actually influence the animation of your sequences. Finally, mute your soundtrack to see how your animations stand on their own, and make adjustments if it’s too reliant on the sound.

Research

Moving on to UI Animation, here’s some examples that I believe demonstrate effective user interface motion.

This one demonstrates that a very simple function can have a fun, interactive animation. I really liked the confetti shapes that fly out when the options bar is revealed.

This one is rather simple but does the job well. When a menu item opens, the other items scrunch and adjust to the screen size, which makes the interface feel intuitive.

Here, a simple search function has been enhanced into a fun animation. I like how the search bar bounces and then the results flip into existence like a casino game.

The following examples don’t embed well, but the Dribble links should allow you to see the animations.

https://dribbble.com/shots/20408506-Social-Video-Mobile-IOS-App?utm_source=Clipboard_Shot&utm_campaign=purrwebui&utm_content=Social%20Video%20Mobile%20IOS%20App&utm_medium=Social_Share&utm_source=Clipboard_Shot&utm_campaign=purrwebui&utm_content=Social%20Video%20Mobile%20IOS%20App&utm_medium=Social_Share

This mockup social media interface is loosely inspired by TikTok, but also includes its own mock features and elements. I think it is executed pretty well, especially with the ‘For You’ page being a hybrid of scroll and swipe-up UX.

https://dribbble.com/shots/18319139-The-next-Smart-Home-Hub?utm_source=Clipboard_Shot&utm_campaign=Giulio_Cuscito&utm_content=The%20next%20%F0%9F%91%89%F0%9F%8F%BB%20%E2%80%9CSmart%20Home%20Hub%E2%80%9D&utm_medium=Social_Share&utm_source=Clipboard_Shot&utm_campaign=Giulio_Cuscito&utm_content=The%20next%20%F0%9F%91%89%F0%9F%8F%BB%20%E2%80%9CSmart%20Home%20Hub%E2%80%9D&utm_medium=Social_Share

This is just a very smooth interface with a lot of ease-in transitions. I really liked the animation of the progress bar when a new widget was added. The streaming service interface also felt very intuitive.

https://dribbble.com/shots/15717813-New-Look-Mobile-App-Design-with-Illustrations?utm_source=Clipboard_Shot&utm_campaign=outcrowd&utm_content=New%20Look%20-%20Mobile%20App%20Design%20with%20Illustrations&utm_medium=Social_Share&utm_source=Clipboard_Shot&utm_campaign=outcrowd&utm_content=New%20Look%20-%20Mobile%20App%20Design%20with%20Illustrations&utm_medium=Social_Share

This digital card app interface was very fun to watch. I really liked the swapping animation between the cards, and the flip-and-spin animations for the color choice menu was very complex yet intuitive.

My UI Animation

For this week’s project, I created a user interface animation loop. I wanted to make an iPhone mockup and animate a hamburger menu. And with that, I decided to make an app interface of a mock restaurant I called Burger! When the menu icon is pressed, the menu slides in, with each menu item quickly trickling in. I also tried to simulate a reaction force with the item icons by rotating them as they slide in and out. Not only that, but the icon also animates when going from a hamburger to an X and vice versa. I faced many small yet difference-making challenges when making this in After Effects, especially with trying to get the right ease animations. But overall, I had a lot of fun putting this together. Check it out below!

Motion Design

Post navigation

Previous Post: Motion for Promotion
Next Post: Wrapping It Up with Advanced Motion

Related Posts

Stop Motion Experimentation and Pre-Production in Action Motion Design
Wrapping It Up with Advanced Motion Motion Design
Stop Motion Production and Post Deep Dive Motion Design
Storytelling, Storyboarding, and Animating with After Effects Motion Design
Basic Motion: The Beginning of an Animated Storytelling Journey Motion Design
Motion for Promotion Motion Design

Comment (1) on “Animating User Interface Loops”

  1. гранит камень says:
    June 7, 2023 at 11:49 am

    Я восхищен этой статьей! Она не только предоставляет информацию, но и вызывает у меня эмоциональный отклик. Автор умело передал свою страсть и вдохновение, что делает эту статью поистине превосходной.

Comments are closed.

Archives

  • March 2023
  • February 2023
  • January 2023
  • December 2022
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021

Categories

  • Content Creation
  • Content Strategy
  • Foundations of Grad Studies
  • Graphic Design
  • Motion & Video
  • Motion Design
  • Personal Well-Being
  • Social Media Analytics
  • Technology
  • UX—Ideation, Prototyping, Testing
  • UX—Principles
  • UX/UI Design
  • Visual Design
  • Writing

Recent Posts

  • Wrapping It Up with Advanced Motion
  • Animating User Interface Loops
  • Motion for Promotion
  • Stop Motion Production and Post Deep Dive
  • Stop Motion Experimentation and Pre-Production in Action

Recent Comments

  1. The Webb Site: A Website Prototype Journey – Luke McMullin: Interactive Designer on Gathering My Materials: Mobile Wireframes, Logo Design, and Learning Figma
  2. uPVC products on The Mindless Scroller
  3. خدمات المصنع on 3 Empathy Research Methods to Help Overcome Your Biases
  4. דירה דיסקרטית בבית שמש on Website Content Audit & Analysis: Coral Reefs
  5. гранит камень on Animating User Interface Loops

Copyright © 2023 Luke McMullin -

Powered by PressBook Masonry Dark