In this case study, Zajno Studio and creative developer Andrew Encharm share references, early concepts, and details of the work on developing the website.
Brief
When the 360learning team reached out to us to present their new project, we immediately realized this was an opportunity to create something unique, creative, vibrant, modern, and with a pinch of madness—just the way we like it. After all, Gentle Rain is a project designed to revolutionize the process of learning soft skills in the most groundbreaking way. As the company’s CEO, Nick, put it, acquiring some corporate skills is unnecessarily slow and frustrating. But what if years of learning could be turned into days with the help of AI?
This idea sounded bold enough that we simply couldn’t stay on the sidelines.
Searching for key visuals
When starting work on branding and the website, we were looking for a way to reveal the product in a non-trivial manner, standing out from the sea of similar designs. Most AI websites had a similar dark color palette with glowing gradient elements, and we wanted to avoid this image and create something alternative. Moreover, the product at its core had no associations with dystopian concepts; its goal is to improve soft skills for anyone who is ready to engage in self-education or test their skills through role-playing.
Given that AI is still a relatively new technology for the mass market, we drew an analogy with the dawn of the personal computer era in the 80s and 90s, which transformed the world and human life in the same way that AI now and in the future will have a huge impact on the development of humanity and its work. A mix of retro vibes and modern design emerged. To emphasize the contrast of times within the craft, we used AI to modify our graphics and stock photos.
One of our main goals became the issue of uniqueness. We wanted to create a distinctive image for AI. The name “Gentle Rain” worked in our favor, evoking a strong association with nature and warmth. Based on this, all we had to do was combine the remaining elements: the user and the technology. Thus, we derived three main visuals that we used as a foundation: the human, nature, and computers (AI).
Logo development
In terms of meaning, we drew inspiration from several key images: learning and growth, which we reflected through the idea of the mind’s labyrinths. The name Gentle Rain guided us toward the concept of ripples on water. During our analysis of the concept, we also touched upon ideas from Simon Sinek’s book Start with Why, as its principles align well with the notion of intentional learning.
Colors
When choosing the color palette, we were guided by the name Gentle Rain and the pleasant emotions it evokes, paired with natural imagery—such as the warm orange of the sun, the soft blue of the sky, and earthy tones of soil and sand.
Design Concept
For the website design, we drew inspiration from a variety of vintage posters and print materials, blending these with contemporary design solutions.
Early concepts:
One of the first prototypes that made it to production:
Creation of 3D Graphics
For one of the sections, our team developed and prepared a 3D character model, which was later used as the basis for subsequent video generation using Runawayml.
Use of AI
The generation process with Runawayml is minimally controlled, and the same prompt could yield completely different results. To achieve consistency, we used material that would look the same regardless of other factors, such as composition and what happens in the frame.
Of course, there were hundreds of unsuccessful versions:
Development
Initially, we planned to create the website on Webflow, adding effects using no-code solutions like Unicorn.studio. This platform allows you to create impressive no-code visual WebGL effects with the ability to quickly integrate them into projects on Framer, Webflow, or custom-coded websites. It was here that we first attempted to implement the hero section.
We were impressed by the functionality of this tool, but although the developers have significantly improved it since, during the development of Gentle Rain, we worked with one of its earliest versions, and the product was still very young. This created some limitations for us: for example, backward compatibility and integration with other libraries, such as GSAP. There was also no ability to combine different effects, like light flares and displacement. Another issue was the performance of the animation. We were quite ambitious about the final result.
All of these factors, along with our desire to push the boundaries, led us to move towards a fully custom WebGL solution. However, we don’t regret our decision to be pioneers in using Unicorn.studio as a research tool. It’s quite possible that working with Unicorn.studio now would be completely different, so we’ll definitely return to this tool in the future, and we are following its development with great interest.
We wanted to create something truly fresh, as the fluid simulation effect had already been used on many websites. So, we brought in creative developer Andrew Encharm, who started building a water effect using WebGL from scratch, following a few key principles: the effect should fit the overall concept of the website, be non-cliché, and for it not to lag 😀
After several experiments with different approaches, we took a rather hardcore technique with simulating dispersed caustics for lighting. This method involves calculating the physical model of light hitting the water surface and focusing on the bottom. It was the caustics combined with dithering that created this gentle effect, which we couldn’t achieve working with no-code tools. We also worked on animation performance: Andrew created three versions to ensure that users would always experience smooth animation at 60 fps on different devices.
Integrating the new animations into Webflow was not difficult, but it was a time-consuming process. Rendering some elements was transferred to WebGL, which required replicating the behavior of HTML elements on the GPU while maintaining the flexibility to tweak them in Webflow. Technically, it’s a simple process, but it took a considerable amount of time, which is important to consider if you’re working with tight project deadlines.
Conclusions
Working on the Gentle Rain project was an interesting exploration of finding a balance between creating a commercial project that meets the client’s needs and making it visually engaging from a design perspective. We received positive feedback from the client, and at the same time, the website was featured in design collections and received awards on design platforms.
This project was also valuable to us for several reasons:
- the collaborative and often parallel work between the designer and the creative developer in the search for ideas, solutions, and references;
- gaining new experience in integrating WebGL into Webflow;
- the successful integration of AI tools.
Many aspects of what we considered an experiment in this project are things we plan to incorporate into future work. And, of course, we will continue to seek that sweet spot where modern technologies meet nostalgic vibes, resulting in innovative solutions.