drag

кейс

Save Whales

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

save-whales.com
ко всем работам
задача

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

клиент

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

отрасль

Промо-сайт

год запуска

2019

что сделали

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

награды

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

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

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

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

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

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

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

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

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

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

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

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

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

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

технологии

JavaScript

GLSL

HTML5

WebP

WebGL

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

MegaLabs

Дизайн-система и frontend-разработка платформы для проведения вебинаров

EOS app

Мобильное приложение для компании, работающей с кредитной задолженностью

Росбанк

Редизайн основного сайта и UI-кит для одного из крупнейших российских банков

связаться

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

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

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