Кейс: как создать сайт, который получит Webby

Сайт digital-агентства Red Collar под названием Save Whales получил интернет-Оскар Webby в категории Green. О том, как пришла идея создать сайт на эту тему, как строили процесс работы в создать сайт на эту тему, как строили процесс работы в жёстко ограниченных временных рамках, и какие технологии использовали в разработке — читайте ниже.

save-whales.com

Бэкграунд

Save Whales — некоммерческий проект, созданный по инициативе нашей команды. Мы стараемся заботиться об окружающей среде, ведём раздельный сбор мусора, и считаем, что проблемы планеты — наши проблемы. Поэтому и решили уделить внимание теме исчезновения китов.

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

И эту задачу нам уже удалось выполнить. Профессиональное сообщество высоко оценило проект: он стал «Сайтом дня» на международных площадках Awwwards, FWA и CSS Design Awards. Наше сообщение попало в сердца людей: проектом делятся, дают обратную связь. Мы верим, что каждый из пользователей задумался о том, как его привычки влияют на окружающую среду и, возможно, последует советам, которые мы дали.

Любимые детали

Самая впечатляющая вещь на сайте — это момент, когда кит выплывает на страницу. Включаются звуки на фоне, все движения очень плавные. 3D-модели настолько реалистичны и объемны, что эта сцена цепляет пользователя на эмоциональном уровне. Уровень реализации — уже повод для гордости, но особенно круто, что мы смогли сделать это в очень сжатые сроки. От идеи до запуска сайта прошло 14 дней.

Ещё один эффектный момент — слайдер на главной странице, который создает ощущение больших океанских волн. Чтобы место швов между фотографиями не было видно, добавили эффект displacement map — края изображений размыты и перетекают за движением слайда. Также переходы между страницами оформили в виде прибрежных волн: их отрисовали вручную и создали покадровую анимацию.

Сложности в процессе

Самая сложная задача в проекте — создать 3D-модели каждого вида китов. Все модели разработаны нами с нуля. Для этого дизайнер изучил массу фотографий и по ним детально смоделировал каждого кита. Далее разработчик завернуть всё это в WebGL.

Ограниченые сроки

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

Новая парадигма

Главный факт, который мы узнали в процессе — это то, что мы можем создать такой крутой проект всего за две недели. А как подобный экстрим сплочает команду — вы бы знали!

Навигация

Сайт очень простой, структура сама по себе понятна — особые решения в навигации не требовались. Для удобства и лучшего UX мы добавили несколько фишек. Первое, что видишь заходя на сайт — это слайдер. Для него разработали анимацию, которая передаёт эффект волны. При переходах фотографии искажаются и плавно без швов перетекают друг в друга — всё для полного погружения. Слайды можно скроллить и перетаскивать: привычки и особенности устройств у пользователя могут быть разными.

Далее открыв страницу с китом и пролистав её до конца не обязательно возвращаться к меню: в футере разместили ссылку для перехода на следующую страницу. Такие детали и влияют на общее впечатление от сайта.

Технологии

3D-модели китов создавались в Blender 2.8. Основная часть фронтенда написана на JavaScript, слайдер и 3D-модели реализованы на GLSL. Бекенда в проекте нет.

Главная задача во фронтенде здесь — оптимизация сайта. Страницы должны быстро загружаться, анимации работать на любых устройствах. Поэтому в проекте использовали современные форматы изображений, такие как webp: они сжимают файлы без ущерба качеству. Также применили фоновую загрузку медиа ресурсов, переход между страницами происходит очень быстро. Чтобы анимации не загружали браузер перенесли их в HTML5 Canvas — часто изменяющиеся SVG анимации тяжело рендерятся.