drag

кейс

Endless letter

«Бесконечное Письмо» — лендинг, созданный в рамках проекта #СтраницыПобеды. Он погружает в атмосферу архива военных лет — виртуальных фронтовых треугольников. Теперь познакомиться с самыми важными строками из жизни того времени может каждый.

endlessletter.com
задача

Разработать сайт к 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
Начало работы

«Письма с фронта — это трагично, эмоционально и правдиво: история войны из самых первых рук. Как ответственные за дизайн и разработку сайта, мы хотели создать необычный пользовательский опыт на сайте» — Денис Ломов, кеативный директор Red Collar.

Расположили письма в 3D-
пространстве для полного
погружения в историю.

Перемещение в пространстве и времени

Сменяющие друг друга на сайте «треугольники» отсортированы по году написания, это создаёт ощущение непрерывного полотна истории. Письма выводятся вместе с непрерывным музыкальным сопровождением и с заданным набором объектов. При открытии каждого «треугольника» пользователь может прочитать короткую цитату с авторской иллюстрацией, узнать имя автора и его судьбу, если она известна.

Проработали необычный пользовательский опыт на сайте — письма выполняют роль «кнопок». При наведении виртуальному объекту присваивается конкретное письмо. Выводятся они случайно, но без повторенией. Каждый раз вас ждёт новая история.

Сайт собран на WebGL
из подлинных отрывков
фронтовых треугольников.

Естественность работы частиц

Для создания атмосферы придумали систему частиц для писем. Каждая из них обладает определенным «сроком жизни». Чтобы их движение было натуральным, действовали по особым алгоритмам, например, для снега и пламени использовали математические алгоритмы турбулентности.

Игра света и пламени

Чтобы придать жизни сценам, применили разные виды подсветки. На фоне дождя можно заметить вспышки молний, у пламени оранжевая подсветка, а у пуль — эффект прожекторов, которые выходят снизу.

На сайте идёт дождь и снег,
летают светлячки, видны
пулемётные очереди, искры
пламени и силуэты людей.

Доведение «треугольников» до идеала

Пришлось приручать углы «треугольников», которые сначала не хотели поддаваться. Всё потому, что это разные плоскости, они ведут себя как отдельные объекты. Из-за того, что углы находятся настолько близко друг другу, возникла проблема наложения слоёв.

Для каждого угла тщательно подбирали координаты. Например, делали «сгиб» не на 180 градусов, а на 179,999. Довели «треугольники» до идеала работой с тенями, чтобы избежать появления щелей.

Музыкальная история

Саундтреки специально для проекта написал композитор Максим Макарычев, участник группы On-The-Go и Sirotkin. При открытии письма две мелодии продолжаются с предыдущего места. Так их не приходится слушать заново, складывается «бесшовная» история.

технологии

Three.js

GSAP

Webpack

Rollup

отзыв

Кирилл Карнович-Валуа
Кирилл Карнович-Валуа
Креативный директор и основатель
RT Creative Lab

Не зря все проекты Red Collar регулярно отмечаются наградами на главных диджитал премиях мира как Webby, Awwwards, FWA. С ребятами очень интересно было работать над проектом Бесконечное Письмо: Веб-версия. Это был очень креативный процесс — из идей и задач родился проект с необычным пользовательским опытом и со своей особой атмосферой.

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

Humans.uz

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

Панельки

Мобильная игра для МегаФона: советская эстетика, пиксель-арт и любовь к ретро

Сколково Парк

Разработка сайта, интеграция 3D-модели и VR-тура для делового квартала

связаться

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

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

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