Тайныгалактики
Космическая мобильная игра для МегаФона: киберпанк, поп-культура и сай-фай
кейс
Endless letter
«Бесконечное Письмо» — лендинг, созданный в рамках проекта #СтраницыПобеды. Он погружает в атмосферу архива военных лет — виртуальных фронтовых треугольников. Теперь познакомиться с самыми важными строками из жизни того времени может каждый.
задача
Разработать сайт к 75-ой годовщине Победы для RT Creative Lab — создателя масштабных цифровых образовательных и исторических проектов.
На основе отрывков из настоящих фронтовых писем и иллюстраций дизайнеров Школы дизайна РАНХиГС собрать единую историю на одной странице. Погрузить пользователей в атмосферу времён Великой Отечественной войны.
клиент
RT Creative Lab
отрасль
Промо-сайт
год запуска
2021
что сделали
Дизайн сайта
Frontend-разработка
Backend-разработка
награды
The FWA
FWA of the Day, 29 мая 2021
CSS Design Awards
Website of the Day, 1 июня 2021
Awwwards
Site of the Day, 4 ноября 2021
Awwwards
Developer Award, 4 ноября 2021
Cresta
Gold, Micro-site, 11 октября 2021
Cresta
Bronze, Digital, 11 октября 2021
Clio Awards
Microsite, 15 декабря 2021
C2A
Best of Best, 16 декабря 2021
Рейтинг Рунета
3 место «Промосайты», 15 октября 2021
Золотой Сайт
1 место, Лучший одностраничный сайт или лендинг, 21 марта 2022
Золотой Сайт
1 место, Лучший спецпроект СМИ, 21 марта 2022
Начало работы
«Письма с фронта — это трагично, эмоционально и правдиво: история войны из самых первых рук. Как ответственные за дизайн и разработку сайта, мы хотели создать необычный пользовательский опыт на сайте» — Денис Ломов, кеативный директор Red Collar.
Расположили письма в 3D- пространстве для полного погружения в историю.
Перемещение в пространстве и времени
Сменяющие друг друга на сайте «треугольники» отсортированы по году написания, это создаёт ощущение непрерывного полотна истории. Письма выводятся вместе с непрерывным музыкальным сопровождением и с заданным набором объектов. При открытии каждого «треугольника» пользователь может прочитать короткую цитату с авторской иллюстрацией, узнать имя автора и его судьбу, если она известна.
Проработали необычный пользовательский опыт на сайте — письма выполняют роль «кнопок». При наведении виртуальному объекту присваивается конкретное письмо. Выводятся они случайно, но без повторенией. Каждый раз вас ждёт новая история.
Сайт собран на WebGL из подлинных отрывков фронтовых треугольников.
Естественность работы частиц
Для создания атмосферы придумали систему частиц для писем. Каждая из них обладает определенным «сроком жизни». Чтобы их движение было натуральным, действовали по особым алгоритмам, например, для снега и пламени использовали математические алгоритмы турбулентности.
Игра света и пламени
Чтобы придать жизни сценам, применили разные виды подсветки. На фоне дождя можно заметить вспышки молний, у пламени оранжевая подсветка, а у пуль — эффект прожекторов, которые выходят снизу.
На сайте идёт дождь и снег,
летают светлячки, видны
пулемётные очереди, искры
пламени и силуэты людей.
Доведение «треугольников» до идеала
Пришлось приручать углы «треугольников», которые сначала не хотели поддаваться. Всё потому, что это разные плоскости, они ведут себя как отдельные объекты. Из-за того, что углы находятся настолько близко друг другу, возникла проблема наложения слоёв.
Для каждого угла тщательно подбирали координаты. Например, делали «сгиб» не на 180 градусов, а на 179,999. Довели «треугольники» до идеала работой с тенями, чтобы избежать появления щелей.
Музыкальная история
Саундтреки специально для проекта написал композитор Максим Макарычев, участник группы On-The-Go и Sirotkin. При открытии письма две мелодии продолжаются с предыдущего места. Так их не приходится слушать заново, складывается «бесшовная» история.
технологии
Three.js
GSAP
Webpack
Rollup
отзыв
Кирилл Карнович-Валуа
Креативный директор и основатель
RT Creative Lab
Не зря все проекты Red Collar регулярно отмечаются наградами на главных диджитал премиях мира как Webby, Awwwards, FWA. С ребятами очень интересно было работать над проектом Бесконечное Письмо: Веб-версия. Это был очень креативный процесс — из идей и задач родился проект с необычным пользовательским опытом и со своей особой атмосферой.
смотрите также
связаться