Experimental Practise
Microsite Design
Reflection
Creative Exploration
I took an experimental approach to both design and content, using tools like ChatGPT for narrative development and AI-powered software such as Bing Image Creator, Runway AI, and Photoshop’s Generative Fill to quickly prototype and refine visual styles. This project also served as a personal challenge to grow my creative skillset- I pushed myself to learn new tools like Webflow for web design and Blender to explore 3D modelling, animation, and visual effects.
Process
Building the Jellyfish in Blender
Venturing into new tools like Blender and Webflow allowed me to expand my skill set in 3D modelling and web design.
1. Modelling the base structure-
I began with a simple sphere, adjusting geometry to form the bell of the jellyfish. I used extrusion techniques to create the tentacles and added surface detail using subdivision and sculpting tools.
2. Organic shaping with brushes
using the sculpting brush tools- I refined the bell shape and added variation to the tentacles. The brush intensity visualization helped identify which parts would deform most with movement.
3. Particle System- To create the flowing jellyfish tentacles and internal motion, I used a particle simulator. This multiplied and added a dynamic, pulsating quality—essential for conveying life and movement.
4. UV Mapping & Texturing-
I unwrapped the jellyfish mesh and created a custom texture in Photoshop. Then I applied the texture using geometry nodes to add translucency, depth, and a glowing effect. Subsurface scattering and emission were crucial in achieving the final soft, luminous look.
5. Lighting the Scene-
I lit the scene with area lights and a volumetric fog setup to simulate underwater lighting. The glowing jellyfish effect came from combining emission shaders with subtle bloom and HDRI backlighting, helping it stand out in the murky depths.
Process
Webflow: Animations, Parallax, Unmask and Video Transitions
This was my first time using Webflow, so I focused on learning its animation capabilities. I used Figma for wireframing and layout planning, then transferred everything into Webflow, refining structure and interactions through user testing.
1. Exporting for Web Use- Once the jellyfish animation was complete, I exported it to Spline for Webflow integration. In Spline, I added cursor-follow animations and interactivity, allowing users to "follow" the jellyfish with their movement- making it feel alive. Additionally, I used LottieFiles to create a lightweight, looping motion animation for the hero section of the page.
2. Enhancing Immersion Through Motion and Scroll Effects- Implemented parallax scrolling and unmask transitions to smoothly reveal content blocks- these helped maintain a serene and fluid user experience. To deepen user engagement, I added a full-screen looping video at the page's end, providing a lasting impression.