Save Whales

A non-commercial project created to raise awareness of the endangered whale species

back to all works

To draw attention to this environmental problem and to remind that everyone can help the marine animals. For the users to have a greater response to this topic, the whales and everything on the website have to look more realistic. To implement the project within 14 days.








Front-end development
Back-end development
Web design
3D models


The key idea

The site contains detailed information on five species of whales and some tips on helping them. The site turns them ‘alive’ with the help of some advanced technologies and effects: each whale is represented as a 3D model, accompanied by animation and sound effects.

The transition between the pages that resembles a wave was created by hand: we rendered 66 frames for this animation.

The website optimization

We wanted the pages to load quickly, and animations to work smoothly on any device, so that users could easily access all the information in full. To prevent the animations from overloading the browser, we have transferred them to HTML5 Canvas and applied background loading of media resources.

Pages of the site are accompanied by audio tracks — recordings of the whales’ singing.

Wide coverage

In the first two weeks following the launch, more than two hundred people shared the project on social networks. After the publication on international platforms, more than 30 thousand users visited it. Environmental and web design media from all over the world interviewed us and released their materials about the project. One of the first articles was published by Communication Arts, the world’s largest art magazine with 60 years of history, followed by the British Net Magazine’s publication.

The realistic whale model

We have reviewed hundreds of images and websites to find a real photo of a North Atlantic right whale, as it looks different in many images on the web. Therefore, even though the 3D model may not be completely true to life, we managed to achieve the most realistic image on the Internet.

The development of the 3D models

All the 3D models have been developed from scratch: we have studied a lot of photographs, referenced them to show each whale in detail and embedded it all on the site using WebGL. For even greater realism, we have added the sounds, which each species uses to communicate. The animals ‘float’ onto the screen, while the user can rotate and observe them.

A short development time

We created a website from scratch — from idea to launch — in 14 days. One designer and one developer worked constantly on the project, while other team members were solving more specific problems: the site was simultaneously created by all our departments. For example, to speed up the process, a 3D designer developed one full-fledged 3D model of a whale, which served as the base for other models.







see also


A bright site for Autonomy, an online car title loan provider

Squilla Fund

A site full of motion for Squilla, a fund that assists with making sensible ICO investments

Digital thinkers conf.

A bright & advanced site for the leaders of digital community

let us know

Have an idea in mind?

We’re Red Collar. And what’s your name? We actually need your e-mail to get in touch Wow, this load is way too heavy for us. Files larger than 10 MB can be sent to hello@redcollar.co You made a mistake, but it’s fine. We all do. Please, enter a valid e-mail

By submitting this form you agree to our privacy policy

we craft award-winning digital experiences that reach both minds and hearts of people