How I Designed Car Parkour Game Loading Animation with Figma

This task was about creating a loading animation. I designed a loading animation for a browser-based car racing game. To achieve a smooth transition in this animation, I designed 37 scenes, each rotating 10 degrees. Then, I changed total animation time and added percentage info for 5 sec and 10.8 sec animation. The percentage info isn't necessary for 3 sec animation, because it is too short. If the percentage info is given for too short animations (e.g less than 5 sec), it could be distracted for user.

Scene Design

Animation

Prototype Video V.1-Slow Speed Without Percentage

Prototype Video V.2 - Slow Speed with Percentage

Prototype Video V.3 - Medium Speed with Percentage

Prototype Video V.4 - Fast without Percentage

Prototype Video V.5 - Slow with Percentage and Fading Smoke

Prototype Video V.6 - Medium Speed with Percentage and Fading Smoke

Prototype Video V.7 - Fast and Fading Smoke

#ui076 #uix101 #DesignChallenge #design #productdesign  #visualdesign #feedback #dailyuichallenge #portfolio #dailyui #design #figma #ui #ux #animation #loadinganimation #UIUXDesign #uxdesign #interactiondesign #motiondesign #carracinggame #browsergame #loadingpage #loadingindicator #UIUX #userinterface #userexperience  #graphicdesign