С Кипра с любовью: сделали архитектурный гид на трёх языках и со скромным бюджетом

Два города, пять маршрутов, 62 точки, три языка и удобная админка, над которой не надо ломать голову. Без хардкода не обошлось, но мы всё равно уложились в сроки и бюджет. Плюс собрали суперподробные гайды, чтобы заказчик мог сам пополнять сайт контентом в одном стиле.

Мы — агентство Курсор. Любим маму, HR-продукты и сложные B2B-проекты. Делаем крутые сайты и упаковываем визуальные коммуникации компаниям из разных сфер.

RZLT — диджитал-студия, которая разрабатывает дизайн среды, брендинг мероприятий и других архитектурно-пространственные штук. Существуют с 2012 года. Один из последних проектов — дизайн навигации в новом корпусе Третьяковской галереи.

RZLT задумали привлечь новых клиентов с помощью некоммерческого проекта Sphere Space — гида по нишевым архитектурным локациям двух кипрских городов: Лимассола и Ларнаки. А к нам ребята пришли за помощью с реализацией.

Целевая аудитория проекта — новые экспаты и те, кто давно уже живёт на Кипре, но хочет получше узнать свой город. Поэтому RZLT решили сделать гид сразу на трёх языках: русском, английском и греческом.

Брендинг у Sphere Space уже был. На тексты студия привлекла эксперта-историка. Нам оставалось органично собрать всё с помощью дизайна и запрограммировать гид.

Так как проект некоммерческий, бюджета было совсем чуть-чуть. Поэтому решили, что делаем не мобильное приложение, а mobile first-сайт. Десктоп тоже пилим, но скорее чтобы просто был.

Итого, мы разбили проект на такие задачи:

Сперва определились со структурой разводящей главной, страниц маршрутов и конкретных точек. А в процессе добавили страницу «События» с рекомендациями мероприятий от Sphere Space. Например, с анонсом Никосийского международного фестиваля или Ларнакской биеннале.

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

Когда мы снимали с клиента требования, тот сказал, что ему нравится «берлинщина» в дизайне. Мы вдохновились этим стилем и накидали мудборд с кислотными цветами и резкими контрастами.

А потом выяснилось, что мы с клиентом понимаем «берлинщину» совсем по-разному.

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

Второй вариант сделали поярче: чёрно-белые фотографии с контрастной обводкой на кислотном фоне и кругами из брендинга.

А в третьем максимально сохранили брендинг: использовали красный цвет и добавили побольше фирменной символики. Как раз этот вариант клиент и выбрал.

Изначально RZLT договорились всё с тем же экспертом-историком, что он подготовит фото каждой локации. Но его снимки совсем не подошли по качеству.

Тогда мы посоветовали RZLT нанять профессионального фотографа и написали для него тз, чтобы в этот раз получилось то что нужно.

Чтобы подружить между собой фото, мы накинули на них тёплый пресет в песочных оттенках. Получилось немного ретро, в духе солнечного Кипра и с отсылкой к брендингу Sphere Space с желтоватым цветокором.

Клиенту так зашло, что он даже попросил записать туториал по обработке в Lightroom.

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

А ещё использовали цветовое кодирование маршрутов, чтобы пользователям было легче ориентироваться.

Отрисовали карты обоих городов в векторе и отметили на них все точки маршрутов. Правда на этапе разработки от минималистичных карт пришлось отказаться в пользу интеграции с Google Maps.

Проект некоммерческий, поэтому бюджет был скромный. Чтобы его не раздувать, мы решили делать сайт на конструкторе. Из минусов — Webflow наложил свои ограничения.

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

Или другой пример: на главную страницу и в раздел «О команде» нужны были слайдеры. Встроенное решение Webflow недостаточно гибкое и кастомизируемое, поэтому мы использовали библиотеку Splide.

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

Редактировать блок с маршрутами на главной не придётся. Если появился новый — он автоматически падает и во все связанные блоки. Всё что нужно — просто заполнить соответствующие поля в CSM и загрузить изображения.

В конце собрали для клиента подробный гайд — и рассказали, как добавлять новые маршруты без нашей помощи.

Когда мы работали над проектом, мультиязычного плагина на Webflow ещё не было, поэтому мы решили задачу хардкодингом. Сделали три версии каждой страницы и настроили три разных CSM под каждый язык, а потом связали всё перекрёстными ссылками.

Фан фэкт: через пару месяцев после сдачи проекта Webflow дропнул кучу новых функций — включая мультиязычность. Вот такая вот подстава.

Сначала мы отрисовали красивые, но статичные карты. А потом решили, что в 21 веке ориентироваться по контурным картам — это как-то не очень. В итоге выбрали функциональность, а не эстетику.

Юзерфлоу такой: сначала пользователь открывает страницу точки и нажимает на виджет Google-карт. Оттуда он попадает в приложение навигатора, куда уже забиты все точки. А чтобы прочитать описание локации, возвращается на сайт гида.

Ещё была мысль стилизовать виджет Google-карт на сайте. Но Google берёт за такие модификации деньги, а бюджет и так поджимал. В итоге виджет остался в первозданном виде.

Полюбоваться на гид и опробовать его бесплатно можно на сайте Sphere Space.