Challenge #002
To improve my animation skills I've started a side-project. It's a bi-weekly design challenge in which I give myself 8 hours to make an animated design.
The second challenge became a short flow through a made up app. After finding some inspiration and collecting my resources from Matt 'n Nat I started designing the concept. The purpose of the design was to showcase the backpacks and put more focus on the products.
I've designed the concept in Figma. It was the first time I've ever used it and it become a good tool to design with. After that I did have to export all the SVG assets to Illustrator and import those files into After Effects. It wasn't the most effective way, but I got to work with a new tool.
How I wanted to bring more attention to the products was by keeping them always visible and providing useful content at all times. The original idea was that when you select a backpack in the screen above it transitions into the screen below. Not just any transition, a 3D transition. I tried turning the 2D backback into the bigger backpack by rotating it from different dimensions, but that made things look weird. With that said I decided on leaving it out of the animation. Not only because it wasn't possible with the provided images, but also because technically it would become a big challenge.
In the screen above users would also be able to switch the colours without having to swipe. All you have to do here is tap one of the diamonds at the bottom with the desired colour and it would change colours. Due to limited time this wasn't implemented.
Swiping up the product moves you deeper into the backpack. The goal in this screen was to provide information outside of a paragraph of text. For that I took out the dimensions and combined it with the backpack images. I limited the visibility of the copy because it's a secondary focus point. To make the copy visible you can tap or swipe it into the screen.
Reflection
All in all this whole design challenge was to see how much I would be able to do within 8 hours and what alternatives I could come up with within that time to focus the design on the product. Something I also kept in mind while animating this design was to keep in mind if this would be possible in code. Since I only have experience as a front-end developer I would say yes, this is possible to develop in code.
New things I was able to practice with during this challenge were basic 3D animations and working with more content than I'm used to.
