This project was created for my design class as a reference to assist them with their Mixed Media Project : 3D in UI. The idea was to use a 3D element in user interface and make them interact with the user's behaviour to give them an immersive experience.
For sampler, I went with a garden variety Coffee Website.
The idea of interaction is for the coffee lid to fall down and close the cup on page scroll.
Process Flow:
Initial step was to obtain a 3D model of the coffee cup. Used Adobe Dimension to take one of their preset models for this purpose.
For fine tuning and animation, exported the model in OBJ format and brought it to Maxon Cinema 4D. Applied textures, lighting and created a simple keyframe animation for the lid.
The animation was exported as a JPG Sequence and imported to Adobe Aftereffects to make a Javascript Object Notation file using the Bodymovin extension.
The JSON was imported and used in webflow. Assigned a page trigger for the lotte animation to be initiated while page is being scrolled.
Click here to see a working prototype of the website.
By doing this project the students were able to understand the concepts of Mixed Media Design. They were exposed to fundamentals of 3D Modelling, Exporting Formats, Creating a Javascript Object Notation file from Aftereffects, adding interactions to JSON files and publishing a website using Webflow.
