A series of four micro-animations: a toggle, a loading screen, a button, and another repeating loading screen. When designing this set, I wanted to try my hand at a very graphic-orriented set of micro animations. I centered around a weather theme, and kept the cloud as a motif. I used Adobe After Effects for the animation, and Adobe Illustrator to create the graphics.
My "storyboards": Mostly a brainstorming session as to what I wanted to do.
A look behind the scenes into my After Effects file!
My first test: October 5th, 2023. I started with this one because I was inspired by a lot of fun toggles on behance.
My first full run through: October 10th, 2023. As you can see in the final product above, I changed quite a bit from the original plan!
Project Brief: Create a series of four micro-animations that incorporate at least two of the principles of motion, each. The goal of this project is to practice bringing a visually cohesive set of UI elements to life with fluid motion. This is meant to be a silent study of two state changes and two loading or progress indicator animations.
Create your UI elements to fit together as a visual set. Then focus on how highlighting timing (and spacing) and at least one of the other 12 motion principles can infuse your elements with life.
Create your UI elements to fit together as a visual set. Then focus on how highlighting timing (and spacing) and at least one of the other 12 motion principles can infuse your elements with life.