Animations and Movement
Animations and Movement
Animations are a fun way to challenge myself through motion design, to find areas where movement could be incorporated, and to continue learning.
Bubble Animations
Exploring Creativity through animation.
I wanted to design and animate something I thought would be a challenge for me. Bubbles can be challenging because of their transparency, depth, and light interaction. But they call also be very forgiving when they are not designed in a setting.
Discovering how to create lightness and subtle yet interesting movement was an iterative process.
Do I think I got it perfect? Of course not, but it was a good challenge and a fun process.
Brand Loading Screen
Who says loading screens have to be boring?
Gymbox needed a loading image. I was inspired by loading icons I had seen where the logo was manipulated, broken and built up, rotated, etc.
Gymbox’s branding design is filled with gradients that are seen in the logo. To keep this theme, I experimented with the gradients. Finding ways they can interact with each other to make new shapes appear. I wanted this design to be interesting, so you didn’t really mind that you were watching a loading screen.
How we got here ^
One early iteration was inspired by tetris, where pieces of the logo would fall into place and break down again. Another, similarly, had elements fly into place and glow when the logo was completed.
While these ideas were fun, they were not continued with. The logo would need to take up much more space on the screen, than a typical loading image size, for it to be properly engaging. Having small pieces fly to the center on any laptop computer would most likely distract the viewer more than anything.
The loading image you see here is able to loop smoothly, it is visually engaging, and it’s function is clear.
Verification
Many apps take information they have to verify. They will typically have an image or animation when this process is started, to inform the user.
This is my take on a verification animation when there is lots of data/info that needs to be taken into account.
Feature Demonstration
Many apps will demonstrate different features on their app that the user can expect to find. This animation is how an app, that has a reject, accept, or inspect swiping features, could show that feature. The feature is shrunken down and using icons to show the types of data that may be displayed.