Tula mics
Промо-сайт для Tula — авторских микрофонов от лидера группы Brazzaville
кейс
Save Whales
Сайт с подробной информацией о том, как помочь китам, находящимся на грани вымирания
задача
Привлечь внимание к экологической проблеме и напомнить, что помочь морским животным может каждый. Чтобы тема откликнулась у пользователей, сделать китов и «происходящее» на сайте реалистичным. Время на создание сайта — всего 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
Золотой Сайт
1 место, Лучший сайт некоммерческой или благотворительной организации, 14 декабря 2020
Tagline Awards
1 место, Лучшее использование 3D, 10 октября 2019
Рейтинг Рунета
1 место, Лучший сайт на иностранном языке, 1 октября 2020
Ключевая идея
Собрали на страницах подробную информацию о пяти видах китов и советы, как помочь этим млекопитающим. На сайте сделали их «живыми» с помощью передовых технологий и эффектов: каждого кита показали в виде 3D-модели, добавили анимацию и звуки.
Переход между страницами в виде волны создан вручную: для этой анимации отрисовали 66 кадров.
Оптимизация сайта
Страницы должны быстро загружаться, анимации — работать на любых устройствах, тогда пользователь легко познакомится с информацией в полном объеме. Чтобы анимации не перегружали браузер, перенесли их в HTML5 Canvas и применили фоновую загрузку медиа ресурсов.
Страницы сайта сопровождает звуковая дорожка с записью пения китов.
Широкий охват
В первые две недели после запуска проектом поделились более двух сотен людей в социальных сетях. После публикации на международных площадках, его посетили более 30 тысяч пользователей. Издания об экологии и веб-дизайне со всего мира брали интервью и выпускали материалы о проекте. Одним из первых статью опубликовал Communication Arts — крупнейший в мире арт-журнал с историей в 60 лет, затем и британский журнал Net Magazine.
Реалистичная модель кита
Пересмотрели сотни изображений и сайтов, чтобы найти реальную фотографию северного гладкого кита, ведь на всех картинках в поиске он выглядит по-разному. Поэтому, возможно, 3D-модель не полностью соответствует действительности — в то же время у нас могло получиться и самое реалистичное изображение в интернете.
Разработка 3D-моделей
Все 3D-модели разработали с нуля: изучили массу фотографий, по ним детально нарисовали каждого кита и внедрили на сайт с помощью WebGL. Для ещё большей реалистичности добавили на страницы звуки, которыми общается каждый из видов. Животные «выплывают» на экран, пользователь может поворачивать их и рассматривать.
Сжатые сроки разработки
Создали сайт с нуля за 14 дней: от идеи до запуска. Над проектом постоянно работал один дизайнер и один разработчик, другие члены команды решали конкретные задачи: сайт параллельно создавался всеми отделами. Например, для ускорения процесса 3D-дизайнер разработал одну полноценную 3D-модель кита, а остальные детально прорабатывались уже на её основе.
технологии
JavaScript
GLSL
HTML5
WebP
WebGL
смотрите также
связаться