Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Get exclusive access to thought-provoking articles, bonus podcast content, and cutting-edge whitepapers. Become a member of the UX Magazine community today!

Home ›› Design ›› Enhance your digital design creation with simple motion graphics

Enhance your digital design creation with simple motion graphics

by Eva Schicker
3 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

Artboard 21Animations

Here’s how

If a picture is worth a thousand words, then a gif is worth a million. — Anonymous

An example of how a simple animation can evoke community, love, and togetherness, all in one, AND build excitement

heart

A line animation in 6 colors draws the shape of a flower. The lines then morph into a heart, which is then filled with the colors of the flower petals.

This simple motion flow tells the story of community, compassion, belonging, and unity. A short animation can evoke many emotive and empathetic reactions with your readers and viewers.

Digital animation is integral in app design, often displayed through icons that were clicked. The customers barely notice, but it makes the app experience more delightful.

Interactive design tools for digital creators

There are many animation tools available.

I use After Effects (AE), and Illustrator (AI).

There is a learning curve, but with any detailed technical skill, investing the time to learn pays off in long term. The global community of motion graphic designers is alive and bubbling with ideas.

A designer who is also a motion designer can bring exponential skills to presenting content in inventive ways.

Extensions

flower
Extensions can make your animations blossom

Try them. There are many great ones available for free. Some of them come at a small price. It’s well worth paying a little money for a great extension, because it will save you a lot of time in the long run.

A few recomendations

{Note: I have no affiliation with the creators of the extensions mentioned. I want to illustrate a point, which is that there are hundreds of great extensions available.}

  • LottieFiles is a powerful extension to export your AE animations instantly as Lottie JSON, GIF, MP4, or dotLottie format for web and mobile apps for easy implementation. It saves a great deal of time. Lottiefiles is best used for vector, motion, or icon animations.
  • Try Battleaxe’s Overlord (1) extension by Adam Plouff to transfer files super easily between AE and AI, and vice versa. They call it the Vector Workflow Salvation, and it is exactly that.
  • Battleaxe also offers Rubberhose (1), another AE extension that is worth exploring if you are doing character animation.
  • Bodymovin by Hernan Torrisi is worth considering if you are exporting to html. A subset of AE features are supported. Export to html, svg or canvas.
  • Smoke Video Overlays Pack. Providing pre-designed smoke templates for video.
time

Where to download free animations, with Creative Commons licensing

Lottiefiles –  Lottiefiles is THE site to go to. Discover thousands of free animations from world-class animators and their creations for your products. Because the product is free, attribution needs to be given to the creators.

fan

Videvo –  Videvo is an interesting downloading hub for videos, animation, and sounds. Some animations are free, most come with a price.

When you are creating your own animations

Always start with a sketch for your idea.

Motion design depends on a solid vector design. The flow of the animation needs to be worked out in the illustration stage. Think of the movement through geometry.

yours

In your sketch phase, plan out your animation steps, however many. This is a simple animation flow, showing 8 steps from beginning to end.

Analyze how your animation builds. Consider the whole shape, (step 4 in my sketch) and how it animates from step 1, and ends on step 8.

vector

A quick vector animation, following the sketched idea above.

In the animation process, sketches might have to be simplified. What can be sketched by hand easily, might be difficult to get translated into a geometric design.

In this example, the bite taken out of the candy, sketched in steps 6 + 7, was too difficult to reproduce for animation. The candy is shown being cut away instead. In animation, simpler solutions always lead the design.

Try animation, whether as a designer, or a digital content creator. You may be amazed by how much animation can enhance the screen experience.

In summary

Motion design is about telling a story, however short or long. It can last a milli-second, or several minutes. Simple design candy can go a long way to create a lasting relationship with your viewers. If animation is integrated into the customer’s brand experience, they will thank you with longer screen time, more clicks, and more general satisfaction. Make it interactive.

Sources:

  1. www.battleaxe.co
  2. www.Lottiefiles.com
  3. www.videvo.net
heart

All animations are designed in Illustrator, After Effects, and LottieFiles extension. © Eva Schicker, 2020.

post authorEva Schicker

Eva Schicker

Eva Schicker is a writer and creative director with a focus on UX design and digital environments. In her articles, she explores the soft boundaries of interconnecting digital expertise. UX, UI, animation, interactivity, tech skills, and content development all play a huge part in implementing design in a fast-changing digital environment. Providing such knowledge through her writing is Eva’s passion. She studied art & media at Düsseldorf Art Academy in Germany and subsequently worked in NYC ad agencies for many years. Most recently, she graduated from the UX NYC General Assembly bootcamp. She loves all things art, especially the art of listening.

Tweet
Share
Post
Share
Email
Print

Related Articles

Consistency in UI/UX builds trust and efficiency — without it, users feel lost. Learn how top brands maintain it and how AI can help.

Article by Rodolpho Henrique
Consistency in UI/UX Design: The Key to User Satisfaction
  • The article examines the role of consistency in UI/UX design for user trust and efficiency.
  • It showcases visual, functional, and interaction consistency in creating seamless experiences.
  • The piece warns about the negative effects of inconsistency, including confusion and frustration.
  • It promotes the use of AI and design systems to ensure consistency across digital platforms.
Share:Consistency in UI/UX Design: The Key to User Satisfaction
4 min read

If Mobile-First thinking has revolutionized the UX Design industry, AI-First is promising to be an even more spectacular kick in the pants.

Article by Greg Nudelman
The Rise of AI-First Products
  • The article explores how AI-powered operating systems are changing user interactions.
  • It covers AI-driven personalization, automation, and adaptive interfaces.
  • The piece discusses challenges like privacy, over-reliance on AI, and user control.
  • It highlights opportunities to design more intuitive and human-centered AI experiences.
Share:The Rise of AI-First Products
11 min read

AI is reshaping UX, and Figma may be sinking. As AI-driven systems minimize UI, traditional design roles must evolve — or risk becoming obsolete. Are you ready to adapt?

Article by Greg Nudelman
AI Is Flipping UX Upside Down: How to Keep Your UX Job, and Why Figma is a Titanic (It’s not for the Reasons You Think)
  • The article explores the fundamental shift in UX as AI-first systems minimize the role of UI, rendering traditional design tools like Figma increasingly obsolete.
  • It introduces the “Iceberg UX Model,” illustrating how modern AI-driven interfaces prioritize functionality and automation over visual design.
  • The piece argues that UX professionals must shift their focus from UI aesthetics to AI-driven user experience, emphasizing use case validation, AI model integration, and data-informed decision-making.
  • It warns that designers who remain fixated on pixel-perfect layouts risk becoming obsolete, urging them to adapt by engaging in AI-driven UX strategies.
Share:AI Is Flipping UX Upside Down: How to Keep Your UX Job, and Why Figma is a Titanic (It’s not for the Reasons You Think)
7 min read

Join the UX Magazine community!

Stay informed with exclusive content on the intersection of UX, AI agents, and agentic automation—essential reading for future-focused professionals.

Hello!

You're officially a member of the UX Magazine Community.
We're excited to have you with us!

Thank you!

To begin viewing member content, please verify your email.

Tell us about you. Enroll in the course.

    This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and