Adobe logo on Gradient background with a animation asset

Interactive Animations, Adobe

As a Motion Design Intern at Adobe from Brand team, I was primarily involved two major projects. One is to design interactive Icon animations and the second project is to experiment with the concepts for loading screens across all Adobe product for Web and Mobile.

Adobe Inc
Interactive Motion Design Intern
Brand Team
May-Aug 2023

Getting started

I started this project with a an excitement of I'm going to work on something I've been dreaming of a long time and been working as my personal project in interactionscall_made. In the beginning of the project I got to understand the Spectrum Design Guidelines for Motion and talked to different people in the team and engineers to understand the limitations of the Icon animations. Especially, Lottie animations. I also got the opportunity to experiment with a side project, redesigning loading experience of the Adobe web and Mobile Products with cool loading animations that are responsive.  

Keeping the companies Policies in mind I'm not revealing any confidential details in this case study.

1. Icon Animations

Project Goal:

My goal is to create Interactive animated Icons for a yet to be launched product from Adobe. These Icons are designed from the principles of Spectrum 2 and will be used in the interface of the product. The motion should be purposeful and should not be distracting from user workspace.

Information of interactions


First, I identified the product's types of interaction and the animation format to be used. Later, I began exploring the .JSON format for the icon animations, though the product team isn't sure which format to use, GIF or Lottie. If it's GIF the animation would be a single transition with no loop. But if it's Lottie, the FPS should be accurate to the transition loop. After many discussions we got to a decision to experiment with the Lottie first.

Info of animation types


  • Exporting the animation to the suitable format of web without increasing the load time when there are multiple icon aniamtions in a page.
  • Presenting the icon animations in such a way that product team and others can interact with them and share their feedback on it.


The final animations are as shown above. The product team loved it and I've got the opportunity to get feedback from other Motion Designers from different teams which was helpful and motivating with their inputs. These Icons are implemented in the prototype for testing.

2. Loading Animations

Project Goal:

The idea of this project is to design an updated loading screen to align with all the Adobe Products and Spectrum redesign. My Responsibility is to create different concepts of branded loaders for the web and mobile products to be consistent across products with their design system. Our team has come up with 3 different concepts for loading screens and brand loaders for which I've animated using After effects and exported using Lottie.

Concept 1:

This is a simple concept of Product Mnemonic animating before loading the actual interface. This has no set of guidelines on how to animate and I've the liberty to use any motion principle that represents the magic of Adobe with the animation.

Keeping in mind of the visibility of the loading screen, as some products are dark theme by default and some are light theme, I have to be careful on choosing the direction of the motion and emphasis the Mnemonic.

Information of interactions

The animation is as shown below. There are multiple ways to animate this, but to keep it simple and emphasis the Mnemonic I have added the product's color as glow behind the Icon to separate it from the dark background.

Info of animation types

Concept 2:

This concept is based on the new Adobe marketing campaign, using Adobe logo and turning it to product Mnemonic. It's the way of showing the other side of the Adobe and for every product's loading screen the Mnemonic appears to be transforming from the Adobe logo.

The final animation is as shown below. The challenging part of this animation is transition from sharp corners to rounded corners, but from the feedback of a senior Motion Designer at Adobe, I got to know as a designer we need not to show every little transition. The viewer must see the animation as magic and supposed to wonder how the transition is made. That's the best thing I've learnt from my internship.

Info of animation types

Concept 3:

Concept 3 is inspired from the new spectrum redesign and the colors are from the new spectrum gradient theme. This is the most loved concept by all the team, so far.

The final animation is as shown below. I've really enjoyed doing this animation as it needed to be a collaborative design to change colors and Icons in sync with the Product's design system. The Icons represents the functionality of the product, where for the Aftereffects tool, it's all about capture, image and video that transforms from basic elements of spectrum on loop.

Info of animation types


From my Internship at Adobe, I've learned a lot as a Motion Designer though I have never worked as a Motion Designer in specific, I used to help with the marketing campaign video when I worked at a startup. But this internship experience gave me even more in-depth knowledge on Motion principles and taught me how important getting feedback from other designers of a team and understand the technicalities of implementing these animations into web. I'm glad that I've got to work with the amazing team who helped me a lot in understanding the workflow of such a big coampany. All the animations I've created for my Internship project are just a concepts for now. They may or may not be implemented in the actual product, but I was happy with the outcome of it as well as my team.

Moving Forward:

I had a great learning experience with Micro-interactions, which inspired me to explore more. I even did my master's thesis on this topic and created several Micro-interaction products and animations. My work was well-received by my professors and fellow designers. But that's not all, I am currently working on redesigning my portfolio with a focus on Micro-interactions and Motion. I am excited to showcase my UX Motion skills through this project.