О проекте:
Иркутская кинокомпания, которая снимает коммерческое короткометражное кино и рекламные ролики на высоком уровне. Новый проект - тыловики, это 9 короткометражных фильмов о подвигах тыловиков, которые расположены на стеле трудовой доблести в Иркутске. 9 фильмов будут выходить в течение года, начиная с 9 мая 2024 до 9 мая 2025 года.
Задача:
Разработать сайт, который рассказывал бы посетителям о иркутской стеле трудовой доблести, подвигах иркутских тыловиков и их вкладе в Победу в ВОВ. Также необходимо было разместить информацию о каждом из 9 фильмов и партнёров этих фильмов. Клиенту было важно передать атмосферу и задумку фильмов в визуальном оформлении и повествовании сайта, чтобы они дополняли друг друга, но при этом сайт не должен был быть слишком сложным и перегруженным, чтобы аудитория любого возраста могла в нём разобраться и изучить историческую справку и легко найти фильмы на сайте.
Всё начинается с концепции:
Для разработки сайта, посвященного стеле тыловиков, основной задачей было создание интерактивного и вовлекающего пользовательский опыта, который бы отражал основную концепцию фильмов – погружение в прошлое через контраст с современностью. Мы предложили использовать динамические элементы дизайна, чтобы создать ощущение перемещения во времени при просмотре сайта.
Первая наша идея предполагала постепенное изменение оформления сайта по мере прокрутки страницы, начиная с современного стиля в верхней части и постепенно переходя к черно-белым фотографиям и ретро-элементам, подобно тому, как изменяется сюжет в фильмах о тыловиках. Этот подход должен был подчеркнуть основную идею проекта и сделать онлайн-платформу частью атмосферы исторических событий.
В ходе анализа и разработки дизайна мы выделили и вторую идею. Она заключалась не в плавном погружении в историческое время, а в гармоничном сочетании старого и нового времени на каждом экране, дополняя и углубляя суть через образы и фото. Именно эта идея прижилась в итоге и была согласована для дальнейшей разработки.
Помимо гармонии времён в дизайне, мы предложили также использовать различные интерактивные элементы, чтобы углубить вовлеченность пользователей. Наше предложение включало создание блоков с аудио-комментариями от актеров, рассказывающих о съемках и ключевых моментах фильмов, а также возможность взаимодействия с содержанием через интерактивные сцены, такие как сцена со студентами в аудитории, где пользователи могли бы присутствовать на "лекции" актера и ключевой “фишкой” сайта мы выбрали работу с нейросетями, о которой расскажем подробнее дальше.
Первая наша идея предполагала постепенное изменение оформления сайта по мере прокрутки страницы, начиная с современного стиля в верхней части и постепенно переходя к черно-белым фотографиям и ретро-элементам, подобно тому, как изменяется сюжет в фильмах о тыловиках. Этот подход должен был подчеркнуть основную идею проекта и сделать онлайн-платформу частью атмосферы исторических событий.
В ходе анализа и разработки дизайна мы выделили и вторую идею. Она заключалась не в плавном погружении в историческое время, а в гармоничном сочетании старого и нового времени на каждом экране, дополняя и углубляя суть через образы и фото. Именно эта идея прижилась в итоге и была согласована для дальнейшей разработки.
Помимо гармонии времён в дизайне, мы предложили также использовать различные интерактивные элементы, чтобы углубить вовлеченность пользователей. Наше предложение включало создание блоков с аудио-комментариями от актеров, рассказывающих о съемках и ключевых моментах фильмов, а также возможность взаимодействия с содержанием через интерактивные сцены, такие как сцена со студентами в аудитории, где пользователи могли бы присутствовать на "лекции" актера и ключевой “фишкой” сайта мы выбрали работу с нейросетями, о которой расскажем подробнее дальше.
Чёрно-белое будущее. Мудборды и прототипы:
Выслушав идею от клиента, у нас сразу возник образ сайта, который бы состоял из коллажных черно-белых фото, которые бы дополнялись современной графиков и крупными графичными шрифтами. Вот такие референсы мы предложили в качестве опорных при разработке:
Кроме того, мы понимали, что сайт не стоит делать на шаблонных блоках конструктора, разместив там какие-то картинки и текст, необходимо полностью погрузить пользователя в атмосферу при помощи анимации на протяжении всего сайта. Мы отсмотрели множество проектов на made on tilda, которые были хорошо выполнены по части анимации, но в некоторых местах она была сильно крупной и был риск потерять нить повествования и отвлечь посетителей от текста и фильмов в погоне за красотой.
Мы приступили к отрисовке прототипов, буквально взяв в руки ручку и бумагу 🙂.
Было решено взять крупную анимацию для первого экрана, чтобы с первых секунд на сайте достичь эффекта “вау” и заинтересовать к дальнейшему изучению. А в дальнейших блоках использовать нативную и еле заметную анимацию, которая будет выгодно дополнять текст и фото, а не перебивать их.
Из-за сложности анимации и концепции в дизайне, нам было важно продумать все ключевые идеи и перемещения объектов по сайту именно на этапе черно-белого прототипа, расписать основные блоки и визуальную идею, которую мы вкладываем в каждый блок. Прототип в обязательном порядке согласовывался командой разработки и съемочной командой со стороны клиента.
Добавим красок. Дизайн макет:
По согласованному прототипу и референсам сайтов, мы приступили к самому сочному - разработке дизайн макета. Во всём процессе разработки это, пожалуй, самый трудозатратный, но и самый интересный и интригующий этап, который занял у нас большую часть от всего проекта.
Раунд 1
В самом начале стоит оговорить, что в процессе дизайна мы довольно сильно изменили стилистику, так что самая первая версия сайта довольно сильно отличается по атмосфере от итогового макета. Давайте посмотрим, с чего же всё началось:
Как видно, данной концепцией мы хотели передать атмосферу именно того времени, когда всё было написано от руки, использовали “советский красный” цвет и “маяковский жирный” шрифт заголовков. Преимущественно на блоках используются аналоговые предметы(карандаши, журналы, вырезки фото, пули и фото плёнка) и тёплый свет от ламп накаливания. Нам эта концепция показалась хорошей и подходящей к проекту об истории, мы смело отправились на её презентацию!
Однако, ожидания от дизайна у клиента не сошлись с нашей первой концепцией и мы получили честный отзыв: “это красиво, но не то”. Дизайн оказался СЛИШКОМ советским и историческим, а съемочная команда хотела рассказать молодому поколению историю в новом свете, используя современные образы и эффекты, которых не встрелось на сайте.
И в такие моменты самой важно задачей , которая стоит перед проджект-менеджером команды и перед самим дизайнером является раскопать всё, что только можно о текущем макете и ожиданиях от первого лица у клиента. Можно бесконечно рассказывать, что ваш макет красивый и функциональный, что людям он понравится, но когда ощущения от сайта разнятся с ощущениями от предстоящих фильмов, то никакие красивые шрифты и цвета не исправят этого расхождения и нашей команде вновь пришлось зарыться в глубины беханса и брейнить всем агентством, чтобы нагенерировать новые идеи и выдать “то самое”.
Однако, ожидания от дизайна у клиента не сошлись с нашей первой концепцией и мы получили честный отзыв: “это красиво, но не то”. Дизайн оказался СЛИШКОМ советским и историческим, а съемочная команда хотела рассказать молодому поколению историю в новом свете, используя современные образы и эффекты, которых не встрелось на сайте.
И в такие моменты самой важно задачей , которая стоит перед проджект-менеджером команды и перед самим дизайнером является раскопать всё, что только можно о текущем макете и ожиданиях от первого лица у клиента. Можно бесконечно рассказывать, что ваш макет красивый и функциональный, что людям он понравится, но когда ощущения от сайта разнятся с ощущениями от предстоящих фильмов, то никакие красивые шрифты и цвета не исправят этого расхождения и нашей команде вновь пришлось зарыться в глубины беханса и брейнить всем агентством, чтобы нагенерировать новые идеи и выдать “то самое”.
Раунд 2
После брейна на 2 часа мы отправились по наим любимым нейросетям за визуальными и текстовыми советами: чат GPT дал нам новые идеи для интерактива на сайт, а midjourney нарисовал нам Иркутск в стиле киберпанка, чтобы мы вдохновились и переняли что-то с этих концептов.
Одну из ключевых идей мы нашли в кейсе Музея Плюшкина, они предметы быта 20-го века, но внедрили яркие цвета, современные шрифты и приложения на старую технику, что дало ту самую метафору гармоничного сочетания старого и нового, которую мы так искали.
Одну из ключевых идей мы нашли в кейсе Музея Плюшкина, они предметы быта 20-го века, но внедрили яркие цвета, современные шрифты и приложения на старую технику, что дало ту самую метафору гармоничного сочетания старого и нового, которую мы так искали.
Мы переложили эту задумку на существующие блоки в формате заметок
Вторую идею нам подсказал уже чат gpt, предложив сделать интерактивную фото галерею на сайте. Мы ухватились за описание и докрутили идею в нейросети Midjorney:
А вот что получилось на стуке идеи и реальных фото тыловиков со стелы трудовой доблести:
Также мы решили полностью переработать палитру сайта, использовав более современные цветовые сочетания, а также найти вытянутые и утонченные шрифты.
Результат нашего раунда 2:
Презентовав этот макет сначала внутри команды и агентства, а затем клиенту, нашему общему восторгу не было предела! Нам казалось, что мы наконец нашли то, что так идеально подходит и к фильмам и к трендам в дизайне на “ностальгию”, к которой сейчас потихоньку склоняются многие международные бренды и компании. Макеты были согласованы на встрече с небольшими корректировками и направлены уже далее - в цех вёрстки.
Сборка по кирпичикам. Вёрстка сайта в Tilda.
Дело за малым - перенести дизайн из графического редактора Figma в конструктор сайтов Tilda, настроить анимации, наполнить сайт контентом и сгенерировать фотографии при помощи нейросети.
Об этом процессе стоит рассказать подробнее, так как он включает в себя нетривиальную последовательность шагов:
Об этом процессе стоит рассказать подробнее, так как он включает в себя нетривиальную последовательность шагов:
- Мы взяли изображения самих панно, которые выточены на стеле в городе, с сюжетами подвигов.
2) Большая часть панно имела реальное фото, с которого оно было нарисовано, но были и авторские изображения. Нам предоставили эти архивные фото, которые также мы применим в генерации.
3) Нельзя просто на основе панно и архивного фото получить современное фото, необходима прослойка с реалистичным изображением того времени и мы давали нейросети на вход панно и архивное фото и получали черно-белое, но несуществующее в реальности фото.
- Далее мы открывали поисковые системы и пытались найти фотографию современных работников, которые бы подходили по роду деятельности на персонажей панно.
- Чёрное-белое фото от нейросети из шага 3 смешивалось с фотографией современной из шага 4, чтобы мы получили фото тех же тыловиков, но в окружении современных технологий, в современной одежде и в фото должно было быть обязательно цветным.
Таким образом мы подготовили не только 9 фотографий на каждое панно, но и дополнительно проработали некоторые архивные фото, которые отправились в блок интерактивной галереи на главной странице. Всего получилось порядка 14 фото, которые можно посмотреть на сайте.
Подведём итоги
Команда QWER.agency разработала сайт для проекта Burkalo company к выходу 9 фильмов в честь 80-летия Победы. В итоге у нас получилась яркая и информативная главная страница, отдельно мы разработали страницу с титрами проекта, где перечислили всех участников съемки, а также 9 страниц под каждый фильм, каждая из которых уже содержит уникальную историческую и архивную справку о самом подвиге, а также о тыловиках, историю которых рассказали партнёры фильмов. Позже на каждую из этих страниц будет опубликован сам фильм.
На момент написания данной статьи мы уже провели премьеру первого фильма “Подвиг железнодорожников”, который можно посмотреть на нашем сайте проекта https://тыловики.рф/. Приятного просмотра!
