Responses by Red Collar.

Background: Save Whales is a noncommercial project created at the initiative of our team members. We try to do our best to care about the environment. Earth’s problems are our problems. That is why we decided to raise awareness of whales going extinct.

The site’s primary audience is people from the digital community, designers and developers from all over the world. We wanted to show that all of the professional abilities people have can be used to attract attention to issues like this. Save Whales is our digital statement on the topic that our team is concerned about: we want to see whales stay in nature and not end up only as our 3-D models.

And this task has become something we’ve accomplished. The professional community has highly praised the site: it became Site of the Day on Awwwards, Website of the Day by the CSS Design Awards and FWA of the Day by FWA. Our message got through right to people’s hearts: they shared the project and gave us feedback. We hope that every user paused to think about how their daily habits affect the environment and considered following the advice we’ve given.

Favorite details: The moment when a whale swims onto the page is one of the most impressive things on the website. Background sounds are on, and all the movements are smooth. The 3-D models are realistic to such an extent that this scene catches the user on an emotional level. The level of implementation itself is a reason to be proud, but what is especially cool is that we could do this in a hypertight time frame: it took us fourteen days from conceiving the idea to the site’s release.

Another spectacular detail is the main page slider that creates an atmosphere of big ocean waves. To hide the joining edge between the pictures, we added the displacement map effect—the edges are indistinct and flow with the slide. The transitions between pages resemble seashore waves: they were drawn by hand and turned into a frame-by-frame animation.

Challenges: The most complex task in the project was to create 3-D models of each of the whale species. Every model was designed by us from scratch. To do this, the designer thoroughly examined a lot of pictures to make a detailed model of each species that later were wrapped in WebGL at the next stage.

Time constraints: Initially, we approached the project being fully aware of the deadline, so the limitation worked as an advantage. We created the whole concept in the first few days and didn’t wander from it. Sure, there were some setbacks: we didn’t have time to work on complex solutions tooled specifically for this project, so developers relied on their previous experiences and used things that had been made by us in the past.

New paradigms: The main thing that we’ve learned from this process was that we were able to make these kinds of projects in such a short time period. Can you imagine how it brings the team together?

Navigation structure: The website is pretty straightforward. The structure is simple; its navigation didn’t need any specific solutions. But for the sake of usability and better user experience, we’ve added several things. The first thing viewers see on the site is the slider. The animation we developed gives it a wave effect. During transitions, pictures get distorted and smoothly flow into one another to help users dive deeper into the experience. Sliders are scrollable and draggable; devices and habits may differ from person to person.

Once visitors scroll to the end of a whale’s page, they don’t have to go to the menu: a link to the next page is right at the bottom. Details like this are what defines the general impression of a website.

Technology: We used Blender 2.8 to design the 3-D models. The front end was mainly written using JavaScript. The slider and 3-D models were implemented using OpenGL Shading Language. The project has no back end.

The main task of the front end was high optimization so that the pages would load fast and animations would work well on any device. For this, we’ve used image formats like .webp; they compress the file with no loss in quality. For the same reasons, we implemented a background media load to keep transitions between pages very fast. That way, the animations don’t overload the browser.