Как нейросети и интерактивные элементы оживили сайт-памятник «Тыловики.рф»

Burkalo company

Иркутская кинокомпания, известная своими коммерческими короткометражными фильмами и рекламными роликами высокого уровня, в этом году запустила новый проект, посвящённый 80-летию Победы в Великой Отечественной войне. Проект носит название "Тыловики" и включает 9 короткометражных фильмов, рассказывающих о подвигах тыловиков, увековеченных на стеле «Город трудовой доблести». Каждый из этих фильмов будет выходить в течение года, начиная с 9 мая 2024 года и завершая 9 мая 2025 года.

Для нашей команды была поставлена задача разработать сайт, который будет рассказывать посетителям об Иркутской стеле «Город трудовой доблести», подвигах иркутских тыловиков и их вкладе в Победу в Великой Отечественной войне. Нам необходимо разместить информацию о каждом из 9 фильмов и их партнёрах. Клиент подчеркнул важность передачи атмосферы и задумки фильмов через визуальное оформление и повествование сайта, чтобы они гармонично дополняли друг друга. При этом сайт должен быть простым и не перегруженным, чтобы пользователи любого возраста могли легко разобраться, изучить историческую справку и найти нужные фильмы.

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

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

В ходе анализа и разработки дизайна мы выделили и вторую идею. Она заключалась не в плавном погружении в историческое время, а в гармоничном сочетании старого и нового времени на каждом экране, дополняя и углубляя суть через образы и фото. Именно эта идея прижилась в итоге и была согласована для дальнейшей разработки.

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

Выслушав идею от клиента, у нас сразу возник образ сайта, который состоял из коллажных черно-белых фото, которые дополнялись современной графикой и крупными шрифтами. Вот такие референсы мы предложили в качестве опорных при разработке:

Кроме того, мы понимали, что сайт не стоит делать на шаблонных блоках конструктора, разместив там какие-то картинки и текст, необходимо полностью погрузить пользователя в атмосферу при помощи анимации на протяжении всего сайта. Мы отсмотрели множество проектов на made on tilda, которые были хорошо выполнены по части анимации, но в некоторых местах она была сильно крупной и был риск потерять нить повествования и отвлечь посетителей от текста и фильмов в погоне за красотой.

Мы приступили к отрисовке прототипов, буквально взяв в руки ручку и бумагу.

Было решено взять крупную анимацию для первого экрана, чтобы с первых секунд на сайте достичь эффекта “вау” и заинтересовать к дальнейшему изучению. А в дальнейших блоках использовать нативную и еле заметную анимацию, которая будет выгодно дополнять текст и фото, а не перебивать их.

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

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

В самом начале стоит оговорить, что в процессе дизайна мы довольно сильно изменили стилистику, так что самая первая версия сайта довольно сильно отличается по атмосфере от итогового макета. Давайте посмотрим, с чего же всё началось:

Как видно, данной концепцией мы хотели передать атмосферу именно того времени, когда всё было написано от руки, использовали “советский красный” цвет и “маяковский жирный” шрифт заголовков. Преимущественно на блоках используются аналоговые предметы (карандаши, журналы, вырезки фото, пули и фотоплёнка) и тёплый свет от ламп накаливания. Нам эта концепция показалась хорошей и подходящей к проекту об истории, мы смело отправились на её презентацию!

Однако, ожидания от дизайна у клиента не сошлись с нашей первой концепцией и мы получили честный отзыв: “это красиво, но не то”. Дизайн оказался СЛИШКОМ советским и историческим, а съемочная команда хотела рассказать молодому поколению историю в новом свете, используя современные образы и эффекты, которых не увидели на сайте.

И в такие моменты самой важно задачей, которая стоит перед проджект-менеджером команды и перед самим дизайнером является раскопать всё, что только можно о текущем макете и ожиданиях от первого лица у клиента.

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

После брейна на 2 часа мы отправились по нашим любимым нейросетям за визуальными и текстовыми советами: чат GPT дал нам новые идеи для интерактива на сайт, а midjourney нарисовал нам Иркутск в стиле киберпанка, чтобы мы вдохновились и переняли что-то с этих концептов.

Одну из ключевых идей мы нашли в кейсе Музея Плюшкина, они использовали предметы быта 20-го века, но внедрили яркие цвета, современные шрифты и приложения на старую технику, что дало ту самую метафору гармоничного сочетания старого и нового, которую мы так искали.

Мы переложили эту задумку на существующие блоки в формате заметок:

Вторую идею нам подсказал уже чат gpt, предложив сделать интерактивную фото галерею на сайте. Мы ухватились за описание и докрутили идею в нейросети Midjorney:

А вот что получилось на стыке идеи и реальных фото тыловиков со стелы Трудовой доблести:

Также мы решили полностью переработать палитру сайта, использовав более современные цветовые сочетания, а также найти вытянутые и утонченные шрифты.

Презентовав этот макет сначала внутри команды и агентства, а затем клиенту, нашему общему восторгу не было предела! Нам казалось, что мы наконец нашли то, что так идеально подходит и к фильмам, и к трендам в дизайне на “ностальгию”, к которой сейчас потихоньку склоняются многие международные бренды и компании.

Макеты были согласованы на встрече с небольшими корректировками и направлены уже далее в цех вёрстки.

Дело за малым - перенести дизайн из графического редактора Figma в конструктор сайтов Tilda, настроить анимации, наполнить сайт контентом и сгенерировать фотографии при помощи нейросети.

Об этом процессе стоит рассказать подробнее, так как он включает в себя нетривиальную последовательность шагов:

2) Большая часть панно имела реальное фото, с которого оно было нарисовано, но были и авторские изображения. Нам предоставили эти архивные фото, которые также мы применим в генерации.

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

Далее мы открывали поисковые системы и пытались найти фотографию современных работников, которые бы подходили по роду деятельности на персонажей панно. Чёрно-белое фото от нейросети из шага 3 смешивалось с фотографией современной из шага 4, чтобы мы получили цветные фото тех же тыловиков, но в окружении современных технологий и в современной одежде.

Таким образом мы подготовили не только 9 фотографий на каждое панно, но и дополнительно проработали некоторые архивные фото, которые отправились в блок интерактивной галереи на главной странице. Всего получилось порядка 14 фото, которые можно посмотреть на сайте.

Команда QWER.agency разработала сайт для проекта Burkalo company к выходу 9 фильмов, посвященных 80-летию Победы. У нас получилась яркая и информативная главная страница, а также отдельная страница с титрами проекта, где перечислены все участники съемки. Мы создали 9 отдельных страниц для каждого фильма, каждая из которых уже содержит уникальную историческую и архивную справку о подвиге и тыловиках, чьи истории рассказаны партнёрами фильмов. Позже на каждой из этих страниц будет опубликован сам фильм.

На момент написания данной статьи мы уже провели премьеру первого фильма “Подвиг железнодорожников”, который можно посмотреть на нашем сайте проекта https://тыловики.рф/.

Приятного просмотра!