drag

кейс

Save Whales

Сайт с подробной информацией о том, как помочь китам, находящимся на грани вымирания

save-whales.com
задача

Привлечь внимание к экологической проблеме и напомнить, что помочь морским животным может каждый. Чтобы тема откликнулась у пользователей, сделать китов и «происходящее» на сайте реалистичным. Время на создание сайта — всего 14 дней.

клиент

Некоммерческий проект

отрасль

Промо-сайт

год запуска

2019

что сделали

Frontend-разработка
Backend-разработка
Дизайн сайта
3D-модели
Иллюстрация

награды

The Webby Awards
Webby , 28 апреля 2020
CSS Design Awards
Website of the Day, 19 июля 2019
Awwwards
Site of the Day, 26 июля 2019
Awwwards
Mobile of the Week, 26 июля 2019
The FWA
FWA of the Day, 29 августа 2019
The Webby Awards
Mobile SOTY, Nominated, 1 декабря 2019

Переход между страницами в виде волны создан вручную: для этой анимации отрисовали 66 кадров.

Ключевая идея

Собрали на страницах подробную информацию о пяти видах китов и советы, как помочь этим млекопитающим. На сайте сделали их «живыми» с помощью передовых технологий и эффектов: каждого кита показали в виде 3D-модели, добавили анимацию и звуки.

Оптимизация сайта

Страницы должны быстро загружаться, анимации — работать на любых устройствах, тогда пользователь легко познакомится с информацией в полном объеме. Чтобы анимации не перегружали браузер, перенесли их в HTML5 Canvas и применили фоновую загрузку медиа ресурсов.

Страницы сайта сопровождает звуковая дорожка с записью пения китов.

Широкий охват

В первые две недели после запуска проектом поделились более двух сотен людей в социальных сетях. После публикации на международных площадках, его посетили более 30 тысяч пользователей. Издания об экологии и веб-дизайне со всего мира брали интервью и выпускали материалы о проекте. Одним из первых статью опубликовал Communication Arts — крупнейший в мире арт-журнал с историей в 60 лет, затем и британский журнал Net Magazine.

Реалистичная модель кита

Пересмотрели сотни изображений и сайтов, чтобы найти реальную фотографию северного гладкого кита, ведь на всех картинках в поиске он выглядит по-разному. Поэтому, возможно, 3D-модель не полностью соответствует действительности — в то же время у нас могло получиться и самое реалистичное изображение в интернете.

Разработка 3D-моделей

Все 3D-модели разработали с нуля: изучили массу фотографий, по ним детально нарисовали каждого кита и внедрили на сайт с помощью WebGL. Для ещё большей реалистичности добавили на страницы звуки, которыми общается каждый из видов. Животные «выплывают» на экран, пользователь может поворачивать их и рассматривать.

Сжатые сроки разработки

Создали сайт с нуля за 14 дней: от идеи до запуска. Над проектом постоянно работал один дизайнер и один разработчик, другие члены команды решали конкретные задачи: сайт параллельно создавался всеми отделами. Например, для ускорения процесса 3D-дизайнер разработал одну полноценную 3D-модель кита, а остальные детально прорабатывались уже на её основе.

технологии

JavaScript

GLSL

HTML5

WebP

WebGL

смотрите также

Humans.uz

Разработка, дизайн-поддержка сайта и 3D-объекты для финансового мультипродукта

Arm-auto

Простой и лаконичный сайт для производителя лакокрасочных товаров

Autonomy

Сайт, 3D модели, нейминг и логотип для онлайн-сервиса автозаймов

связаться

Расскажите о своей задаче

Мы Red Collar, а как зовут вас? Чтобы связаться, нам нужен ваш e-mail Ого, какой тяжелый файл! Больше 10 MБ ждем на hello@redcollar.ru Пожалуйста, проверьте, правильно ли написан e-mail

Нажимая кнопку, вы соглашаетесь с нашей политикой в отношении обработки персональных данных.