3D Aanimation
The use of 3D design elements in websites has become more and more popular trend in recent years, engaging users on a deeper level.
Incorporating 3D design elements in websites can be done in various ways. For this time I rendered and animated them for a short storytelling on a hero section. 3D animation can add depth to the visual and enhance user experience which leads to the increase of conversion rate.
For the animation, I conceptualized the message of the hero section and created a storyboad for each scene in Procreate. I made sure that the scene is not too long or complicated.
From rendering to animating, I used Blender. I appreciate the generosity of the founder for providing this wonderful software for free to designers. I rendered and organized all my design elements as neately as i could. To prepare them for the animation, I had to properly group them using 'parenting', 'empty object' etc. and adjust the origin of the object, considering the direction they should rotate or move, and which part should bend or distort.
To pose the hand as designed in the storyboard and animate them, I set up the bone structure, connected them with skins, and applied rigging.
With all elements ready for animation, I created the rotations, transitions, movements, and setting up the loop. While monitering the results, I added the lights and fine-tuned material color and texture. Additionally, optimizing video settings is crucial to ensure the file remains lightweight without compromising too much on quality and clarity."
The optimized video has been implemented on the web page. Using CSS media query 3D animation video is harmoniously placed in both desktop and mobile layout.