Barcelona Realty Group
A site with a user-friendly catalogue for a real estate agency
case
Save Whales
A non-commercial project created to raise awareness of the endangered whale species
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
let us know
we craft award-winning digital experiences that reach both minds and hearts of people
8
65
13
4
36
8
