Workspace Digital Awards 2025 — успейте номинировать кейсы по льготной цене до 1 декабря. Принять участие!
#Сайт под ключ

DEM AL

115 
Сибирикс
Сибирикс Россия, Москва
Поделиться:
DEM AL
Клиент

DEM AL

Сфера

Туризм и отдых

Регион

Казахстан, Алматы

Тип сайта

Корпоративный сайт

Сдано

Ноябрь 2022

Задача

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

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

Решение

Дизайн

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

Есть пакет таких иллюстраций, на текстовых страницах они подгружаются рандомно после каждой перезагрузки.

Каталог маршрутов

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

Детальная маршрута

На детальной странице маршрута есть карта пути и карта высот, которые строятся по точкам из GPS трека. Заказчик загружает в админке файл из трекера в формате gpx. В этом файле есть координаты x,y,z, по которым и строятся обе карты. Если вести курсор по одной карте, то его положение отображается на второй карте. Пользователь может скачать GPS трек с сайта и пройти по нему маршрут самостоятельно. Заказчик подготовил максимально полный экспертный контент с описанием маршрута, деталями его прохождения, ключевыми точками, рекомендациями по безопасности и т.д. Для демонстрации видов на маршруте на детальной странице есть галерея изображений.

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

Расскажем обо всём подробно и с картинками :)

1Дизайн

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

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

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

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

Мы были уверены, что заказчик скажет: «Красиво, но это не то, что я хотел». Но после демонстрации он ответил, что обе версии понравились, поэтому нужна пауза для размышлений. А спустя пару дней выбрал версию с иллюстрациями.

Мы отрисовали целый пак с разными иллюстрациями, которые на текстовых страницах меняются в случайном порядке.

2Каталог маршрутов

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

Особенность проекта в нетривиальном сочетании Битрикса и Laravel. Обычно на проектах мы реализуем админ-панель, главную страницу и каталоги на Битриксе, а всё остальное (списки, фильтры, детальные страницы, формы) — на Laravel. Здесь же мы сделали на Laravel и каталог, и фильтр.

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

Есть отдельная разбивка по направлениям — разным окрестностям Алматы. Направления можно задавать вручную в административной части и добавлять к ним вложенность до 4 уровней.

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

Еще одна фишка детальных страниц в подробных картах. Карт две, и они связаны между собой: одна — с проложенным маршрутом на Яндекс.Картах, вторая — с графиком высот.

3Расписание походов

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

Для этого мы предусмотрели на сайте раздел с расписанием — самым настоящим выбором дат, как в известных туристических сервисах. С ним путешественники смогут планировать свои приключения заранее. Если маршрут понравился, пользователь может сразу перейти в Telegram-чат по клику сверху, чтобы обсудить детали.

Результат

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

Не раз получала от разработчиков, тестировщиков и контент-менеджера комментарий: «Какая крутая идея, так интересно читать!».

Благодаря проекту Казахстан открылся для нас с новой стороны. Вдохновляйтесь красотами и собирайтесь в путешествие :)

https://demal.kz/

Стек технологий

  • JavaScript JavaScript Язык программирования
  • PHP PHP Язык программирования
  • TypeScript TypeScript Язык программирования
  • 1С-Битрикс 1С-Битрикс CMS
  • jQuery jQuery Фреймворк/библиотека
  • Laravel Laravel Фреймворк/библиотека
  • Vue.js Vue.js Фреймворк/библиотека
  • MySql MySql База данных
  • Docker Docker Среда разработки
  • Figma Figma Графический редактор

Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
оставить заявку

Хотите заказать похожий проект?

Сибирикс с удовольствием обсудит вашу задачу

Оставить заявку