REVE Chat Logo Pre-loader

REVE Chat used a default pre-loader for the loading screen. However, as a brand, they sought a customized pre-loader that would reflect their personal branding and offer users a more personalized experience. I was assigned the task of creating a preloader animation that represents the personal branding of REVE Chat.

I initiated brainstorming sessions to generate animation ideas and collaborated with the product team. After several discussions, we decided to use the preparation of our logo symbol as the basis for the pre-loader animation, aligning it closely with the brand identity of REVE Chat.

REVE Cha logo comprises two parts: the typographic element and the logo symbol. For the preloader animation, I chose to focus on the logo symbol. I prepared a layered Illustrator file that could be easily imported into After Effects, facilitating the animation creation process.

Following that, I created a baseline for the loader, integrating a chat animation concept with our symbol. This served as the foundation for the pre-loader animation, combining the recognizable chat element with the distinctive symbol from our logo.

After establishing the base loader, I proceeded to create a three-dot animation to convey the loading progress. This animation, incorporating the recognizable chat concept and our symbol, was then finalized to ensure a visually appealing and engaging pre-loader for the loading screen.

Now, it's time to create a JSON file to share with developer colleagues. JSON files are lightweight and aid in reducing loading time issues. This file will encapsulate the pre-loader animation data, making it easier for developers to seamlessly integrate it into the REVE Chat application.

I utilized the Bodymovin plugin for After Effects to create the JSON file. This plugin offers extensive customization options, making the process of generating a JSON file for the pre-loader animation straightforward and efficient. It provides the necessary data for developers to implement the animation seamlessly within the REVE Chat application.

Collaborate with me! Drop a line at rayhannasirinfo@gmail.com or Visit at -rayhannasir.com

Follow me for more amazing designs: Instagram || Behance

Don't forget to like and share your valuable feedback in the comment section.