747km — это туристический маршрут от Москвы до Санкт-Петербурга. Длина маршрута — 747 км и он занимает 36 дней. Все перемещения совершаются пешком, на велосипедах или на лодке. В маршрут входит посещение деревень и памятников архитектуры. Можно присоединиться к пути или покинуть его в одной из промежуточных остановок.
Проект разработали 12 студентов и 2 преподавателя МАРХИ — Кадлубинский Павел и Малышева Юлия. Спонсором выступила архитектурная компания «METHOD». На пути маршрута прорисованы проекты музеев нового формата, разработанные студентами: музей звука, музей здоровья, музей света и другие.
Нашей задачей стала разработка сайта проекта по образу готового путеводителя.
Сайт должен выполнять две задачи:
Служить презентацией проекта на международном архитектурном конкурсе Reimagining Museums for Climate Action. Это конкурс, который предлагает подумать о том, как новые подходы к дизайну, организации и опыту музеев могут усилить и ускорить действия по борьбе с изменением климата. Подробнее можно почитать на их сайте: https://www.museumsforclimateaction.org/
Служить путеводителем для людей, которые вышли на маршрут.
В работе над проектом как обычно ожидали сложности
Сжатые сроки Мы начали разработку 10 августа, а 10 сентября уже нужно было отправить готовый сайт на конкурс.
Текст в брошюре — на русском языке, а сайт должен быть на английском К началу работ по сайту перевод на английский язык не был готов. Мы собирали сайт с русским текстом и потом, по мере готовности, меняли его на английский.
Часть исходных материалов утеряна Мы заново перерисовывали графику в заданной стилистике. Отрисовали новые иконки, схемы, карты.
Структура сайта
Поскольку сайт должен служить как презентацией так и путеводителем, мы предложили решение, в котором главная страница рассказывает о проекте, а внутрениие страницы сайта — о маршруте.
36 дней пути разделены на 10 страниц. На каждой странице размещена информация о нескольких днях маршрута. Такое решение позволило нам уложиться в сроки сдачи проекта, а посетителю дало возможность использовать сайт в качестве путеводителя.
Шаблоны информационных блоков
Чтобы ускорить работу, для страниц дней маршрута мы разработали несколько универсальных шаблонов.
Обложка с картой и навигацией по объектам
Одна точка маршрута
Что посмотреть на маршруте
Знаковый объект на маршруте
Схема музея
Схема маршрута по дням
Точка маршрута и несколько фотографий
Описание музея
Описание точки маршрута
Сборка страниц сайта
Основной объем работы — вёрстка страниц дней маршрута. Страницы на 90% состояли из шаблонных блоков, в которых мы меняли содержание и 2−3 уникальных блоков, которые разрабатывались под конкретную страницу. Это позволило значительно ускорить сборку сайта.
Дополнительные работы, которые мы делаем перед запуском сайта
Создание сайта не исчёрпывается версткой дизайна. Помимо очевидных вещей, есть множество не сразу заметных, но важных работ. Они напрямую влияют на работоспособность сайта и то насколько комфортно на нём посетителю. Вот некоторые из них:
Настраиваем анимацию
Контент плавно и ненавязчиво появляется на экране.
Оптимизируем навигацию
Легко перейти в любую часть как всего сайта, так и отдельной страницы.
Адаптируем вёрстку
Сайтом удобно пользоваться со смартфона или планшета.
Подключаем домен
Купили домен 747km.ru и подключили его к сайту.
Добавляем страницу 404
Если посетитель ввёл некорректный адрес страницы, он легко вернётся на главную.
Настраиваем HTTPS
Передача данных идет по зашифрованному протоколу, такие сайты лучше индексируются поиском.
Заполняем seo-теги
Проставили теги H1, H2, H3. Прописали title и description. Это помогает поисковикам индексировать сайт.
Добавяем favicon
В поиске рядом с названием сайта отображается уменьшенная версия его логотипа.
Делаем бейджики страниц
Если пересылать адрес сайта в мессенджере или соцсетях, то помимо ссылки будет изображение.
Тестирование перед сдачей
По завершению основной работы были и правки. Их можно поделить на две категории:
1. Правки со стороны заказчика: поменять текст на отредактированный или добавить новый, изменить название музея, добавить подпись к фотографии и тп.
2. Недочёты с нашей стороны: удалить дублированный текст, заменить фотографию, исправить опечатку
Правки были сформулированы в очень удобном формате: ребята делали скриншот и прямо на нем рисовали, что нужно поправить. Это исключало уточняющие вопросы и позволило сделать всё довольно быстро.
В итоге мы уложились в сроки и клиент успел отправить сайт на архитектурный конкурс