drag

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

7
45
11
3
35
5

case

Save Whales

This is a website with detailed information on helping endangered whales.

save-whales.com
task

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 should look more realistic. Only 14 days for the implementation.

client

Non-profit project

industry

Promo site

year

2019

deliverables

Front-end development
Back-end development
Design
3D

honors

The Webby Awards
Webby , April 28, 2020
CSS Design Awards
Website of the Day, July 19, 2019
Awwwards
Site of the Day, July 26, 2019
Awwwards
Mobile of the Week, July 26, 2019
The FWA
FWA of the Day, August 29, 2019
The Webby Awards
Mobile SOTY, Nominated, December 01, 2019

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

Key idea

The web pages contain 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 sounds effects.

The website optimization

Pages should load quickly, animations should work 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.

The pages of the site are accompanied by an audio track with a recording 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.

technologies

JavaScript

GLSL

HTML5

WebP

WebGL

see also

Lincor

An eCommerce platform for Lincor brand of wrist watches

Medisorb

An innovative site for Medisorb, a large pharmacy manufacturer

Squilla Fund

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

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.ru You made a mistake, but it’s fine. We all do. Enter a valid e-mail, please

By submitting this form you agree to our privacy policy.