drag

case

Save Whales

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

save-whales.com
back to all works
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 have to look more realistic. To implement the project within 14 days.

client

Noncommercial

industry

Promotional

year

2019

deliverables

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

honors

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.

technologies

JavaScript

GLSL

HTML5

WebP

WebGL

see also

PUBG

A customizable website for an online game developer and their first game in PUBG Universe

Skolkovo for business

Development and 3D-modeling for the Skolkovo Park business district website

VitaKey

A corporate website we created back in 2019 for a FoodTech company from Washington

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

  • 224 W 35th St, Ste 500 PMB 141,
  • New York, NY 10001, USA

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

8
65
13
4
36
8

We use cookies to collect anonymous data and make our website even better