Кейс по созданию сайта туристического клуба «Верста»

Санкт-Петербург:

Мобильный:

+7 (812) 603-25-04

+7 (950) 008-48-85

c 11 до 19

Портфолио

Кейс по созданию сайта туристического клуба «Верста»

Кратко о проекте

Клиент: Туристический клуб «Верста» ведёт свою деятельность с 2008 года. За это время компания наработала большой опыт в сфере организации интереснейших походов по всем уголкам России.

Задача: создание современного сайта «под ключ» с удобным функционалом для клиентов по подбору и бронированию походов.

Сайт: versta.club

Сроки: 25 рабочих дней

Стоимость: 74 000 руб.

Проектная группа

Дмитрий Егоров
технический директор
Елена Демакова
дизайнер сайтов
Илья Микшиев
интернет-маркетолог
Максим Морозов
верстальщик сайтов

Этап 1. Подготовительный этап. Техническое задание

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

«Мне, как техническому директору, необходимо было расложить по полочкам всю информацию и составить чёткое Технического Задание на проект. А в данном проекте предполагался большой объем работ по программированию необходимого функционала сайта.

Как у нас тут любят говорить: «Знать путь и пройти его - не одно и то же». Однако знать путь, то есть иметь перед собой чёткий план действий – это уже половина успеха создания сайта. Вторую половину мы оставляем на реализацию плана. А план был не простой :)

Выдержки из Технического Задания:

Прототипирование
  • Прототип главной страницы сайта;
  • Прототип страницы подбора маршрутов;
  • Прототип карточки маршрута.
Дизайн
  • Отрисовка главной страницы сайта;
  • Отрисовка 1 баннера;
  • Отрисовка карточки маршрута;
  • Отрисовка страницы формы заявки;
  • Отрисовка страницы фотогалереи (вид галереи для фотоотчета и подобных страниц);
  • Отрисовка страницы подбора похода;
  • Отрисовка страницы списка событий в табличном виде;
  • Отрисовка фавикона.
Верстка
  • Вёрстка главной страницы сайта;
  • Вёрстка карточки маршрута;
  • Вёрстка страницы формы заявки;
  • Вёрстка страницы фотогалереи (вид галереи для фотоотчета и подобных страниц);
  • Вёрстка страницы подбора похода;
  • Вёрстка страницы списка событий в табличном виде;
  • Установка стороннего сервиса для всплывающего окна чата с консультантом;
  • Установка в определённом месте сервиса от Яндекс Денег по приёму платежей.
Программирование

1. Каталог маршрутов в двух видах отображений:

  • Список маршрутов (наиболее приоритетный вид) – маршруты перечислены в крупных блоках с фотографиями и краткой информацией о маршруте. Так же в каждом блоке видны даты проведения маршрута (маршрут может быть проведен несколько раз в году). Аналоги: http://trektravel.com/trip-type/ride-camp/ или http://www.keadventure.com/trip/kemb/kerala-and-the-tropical-south/dates.html
  • Список событий (менее приоритетный вид) – список событий, сгруппированы по маршрутам и датам проведения. Отображение лучше сделать в таблице без фотографий и описаний аналогично http://club-perexod.ru/routes Отбор такой же, как в основном отображении по виду активности (вело, вода, пешком, …), по региону проведения, по датам проведения.

2. В Каталоге в боковой колонке нужна форма отбора. Подобный отбор можно увидеть в левой колонке:

  • http://www.keadventure.com/searchresults.html?activityId=003,004,005&destinationId=17

Отбор по:

  • Вид отдыха (вело, вода, пешком, …)
  • Регион проведения (Алтай, Урал, …)
  • Отправление не раньше (дата)
  • Возврат не позже (дата)
  • Бюджет (выбор 0-5,5-10,10-20,20-30,30-50,>50 тысяч рублей)

3. Важно для понимания структуры

  • Маршрут может проводиться несколько раз в году
  • Маршрут может принадлежать к нескольким типам.

4. Модули на главной:

  • Большой слайдер с картинками на главной странице. Ссылки произвольные (подразумеваются ссылки на маршруты)
  • “Подобрать поход”. Это тот же модуль отбора, что и в Каталоге, описанный выше. Либо немного сокращенный.
  • “Ближайшие походы”. Ссылки на ближайшие походы - 3-4 маршрута. В каждом блоке фото маршрута, “очень краткое” описание, даты проведения, цена. Походы для отображения выбираются вручную администратором.
  • “Лучшие походы” - модуль полностью аналогичен “ближайшие походы”, но администратор отбирает другие походы.
  • “Популярные направления” - список направлений (Алтай, Урал, …) со ссылками на каталог. Каталог сразу открывается с соответствующим направлению отбором. Направления отбирает администратор
  • “Популярные виды отдыха” (вело, вода, пешком, …) со ссылками на каталог. Каталог сразу открывается с соответствующим виду отдыха отбором. Виды отдыха отбирает администратор

5. Отправка заявки на участие из карточки маршрута

Карточка маршрута должна содержать:

1. На всех закладках (возможно в разных колонках):

  • Название маршрута
  • Направление (Урал, Алтай, …)
  • Иконки типов маршрута (Вело, Водный, …) Маршрут может принадлежать к нескольким типам.
  • Длительность (дней, строка)
  • Кнопка “Заказать”. Ведет на закладку “Сроки и цены” Для примера смотри http://www.keadventure.com/trip/bhmb/bhutan-thunder-dragon-ride.html
  • Ссылка на список снаряжения. (свободная ссылка, строка)
  • Ссылка на “Правила бронирования” (свободная ссылка, строка)
  • Ссылка на “Как оплатить” (свободная ссылка, строка)
  • Ссылка на “Страхование” (свободная ссылка, строка)
  • Цена. Со значком рубля (одна цена на любой срок)

2. Основная закладка

  • Титульная картинка маршрута (1 фото)
  • “Краткое описание” маршрута (“краткое описание”, “очень краткое” и “полное описание” - разные вещи) (текст HTML)
  • “Кратко в цифрах”. Протяженность, набор высоты и т.д. (свободный HTML)
  • Кнопка “Заказать”. Ведет на закладку “Сроки и цены” Для примера смотри
  • “Может так же вас заинтересует” - ссылки на несколько других маршрутов, близких по региону или типу.

3. Сроки и цены

1. Таблица со сроками:

  • Уникальный код маршрута (автоматически генерируемый ID. КодМаршрута.КодСрока. Например: 12345.54321)
  • Сроки (начало - конец). Один маршрут организуется несколько раз в год (спецификация Сроки)
  • Цена. Со значком рубля (всегда одна)
  • Кнопка “Заказать”

2. Дополнительная информация. Ниже таблицы со сроками (что включено, что не включено, проживание, питание и т.д.) (свободный HTML)

4. Закладка “Фотографии”

  • Фотографии к маршруту (множество фото)

5. Закладка “Описание”

  • “Полное описание” маршрута (“краткое описание”, “очень краткое” и “полное описание” - разные вещи) (текст HTML)

6. Закладка “Место встречи”

  • Как добраться до места сбора (текст HTML).

7. “Отзывы”

  • Комментарии ВК к каждому маршруту

Блок маршрута в списке маршрутов должен содержать

  1. Титульную картинку маршрута (1 фото)
  2. “Очень краткое” описание маршрута (“краткое описание”, “очень краткое” и “полное описание” - разные вещи) (текст)
  3. Типы маршрута. Только иконки. Маршрут может принадлежать к нескольким типам. (Свойство)
  4. Сроки. Здесь не подробный список сроков, а только месяцы (пример http://www.keadventure.com/searchresults.html?activityId=003,004,005&destinationId=04) Один маршрут организуется несколько раз в год (спецификация Сроки)
  5. Цена. Со значком рубля (число)

Форма Заявки

  1. Уникальный код маршрута - не выбираемый
  2. Маршрут - не выбираемый
  3. Сроки - не выбираемый
  4. Количество человек (выбор: 1,2,3,...,6)
  5. ФИО (строка)
  6. Возраст (строка)
  7. Пол (выбор)
  8. Город проживания (строка)
  9. Телефон (строка)
  10. E-mail (строка)
  11. Комментарий (текст не HTML)

Этап 2. Прототипирование страниц

«Хотя сегодня прототипирование уже плотно входит в перечень инструментов сайтостроения, некоторые до сих пор им пренебрегают. Да – возможно, без прототипа можно обойтись, если Вы используете готовый шаблон, либо в проекте «и так всё понятно». Но потом не удивляйтесь, если конечный результат не будет соответствовать Вашим ожиданиям.

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

  • увидеть модель будущего сайта;
  • понять расположение элементов на странице;
  • попробовать, как работают те или иные элементы (в случае интерактивной версии);
  • и своевременно, до начала основных работ по дизайну, вёрстке и программированию, выполнить работу над ошибками.»

Таким образом прототипирование позволяет снизить, практически до нуля, риски несоответствия полученного от задуманного. Ниже мы предлагаем Вашему вниманию прототипы основных страниц сайта versta.club:

Прототип главной страницы:

Прототип главной страницы

Прототип страницы с направлениями: Прототип страницы маршрута:
Прототип страницы с направлениями Прототип страницы маршрута

Этап 3. Дизайн

Есть такой древний постулат в медицине: «Не навреди!». Пожалуй, в современном дизайне сайта следует придерживаться тех же принципов. То есть, для начала, нужно хотя бы «не навредить» удобству восприятия информации пользователем, а, в идеале, помочь этому восприятию, расставив акценты должным образом.

Вот несколько слов о визуальном оформлении сайта versta.club от дизайнера проекта Елены Демаковой:

«В данном проекте мы подчеркнули современность и актуальность туризма. Сайт выполнен с применением элементов Flat Design, направления, которое выбирают передовые западные веб-дизайнеры и проектировщики интерфейсов.

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

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

Так же прорисованы удобные фильтры подбора маршрутов по множеству параметров. И в завершение были прорисованы иконки видов тура, чтоб подчеркнуть индивидуальность сайта и помочь посетителю сайта сориентироваться.»

Дизайн-макет главной страницы:

Прототип главной страницы

Дизайн-макет страницы с направлениями: Дизайн-макет страницы маршрута:
Прототип страницы с направлениями Прототип страницы с направлениями

Этап 4. Вёрстка и программирование

«После того как дизайн нарисован и утверждён Заказчиком, мы переходим к следующему этапу, а именно верстаем макет и проводим все работы по программированию, описанные в Техническом Задании.

Верстается проект на основе какой-либо системы управления. И мы, методом проб, ошибок и успешных кейсов, остановились на CMS Joomla. Почему именно Джумла? Отвечаем:

  • это бесплатная система управления сайтом с открытым кодом и широким функционалом – то есть Вам не надо ничего платить за пользование системой, плюс для неё написано множество дополнений и приложений, многие из которых, также находятся в открытом доступе;
  • она входит в тройку самых популярных CMS в мире – значит, Вы без труда найдёте разработчика, если вдруг Вашему сайту понадобится апгрейд или доработки.»

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

Этап 5. Домен и хостинг

Итак, после того как все работы по сайт произведены, Заказчик может протестировать сайт, попользоваться им и всё проверить. После чего происходит финальная оплата и сайт переносится с тестового на основной хостинг. Хостинг-провайдеров много. Мы, например, работаем с Beget.

Отправьте заявку через форму ниже

Представьтесь, пожалуйста:
введите имя
Ваш телефон для связи: *
введите телефон
Ваш e-mail:
Чем мы вам можем помочь? *





Выберите услуги





Выберите услуги
Сообщить больше информации
Приблизительный бюджет
от
Invalid Input
руб. до
Invalid Input
руб.
Адрес Вашего сайта(если есть):
Invalid Input
География:




Invalid Input
Какие сервисы интересуют:




Invalid Input
Ключевые направления Вашего бизнеса:
Invalid Input
Дополнительная информация:
Invalid Input
Убрать
Прикрепить файл (макс 20Мб)
Invalid Input

Заполняя форму и нажимая на кнопку «Отправить заявку», я даю согласие на обработку персональных данных

Вверх
Работаем с:
Загрузка...