For readers of the INKR Comics mobile app when waiting for the app to launch, the new launch screen animation masks the app loading time by giving them a lightweight, fun, and delightful piece of media to consume. It also establishes user’s expectations, by building an impression of the INKR brand’s approachable and quirky nature.
A week before the launching of the INKR Comics mobile app, in 3 days, I managed to come up with a concept and execute it in a frame-by-frame animation style.
Concepts & Ideation
INKR Comics has been in the making for more than a year and now is approaching its launch day. It was a hectic time and we were scrapping to pull everything together, and launch screen animation wasn’t the top of the priority. But every time we open the app, we were bugged by the launching screen. It was boring, soulless and it just did not do the app justice at all. We care deeply about the experience of the app, and this is something we would be unable to let go of.
Defining scope and constraints
The first thing that I have to do is figuring out the scope and requirements for my tasks. I sat down and try to think about the launching screen from a user’s point of view.
Every time user opens the app, the launch screen is the first thing they see. As a user, when opening the app, I would want to quickly make use of the app’s functionality. For me. anything in between is a hindrance.
Therefore, the challenge for me with this task is getting the right balance between creating a launching screen that’s not too stale but at the same time not too boring.
The launching screen would also serve the second purpose of masking the loading time for the app. It takes about 5-7 seconds to populate the data for the app’s home feed, so the duration of the launching screen should also occupy that much window of time.
Then I started to think about the concept that I want to take. INKR stands for INK Revolution – we aim to revolutionize the way the current comics industry work and making comics universally accessible. The ink concept is a strong lead here and would be very straightforward to execute too.
To get the launching screen animation in the app, I need to make the animation in Adobe After Effects and export it to LottieFiles.
Executing the concept
I quickly made some draft keyframes in Figma and preview them using Figma’s prototype tool to better visualize how it would look and feel.
I came up with 3 options:
The team got together and discussed these options. In the end, we picked the third one. The concept was agreed upon and I set out to create the full animation at 15 frames per second. As ink moves in a fluid-like fashion, I felt like it would not be possible to capture it with simple transitions. This, coupled with the fact that this is a comics app, and comics being hand-drawn and authentic, I decided to animate it manually by drawing frame by frame.
After putting the frames into After Effects and looking at the result, we feel that the low frame rate would not be satisfying enough, so I spent 1 more day to make the animation smoother – at 30 frames per second.
Outcomes and lessons
The final launching screen looks like this.
We were overall satisfied with the result. It is fun, playful, and meaningful. It also feels light and quick. And although not part of the requirements, we figure that it would also serve our video marketing materials well in the future.