БАМ-50: как мы разработали документальный портал к юбилею грандиозного строительства

Байкало-Амурская магистраль (БАМ) — масштабный и амбициозный проект, в строительстве которого приняли участие миллионы людей и сразу несколько поколений. Железнодорожное полотно протяженностью около 5000 километров, по большей части проложенное по территории вечной мерзлоты, соединяет Восточную Сибирь с Дальним Востоком.

Несмотря на масштаб проекта, до 2024 память о людях, которые строили БАМ, и историческое наследие проекта не были на слуху у широкой аудитории.

В прошлом году совместно с da.team мы разработали и реализовали документальный портал БАМ-50, который посвящен юбилею строительства Байкало-Амурской магистрали. Рассказываем об особенностях и ходе проекта.

Разработкой сайта мы занялись по просьбе дружественного агентства da.team, которое представляло интересы РЖД на этом проекте. В наши задачи входила полноценная реализация «БАМ-50», включая проектирование, UX/UI-дизайн, фронтенд- и бэкенд-разработку, разработку интеграций с VK Cloud Vision для создания архива БАМа и дальнейшее развитие проекта.

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

Da.team пришли к нам с готовыми референсами и дизайн-концептом решения. «БАМ-50» — исторический проект, поэтому его интерфейс должен отражать атмосферу того времени и создавать эффект погружения и сторителлинга.

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

Пользователь погружается в контекст уже на первом экране. Авангардный шрифт Pilotka и видеоматериалы намекают на документальный характер проекта и его связь с временами СССР.

На первом этапе мы разработали базовую версию сайта — лендинг с описанием проекта, новостями и формой для добавления историй и фотографий пользователей.

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

После разработали дизайн главной и запустили проект.

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

Было важно показать, что их биографии действительно интересны. Для этого мы разработали 10 сторилендингов с историями других БАМовцев. У каждого лендинга уникальные композиция и интерактивы.

Мы визуализировали истории с помощью фотографий и коллажей. Использовали архивные фото и видео, создавали интерактивные блоки с артефактами того времени.

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

Благодаря конструктору на верстку одной страницы дневника уходил всего один день.

Контент, который добавляют пользователи сайта — БАМовцы и их родственники, — публикуется в разделе Архив сайта БАМ-50.

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

Чтобы раздел стал настоящим Архивом, а не просто хранилищем для тысяч фотографий, нужно было научиться идентифицировать людей на фотографиях и связывать портреты с анкетами БАМовцев. Для этого мы провели интеграцию с VK Vision. Технология позволяет вести поиск по доступным фотографиям в базе VK, разбивать групповые фото на портреты, идентифицировать людей и объекты.

Когда фотография нового БАМовца попадает в админ-панель, контент-менеджер в специальной вкладке Vision обрабатывает ее: выделяет нужную область и готовит для нее описание.

После этого добавляет фотографию в базу. Теперь, когда в Архив попадет фото с этим же человеком, но от другого пользователя (например, на групповом снимке), инструменты VK Vision идентифицируют человека и «сообщат» об этом контент-менеджеру.

После обработки контент-менеджером, истории и фотографии публикуются в разделе Архив сайта БАМ.

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

Поделиться своей историей можно не только на сайте, но и в приложении БАМ в Vk Mini Apps — данные от пользователей приложения придут в ту же админ панель.

В рамках развития проекта мы создали раздел «БАМ сегодня», который посвящен тому, чем живет и как развивается магистраль в наши дни.

В разделе размещена интерактивная карта городов БАМ, где можно посмотреть новости в конкретном участке магистрали.

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

На всех разделах сайта, кроме интерактивного Дневника БАМа, мы использовали «пакетную» панель от Easy Admin, удобную в управлении контентом и позволяющую не усложнять функционал CMS.

Фронтенд сайта написан как Single Page Application (SPA): вместо того чтобы каждый раз загружать новую страницу из сервера, SPA использует технику AJAX (асинхронные запросы к серверу) для получения данных и обновления только необходимой ее части. SPA обеспечивает гладкую и быструю пользовательскую интеракцию, а также позволяет создавать более богатые взаимодействия и обеспечивает выполнение сложных задач с помощью клиентского JavaScript-кода.

За время жизни портала им воспользовались более 300 000 человек; больше 1500 анкет БАМовцев были загружены и опубликованы на ресурсе. Сейчас команда Далее также причастна к сохранению истории проекта и развитию портала: мы ведем контентную поддержку ресурса.

Больше о проектах мы рассказываем в телеграм-канале Далее. А еще там бывают новости, вакансии в ИТ и полезные материалы для разработчиков.

Наш сайт: dalee.ru